CSs3

CSS3的三部曲：设置字体，设置宽度和高度及盒模型，设置链接。其中，字体包括字体组，字体大小，行高，颜色。第二部包括宽度和高度及margin,padding,(margin:0 auto是实现居中)。链接文本样式包括link.hover,visitied,active 4种状态。实现的部分包括，字体，整体背景，页面宽度，链接样式。

前缀：-webkit---chrome and safari;

 -moz---firefox;

-ms---IE;

-o---opera;

一、CSS3的新增样式：

1、border-radius:圆角效果{实心上半圆：高度Height是宽度width的一半，设置左右上角与高度一致；实心圆：高度Height和宽度width的一样，设置四个角为他们的一半；}从左上开始，顺时针旋转开始。

2、box-shadow：盒子阴影{X偏量，Y偏量，阴影模糊值，阴影扩展半径，阴影颜色，投影方式（inset为内投影，只能写在第一个或者最后一个）}当偏移量为负值时，表示在相反位置。

3、text-shadow：文本阴影与盒子阴影相似。

4、border-image：边框颜色：{：URL（），round表示平铺/repeat表示重复/stretch表示拉伸}

5、border-color：边框颜色：低，顶，左，右

6、透明度{两种表示方法 1、rgba(255,255,255,0.2)表示白色的不透明度为0.2，rgba(0,0,0,0.2)表示黑色的不透明度为0.2。 2、opacity：0.2}

7、渐变色彩：{包括线性和径向：linear-gradient 、radial-gradient}

8、text-overfiow{溢出时省略标记，代码如下：（text-over:ellipsis/表示省略;overflow:hidden;white-space:nowrap;）clip表示中断；

 而word-wrap:normal表示连续/break-word表示中断。

9、@font-face表示侵入服务器端的字体文件。

10、resize自由缩放，none\both\horizontal\vertical\inherit继承。

二、CSS选择器

1、属性选择器：a/p/[div/class^="val"{...}属性值为“val”开头的任何字符串；

                            [            $="val"{..}属性值为"val"结尾的任何字符串；

                           [             *=“val”{...}属性值包括为“val"的任何字符串。

2、：root 根选择器  ：root=html;

3、 ：not否定选择器 ，除去选择的特定某元素之外。[]

4、 ：empty 空选择器

5、 ：target 目标选择器。#abc和id="abc"一致即可，和文本的书签差不多

    #abc:target{...}

6、 ：first-child,:last-child ,表示选择器元素中的第一个或者最后一个元素

      :nth-child(n),:nth-last-child(n)b表示关于倍数的符合条件的多个元素

      :first-of-type,:last-of-type表示定位父元素下某一类的子元素

      ：nth-of-type9(n),nth-last-of-type(n)表示关于倍数的符合条件的多个元素

   only-child表示父元素下只有一个元素且是唯一子元素的元素

  only-of-child表示父元素下的一类元素。

三、背景

1、background-origin:border-box\padding-box\content-box\norepeat

2、background-clip：border-box\padding-box\content-box\noclip

3、background-size：auto\长度值\百分比

4、mulitiple ground 多重背景，用逗号隔开。

5、设置背景：url() no-repeat left top 50%  40%

四、分栏布局

1、coulmns:200px 3 表示分三栏，每栏200px

2、column-count:3表示分3栏

3、column-gap:2em表示每列之间的间距是2em

4、column-rule:3px solid red 表示边框的大小，样式，颜色

5、column-span：all表示跨列设置。

五、表单中的选择器

：enable是可用输入域，disenable是不可用输入域（直接写在样式后面）

：checked选中状态，

：：selection匹配突出显示的文本（鼠标选中时发生的变化，color：red  background:blue表示字体为红色，背景是蓝色。）

：：before,：：after表示给元素插入前面或后面，常常和content匹配

:readonly表示只读。