CSS层叠样式学习总结

1、-css3 总结01前缀 chrome: -webkit- safari: -webkit- firefo*: -moz- ie: -ms- opera: -o-书写的时候应该先用有前缀的样式，再用无前缀的样式颜色 rgb(red, green, blue); rgba(red, green, blue, opacity0-1); hsl(色度， 饱和度， 亮度)；色度为色轮的度数，0/360d代表红色，120代表绿色，240代表蓝色；饱和度百分比值，100%表示完全显示该颜色；亮度百分比值，0%代表黑色，100%代表白色，50%平均值圆角border-radius: 20p*;/水平，垂直b

2、order-radius: 20p*，20p*;/左上，右上，右下，左下border-radius: 20p*，20p* 20p* 20p*;下拉阴影/水平；垂直；模糊直径；颜色bo*-shadow: 10p* 5p* 15p* *000;/阴影bo*-shadow: 10p* 5p* 15p* *000 inset;/水平；垂直；模糊直径；延展距离;颜色bo*-shadow: 10p* 5p* 15p* 15p* *000;/多阴影bo*-shadow: 0 1p* 1p* *fff inset, 5p* 5p* 10p* *000;chromw:-webkit-;safari:-webki

3、t-;ie=9文本阴影/水平;垂直;颜色te*t-shandow: 1p* 1p* *fff;/水平;垂直;模糊直径;颜色te*t-shandow: 1p* 1p* .3em *fff;渐变默认下渐变是垂直方向的；也可以传递一个位置参数来改变方向linear-gradient(*ccc, *ddd, white);/设定一个倾斜度linear-gradient(-45deg, *ccc, *fff);/水平渐变linear-gradient(left, *ccc, *fff);/设置颜色停顿值linear-gradient(white, *ddd 20%, black);选择器/选中的第一个元

4、素:first-child/选中的最后一个元素:last-child/选中的元素是其父元素的唯一子元素:only-child/选中当前URL的哈希中的目标元素:target/选中复选框以被勾选的元素:checked nth-child选择器nth-child(n);nth-child(even);/nth-child(2n);nth-child(odd);/nth-child(2n+1); 直接后代选择器 否认选择器:not(.current)ie=9过渡transition: 持续时间， 属性， 动画类型;/多个动画transition: 2s opacity, .5s height eas

5、e-in;定时函数种类 linear ease-in ease-out ease-in-out例子div background: pink; width: 50p*; height: 50p*; -moz-transition: 2s width ease-in, 2s height ease-out; /* Firefo* 4 */ -webkit-transition: 2s width ease-in, 2s height ease-out; /* Safari and Chrome */ -o-transition: 2s width ease-in, 2s height ease-o

6、ut; /* Opera */ transition: 2s width ease-in, 2s height ease-out;div:hover width: 100p*; height: 150p*;div position: absolute; left: 10p*; -moz-transition: 2s left -webkit-transition: 2s left; -o-transition: 2s left ; transition:2s left; div:hover position: absolute; left: 100p*; firefo*:-moz-;chrom

7、e:-webkit-; safari: -webkit-; ie=10; opear: -o-;css3 总结03bo*-fle*: 设置或检索弹性盒模型对象的子元素如何分配其剩余空间。abc*bo*display:bo*;width:240p*;height:100p*;margin:0;padding:10p*;list-style:none;*bo* li:nth-child(1)bo*-fle*:1;*bo* li:nth-child(2)bo*-fle*:1;*bo* li:nth-child(3)bo*-fle*:2;注意bo*-fle*只是动态分配父元素的剩余空间，而不是整个父元

8、素的空间。如上例，父元素*bo*的宽度为240p*，如果你认为a,b,c的宽度分别为60, 60, 120则就错了，因为bo*-fle*只是分配父元素的剩余空间而已，所以a,b,c所分到的应该是除容外所剩余下来的宽度bo*-fle*-group: 设置或检索弹性盒模型对象的子元素的所属组。bo*-ordinal-group: 设置或检索弹性盒模型对象的子元素的显示顺序。bo*-direction: 设置或检索弹性盒模型对象的子元素的排列顺序是否反转。bo*-lines: 设置或检索弹性盒模型对象的子元素是否可以换行显示。.hbo* display: -webkit-bo*; -webkit-b

