CSS层叠样式学习总结.docx
《CSS层叠样式学习总结.docx》由会员分享，可在线阅读，更多相关《CSS层叠样式学习总结.docx（19页珍藏版）》请在冰点文库上搜索。
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，20px20px20px;
下拉阴影
//水平；垂直；模糊直径；颜色box-shadow:
10px5px15px#000;//内阴影box-shadow:
10px5px15px#000inset;//水平；垂直；模糊直径；延展距离;颜色box-shadow:
10px5px15px15px#000;//多阴影box-shadow:
01px1px#fffinset,5px5px10px#000;
chromw:
-webkit-;safari:
-webkit-;ie>=9
文本阴影
//水平;垂直;颜色text-shandow:
1px1px#fff;//水平;垂直;模糊直径;颜色text-shandow:
1px1px.3em#fff;
渐变
默认下渐变是垂直方向的；也可以传递一个位置参数来改变方向
linear-gradient（#ccc,#ddd,white）;//设定一个倾斜度
linear-gradient（-45deg,#ccc,#fff）;//水平渐变
linear-gradient（left,#ccc,#fff）;//设置颜色停止值
linear-gradient（white,#ddd20%,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:
2sopacity,.5sheightease-in;
定时函数种类
∙linear
∙ease-in
∙ease-out
∙ease-in-out
例子
div{
background:
pink;
width:
50px;
height:
50px;
-moz-transition:
2swidthease-in,2sheightease-out;/*Firefox4*/
-webkit-transition:
2swidthease-in,2sheightease-out;/*SafariandChrome*/
-o-transition:
2swidthease-in,2sheightease-out;/*Opera*/
transition:
2swidthease-in,2sheightease-out;}div:
hover{
width:
100px;
height:
150px;}
div{
position:
absolute;
left:
10px;
-moz-transition:
2sleft
-webkit-transition:
2sleft;
-o-transition:
2sleft;
transition:
2sleft;
}
div:
hover{
position:
absolute;
left:
100px;
}
firefox:
-moz-; chrome:
-webkit-;safari:
-webkit-;ie>=10;opear:
-o-;
css3总结03
∙
box-flex:
设置或检索弹性盒模型对象的子元素如何分配其剩余空间。
∙
abc#box{display:
box;width:
240px;height:
100px;margin:
0;padding:
10px;list-style:
none;}#boxli:
nth-child
（1）{box-flex:
1;}#boxli:
nth-child
（2）{box-flex:
1;}#boxli:
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
6
7
@font-face{
font-family:
example;
src:
url（'example.ttf'）,url（'example.eot'）;/*IE9+*/
}
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（必须） blurspreadcolorinset;
文本溢出处理：
∙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）; /*IE9*/
-webkit-transform:
rotate（30deg）; /*Chrome,Safari,Opera*/
transform:
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:
only-child
匹配属于父元素中唯一子元素的E
结构性伪类
E:
only-of-type
匹配属于同类型中唯一兄弟元素的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全称为“层叠样式表（CascadingStyleSheets）”，它主要是用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等。
☆选择符：
又称选择器，指明网页中要应用样式规则的元素。
声明：
在英文大括号“｛｝”中的的就是声明，属性和值之间用英文冒号“：
”分隔。
当有多条声明时，中间可以英文分号“;”分隔，如下所示：
p{font-size:
12px;color:
red;}
注意：
1、最后一条声明可以没有分号，但是为了以后修改方便，一般也加上分号。
2、为了使用样式更加容易阅读，可以将每条代码写在一个新行内，如下所示：
p{
font-size:
12px;
color:
red;
}
☆CSS中也有注释语句：
用/*注释语句*/来标明，Html中使用
--注释语句-->。
CSS样式的基本知识
☆CSS样式代码插入的形式来看基本可以分为以下3种：
内联式、嵌入式和外部式三种。
一、内联式css样式表就是把css代码直接写在现有的HTML标签中，如下面代码：
red">这里文字是红色。
。
二、嵌入式css样式，就是可以把css样式代码写在标签之间。
如下面代码实现把标签中的文字设置为红色：
span{
color:
red;
}
嵌入式css样式必须写在之间，并且一般情况下嵌入式css样式写在
之间。
三、外部式css样式（也可称为外联式）就是把css代码写一个单独的外部文件中，这个css样式文件以“.css”为扩展名，在
内（不是在