CSS 进阶篇[转]

一、CSS2 高阶知识(常用)

1. css 优先权

优先权(从低到高)

1
2
3
4
浏览器缺省设置
外部样式表
内部样式表(位于 <head> 标签内部)
内联样式(在 HTML 元素内部)

因此,内联样式(在 HTML 元素内部)拥有最高的优先权,这意味着它将优先于以下的样式声明: 标签中的样式声明,外部样式表中的样式声明,或者浏览器中的样式声明(缺省值)。

2. 背景定位(background-position)

可以利用 background-position 属性改变图像在背景中的位置。

1
2
3
4
5
6
body
{
background-image:url('/img/bg_03.png');
background-repeat:no-repeat;
background-position:50px 100px;
}

3. 缩进文本 (text-indent)

把 Web 页面上的段落的第一行缩进,这是一种最常用的文本格式化效果。
CSS 提供了 text-indent 属性,该属性可以方便地实现文本缩进。

1
p {text-indent: 5em;}

同时也可用做文本信息隐藏(-99999px)

4. 字(单词)间隔 (word-spacing)

1
p.spread {word-spacing: 30px;}

5. 字母间隔(letter-spacing)

1
h1 {letter-spacing: -2px;}

6. 字符大小写转换(text-transform)

none(默认无操作)
uppercase(全大写)
lowercase(全小写)
capitalize(首字母大写)
1
h1 {text-transform: uppercase;}

7. 处理空白符(white-space)

1. 值 nowrap(防止元素中的文本换行)

1
p{white-space: nowrap;}

2. 单行文本溢出显示 …(text-overflow)

1
2
3
4
5
span {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}

8. table 表格(border-collapse 单一边框)

border-collapse 属性设置是否将表格边框折叠为单一边框:

1
2
3
4
5
6
7
table{
border-collapse:collapse;
}

table,th, td{
border: 1px solid black;
}

9. 选择子元素(>)

如果您不希望选择任意的后代元素,而是希望缩小范围,只选择某个元素的子元素,请使用子元素选择器(Child selector)。
例如,如果您希望选择只作为 h1 元素子元素的 strong 元素,可以这样写:

1
h1 > strong {color:red;}

这个规则会把第一个 h1 下面的两个 strong 元素变为红色,但是第二个 h1 中的 strong 不受影响:

1
2
<h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
<h1>This is <em>really <strong>very</strong></em> important.</h1>

10. 选择相邻兄弟 (+)

如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以使用相邻兄弟选择器(Adjacent sibling selector)。
例如,如果要增加紧接在 h1 元素后出现的段落的上边距,可以这样写:

1
h1 + p {margin-top:50px;}

11. 伪类 (Pseudo-classes)

CSS 伪类用于向某些选择器添加特殊的效果。

1. 锚伪类

在支持 CSS 的浏览器中,链接的不同状态都可以不同的方式显示,这些状态包括:活动状态,已被访问状态,未被访问状态,和鼠标悬停状态。