9、o*-orient: horizontal; -webkit-bo*-align: stretch; -webkit-bo*-pack: start; display: -moz-bo*; -moz-bo*-orient: horizontal; -moz-bo*-align: stretch; -moz-bo*-pack: start; .vbo* display: -webkit-bo*; -webkit-bo*-orient: vertical; -webkit-bo*-align: stretch; display: -moz-bo*; -moz-bo*-orient: vertica

10、l; -moz-bo*-align: stretch; 上面将display设置为-webkit-bo*或-moz-bo*-，然后设置子元素布局的方向。默认情况下，所有子元素都将自动扩大为父元素一样的大小。但通过设置bo*-fle*属性却可以修改默认行为*sidebar -webkit-bo*-fle*: 0; -moz-bo*-fle*: 0; bo*-fle*: 0;width: 200p*;*content -webkit-bo*-fle*: 1; -moz-bo*-fle*: 1; bo*-fle*：1；如果设置bo*-fle*为0，就指定了该元素不允许扩大；相反设置1或更大的数值该元

11、素会自动扩大可利用的容空间。上面对侧边栏设置fle*为0；而主容区设置fle*为1字体font-face font-family: Bitstream src: url(/Bitstream.ttf);*font-e*ample font-family: Bitstream;css实例-文字/字体使用自定义字体： 在CSS2中font-family属性只能使用两个字体： 通用字体：Serif字体，Sans-serif字体，Monospace字体，Cursive字体,Fantasy字体; 特定字体：如Times,Courier等，要求计算机已经安装该字体；使用font-face：1234567f

12、ont-facefont-family:e*ample;src:url(e*ample.ttf) , url(e*ample.eot);/*IE9+*/divfont-family:e*ample;文本缩进和首字符下沉： 缩进：te*t-indent; 首字符设置： :first-letter;文本被选中：123:selection/老版本的firefo*:-moz-selection调整文字，字符间距： demo: word-spacing：空格距离； letter-spacing：子间距离； line-heigh：文本行间距； white-space：空格，换行符的控制； 强制换行：wor

13、d-wrap: break-word;word-break: normal;文字阴影/框阴影： te*t-shadow： h-shadow(必须) v-shadow(必须) blur color; 文字毛玻璃效果： bo*-shadow:h-shadow(必须) v-shadow(必须) blur spread color inset;文本溢出处理： demo: overflow：主要在对高度的处理，如果宽度不够，默认会换行； te*t-overflow：主要对宽度的处理，在设置white-space: nowrap; 阻止换行之后可以设置默认clip或省略ellipsis;高级文字设置： 金

14、属质感文字 linear-gradient:(direction, color-stop1, color-stop2, .);隐藏文本： 使用display; 使用opacity; 使用te*t-indent;1234h1te*t-indent:-9999p*. 使用定位；12345h1position:absolute;top:-9999p*;left:-9999p*;文字旋转：123-ms-transform: rotate(30deg);/* IE 9 */-webkit-transform: rotate(30deg);/* Chrome, Safari, Opera */transf

15、orm: rotate(30deg);构造性伪类E:root匹配文档的根元素。在HTML标准通用标记语言下的一个应用中，根元素永远是HTML构造性伪类E:nth-child(n)匹配父元素中的第n个子元素E构造性伪类E:nth-last-child(n)匹配父元素中的倒数第n个构造子元素E构造性伪类E:nth-of-type(n)匹配同类型中的第n个同级兄弟元素E构造性伪类E:nth-last-of-type(n)匹配同类型中的倒数第n个同级兄弟元素E构造性伪类E:last-child匹配父元素中最后一个E元素构造性伪类E:first-of-type匹配同级兄弟元素中的第一个E元素构造性伪类E

16、:only-child匹配属于父元素中唯一子元素的E构造性伪类E:only-of-type匹配属于同类型中唯一兄弟元素的E构造性伪类E:empty匹配没有任何子元素包括te*t节点的元素E一、E:root，匹配文档的根元素二、E:nth-child(n),匹配父元素的第n个孩子元素Enth-child选择的是父元素的子元素，其中要满足两个条件：没有规定确切的类型，只要是子元素；该元素要在第n的位置。只需要看在父元素下的第n个孩子是否是E，如果是则就匹配否则就不匹配。 p:nth-child(2):选择的是父元素的第二个P类型的孩子节点，p:nth-of-type(2)：选择的是父元素的所有孩子

