一、Css2 高阶知识(常用)
1. css 优先权
优先权(从低到高)
浏览器缺省设置
外部样式表
内部样式表(位于 <head> 标签内部)
内联样式(在 HTML 元素内部)
因此,内联样式(在 HTML 元素内部)拥有最高的优先权,这意味着它将优先于以下的样式声明: 标签中的样式声明,外部样式表中的样式声明,或者浏览器中的样式声明(缺省值)。
2. 背景定位(background-position)
可以利用 background-position
属性改变图像在背景中的位置。
body
{
background-image:url('/img/bg_03.png');
background-repeat:no-repeat;
background-position:50px 100px;
}
3. 缩进文本 (text-indent)
把 Web 页面上的段落的第一行缩进,这是一种最常用的文本格式化效果。
CSS 提供了 text-indent 属性,该属性可以方便地实现文本缩进。
p {text-indent: 5em;}
同时也可用做文本信息隐藏(-99999px)
4. 字(单词)间隔 (word-spacing)
p.spread {word-spacing: 30px;}
5. 字母间隔(letter-spacing)
h1 {letter-spacing: -2px;}
6. 字符大小写转换(text-transform)
none(默认无操作)
uppercase(全大写)
lowercase(全小写)
capitalize(首字母大写)
h1 {text-transform: uppercase;}
7. 处理空白符(white-space)
1. 值 nowrap(防止元素中的文本换行)
p{white-space: nowrap;}
2. 单行文本溢出显示 ...(text-overflow)
span {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
8. table 表格(border-collapse 单一边框)
border-collapse
属性设置是否将表格边框折叠为单一边框:
table{
border-collapse:collapse;
}
table,th, td{
border: 1px solid black;
}
9. 选择子元素(>)
如果您不希望选择任意的后代元素,而是希望缩小范围,只选择某个元素的子元素,请使用子元素选择器(Child selector)。
例如,如果您希望选择只作为 h1 元素子元素的 strong 元素,可以这样写:
h1 > strong {color:red;}
这个规则会把第一个 h1 下面的两个 strong 元素变为红色,但是第二个 h1 中的 strong 不受影响:
<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 元素后出现的段落的上边距,可以这样写:
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 伪类来选择元素的第一个子元素。
<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" 伪元素用于向文本的首行设置特殊样式。
p:first-line{
color:#ff0000;
font-variant:small-caps;
}
"first-line" 伪元素只能用于块级元素。
4. :first-letter 伪元素(首字母)
"first-letter" 伪元素用于向文本的首字母设置特殊样式:
p:first-letter {
color:#ff0000;
font-size:xx-large;
}
5. CSS2 - :before 伪元素
":before" 伪元素可以在元素的内容前面插入新内容。
h1:before {
content:url(logo.gif);
}
6. CSS2 - :after 伪元素
":after" 伪元素可以在元素的内容之后插入新内容。
h1:after {
content:url(logo.gif);
}
12. 使用 margin 属性来水平对齐
可通过将左和右外边距设置为 "auto",来对齐块元素。
.center {
margin-left:auto;
margin-right:auto;
width:70%;
background-color:#b0e0e6;
}
13. 改变光标 (cursor:pointer)
span.pointer {cursor:pointer;}
span.crosshair {cursor:crosshair;}
span.help {cursor:help;}
span.wait {cursor:wait;}
14. 透明度 (opacity)
定义透明效果的 CSS3 属性是 opacity。
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)
background: rgba(0, 0, 0, 0.6) ;
二、Css3 新特性
CSS3 标准
W3C 仍然在对 CSS3 规范进行开发。
不过,现代浏览器已经实现了相当多的 CSS3 属性。
1. CSS3 圆角边框(border-radius)
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;
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)
您能够规定水平阴影、垂直阴影、模糊距离,以及阴影的颜色:
h1{
text-shadow: 5px 5px 5px #FF0000;
}
4. CSS3 自动换行(word-wrap)
在 CSS3 中,word-wrap 属性允许您允许文本强制文本进行换行 - 即使这意味着会对单词进行拆分。
允许对长单词进行拆分,并换行到下一行:
p {word-wrap:break-word;}
5. CSS3 字体(@font-face)
使用您需要的字体
在新的 @font-face 规则中,您必须首先定义字体的名称(比如 myFirstFont),然后指向该字体文件。
如需为 HTML 元素使用字体,请通过 font-family 属性来引用字体的名称 (myFirstFont):
<style>
@font-face {
font-family: myFirstFont;
src: url('Sansation_Light.ttf'),
url('Sansation_Light.eot'); /* IE9+ */
}
div {
font-family:myFirstFont;
}
</style>
6. CSS3 2D 转换
Internet Explorer 10、Firefox 以及 Opera 支持 transform 属性。
Chrome 和 Safari 需要前缀 -webkit-。
注释:Internet Explorer 9 需要前缀 -ms-。
通过 CSS3 转换,我们能够对元素进行移动、缩放、转动、拉长或拉伸。
1. translate()方法 (位置移动)
通过 translate() 方法,元素从其当前位置移动,根据给定的 left(x 坐标) 和 top(y 坐标) 位置参数:
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() 方法,元素顺时针旋转给定的角度。允许负值,元素将逆时针旋转。
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 轴)参数:
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 轴)参数:
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 轴以给定的度数进行旋转。
div {
transform: rotateX(120deg);
-webkit-transform: rotateX(120deg); /* Safari 和 Chrome */
-moz-transform: rotateX(120deg); /* Firefox */
}
2. rotateY() 方法(Y 轴旋转)
通过 rotateY() 方法,元素围绕其 Y 轴以给定的度数进行旋转。
div {
transform: rotateY(130deg);
-webkit-transform: rotateY(130deg); /* Safari 和 Chrome */
-moz-transform: rotateY(130deg); /* Firefox */
}
8. CSS3 过渡(transition)
CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。
1. transition: width
应用于宽度属性的过渡效果,时长为 2 秒:
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(多项改变)
如需向多个样式添加过渡效果,请添加多个属性,由逗号隔开:
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. 使用所有过渡属性
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)
属性的名称,花费的时间,时间曲线,何时开始
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”
@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 秒:
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% 完成时再次改变:
@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. 改变背景色和位置:
@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. 使用所有动画属性
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 属性
动画的名称,一个周期所花费的秒,速度曲线,何时开始,播放的次数
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 元素中的文本分隔为三列:
div{
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari 和 Chrome */
column-count:3;
}
2. CSS3 规定列之间的间隔(column-gap)
规定列之间 40 像素的间隔:
div{
-moz-column-gap:40px; /* Firefox */
-webkit-column-gap:40px; /* Safari 和 Chrome */
column-gap:40px;
}
3. CSS3 列规则(column-rule)
规定列之间的宽度、样式和颜色规则:
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 元素可由用户调整大小:
div{
resize:both;
overflow:auto;
}
2. CSS3 Box Sizing
box-sizing 属性允许您以确切的方式定义适应某个区域的具体内容。
border 或 padding的数值计入父宽高内(意思为不会增加父容器宽度)。
规定两个并排的带边框方框:
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 像素处的轮廓:
div{
border:2px solid black;
outline:2px solid red;
outline-offset:15px;
}
三、编写 CSS 注意事项
1. 修饰选择器(尽量少用)
能写.nav{}
就尽量不要写 ul.nav{}
。过分修饰选择器将影响性能,影响 class 复用性,会增加选择器私有度。这些都应当竭力避免的。
如果想描述我们规划的 class 作用范围,可以在选择器前加上注释,如下写法:
/*ul*/
.nav{}
这样我们就能在不影响代码私有度的前提下获知 class 作用范围。
2. 布局(宽度和高度)
所有内部组件都不要声明宽度,而由其外层父容器块(格栅系统)来决定。理想情况下,格栅系统应当用百分比设定。
坚决不要声明高度。高度应当仅用于尺寸已经固定的东西,例如图片。在 p,ul,div 等元素上不应当声明高度。如果需要的话可以写 line-height,这个更加灵活。。
3. 简写(谨慎使用)
编写像
background:red;
这样的属性的确很省事,但是你这么写的意思其实是同时声明
background-image:none;
background-position:top left;
background-repeat: repeat;
background-color:red;
最优应当改为
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 方面可能根本就没问题。所以要治本,而不是单纯治标。