关于CSS3的一些基础知识:
一. UI元素状态选择器:
1. E:checked(被选中状态) 当鼠标在浏览器中点中某项时,则触 发某一个li的值
2. E:enabled(可用状态) 用于输入文本的控件
3. E:selection(被选中时的状态) 程序运行后,在浏览器中,用鼠标选中某一东西时所触发的状 态(这个状态可用设置背景色background-color,color字体的颜色)
4. E:not(s)(否定伪类) 匹配所有不为s选择符的E元素
5. E:target(目标伪类选择器) 匹配相应的地址区域
6. E~F(兄弟元素) 选择同级内的E元素后面的所有F元素
7. E+F(相邻元素) 从上往下找,与E元素相邻的F元素,若一个E元素后面紧挨着一个元素F,则这个F元素被选中.若有一些E元素后面都紧挨着一个F元素,则这些F元素都被选中
二. 伪类选择器:
伪类选择器:(括号后面都为任意数字n,这里我实例化,便于理解)
1. E:nth-child(2) 匹配父元素中的第2个为E的元素
解释:若元素E的父元素的第2个元素不为E元素,则无选中元素
2. E:nth-last-child(2) 匹配父元素中的倒数第2个为E的元素
解释:若元素E的父元素的倒数第二个元素不为E元素,则无选中元素
3. E:nth-of-type(2) 匹配父元素中同级的第2个E元素
解释:匹配同类元素且是同级的第2个E元素,只找E元素,不是E的则跳过,直到找到第2个同级的E元素才能被选中
4. E:nth-last-of-type(2) 匹配父元素中同级的倒数第2个元素
解释:匹配同类元素且是同级的倒数第2个E元素,只找E元素,不是E的则跳过,直到找到倒数第2个同级的E元素才能被选中
5. E:last-child 匹配父元素中同级的最后一个E元素
解释:若父元素中最后的一个元素不为E元素,则无选中元素
6. E:first-of-type 匹配父元素中同级的第一个E元素
解释:如父元素中的第一个元素元素不为E,而第二个元素为E,则选中第二个
7. E:only-child 匹配父元素中唯一的一个E元素
解释:其父元素只能有一个子元素,并且这个子元素只能为E元素才能被选中
8. E:only-of-type 匹配同类中只有唯一的一个元素E,则被选中
解释:其父元素可以有多个元素,但E元素只能有唯一的一个才能被选中,若E元素有多个,则不会选中任何元素
9. E:empty 匹配没有任何子元素的元素E
解释: 选中无任何子元素的E元素(只有换行或空格的元素不是空元素,因为换行或空格都算一个文本元素)
三. 文本样式的设置:
文本的效果:
1. 文本阴影 text-shadow:10px 20px 30px red;
10px 代表水平方向的阴影值
20px 代表垂直方向的阴影值
30px 代表阴影的模糊值
red 代表阴影的颜色
2. 文本溢出: text-overflow有如下的两个属性值:
clip: 代表文本溢出对象框时,不显示省略符,为啥溢出部分直接溢出
ellipsis: 代表文本溢出对象框时,溢出部分显示三个省略符
white-space: nowrap 文本在一行中显示,不换行
text-overflow要与white-space,overlfow:hidded同时使用,才能在文本溢出框框时,溢出部分只显示三个省略符
3. 连续文本换行 word-wrap: 有如下两个属性值
normal 设置连续的文本(没有空格的)在对象框内不换行
break-word 设置连续的文本(没有空格的)在对象框内自动换行
word-wrap 一般用在英文字母中,因为每一个汉字都会有断行(空格)
4. outline: 10px solid red; 设置文本外边线其对元素的实际尺寸无影响,跟borderd的视觉效果一样,但border对元素宽度有影响)
10px 代表外边线的宽度
solid 代表外边线的样式
red 代表外边线的颜色
四. 背景样式的设置:
背景的定位,裁剪,线性
1. background-origin 设置从哪个位置开始显示图片,有如下三个值:
border-box: 从边框外层开始显示图片
borer-padding: 从边框的内边距的外层开始显示图片
border-content: 从边框的内容图片区域开始显示
2. background-clip: 设置从哪个位置开始裁剪图片,有如下的三个值:
border-box: 从边框外层裁剪图片
padding-box: 从内边距的外层裁剪图片
content-box: 从内容区域裁剪图片
3. background-size: 设置图片的大小,实现图片填充整个区域
4. multiple background: 设置多层的背景图片(这里为3张图片,故为三层,后面的数字为absolute 的top和left的值)
url("图片1的路径") noreppeat scroll 10px 10px;
url("图片2的路径") norepeat scroll 20px 20px;
url("图片3的路径") norepeat scroll 30px 30px;
五. 字符串的匹配:
CSS3的字符串匹配选择器:
1. E:[att^=value] 匹配元素E的att属性的属性值首个为value的E元素
例: p:[class^="a"]
代表选中class属性的属性值的首个为"a"的元素p(如class="abc"的首个为"a")
2.E:[att$=value] 匹配元素的att属性的属性值的最后一位为value的E元素
例: p:[class$="c"]
代表选中class属性的属性值的首个为"c"的元素p(例如class="abc"尾位为"c")
3. E:[att*=value] 匹配元素的att属性的属性值包含value的E元素
例: p:[classs="abc"]
代表选中class属性的属性值包含有"abc"的E元素
4. E:[att=value] 匹配元素的att属性的属性值等于value的E元素
例: p:[class="abc"]
代表选中class属性的属性值等于"abc"的E元素
六. 边框的样式:
.div{ background-color:rgba(0,0,0,.5);} 设置背景的透明度
CSS3 边框样式的设置:
1. 边框阴影: box-shdow 10px 20px 30px 40px red inset
1opx: 代表水平方向的阴影值
20px: 代表垂直方向的阴影值
30p: 代表阴影的模糊值
40px: 代表阴影的模糊延长值
red: 代表阴影的颜色
inset: 代表内部阴影
2. 圆角边框: border-radius:10px 代表边框的上右下左这四个角的圆角半径为10px
border-radius:10px 20px 代表上左和下右的圆角半径为10px,上右下左的为20px
border-radius:10px 20px 30px 代表上左为10px,下右为30px,上右下左的为20px
3. 图片边框: border-image 设置一个图片来组成边框