17、节点的P类型的第二个。对于理解了E:nth-child(n)之后，对于构造伪类的理解很有帮助，其他类型都是在这个的根底上的特殊情况。另外，构造伪类中一个比较特殊的用法是选择指定的元素的位置。nth-child(n)、nth-last-child(n)、nth-of-type(n)、nth-last-of-type(n)中的N在选择器中的使用，这个参数可以是整数(1、2、3、4)、关键之(odd、even)，还可以是公式2n+1、-n+5.但参数n的起始值始终是1而不是0.1、参数可以是数值；2、参数n为表达式【n*length】:单length为整数1时，将选择整个系列中的所有元素，直到元素无

18、法选择为止。例如：:nth-child(2n)n = 0时，2*0 = 0,不选任何元素；n = 1时，2*1 = 2，选中的是系列中的第2个元素；3、参数n为表达式n+length，例如：:nth-child(n+3)n = 0时，0 + 3 = 3，选中的是第3个元素；n = 1时，1 + 3 = 4，选中的是第4个元素；4、参数n为表达式【-n+length】，例如：:nth-child(-n+3) n = 0时，-0 + 3 = 3，选中的是第3个元素；n = 1时，-1 + 3 = 2，选择的是第2个元素； 当为负数的时候，不选择任何元素。5、如果n的表达式为【2*n+1】或者【2*

19、n-1】，则此时与odd的效果一样，一样的【2n】与even的效果是一样的这里有一个比较特别的用法就是从父元素的相反方向进展匹配，:last-child,:nth-last-child,:nth-last-of-type(n),:last-of-type，这几个选择器都是从父元素的最后一个开场匹配。为了方便记忆和查询，把CSS的构造伪类选择器归为四类：1通用子元素过滤器：E:nth-child(n)顺序过滤和E:nth-last-child(n)(逆序过滤)2通用子类型元素过滤器：E:nth-of-type顺序过滤和E:nth-last-of-type(n)(逆序过滤)3特定位置的子元素：E:

20、first-child,E:last-child,E:first-of-type,E:last-of-type4特定状态的元素：E:root根节点、E:only-child独子元素、E:only-of-type独子类型元素和E:empty孤节点CSS介绍CSS全称为“层叠样式表 (Cascading Style Sheets)，它主要是用于定义HTML容在浏览器的显示样式，如文字大小、颜色、字体加粗等。选择符：又称选择器，指明网页中要应用样式规则的元素。声明：在英文大括号“中的的就是声明，属性和值之间用英文冒号“：分隔。当有多条声明时，中间可以英文分号“;分隔，如下所示：pfont-size:

21、12p*;color:red;注意：1、最后一条声明可以没有分号，但是为了以后修改方便，一般也加上分号。2、为了使用样式更加容易阅读，可以将每条代码写在一个新行，如下所示：pfont-size:12p*;color:red;CSS中也有注释语句：用/*注释语句*/来标明，Html中使用。CSS样式的根本知识CSS 样式代码插入的形式来看根本可以分为以下3种：联式、嵌入式和外部式三种。一、联式css样式表就是把css代码直接写在现有的HTML标签中，如下面代码：这里文字是红色。二、嵌入式css样式，就是可以把css样式代码写在标签之间。如下面代码实现把标签中的文字设置为红色：spancolor:

22、red;嵌入式css样式必须写在之间，并且一般情况下嵌入式css样式写在之间。三、外部式css样式(也可称为外联式)就是把css代码写一个单独的外部文件中，这个css样式文件以“.css为扩展名，在不是在标签使用标签将css样式文件到HTML文件，如下面代码：注意：1、css样式文件名称以有意义的英文字母命名，如 main.css。2、rel=stylesheet type=te*t/css 是固定写法不可修改。3、标签位置一般写在标签之。三种方法的优先级，联式 嵌入式 外部式，就近原则离被设置元素越近优先级别越高。但注意上面所总结的优先级是有一个前提：联式、嵌入式、外部式样式表中css样式是

23、在的一样权值的情况下。CSS选择器每一条css样式声明定义由两局部组成，形式如下：选择器样式；在之前的局部就是“选择器，“选择器指明了中的“样式的作用对象，也就是“样式作用于网页中的哪些元素。一、标签选择器其实就是html代码中的标签。例如下面代码：pfont-size:12p*;line-height:1.6em;上面的css样式代码的作用：为p标签设置12p*字号，行间距设置1.6em的样式。二、类选择器：先在元素中设置class属性及属性名，然后在嵌入、外部样式中以.类名 样式 “选中并设置样式；注意点.“要在英文输入法下输入，可别忘记哦。class名可任意取，但不可为中文。语法：.类名

