CSS层叠样式学习总结

css3 总结01
前缀
∙chrome: -webkit-
∙safari: -webkit-
∙firefox: -moz-
∙ie: -ms-
∙opera: -o-
书写的时候应该先用有前缀的样式，再用无前缀的样式
颜色
∙rgb(red, green, blue);
∙rgba(red, green, blue, opacity[0-1]);
∙hsl(色度，饱和度，亮度)；
色度为色轮的度数，0/360d代表红色，120代表绿色，240代表蓝色；
饱和度百分比值，100%表示完全显示该颜色；
亮度百分比值，0%代表黑色，100%代表白色，50%平均值
圆角
border-radius: 20px;//水平，垂直border-radius: 20px，20px;//左上，右上，右下，左下border-radius: 20px，20px 20px 20px;
下拉阴影
//水平；垂直；模糊直径；颜色box-shadow: 10px 5px 15px #000;//内阴影box-shadow: 10px 5px 15px #000 inset;//水平；垂直；模糊直径；延展距离;颜色box-shadow: 10px 5px 15px 15px #000;//多阴影box-shadow: 0 1px 1px #fff inset, 5px 5px 10px #000;
chromw:-webkit-;safari:-webkit-;ie>=9
文本阴影
//水平;垂直;颜色text-shandow: 1px 1px #fff;//水平;垂直;模糊直径;颜色text-shandow: 1px 1px .3em #fff;
渐变
默认下渐变是垂直方向的；也可以传递一个位置参数来改变方向
linear-gradient(#ccc, #ddd, white);//设定一个倾斜度
linear-gradient(-45deg, #ccc, #fff);//水平渐变
linear-gradient(left, #ccc, #fff);//设置颜色停止值
linear-gradient(white, #ddd 20%, black);
选择器
//选中的第一个元素: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 ease-in;定时函数种类
∙linear
∙ease-in
∙ease-out
∙ease-in-out
例子
div {
background: pink;
width: 50px;
height: 50px;
-moz-transition: 2s width ease-in, 2s height ease-out; /* Firefox 4 */
-webkit-transition: 2s width ease-in, 2s height ease-out; /* Safari and Chrome */
-o-transition: 2s width ease-in, 2s height ease-out; /* Opera */
transition: 2s width ease-in, 2s height ease-out;}div:hover{
width: 100px;
height: 150px;}
div {
position: absolute;
left: 10px;
-moz-transition: 2s left
-webkit-transition: 2s left;
-o-transition: 2s left ;
transition:2s left;
}
div:hover{
position: absolute;
left:100px;
}
firefox:-moz-; chrome:-webkit-; safari: -webkit-; ie>=10; opear: -o-;
css3 总结03
∙
box-flex: 设置或检索弹性盒模型对象的子元素如何分配其剩余空间。

∙
<ul id="box">
<li>a</li>
<li>b</li>
<li>c</li></ul>
#box{display:box;width:240px;height:100px;margin:0;padding:10px;list-style:none;}#box
li:nth-child(1){box-flex:1;}#box li:nth-child(2){box-flex:1;}#box li:nth-child(3){box-flex:2;}
注意box-flex只是动态分配父元素的剩余空间，而不是整个父元素的空间。

如上例，父元素#box的宽度为240px，如果你认为a,b,c的宽度分别为60, 60, 120那么就错了，因为box-flex只是分配父元素的剩余空间而已，所以a,b,c所分到的应该是除内容外所剩余下来的宽度
box-flex-group: 设置或检索弹性盒模型对象的子元素的所属组。

box-ordinal-group: 设置或检索弹性盒模型对象的子元素的显示顺序。

box-direction: 设置或检索弹性盒模型对象的子元素的排列顺序是否反转。

box-lines: 设置或检索弹性盒模型对象的子元素是否可以换行显示。

.hbox{
display: -webkit-box;
-webkit-box-orient: horizontal;
-webkit-box-align: stretch;
-webkit-box-pack: start;
display: -moz-box;
-moz-box-orient: horizontal;
-moz-box-align: stretch;
-moz-box-pack: start;
}
.vbox{
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-box-align: stretch;
display: -moz-box;
-moz-box-orient: vertical;
-moz-box-align: stretch;
}
上面将display设置为-webkit-box或-moz-box-，然后设置子元素布局的方向。

默认情况下，所有子元素都将自动扩充为父元素一样的大小。

但通过设置box-flex属性却可以修改默认行为
#sidebar{
-webkit-box-flex: 0;
-moz-box-flex: 0;
box-flex: 0;
width: 200px;
}#content {
-webkit-box-flex: 1;
-moz-box-flex: 1;
box-flex：1；
}
如果设置box-flex为0，就指定了该元素不允许扩充；相反设置1或更大的数值该元素会自动扩充可利用的内容空间。

上面对侧边栏设置flex为0；而主内容区设置flex为1
字体
@font-face{
font-family: 'Bitstream'
src: url('/Bitstream.ttf');}#font-example{
font-family: Bitstream;}
css实例--文字/字体
使用自定义字体：
∙在CSS2中font-family属性只能使用两个字体：
∙通用字体：Serif字体，Sans-serif字体，Monospace字体，Cursive字体,Fantasy字体;
∙特定字体：如Times,Courier等，要求计算机已经安装该字体；
使用@font-face：
1 2 3 4 5 @font-face{
font-family:example; src:url('example.ttf') , url('example.eot');/*IE9+*/ }
6 7 div{
font-family:example; }
文本缩进和首字符下沉：
∙缩进：text-indent;
∙首字符设置：:first-letter;文本被选中：
1 2 3 ::selection{}
//老版本的firefox ::-moz-selection{}
调整文字，字符间距：
∙demo:
∙word-spacing：空格距离；
∙letter-spacing：子间距离；
∙line-heigh：文本行间距；
∙white-space：空格，换行符的控制；
∙强制换行：word-wrap: break-word; word-break: normal;
文字阴影/框阴影：
∙text-shadow：h-shadow(必须) v-shadow(必须) blur color;
∙文字毛玻璃效果：
∙box-shadow: h-shadow(必须) v-shadow(必须) blur spread color inset;文本溢出处理：
∙demo:
∙overflow：主要在对高度的处理，如果宽度不够，默认会换行；
∙text-overflow：主要对宽度的处理，在设置white-space: nowrap; 阻止换行之后可以设置默认（clip）或省略（ellipsis）;
高级文字设置：
∙金属质感文字
∙linear-gradient: (direction, color-stop1, color-stop2, ...);
隐藏文本：
∙使用display;
∙使用opacity;
∙使用text-indent;
1 2 3 4 h1{
text-indent:-9999px ............
}
∙使用定位；
1 2 3 4 5 h1{
position:absolute; top:-9999px;
left:-9999px;
}
文字旋转：
1 2 3 -ms-transform:
rotate(30deg); /* IE 9 */
-webkit-transform:
rotate(30deg); /* Chrome, Safari, Opera */
transform: rotate(30deg);
结构性伪类E:root 匹配文档的根元素。

在HTML（标准通用标记语言下的一个应用）中，根元素永远是HTML
结构性伪类E:nth-child
(n)
匹配父元素中的第n个子元素E
结构性伪类E:nth-last-ch
ild(n)
匹配父元素中的倒数第n个结构子元素E
结构性伪类E:nth-of-typ
e(n)
匹配同类型中的第n个同级兄弟元素E
结构性伪类E:nth-last-of
-type(n)
匹配同类型中的倒数第n个同级兄弟元素E
结构性
伪类
E:last-child 匹配父元素中最后一个E元素
结构性伪类E:first-of-typ
e
匹配同级兄弟元素中的第一个E元素
结构性
伪类
E:only-child 匹配属于父元素中唯一子元素的E
结构性伪类E:only-of-ty
pe
匹配属于同类型中唯一兄弟元素的E
结构性
伪类
E:empty 匹配没有任何子元素（包括text节点）的元素E
一、E:root，匹配文档的根元素
二、E:nth-child(n),匹配父元素的第n个孩子元素E
nth-child选择的是父元素的子元素，其中要满足两个条件：①没有规定确切的类型，只要是子元素；
②该元素要在第n的位置。

只需要看在父元素下的第n个孩子是否是E，如果是那么就匹配否则就不匹配。

p:nth-child(2):选择的是父元素的第二个P类型的孩子节点，p:nth-of-type(2)：选择的是父元素的所有孩子节点的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时，将选择整个系列中的所有元素，直到元素无法选择为止。

例如：":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*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:first-child,E:last-child,E:first-of-type,E:last-of-type
4）特定状态的元素：E:root（根节点）、E:only-child（独子元素）、E:only-of-type（独子类型元素）和E:empty（孤节点）
CSS介绍
☆CSS全称为“层叠样式表(Cascading Style Sheets)”，它主要是用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等。

☆选择符：又称选择器，指明网页中要应用样式规则的元素。

声明：在英文大括号“｛｝”中的的就是声明，属性和值之间用英文冒号“：”分隔。

当有多条声明时，中间可以英文分号“;”分隔，如下所示：
p{font-size:12px;color:red;}
注意：
1、最后一条声明可以没有分号，但是为了以后修改方便，一般也加上分号。

2、为了使用样式更加容易阅读，可以将每条代码写在一个新行内，如下所示：
p{
font-size:12px;
color:red;
}
☆CSS中也有注释语句：用/*注释语句*/来标明，Html中使用<!--注释语句-->。

CSS样式的基本知识
☆CSS 样式代码插入的形式来看基本可以分为以下3种：内联式、嵌入式和外部式三种。

一、内联式css样式表就是把css代码直接写在现有的HTML标签中，如下面代码：<p style="color:red">这里文字是红色。

</p>。

二、嵌入式css样式，就是可以把css样式代码写在<style type="text/css"></style>标签之间。

如下面代码实现把<span>标签中的文字设置为红色：
<style type="text/css">
span{
color:red;
}
</style>
嵌入式css样式必须写在<style></style>之间，并且一般情况下嵌入式css样式写在<head></head>之间。

三、外部式css样式(也可称为外联式)就是把css代码写一个单独的外部文件中，这个css样式文件以“.css”为扩展名，在<head>内（不是在<style>标签内）使用<link>标签将css样式文件链接到HTML文件内，如下面代码：
<link href="base.css" rel="stylesheet" type="text/css" />
注意：
1、css样式文件名称以有意义的英文字母命名，如main.css。

2、rel="stylesheet" type="text/css" 是固定写法不可修改。

3、<link>标签位置一般写在<head>标签之内。

三种方法的优先级，内联式> 嵌入式> 外部式，就近原则（离被设置元素越近优先级别越高）。

但注意上面所总结的优先级是有一个前提：内联式、嵌入式、外部式样式表中css样式是在的相同权值的情况下。

CSS选择器
☆每一条css样式声明（定义）由两部分组成，形式如下：
选择器{
样式
}；
在{}之前的部分就是“选择器”，“选择器”指明了{}中的“样式”的作用对象，也就是“样式”作用于网页中的哪些元素。

一、标签选择器其实就是html代码中的标签。

例如下面代码：
p{font-size:12px;line-height:1.6em;}
上面的css样式代码的作用：为p标签设置12px字号，行间距设置1.6em的样式。

二、类选择器：先在元素中设置class属性及属性名，然后在嵌入、外部样式中以”.类名{ 样式}“选中并设置样式；注意点”.“要在英文输入法下输入，可别忘记哦。

class 名可任意取，但不可为中文。

语法：
.类名{
样式
}
三、ID选择器
在很多方面，ID选择器都类似于类选择符，但也有一些重要的区别：
1、为标签设置id="ID名称"，而不是class="类名称"。

2、ID选择符的前面是井号（#）号，而不是英文圆点（.）。

ID选择器与类选择器
相同点：可以应用于任何元素
不同点：
1、ID选择器只能在文档中使用一次。

与类选择器不同，在一个HTML文档中，ID选择器只能使用一次，而且仅一次。

而类选择器可以使用多次。

四、子选择器，即大于符号(>),用于选择指定标签元素的第一代子元素。

如下代码：.food>li{border:1px solid red;}
这行代码会使class名为food下的子元素li加入红色实线边框。

五、包含选择器，即加入空格,用于选择指定标签元素下的后辈元素。

如下代码：
.first span{color:red;}
请注意这个选择器与子选择器的区别，子选择器（child selector）仅是指它的直接后代
或者你可以理解为作用于子元素的第一代后代。

而后代选择器是作用于所有子后代元素
后代选择器通过空格来进行选择，而子选择器是通过“>”进行选择。

总结：>作用于元素的第一代后代，空格作用于元素的所有后代。

六、通用选择器它使用一个（*）号指定，它的作用是匹配html中所有标签元素，如下使用下面代码使用html中任意标签元素字体颜色全部设置为红色：*{color:red;}
七、伪类选择符，它允许给html不存在的标签（标签的某种状态）设置样式，比如说
我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色：
a:hover{color:red;}
上面一行代码就是为a 标签鼠标滑过的状态设置字体颜色变红。

八、分组选择符，当你想为html中多个标签元素设置同一个样式时，可以使用分组选择符（，），如下代码为右侧代码编辑器中的h1、span标签同时设置字体颜色为红色：h1,span{color:red;}
它相当于下面两行代码：
h1{color:red;}
span{color:red;}
CSS的继承性、特殊性、层叠性、重要性
☆CSS的继承性
继承是一种规则，它允许样式不仅应用于某个特定html标签元素，而且应用于其后代。

p{color:red;}
<p>三年级时，我还是一个<span>胆小如鼠</span>的小女孩。

</p>
这个颜色设置不仅应用p标签，还应用于p标签中的所有子元素文本，这里子元素为span 标签。

但注意有一些css样式是不具有继承性的。

如border:1px solid red;
p{border:1px solid red;}
<p>三年级时，我还是一个<span>胆小如鼠</span>的小女孩。

</p>
在上面例子中它代码的作用只是给p标签设置了边框为1像素、红色、实心边框线，而对于子元素span是没用起到作用的。

☆CSS的特殊性
有的时候我们为同一个元素设置了不同的CSS样式代码，那么元素会启用哪一个CSS样式呢?我们来看一下面的代码：
p{color:red;}
.first{color:green;}
<p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩。

</p>
p和.first都匹配到了p这个标签上，那么会显示哪种颜色呢？green是正确的颜色，那么为什么呢？是因为浏览器是根据权值来判断使用哪种css样式的，权值高的就使用哪种css 样式。

下面是权值的规则：
标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100。

例如下面的代码：p{color:red;} /*权值为1*/
p span{color:green;} /*权值为1+1=2*/
.warning{color:white;} /*权值为10*/
p span.warning{color:purple;} /*权值为1+1+10=12*/
#footer .note p{color:yellow;} /*权值为100+10+1=111*/
注意：还有一个权值比较特殊--继承也有权值但很低，有的文献提出它只有0.1，所以可以理解为继承的权值最低。

☆CSS的层叠性
层叠就是在html文件中对于同一个元素可以有多个css样式存在，当有相同权重的样式存在时，会根据这些css样式的前后顺序来决定，处于最后面的css样式会被应用。

如下面代码:
p{color:red;}
p{color:green;}
<p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩。

</p>
最后p 中的文本会设置为green，这个层叠很好理解，理解为后面的样式会覆盖前面的样式。

所以前面的css样式优先级就不难理解了：
内联样式表（标签内部）> 嵌入样式表（当前文件中）> 外部样式表（外部文件中）。

☆CSS重要性
我们在做网页代码的时，有些特殊的情况需要为某些样式设置具有最高权值，怎么办？这时候我们可以使用!important来解决。

如下代码：
p{color:red!important;}
p{color:green;}
<p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩。

</p>
这时p 段落中的文本会显示的red红色。

注意：!important要写在分号的前面
这里注意当网页制作者不设置css样式时，浏览器会按照自己的一套样式来显示网页。

并且用户也可以在浏览器中设置自己习惯的样式，比如有的用户习惯把字号设置为大一些，使其查看网页的文本更加清楚。

这时注意样式优先级为：浏览器默认的样式< 网页制作者样式< 用户自己设置的样式，但记住!important优先级样式是个例外，权值高于用户自己设置的样式。

☆元素分类，在CSS中，html中的标签元素大体被分为三种不同的类型：块状元素、内联元素(又叫行内元素)和内联块状元素。

常用的块状元素有：
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form> 常用的内联元素有：
<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
常用的内联块状元素有：
<img>、<input>
一、块状元素
块级元素:<div>、<p>、<h1>、<form>、<ul> 、<li>就是块级元素。

设置display:block 就是将元素显示为块级元素，从而使元素具有块状元素特点。

如：a{display:block;}
块级元素特点：
1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。

2、元素的高度、宽度、行高以及顶和底边距都可设置。

3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。

二、内联元素
在html中，<span>、<a>、<label>、<input>、<img>、<strong> 和<em>就是典型的内联元素（行内元素）（inline）元素。

当然块状元素也可以通过代码display:inline将元素设置为内联元素。

如下代码就是将块状元素div转换为内联元素，从页使用div元素具有内联元素特点。

如：div{display:inline;}
内联元素特点：
1、和其他元素都在一行上；
2、元素的高度、宽度、行高及顶部和底部边距不可设置；
3、元素的宽度就是它包含的文字或图片的宽度，不可改变。

三、内联块元素
内联块状元素（inline-block）就是同时具备内联元素、块状元素的特点，代码display:inline-block就是将元素设置为内联块状元素。

(css2.1新增)，<img>、<input>标签就是这种内联块状标签。

如：a{display:inline-block;}
内联块元素特点：
1、和其他元素都在一行上；
2、元素的高度、宽度、行高以及顶和底边距都可设置。