a:link {color: #FF0000}    /* 未访问的链接 */
a:visited {color: #00FF00}    /* 已访问的链接 */
a:hover {color: #FF00FF}    /* 鼠标移动到链接上 */
a:active {color: #0000FF}    /* 选定的链接 */

2. CSS2 - :first-child 伪类(第一个子元素)

可以使用 :first-child 伪类来选择元素的第一个子元素。

1
2
3
4
5
6
7
8
<style type="text/css">
p:first-child{
font-weight:bold
}
</style>

<p>I am a <em>strong</em> man. I am a <em>strong</em> man.</p>
<p>I am a <em>strong</em> man. I am a <em>strong</em> man.</p>

3. :first-line 伪元素(首行)

“first-line” 伪元素用于向文本的首行设置特殊样式。

1
2
3
4
p:first-line{
color:#ff0000;
font-variant:small-caps;
}

“first-line” 伪元素只能用于块级元素。

4. :first-letter 伪元素(首字母)

“first-letter” 伪元素用于向文本的首字母设置特殊样式:

1
2
3
4
p:first-letter {
color:#ff0000;
font-size:xx-large;
}

5. CSS2 - :before 伪元素

“:before” 伪元素可以在元素的内容前面插入新内容。

1
2
3
h1:before {
content:url(logo.gif);
}

6. CSS2 - :after 伪元素

“:after” 伪元素可以在元素的内容之后插入新内容。

1
2
3
h1:after {
content:url(logo.gif);
}

12. 使用 margin 属性来水平对齐

可通过将左和右外边距设置为 “auto”,来对齐块元素。

1
2
3
4
5
6
.center {
margin-left:auto;
margin-right:auto;
width:70%;
background-color:#b0e0e6;
}

13. 改变光标 (cursor:pointer)

1
2
3
4
span.pointer {cursor:pointer;}
span.crosshair {cursor:crosshair;}
span.help {cursor:help;}
span.wait {cursor:wait;}

14. 透明度 (opacity)

定义透明效果的 CSS3 属性是 opacity。

1
2
3
4
img{
opacity:0.4;
filter:alpha(opacity=40); /* 针对 IE8 以及更早的版本 */
}

IE9, Firefox, Chrome, Opera 和 Safari 使用属性 opacity 来设定透明度。opacity 属性能够设置的值从 0.0 到 1.0。值越小,越透明。
IE8 以及更早的版本使用滤镜 filter:alpha(opacity=x)。x 能够取的值从 0 到 100。值越小,越透明。

15. 颜色透明(RGBA)

1
background: rgba(0, 0, 0, 0.6) ;

二、CSS3 新特性

CSS3 标准
W3C 仍然在对 CSS3 规范进行开发。
不过,现代浏览器已经实现了相当多的 CSS3 属性。

1. CSS3 圆角边框(border-radius)

1
2
3
4
5
6
div{
text-align:center;
border:2px solid #a1a1a1;
border-radius:25px;
-moz-border-radius:25px; /* 老的 Firefox */
}

2. CSS3 边框阴影(box-shadow)

语法:box-shadow: h-shadow v-shadow blur spread color inset;

1
2
3
4
5
6
7
div{
width:300px;
height:100px;
background-color:#ff9900;
-moz-box-shadow: 10px 10px 5px #888888; /* 老的 Firefox */
box-shadow: 10px 10px 5px #888888;
}

3. CSS3 文本阴影(text-shadow)

您能够规定水平阴影、垂直阴影、模糊距离,以及阴影的颜色:

1
2
3
h1{
text-shadow: 5px 5px 5px #FF0000;
}

4. CSS3 自动换行(word-wrap)

在 CSS3 中,word-wrap 属性允许您允许文本强制文本进行换行 - 即使这意味着会对单词进行拆分。
允许对长单词进行拆分,并换行到下一行:

1
p {word-wrap:break-word;}

5. CSS3 字体(@font-face)

使用您需要的字体
在新的 @font-face 规则中,您必须首先定义字体的名称(比如 myFirstFont),然后指向该字体文件。
如需为 HTML 元素使用字体,请通过 font-family 属性来引用字体的名称 (myFirstFont):

1
2
3
4
5
6
7
8
9
@font-face {
font-family: myFirstFont;
src: url('Sansation_Light.ttf'),
url('Sansation_Light.eot'); /* IE9+ */
}

div {
font-family:myFirstFont;
}

6. CSS3 2D 转换

Internet Explorer 10、Firefox 以及 Opera 支持 transform 属性。
Chrome 和 Safari 需要前缀 -webkit-。
注释:Internet Explorer 9 需要前缀 -ms-。

通过 CSS3 转换,我们能够对元素进行移动、缩放、转动、拉长或拉伸。

1. translate()方法 (位置移动)

通过 translate() 方法,元素从其当前位置移动,根据给定的 left(x 坐标) 和 top(y 坐标) 位置参数:

1
2
3
4
5
6
7
div {
transform: translate(50px,100px);
-ms-transform: translate(50px,100px); /* IE 9 */
-webkit-transform: translate(50px,100px); /* Safari and Chrome */
-o-transform: translate(50px,100px); /* Opera */
-moz-transform: translate(50px,100px); /* Firefox */
}

2. rotate()方法(顺时针旋转角度)

通过 rotate() 方法,元素顺时针旋转给定的角度。允许负值,元素将逆时针旋转。

1
2
3
4
5
6
7
div {
transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari and Chrome */
-o-transform: rotate(30deg); /* Opera */
-moz-transform: rotate(30deg); /* Firefox */
}

3. scale() 方法(改变尺寸)

通过 scale() 方法,元素的尺寸会增加或减少,根据给定的宽度(X 轴)和高度(Y 轴)参数:

1
2
3
4
5
6
7
div {
transform: scale(2,4);
-ms-transform: scale(2,4); /* IE 9 */
-webkit-transform: scale(2,4); /* Safari 和 Chrome */
-o-transform: scale(2,4); /* Opera */
-moz-transform: scale(2,4); /* Firefox */
}

值 scale(2,4) 把宽度转换为原始尺寸的 2 倍,把高度转换为原始高度的 4 倍。

4. skew() 方法(元素翻转角度)

通过 skew() 方法,元素翻转给定的角度,根据给定的水平线(X 轴)和垂直线(Y 轴)参数:

1
2
3
4
5
6
7
div {
transform: skew(30deg,20deg);
-ms-transform: skew(30deg,20deg); /* IE 9 */
-webkit-transform: skew(30deg,20deg); /* Safari and Chrome */
-o-transform: skew(30deg,20deg); /* Opera */
-moz-transform: skew(30deg,20deg); /* Firefox */
}

值 skew(30deg,20deg) 围绕 X 轴把元素翻转 30 度,围绕 Y 轴翻转 20 度。

5. matrix() 方法(2D 转换方法组合)

matrix() 方法需要六个参数,包含数学函数,允许您:旋转、缩放、移动以及倾斜元素。

7. CSS3 3D 转换

Internet Explorer 10 和 Firefox 支持 3D 转换。
Chrome 和 Safari 需要前缀 -webkit-。
Opera 仍然不支持 3D 转换(它只支持 2D 转换)。

1. rotateX() 方法(X 轴旋转)

通过 rotateX() 方法,元素围绕其 X 轴以给定的度数进行旋转。

1
2
3
4
5
div {
transform: rotateX(120deg);
-webkit-transform: rotateX(120deg); /* Safari 和 Chrome */
-moz-transform: rotateX(120deg); /* Firefox */
}

2. rotateY() 方法(Y 轴旋转)

通过 rotateY() 方法,元素围绕其 Y 轴以给定的度数进行旋转。

1
2
3
4
5
div {
transform: rotateY(130deg);
-webkit-transform: rotateY(130deg); /* Safari 和 Chrome */
-moz-transform: rotateY(130deg); /* Firefox */
}

8. CSS3 过渡(transition)

CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。

1. transition: width

应用于宽度属性的过渡效果,时长为 2 秒:

1
2
3
4
5
6
7
8
9
10
div {
transition: width 2s;
-moz-transition: width 2s; /* Firefox 4 */
-webkit-transition: width 2s; /* Safari 和 Chrome */
-o-transition: width 2s; /* Opera */
}

div:hover {
width:300px;
}

2. width 2s, height 2s, transform 2s(多项改变)

如需向多个样式添加过渡效果,请添加多个属性,由逗号隔开:

1
2
3
4
5
6
div {
transition: width 2s, height 2s, transform 2s;
-moz-transition: width 2s, height 2s, -moz-transform 2s;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s;
-o-transition: width 2s, height 2s,-o-transform 2s;
}

所有的转换属性
|属性|描述|CSS|
|—|:—|:—|
|transition|简写属性,用于在一个属性中设置四个过渡属性。 |3|
|transition-property|规定应用过渡的 CSS 属性的名称。 |3|
|transition-duration|定义过渡效果花费的时间。默认是 0。|3|
|transition-timing-function|规定过渡效果的时间曲线。默认是 “ease”。 |3|
|transition-delay|规定过渡效果何时开始。默认是 0。|3|

3. 使用所有过渡属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
div{
transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;
/* Firefox 4 */
-moz-transition-property:width;
-moz-transition-duration:1s;
-moz-transition-timing-function:linear;
-moz-transition-delay:2s;
/* Safari 和 Chrome */
-webkit-transition-property:width;
-webkit-transition-duration:1s;
-webkit-transition-timing-function:linear;
-webkit-transition-delay:2s;
/* Opera */
-o-transition-property:width;
-o-transition-duration:1s;
-o-transition-timing-function:linear;
-o-transition-delay:2s;
}

4. 简写的 transition (property,duration,timing-function,delay)

属性的名称,花费的时间,时间曲线,何时开始

1
2
3
4
5
6
7
8
9
div {
transition: width 1s ease 2s;
/* Firefox 4 */
-moz-transition:width 1s ease 2s;
/* Safari and Chrome */
-webkit-transition:width 1s ease 2s;
/* Opera */
-o-transition:width 1s ease 2s;
}

9. CSS3 动画

通过 CSS3,我们能够创建动画,这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。

CSS3 @keyframes 规则
如需在 CSS3 中创建动画,您需要学习 @keyframes 规则。
@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式,就能创建由当前样式逐渐改为新样式的动画效果。

1. 关键字 “from”“to”

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
@keyframes myfirst{
from {background: red;}
to {background: yellow;}
}
/* Firefox */
@-moz-keyframes myfirst {
from {background: red;}
to {background: yellow;}
}
/* Safari 和 Chrome */
@-webkit-keyframes myfirst {
from {background: red;}
to {background: yellow;}
}
/* Opera */
@-o-keyframes myfirst {
from {background: red;}
to {background: yellow;}
}

通过规定至少以下两项 CSS3 动画属性,即可将动画绑定到选择器:

1. 规定动画的名称
2. 规定动画的时长

把 “myfirst” 动画捆绑到 div 元素,时长:5 秒:

1
2
3
4
5
6
div {
animation: myfirst 5s;
-moz-animation: myfirst 5s; /* Firefox */
-webkit-animation: myfirst 5s; /* Safari 和 Chrome */
-o-animation: myfirst 5s; /* Opera */
}

2. 0% 和 100% 选择器

必须定义动画的名称和时长。如果忽略时长,则动画不会允许,因为默认值是 0。
您可以改变任意多的样式任意多的次数。
请用百分比来规定变化发生的时间,或用关键词 “from” 和 “to”,等同于 0% 和 100%。
0% 是动画的开始,100% 是动画的完成。
为了得到最佳的浏览器支持,您应该始终定义 0% 和 100% 选择器。

例:当动画为 25% 及 50% 时改变背景色,然后当动画 100% 完成时再次改变:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
@keyframes myfirst {
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
/* Firefox */
@-moz-keyframes myfirst {
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
/* Safari 和 Chrome */
@-webkit-keyframes myfirst {
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
/* Opera */
@-o-keyframes myfirst {
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}

3. 改变背景色和位置:

1
2
3
4
5
6
7
@keyframes myfirst{
0% {background: red; left:0px; top:0px;}
25% {background: yellow; left:200px; top:0px;}
50% {background: blue; left:200px; top:200px;}
75% {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}

下面的表格列出了 @keyframes 规则和所有动画属性:

属性 描述 CSS
@keyframes 规定动画。 3
animation 所有动画属性的简写属性,除了 animation-play-state 属性。 3
animation-name 规定 @keyframes 动画的名称。 3
animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。 3
animation-timing-function 规定动画的速度曲线。默认是 “ease”。 3
animation-delay 规定动画何时开始。默认是 0。 3
animation-iteration-count 规定动画被播放的次数。默认是 1。 3
animation-direction 规定动画是否在下一周期逆向地播放。默认是 “normal”。 3
animation-play-state 规定动画是否正在运行或暂停。默认是 “running”。 3
animation-fill-mode 规定对象动画时间之外的状态。 3

4. 使用所有动画属性

1
2
3
4
5
6
7
8
9
10
div{
animation-name: myfirst;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
浏览器兼容代码省略...
}

5. 使用简写的动画 animation 属性

动画的名称,一个周期所花费的秒,速度曲线,何时开始,播放的次数

1
2
3
4
5
6
7
8
9
div{
animation: myfirst 5s linear 2s infinite alternate;
/* Firefox: */
-moz-animation: myfirst 5s linear 2s infinite alternate;
/* Safari 和 Chrome: */
-webkit-animation: myfirst 5s linear 2s infinite alternate;
/* Opera: */
-o-animation: myfirst 5s linear 2s infinite alternate;
}

10. CSS3 多列

通过 CSS3,您能够创建多个列来对文本进行布局 - 就像报纸那样!

1. CSS3 创建多列(column-count)

把 div 元素中的文本分隔为三列:

1
2
3
4
5
div{
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari 和 Chrome */
column-count:3;
}

2. CSS3 规定列之间的间隔(column-gap)

规定列之间 40 像素的间隔:

1
2
3
4
5
div{
-moz-column-gap:40px; /* Firefox */
-webkit-column-gap:40px; /* Safari 和 Chrome */
column-gap:40px;
}

3. CSS3 列规则(column-rule)

规定列之间的宽度、样式和颜色规则:

1
2
3
4
5
div{
-moz-column-rule:3px outset #ff0000; /* Firefox */
-webkit-column-rule:3px outset #ff0000; /* Safari and Chrome */
column-rule:3px outset #ff0000;
}

11. CSS3 用户界面

在 CSS3 中,新的用户界面特性包括重设元素尺寸、盒尺寸以及轮廓等。

1. CSS3 Resizing(可调整大小)

规定 div 元素可由用户调整大小:

1
2
3
4
div{
resize:both;
overflow:auto;
}

2. CSS3 Box Sizing

box-sizing 属性允许您以确切的方式定义适应某个区域的具体内容。
border 或 padding的数值计入父宽高内(意思为不会增加父容器宽度)。

规定两个并排的带边框方框:

1
2
3
4
5
6
7
div{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
width:50%;
float:left;
}

3. CSS3 Outline Offset

outline-offset 属性对轮廓进行偏移,并在超出边框边缘的位置绘制轮廓。

规定边框边缘之外 15 像素处的轮廓:

1
2
3
4
5
div{
border:2px solid black;
outline:2px solid red;
outline-offset:15px;
}

三、编写 CSS 注意事项

1. 修饰选择器(尽量少用)

能写.nav{}就尽量不要写ul.nav{}。过分修饰选择器将影响性能,影响 class 复用性,会增加选择器私有度。这些都应当竭力避免的。
如果想描述我们规划的 class 作用范围,可以在选择器前加上注释,如下写法:

1
2
/*ul*/
.nav{}

这样我们就能在不影响代码私有度的前提下获知 class 作用范围。

2. 布局(宽度和高度)

所有内部组件都不要声明宽度,而由其外层父容器块(格栅系统)来决定。理想情况下,格栅系统应当用百分比设定。
坚决不要声明高度。高度应当仅用于尺寸已经固定的东西,例如图片。在 p,ul,div 等元素上不应当声明高度。如果需要的话可以写 line-height,这个更加灵活。。

3. 简写(谨慎使用)

编写像

1
background:red;

这样的属性的确很省事,但是你这么写的意思其实是同时声明

1
2
3
4
background-image:none;
background-position:top left;
background-repeat: repeat;
background-color:red;

最优应当改为

1
background-color:red;

类似的,像 margin:0; 这样的声明的确简洁清爽,但是还是应当尽量写清楚。如果你只是想修改底边边距,就要具体一些,写成 margin-bottom:0;
简写虽然是好东西,但是注意切勿滥用。

4. ID(CSS 里坚决不要用 ID)

在 HTML 里 ID 可以用于 JS 以及锚点定位,但是在 CSS 里只要用 class,一个 ID 也不要用。

Class 的优势在于复用性,而且私有度也并不高。私有度非常容易导致问题,所以将其降低就尤为重要。ID 的私有度是 class 的 255 倍,所以在 CSS 中坚决不要使用。

5. 选择器(保持选择器简短高效)

  • 结构复杂的选择器将会影响性能。(如.sidebar h3 span{}为三层,.content ul p a{}是四层),层级越深浏览器的消耗就越大。选择器应当尽量简短,更好的办法是直接给你想要添加样式的元素直接添加一个 class。
  • class 名则不应当过于简略,例如.user-avatar就远比 .usr-avt 好。

6. !important(优先级高,一般情况不要用)

用 !important 提升优先级也可以,例如如果你要让某条规则一直生效的话,可以用 .error{ color:red !important; }

避免主动使用 !important。例如 CSS 写得很复杂时不要用它来取巧,要好好整理并重构之前的部分,保持选择器简短并且避免用 ID 将效果拔群。

7. 魔数与绝对定位(「凑巧有效果」的数字)

魔数(Magic Number)是指那些「凑巧有效果」的数字,这东西非常不好,缺乏拓展性。
例如 .dropdown-nav li:hover ul{ top:37px; } 把下拉菜单移动下来,远非良策,因为这里的 37px 就是个魔数。37px 会生效的原因是因为这时 .dropbox-nav 碰巧高 37px 而已。

这时你应该用 .dropdown-nav li:hover ul{ top:100%; },也即无论 .dropbox-down 多高,这个下拉菜单都会往下移动 100%。
每当你要在代码中放入数字的时候,请三思而行。

8. Debugging(调试)

如果你要解决 CSS 问题的话,先把旧代码拿掉再写新的。如果旧的 CSS 中有问题的话,写新代码是解决不了的。
把 CSS 代码和 HTML 部分删掉,直到没有 BUG 为止,然后你就知道问题出在哪里了。
有时候写上一个 overflow:hidden 或者其它能把问题藏起来的代码的确效果立竿见影,但是 overflow 方面可能根本就没问题。所以要治本,而不是单纯治标。

Reference:

中国风2012——CSS 进阶篇

-------------本文结束感谢您的阅读-------------
Thank you for your encouragement