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    设置一个图片来组成边框