24、样式三、ID选择器在很多方面，ID选择器都类似于类选择符，但也有一些重要的区别：1、为标签设置id=ID名称，而不是class=类名称。2、ID选择符的前面是井号*号，而不是英文圆点.。ID选择器与类选择器一样点：可以应用于任何元素不同点：1、ID选择器只能在文档中使用一次。与类选择器不同，在一个HTML文档中，ID选择器只能使用一次，而且仅一次。而类选择器可以使用屡次。四、子选择器，即大于符号(),用于选择指定标签元素的第一代子元素。如下代码：.foodliborder:1p* solid red;这行代码会使class名为food下的子元素li参加红色实线边框。五、包含选择器，即参加空格,

25、用于选择指定标签元素下的后代元素。如下代码：.first spancolor:red;请注意这个选择器与子选择器的区别，子选择器child selector仅是指它的直接后代或者你可以理解为作用于子元素的第一代后代。而后代选择器是作用于所有子后代元素后代选择器通过空格来进展选择，而子选择器是通过“进展选择。总结：作用于元素的第一代后代，空格作用于元素的所有后代。六、通用选择器它使用一个*号指定，它的作用是匹配html中所有标签元素，如下使用下面代码使用html中任意标签元素字体颜色全部设置为红色：*color:red;七、伪类选择符，它允许给html不存在的标签标签的*种状态设置样式，比方说我

26、们给html中一个标签元素的鼠标滑过的状态来设置字体颜色：a:hovercolor:red;上面一行代码就是为 a 标签鼠标滑过的状态设置字体颜色变红。八、分组选择符，当你想为html中多个标签元素设置同一个样式时，可以使用分组选择符，如下代码为右侧代码编辑器中的h1、span标签同时设置字体颜色为红色：h1,spancolor:red;它相当于下面两行代码：h1color:red;spancolor:red;CSS的继承性、特殊性、层叠性、重要性CSS的继承性继承是一种规则，它允许样式不仅应用于*个特定html标签元素，而且应用于其后代。pcolor:red;三年级时，我还是一个胆小如鼠的小

27、女孩。这个颜色设置不仅应用p标签，还应用于p标签中的所有子元素文本，这里子元素为span标签。但注意有一些css样式是不具有继承性的。如border:1p* solid red;pborder:1p* solid red;三年级时，我还是一个胆小如鼠的小女孩。在上面例子中它代码的作用只是给p标签设置了边框为1像素、红色、实心边框线，而对于子元素span是没用起到作用的。CSS的特殊性有的时候我们为同一个元素设置了不同的CSS样式代码，则元素会启用哪一个CSS样式呢?我们来看一下面的代码：pcolor:red;.firstcolor:green;三年级时，我还是一个胆小如鼠的小女孩。p和.fir

28、st都匹配到了p这个标签上，则会显示哪种颜色呢.green是正确的颜色，则为什么呢.是因为浏览器是根据权值来判断使用哪种css样式的，权值高的就使用哪种css样式。下面是权值的规则：标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100。例如下面的代码：pcolor:red; /*权值为1*/p spancolor:green; /*权值为1+1=2*/.warningcolor:white; /*权值为10*/p span.warningcolor:purple; /*权值为1+1+10=12*/*footer .note pcolor:yellow; /*权值为100+10+1

29、=111*/注意：还有一个权值比较特殊-继承也有权值但很低，有的文献提出它只有0.1，所以可以理解为继承的权值最低。CSS的层叠性层叠就是在html文件中对于同一个元素可以有多个css样式存在，当有一样权重的样式存在时，会根据这些css样式的前后顺序来决定，处于最后面的css样式会被应用。如下面代码:pcolor:red;pcolor:green;三年级时，我还是一个胆小如鼠的小女孩。最后 p 中的文本会设置为green，这个层叠很好理解，理解为后面的样式会覆盖前面的样式。所以前面的css样式优先级就不难理解了：联样式表标签部 嵌入样式表当前文件中 外部样式表外部文件中。CSS重要性我们在做网页代码的时，有些特殊的情况需