CSS3属性——(一)
在CSS中追加了三个属性选择器:[att*=val]、[att^=val]、[att$=val]
[att*=val]属性选择器
如果元素用att表示的属性的值中包含用val指定的字符,那么该元素使用这个样式。
[att^=val]属性选择器
如果用att表示的属性值的开头字符为用val指定的字符的话,那么该元素使用这个值
[att$=val]属性选择器
如果元素用att表示的属性的属性值的结尾字符为用val指定的字符,那么该元素使用这个样式。
伪类选择器以及伪元素:
1.类选择器
在CSS中可以使用类选择器把相同的元素定义成不同的样式。
p.left{text-align:left}
p.rigth{text-align:right}
2.伪类选择器
类选择器和伪类选择器的区别在于,类选择器我们可以随意起名,而伪类选择器是CSS中已经定义好的选择器,不可以随意起名。
最常见的伪类选择器
a:link{color:#ff6600}/*未被访问的链接*/
a:visited{color:#ff6600}/*已被访问的链接*/
a:hover{color:#ff6600}/*鼠标指针移动到链接上*/
a:active{color:#ff6600}/*正被点击的链接*/
3.伪元素选择器
伪元素选择器,针对于CSS中已经定义好的伪元素使用的选择器。
使用方法:
选择器:伪元素{属性:值}
与类配合使用
选择器.类名:伪元素{属性:值}
4.在CSS中,主要有四个伪元素选择器
1)first-line伪元素选择器:用于向某个元素中的第一行文字使用样式
2)first-letter伪元素选择器:用于向某个元素中的文字的首字母(欧美文字)或第一个字(中文或者是日文等汉字)使用样式。
3)before伪元素选择器:用于在某个元素之前插入一些内容
4)after伪元素选择器:用于在某个元素后插入内容
5.结构性伪类选择器root、not、empty和target
1)root选择器:将样式绑定到页面的根元素中
2)not选择器:想对某个结构元素使用样式,但是想排除这个结构元素下面的子结构元素,让它不使用这个样式时,我们就可以使用not选择器
3)empty选择器:指定当元素中内容为空白时使用的样式
4)target选择器:对页面中某个target元素指定样式,该样式只在用户点击了页面中的超链接,并且跳转到target元素后起作用。
6.选择器first-child、last-child、nth-child和nth-last-child
1)first-child选择器:单独指定第一个子元素的样式
2)last-child选择器:单独指定最后一个子元素的样式
3)nth-child选择器:
nth-child(n)选择器匹配正数下来第N个子元素
nth-child(odd)选择器匹配正数下来第奇数个子元素
nth-child(even)选择器匹配正数下来第偶数个子元素
4)nth-last-child选择器:
nth-child(n)选择器匹配倒数数下来第N个子元素
nth-child(odd)选择器匹配倒数数下来第奇数个子元素
nth-child(even)选择器匹配倒数数下来第偶数个子元素
7.选择器net-of-type和nth-of-type
在CSS中用来避免子元素有不同类型,用的时候只针对同类型的子元素进行计算
8.循环使用样式
nth-child(An+B)A表示每次循环中包括几种样式,B表示指定的样式在循环中所处的位置
9.only-child选择器
只对含有唯一一个子元素的部分起作用,当有大于一个子元素的部分不能起作用
使用选择器在页面中插入内容:
1.使用选择器插入内容
在CSS2中使用before选择器在元素前面插入内容,使用after在元素后面插入内容,在选择器content属性中定义要插入的内容,还可以给他定义样式,进行美化颜色背景字体样式等。
适用方法:
<style type="text/css">
h2:before{
content:"Title(希望插入的内容)";
}
</style>
2.插入图片文件
使用before或者after除了可以在元素前后插入文字之外还可以插入图片。在插入图片是需要使用URL指定的图片路径。
使用方法:
<style type="text/css">
h2:before{
content:url(1.gif);
}
</style>
3.插入项目编号
1)在多个标题前加上连续编号:在content属性中使用counter属性来对多个项目追加连续的编号。
使用方法:
元素:before{
content:counter(计数器);
}
适用计数器来计算编号,计数器可以任意命名。
除了使用计数器,还需要在元素的样式中追加对元素的(counter-increment)属性的指定为content属性值中所指定的计数器名称。
元素{
counter-increment:content属性值中所指定的计数器名称
}
2)在项目编号中追加文字
h1:before{
content:"第"counter(content属性值中所指定的计数器名称)"章"
}
变成另一种效果!“第一章、第二章...”
3)指定编号的样式
比如给他在编号后面带一个“.”文字,并且设置编号的颜色为绿色,字体大小42像素。
h1:before{
content:counter(content属性值中指定的计数器名称)‘.’;
color:green;
font-size:42px;
}
变成另一种效果!“1./2./...”
4)指定编号的种类
before和after不仅可以追加数字编号,号可以追加字母编号或者罗马数字编号。
content:counter(计数器名,编号种类)
可以使用list-style-type属性的值来指定编号的种类。比如指定大写字母编号时,使用“upper-alpha”属性,指定大写罗马字母时使用“upper-roman”属性。
h1:before{
content:counter(计数器名,编号种类)'.';
color:green;
font-size:42px;
}
5)编号嵌套、重置编号
我们可以在大编号中嵌套中编号,在中编号中又嵌入小编号!
1)大编号中嵌入中编号
2)counter-reset属性重置编号
6)中编号中嵌入大编号
h2:before{
content:counter(大编号的计数器)'-'counter(中编号的计数器)
}
7)在字符串两边嵌套文字符号
可以使用content属性的open-quote属性值与close-quote属性值在字符串两边添加诸如单引号、双引号之类的文字字符。
open-quote开始符号
close-quote结尾字符
quote字符类型(使用双引号("")的时候需要使用转义字符“\”)
使用方法:
<style>
h1:before{
content:open-quote;
}
h1:after{
content:open-quote;
}
h1{
quote:"(" ")";
}
</style>
文字阴影与自动换行
1.text-shadow属性的使用方法
在CSS3我们可以使用text-shadow属性给页面上的文字添加阴影效果。
1)text-shadow的使用方法:
text-shadow:length length length color
第一个length表示的是阴影离开文字的横方向距离;
第二个length表示的是阴影离开文字的纵方向距离;
第三个length表示的是阴影模糊半径;
color表示的是阴影的颜色。
2)位移距离:text- shadow所使用的参数中,前两个参数是阴影离开文字的横方向和纵方向的位移距离,使用的时候必须指定这两个参数
3)阴影的模糊半径:text-shadow属性的第三个参数就是阴影模糊半径,代表阴影向外模糊时的模糊范围。
4)阴影的颜色:color可以放在三个参数之前,也可以之后。没有指定颜色时,会使用文字color的颜色值
5)指定多个阴影:我们可以使用text-shadow属性来给文字指定多个阴影,并且针对每个阴影使用不同的颜色。指定多个阴影的时候使用逗号将多个阴影进行分割。
2.word-break浏览器自动换行
指定自动换行的处理方法,在CSS3中可以使用word-break属性来设置自动换行的处理方法。
normal:使用浏览器默认的规则
keep-all:智能在半角空格或者连字符处理换行
break-all:允许在单词内换行
用法示例:
<style>
div {
word-break:keep-all
}
</style>
3.长单词与URL地址自动换行
在CSS3中,使用word-wrap属性来实现长单词和URL的自动换行
使用方法:
div {
word-wrap:break-word;
}
word-wrap属性的属性值有两个
第一个:normal 浏览器保持默认处理方式,只在半角空格或者是连字符的地方换行
第二个:break-word 浏览器可以在长单词或URL地址内部进行换行。
服务器端字体和@font-face属性
1.在页面上显示服务器端的字体
在CSS3中可以使用@font-face属性来利用服务器端字体
@font-face属性的使用方法:
@font-face{
font-family:webFont;
src:url('font/字体名称.otf')format("opentype");
}
font-family属性值中使用webfont来声明字体文件的格式,可以省略文件格式的声明,单独使用src属性值。可以使用的字体文件格式:otf/ttf/eot
2.定义斜体或粗体字体
在定义字体的时候,可以把字体定义成斜体或者粗体,在使用服务器端字体的时候,需要根据斜体还是粗体,使用不同的文字。
3.显示客户端本地的字体
@font- face除了可以显示服务器端的字体还可以显示本地字体。
首先将font-family设置为本地的字体名,然后将src属性设置为local(‘字体’)
用法示例:
@font-face{
font-family:Arial;
src:local('Arial');
}
4.属性值的指定
1)font-family:设置文本的字体名称
2)font-style:设置文本样式
取值:normal不使用斜体/italic使用斜体/oblique使用倾斜体inherit从父元素继承
3)font-variant:设置文本是否大小写
取值:normal使用浏览器默认值/small-caps使用小型大写字母/inherit从父元素继承
4)font-weight:设置文本的粗细
取值:normal/bold/bolder/lighter
100-900从细字体到粗字体,值必须是100的倍数,其中400等于normal,700等同于bold
5)font-stretch:设置文本是否横向拉伸变形。
取值:normal:正常文字宽度
wider:把伸展比例设置为更进一步的收缩值
narrower:把收缩比例设置为更进一步的收缩值
ultra-condensed:比正常文字宽度窄4个基数
extra-condensed:比正常文字宽度窄3个基数
condensed:比正常文字宽度窄2个基数
semi-condensed:比正常文字宽度窄1个基数
semi-expanded:比正常文字宽度宽1个基数
6)font-size:设置文本字体大小
7)src:设置自定义字体的相对路径或者绝对路径,注意:此属性只能在@font-face规则里使用
转载于:https://www.cnblogs.com/YamLilac-1101/p/10461570.html
CSS3属性——(一)相关推荐
- css3学习 之 css选择器(css3 属性选择器)
这是上一篇css选择器介绍里面内容比较详细..大家可以看看 下面我将结合<HTML 5与css 3权威指南>这本书 对css选择器再进行记录下 里面有些个人见解如果看客觉得有问题.可以提出 ...
- html+not选择器,CSS3属性选择器与(:not)选择器_html/css_WEB-ITnose
一:css3属性选择器: img[alt]{ border:2px dashed #000;} 这个选择器会匹配页面标签中任何一个含有alt属性的图片标签. 还可以通过设定属性值来缩小匹配范围:如下代 ...
- CSS基础(part19)--CSS3属性选择器
学习笔记,仅供参考,有错必究 参考自:pink老师教案 CSS3属性选择器 属性选择器列表: 选择符 简介 E[att] 选择具有att属性的E元素 E[att="val"] 选择 ...
- css3属性选择器总结
css3属性选择器总结 (1)E[attr]只使用属性名,但没有确定任何属性值 <p miaov="a1">111111</p> <p miaov=& ...
- CSS3属性box-shadow使用教程
CSS3的box-shadow属性可以让我们轻松实现图层阴影效果.我们来实战详解一下这个属性. 1. box-shadow属性的浏览器兼容性 先来看一个这个属性的浏览器兼容性: Opera: 不知道是 ...
- JS判断浏览器是否支持某一个CSS3属性
1.引子 css3的出现让浏览器的表现更加的丰富多彩,表现冲击最大的就是动画了,在日常书写动画的时候,很有必要去事先判断浏览器是否支持,尤其是在写CSS3动画库的时候.比如transition的ani ...
- CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate)
在CSS3中,可以利用transform功能来实现文字或图像的旋转.缩放.倾斜.移动这四种类型的变形处理,本文将对此做详细介绍. 一.旋转 rotate 用法:transform: rotate(45 ...
- 处理兼容问题:对于某些css3属性需要加前缀?
移动端 如果只写移动端的话就加-webkit-前缀和css3属性就可以 pc端 -webkit-border-radius:50%; //谷歌-moz-border-radius:50%; //火狐- ...
- CSS3属性calc函数(CSS3)
CSS3属性calc函数(CSS3) <!DOCTYPE html> <html lang="en"><head><meta charse ...
- CSS3属性选择器(CSS3)
CSS3属性选择器(CSS3) <!DOCTYPE html> <html lang="en"><head><meta charset=& ...
最新文章
- openStack controller 管理网口TX数据量非常大 网络总是丢包
- WP8.1学习系列(第一章)——添加应用栏
- leetcode 279. 完全平方数 bfs广度优先解法 图解 动态规划解法 c代码
- kaggle的discussion区都是些什么鬼?
- opera9.6 的一个顽固的bug
- testng接口自动化测试_Java+Maven+TestNG接口(API)自动化测试教程(10) 使用 Jenkins 构建自动化测试持续集成...
- Linux shell sed awk
- 网易云音乐电脑版怎么下载电台节目 主播电台节目下载教程
- java调用javascript函数_使用Java程序中的参数调用Javascript函数
- (11)VHDL例化system Verilog
- python的xlwt库的作用_Python:使用第三方库xlwt来写Excel
- 第二届字节跳动夏令营启动全球报名,图灵奖得主授课
- cimco edit v5_iA Writer for Mac(写作软件)v5.6.3
- 微信开发者工具安装教程
- ubuntu18.04+语音识别
- iOS测试包安装途径实践
- 常见bat命令(二)
- [Oracle- MySQL] Oracle通过dblink连接MySQL
- 高精度18位 5 MSPS 低功耗数据采集信号链_电工基础电路图讲解
- latex自动编译 (ubuntu/win)