1. 概述
css是英文Cascading Style Sheets的缩写,称为层叠样式表，用于对页面进行美化。
存在方式有三种：元素内联、页面嵌入和外部引入，比较三种方式的优缺点。
语法：style = 'key1:value1;key2:value2;'
- 行内式：
在标签中使用 style='xx:xxx;'单独加在某个标签上，style增加其他属性需要以分号分隔；
<div style="background-color:darkgrey;height: 100px;100px">我是div</div>
- 嵌入式：
在页面中嵌入 < style type="text/css"> </style >块
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
background-color:darkgrey;
height: 100px;
100px;
}
</style>
</head>
- 链接式：
将.css文件引入到HTML文件中，创建一个.css文件，将css文件放入link标签中
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="mystyle.css" rel="stylesheet" type="text/css"/>
</head>
- 导入式：
将一个独立的.css文件引入HTML文件中，导入式使用CSS规则引入外部CSS文件，<style>标记也是写在<head>标记中
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
@import"mystyle.css"; #此处要注意.css文件的路径
</style>
</head>
注意：import 会先解析页面所有信息，先不会渲染页面，等待所有信息加载后再渲染页面，如果加载慢会出现无渲染页面，导致用户体验不好，推荐使用嵌入式和链接式
2. CSS选择器
2.1 基础选择器
2.1.1 通用元素选择器
通用元素选择器，匹配任何元素
*{
color: darkgrey;
}
2.1.2 标签选择器
匹配所有使用XX标签的元素；
例如，需要选择所有标签为div的元素设置样式
div{
color: grey;
background-color: antiquewhite;
}
2.1.3 class选择器
.info 或E.info ：class属性选择器，匹配所有class属性中包含info的元素，class属性可以重复，即多个class属性相同的元素；
.cs1{
color: grey;
background-color: antiquewhite;
}
<div class="cs1">我是div1标签</div>
<div class="cs1">我是div2标签</div>
<p class="cs1">我是p标签</p>
<!-- 以上三个标签都会变成.cs1的样式 -->
2.1.4 id选择器
#info或E#info :id属性选择器，匹配所有id属性等于info的元素
#cs1{
color: grey;
background-color: antiquewhite;
}
<div id="cs1">我是div1标签</div>
<div class="cs1">我是div2标签</div>
<!-- 以上标签，只有id=cs1的标签会变成#cs1的样式-->
2.2 组合选择器
2.2.1 多元素选择器
div,p：多元素选择器，同时匹配所有div标签元素或p标签元素，div和p之间用逗号分隔
div,p{
color: grey;
background-color: antiquewhite;
}
<div id="cs1">我是div1标签</div>
<p class="cs1">我是p标签</p>
<span>我是span</span>
<!-- 以上标签，除span标签，即div和p标签都会变成设置的样式-->
2.2.2 后代元素选择器
div p：后代元素选择器，匹配所有属于div标签元素后代的p标签元素，即所有类似形式的所有后代，子子孙孙，div和p之间用空格分隔;
div p{
color: grey;
background-color: antiquewhite;
}
<div id="cs1">
<p class="cs1">我是p1标签</p>
<div class="cs3">
<p class="cs1">我是p2标签</p>
<div class="cs2">
<p id="cs1">我是p3标签</p>
</div>
</div>
</div>
<!-- 以上标签，p1、p2、p3均会变成设置的样式 -->
<!-- 扩展：可以结合基础选择器使用，例如div #cs1，div .cs1等 -->
2.2.3 子元素选择器
#outer > .c1 ：子元素选择器，匹配所有#outer元素的子元素.c1，只匹配到子元素，子元素的子元素匹配不到;
<style>
#outer>.c1{
color: aqua;
}
</style>
<div id="outer">
<p class="c1">p1.....</p>
<div class="c2">
<p class="c1">p2....</p>
</div>
</div>
<!-- 以上标签，p1会变成设置的样式，p2不会变，即儿子辈的会变，儿子辈的后代不会变-->
2.2.4 毗邻元素选择器
#outer + .c1:毗邻元素选择器，匹配所有紧随#outer元素之后的同级元素.c1 ，即只匹配挨着的下一个F元素，如不相邻也不起作用;
<style>
#outer+.c1{
color: aqua;
}
</style>
<p class="c1">p1....</p>
<div id="outer">
</div>
<p class="c1">p2.....</p>
<div class="c1">div1...</div>
<!-- 以上标签，p1不会变更样式，p2为挨着的下一个class=c1的元素，所以p2会变更样式，div1的class属性也满足但并未挨着id=outer的元素，故不起作用 -->
2.3 属性选择器
根据属性进行筛选匹配，只有第一个input标签匹配上对应的样式
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
input[name="James"]{ 20px;height: 20px;}
</style>
</head>
<body>
<input type="text" name="James">
<input type="text">
<input type="password">
</body>
3. 常用属性
3.1 颜色属性
color:red
①英文单词形式，例如：red，yellow
②编码形式，例如：#cc3399，如双重可简写#c39
③基调颜色透明度设置，例如：rgb（255,255,255,0.5），red、green、blue三色透明度设置,最后一个值设置透明度
3.2 font字体属性
font:; 在一个声明中设置所有字体属性
font-size: 20px/50%/larger ；设置字体大小
font-family:'Lucida Bright' ；文本的字体系列
font-weight: lighter/bold/border/ ；字体的粗细
font-style:normal/oblique/italic ；文本的字体样式
font-variant:; 规定是否以小型大写字母的字体显示文本
font-stretch:; 收缩或拉伸当前的字体系列
font-size-adjust:;为元素规定 aspect 值
3.3 background背景属性
background: ;在一个声明中设置所有的背景属性。
background-color: rgb(238, 238, 238); 设置背景颜色
background-image: ；设置背景图片
background-image: url(img/630.jpg)
background-repeat：平铺方式，设置是否及如何重复背景图像
no-repeat 不平铺，repeat 平铺满, repeat-x 平铺x轴, repeat-y 平铺y轴
background-size: 图片大小设置，auto；设置背景图片的尺寸
background-position：设置图像的开始位置
center 居中；left center左侧上下居中；top，bottom，right类似；
background-position:-76px -60px;
background-attachment: ;设置背景图像是否固定或者随着页面的其余部分滚动
background-clip: ; 规定背景的绘制区域
background-origin: ; 规定背景图片的定位区域
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="height: 100px;"></div>
<div style="background-image: url(icon_18_118.png);background-repeat:no-repeat;height: 20px;20px;border: 1px solid red;"></div>
</body>
</html>
例子：只显示第一个图标，可以调 background-position的x轴和y轴换不同的图标。-76x轴 ，60y轴
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .pg-body{ background-image: url(img/630.jpg); height: 110px; width:110px; border: 1px solid red; background-repeat: no-repeat; background-position: -76px -60px; } </style> </head> <body> <div style="height: 100px"></div> <div class="pg-body"></div> </body> </html>
<style> .inp{ height: 40px;width: 246px;padding-right: 54px; } .span{ background-image: url(img/a.jpg); display: inline-block; height: 40px; width: 40px; background-repeat: no-repeat; background-position: -944px -38px; position:absolute; top: 3px; right: 0; } </style> <div style="position: relative;height: 40px; 300px;"> <input type="text" class="inp"> <span class="span"></span> </div>
3.4 文本属性
text-align：center 文本居中
line-height：xxpx；行高 ，针对文本处理
width：xxpx；宽 %50
height：xxpx；高 %50
text-indent：xxpx 首行缩进，基于父元素
letter-spacing：xxpx；字母与字母之间距离
word-spacing：xxpx ；单词之间距离
direction：rt1
text-transform：capitalize；将单词首字母大写
text-decoration:none; 去掉a标签的下划线
min-height:;设置默认最小高度
min-;设置最小宽度
max-height:;设置最大高度
max-;设置最大宽度
height：auto！important 以此样式为准
vertical-align：xxpx;垂直居中
opacity：0.3 透明度
3.5 border CSS样式边框
border-style：solid；边框样式
border-color：red；边框颜色
border-width：1px；边框宽度
border-radius：20%；边框变成圆角
border:1px solid red;
border-left:1px solid red; bottom , right ,top
|
在一个声明中设置所有的边框属性。 |
|
|
在一个声明中设置所有的下边框属性。 |
|
|
设置下边框的颜色。 |
|
|
设置下边框的样式。 |
|
|
设置下边框的宽度。 |
|
|
设置四条边框的颜色。 |
|
|
在一个声明中设置所有的左边框属性。 |
|
|
设置左边框的颜色。 |
|
|
设置左边框的样式。 |
|
|
设置左边框的宽度。 |
|
|
在一个声明中设置所有的右边框属性。 |
|
|
设置右边框的颜色。 |
|
|
设置右边框的样式。 |
|
|
设置右边框的宽度。 |
|
|
设置四条边框的样式。 |
|
|
在一个声明中设置所有的上边框属性。 |
|
|
设置上边框的颜色。 |
|
|
设置上边框的样式。 |
|
|
设置上边框的宽度。 |
|
|
设置四条边框的宽度。 |
|
|
在一个声明中设置所有的轮廓属性。 |
|
|
设置轮廓的颜色。 |
|
|
设置轮廓的样式。 |
|
|
设置轮廓的宽度。 |
|
|
定义边框左下角的形状。 |
|
|
定义边框右下角的形状。 |
|
|
简写属性，设置所有 border-image-* 属性。 |
|
|
规定边框图像区域超出边框的量。 |
|
|
图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)。 |
|
|
规定图像边框的向内偏移。 |
|
|
规定用作边框的图片。 |
|
|
规定图片边框的宽度。 |
|
|
简写属性，设置所有四个 border-*-radius属性。 |
|
|
定义边框左上角的形状。 |
|
|
定义边框右下角的形状。 |
|
|
box-decoration-break |
|
|
向方框添加一个或多个阴影。
|
css3动漫属性
| 属性 | 描述 | CSS |
|---|---|---|
| @keyframes | 规定动画。 | 3 |
| animation | 所有动画属性的简写属性，除了 animation-play-state 属性。 | 3 |
| animation-name | 规定 @keyframes 动画的名称。 | 3 |
| animation-duration | 规定动画完成一个周期所花费的秒或毫秒。 | 3 |
| animation-timing-function | 规定动画的速度曲线。 | 3 |
| animation-delay | 规定动画何时开始。 | 3 |
| animation-iteration-count | 规定动画被播放的次数。 | 3 |
| animation-direction | 规定动画是否在下一周期逆向地播放。 | 3 |
| animation-play-state | 规定动画是否正在运行或暂停。 | 3 |
| animation-fill-mode | 规定对象动画时间之外的状态。 | 3 |
3.6 float CSS样式浮动
正常文档流：将元素（标签）在进行排版布局时按照从上到下、从左到右的顺序分布排版的流；
脱离文档流：将元素从文档流中取出，进行覆盖，其他元素会按文档流中不存在该元素重新布局；
float 浮动标签属性（非完全脱离）：
假如某个div元素A是浮动的，如果A元素上一个元素也是浮动的，那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素，那么A元素会被挤到下一行)；如果A元素上一个元素是标准流中的元素，那么A的相对垂直位置不会改变，也就是说A的顶部总是和上一个元素的底部对齐。
注意：当初float被设计的时候就是用来完成文本环绕的效果，所以文本不会被挡住，这是float的特性，即float是一种不彻底的脱离文档流方式。
float：left，right，both
清除浮动： clear : none | left | right | both
none : 默认值。允许两边都可以有浮动对象
left : 不允许左边有浮动对象
right : 不允许右边有浮动对象
both : 不允许有浮动对象
<style>
#div4{
border:solid 1px lavender;
background-color: rebeccapurple;
height: 100px;
}
#div1{
background-color: darkolivegreen;
height: 100px;
980px;
margin: auto;
}
#div2{
border-left: solid 1px lavender;
height: 100px;
100px;
background-color: darkgray;
float: left;
}
#div3{
border-left: solid 1px lavender;
height: 100px;
100px;
background-color: darkgray;
float: left;
}
#clear{
clear:both;
}
</style>
<div id="div4">
<div id="div1">
<div id="div2">div2</div>
<div id="div3">div3</div>
</div>
<div id="clear"></div>
</div>
注：div2和div3使用float浮动起来，如想将div4的样式显示出来，需增加一个clear标签将架子撑起来，清除浮动
清除浮动第二种方法，overflow：hidden 将溢出的信息隐藏
overflow：auto;不光隐藏并出现滚动条
例三：after 清除浮动。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="css/index.css"> <style> .c1{ height: 30px; width: 30px; background-color: darkgray; border:1px dotted red; float: right; } .c2{ background-color: red; height: 400px; } .d1:after{ content: ""; clear: both; display: block; } </style> </head> <body style="margin: auto;"> <div class="d1"> <div class="c1"></div> <div class="c1"></div> </div> <div class="c2">内容</div> <div class="d1"> <div class="c1"></div> <div class="c1"></div> </div> <div class="c2">内容2</div> </body> </html>
3.7 CSS样式display
display属性：
none 此元素不会被显示。
block 此元素将显示为块级元素，此元素前后会带有换行符。
inline 默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block 行内块元素。
块级标签和行内标签相互转换
<body>
<div style="background-color: red;display: inline">块级</div>
<span style="background-color: #2459a2;display: block">行内</span>
</body>
行内标签：无法设置高度，宽度，padding margin
块级标签：设置高度，宽度，padding margin
<body> <span style="background-color: #2459a2;display: inline-block;height: 50px; 70px">行内</span> <div style="background-color: red;display: inline">块级</div> </body>
注：display:inline-block 既有inline的属性（默认自己有多少占多少）又有block的属性（可以设置高度、宽度、padding、margin）
3.8 margin、padding CSS样式边距
外边距margin
| 属性 | 描述 | CSS |
|---|---|---|
| margin | 在一个声明中设置所有外边距属性。 | 1 |
| margin-bottom | 设置元素的下外边距。 | 1 |
| margin-left | 设置元素的左外边距。 | 1 |
| margin-right | 设置元素的右外边距。 | 1 |
| margin-top | 设置元素的上外边距。 | 1 |
<body>
<div style="border: 2px solid red;height: 70px;">
<div style="background-color: green;height: 50px;
margin-top: 25px;"></div>
</div>
</body>
内边距padding
| 属性 | 描述 | CSS |
|---|---|---|
| padding | 在一个声明中设置所有内边距属性。 | 1 |
| padding-bottom | 设置元素的下内边距。 | 1 |
| padding-left | 设置元素的左内边距。 | 1 |
| padding-right | 设置元素的右内边距。 | 1 |
| padding-top | 设置元素的上内边距。 | 1 |
<body>
<div style="border: 2px solid red;height: 70px;">
<div style="background-color: green;height: 50px;
padding-top: 25px;"></div>
</div>
</body>
4. position
4.1.1 介绍
Position 属性：规定元素的定位类型。即元素脱离文档流的布局，在页面的任意位置显示。
1、主要的值：
①absolute ：绝对定位；脱离文档流的布局，遗留下来的空间由后面的元素填充。定位的起始位置为最近的父元素(postion不为static)，否则为Body文档本身。
②relative ：相对定位；不脱离文档流的布局，只改变自身的位置，在文档流原先的位置遗留空白区域。定位的起始位置为此元素原先在文档流的位置。
③fixed ：固定定位；类似于absolute，但不随着滚动条的移动而改变位置。
④static ：默认值；默认布局。
2、辅助属性：
position属性只是使元素脱离文档流，要想此元素能按照希望的位置显示，就需要使用下面的属性(position:static不支持这些)：
①left ： 表示向元素的左边插入多少像素，使元素向右移动多少像素。
②right ：表示向元素的右边插入多少像素，使元素向左移动多少像素。
③top ：表示向元素的上方插入多少像素，使元素向下移动多少像素。
④bottom ：表示向元素的下方插入多少像素，使元素向上移动多少像素。
上面属性的值可以为负，单位：px 。
4.1.2 定位方式
- position:absolute
绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>；
Absolutely定位使元素的位置与文档流无关，因此不占据空间。
Absolutely定位的元素和其他元素重叠。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1{ height: 80px; width: 80px; background-color: darkgray; position: absolute; bottom:60px; right:60px; } .c2{ height: 80px; width: 80px; background-color: red; } .c3{ height: 80px; width: 80px; background-color: blue; } .c4{ height: 800px; background-color: whitesmoke; } </style> </head> <body style="margin: auto;"> <div class="c1">返回顶部</div> <div class="c2"></div> <div class="c3"></div> <div class="c4"></div> </body> </html>
- positon:relative
相对定位元素的定位是相对其正常位置。
可以移动的相对定位元素的内容和相互重叠的元素，它原本所占的空间不会改变。
一般与absolute配合使用；
写法：relative + absolut
position: absolute 相对于父标签 position: relative 的绝对定位
<div style="position: relative"> <div style="position: absolute;top:0;left: 0;"></div> </div>
例子：relative + absolute
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="css/index.css"> <style> .c1{ height: 400px; width: 600px; border: 4px solid #dddddd; position: relative; top: 40px; left: 200px; } .c2{ height: 40px; width: 40px; position: absolute; top: 0; left: 0; border: 4px solid red; } .c3{ height: 40px; width: 40px; position: absolute; bottom: 0; right: 0; border: 4px solid red; } .c4{ background-color: darkgray; height: 600px; margin-top: 40px; } </style> </head> <body style="margin: auto;"> <div class="c1"> <div class="c2">左上</div> <div class="c3">右下</div> </div> <div class="c4"></div> </body> </html>
- position:fixed
元素的位置相对于浏览器窗口是固定位置。
即使窗口是滚动的它也不会移动：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .c1{ height: 80px; width: 80px; background-color: darkgray; position: fixed; bottom:60px; right:60px; } .c2{ height: 80px; width: 80px; background-color: red; } .c4{ height: 800px; background-color: whitesmoke; } </style> </head> <body style="margin: auto;"> <div class="c1">返回顶部</div> <div class="c2"></div> <div class="c4"></div> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .dc{ height: 5000px; background-color: dodgerblue; z-index: 6; } .pos{ position: fixed; top: 0; left: 0; right: 0; bottom: 0; } .zz{ height: 5000px; background-color: black; opacity: 0.6; z-index: 8; } .one{ position: fixed; background-color:beige; height: 200px; width: 300px; z-index: 10; top:50%; left: 50%; margin-top: -100px; margin-left: -150px; } .flo{ float: right; margin: 10px 120px 0 0; } </style> </head> <body style="margin: auto;"> <!-- 提交页面--> <div class="dc pos"> <input type="text" name="" id=""> <input type="submit" name="" id=""> </div> <!-- 遮罩层--> <div class="zz pos "></div> <!-- 登陆页面--> <div class="one "> <p class="flo">用户名<input type="text"></p> <p class="flo">密码<input type="password"></p> <div style="clear: both"></div> <p><input type="submit"></p> </div> </body> </html>
4.2 hover
适用于光标（鼠标指针）指向一个元素，但此元素未被激活时的样式.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .pg-head{ position: fixed; top: 0; left: 0; right: 0; height: 48px; background-color: #499ef3; line-height: 48px; } .pg-body{ margin-top: 50px; } .w{ width: 980px; margin: 0 auto; } .pg-head .menu{ display: inline-block; padding: 0 10px; color: white; } .pg-head .menu:hover{ background-color: #4dabff; } </style> </head> <body> <div class="pg-head"> <div class="w"> <a class="logo">LOGO</a> <a class="menu">全部</a> <a class="menu">42区</a> <a class="menu">段子</a> <a class="menu">1024</a> </div> </div> <div class="pg-body"> <div class="w">内容</div> </div> </body> </html>
例子：鼠标移上去，a，b变红色字体， b换背景颜色
<style> .items{ background-color: #dddddd; } .items:hover{ color:red; } .items:hover .b{ background-color: #499ef3; } </style> <div class="items"> <div class="a">a</div> <div class="b">b</div> </div>
4.3 overflow
overflow属性指定如果内容溢出一个元素的框，会发生什么。
|
visible |
默认值。内容不会被修剪，会呈现在元素框之外。 |
|
hidden |
内容会被修剪，并且其余内容是不可见的。 |
|
scroll |
内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 |
|
auto |
如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
|
4.4 z-index
z-index:10; 属性指定一个元素的堆叠顺序。
拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
注意： z-index 进行定位元素(position:absolute, position:relative, or position:fixed)。
z-index:10;第一层 z-index:8;第二层 z-index:6;第三层
4.5 opacity
设置一个div元素的透明度级别：0-1
CSS 定位属性（Positioning）
| 属性 | 描述 | CSS |
|---|---|---|
| bottom | 设置定位元素下外边距边界与其包含块下边界之间的偏移。 | 2 |
| clear | 规定元素的哪一侧不允许其他浮动元素。 | 1 |
| clip | 剪裁绝对定位元素。 | 2 |
| cursor | 规定要显示的光标的类型（形状）。 | 2 |
| display | 规定元素应该生成的框的类型。 | 1 |
| float | 规定框是否应该浮动。 | 1 |
| left | 设置定位元素左外边距边界与其包含块左边界之间的偏移。 | 2 |
| overflow | 规定当内容溢出元素框时发生的事情。 | 2 |
| position | 规定元素的定位类型。 | 2 |
| right | 设置定位元素右外边距边界与其包含块右边界之间的偏移。 | 2 |
| top | 设置定位元素的上外边距边界与其包含块上边界之间的偏移。 | 2 |
| vertical-align | 设置元素的垂直对齐方式。 | 1 |
| visibility | 规定元素是否可见。 | 2 |
| z-index | 设置元素的堆叠顺序。 | 2 |
CSS 文本属性
| 属性 | 描述 | CSS |
|---|---|---|
| color | 设置文本的颜色。 | 1 |
| direction | 规定文本的方向 / 书写方向。 | 2 |
| letter-spacing | 设置字符间距。 | 1 |
| line-height | 设置行高。 | 1 |
| text-align | 规定文本的水平对齐方式。 | 1 |
| text-decoration | 规定添加到文本的装饰效果。 | 1 |
| text-indent | 规定文本块首行的缩进。 | 1 |
| text-shadow | 规定添加到文本的阴影效果。 | 2 |
| text-transform | 控制文本的大小写。 | 1 |
| unicode-bidi | 设置文本方向。 | 2 |
| white-space | 规定如何处理元素中的空白。 | 1 |
| word-spacing | 设置单词间距。 | 1 |
| hanging-punctuation | 规定标点字符是否位于线框之外。 | 3 |
| punctuation-trim | 规定是否对标点字符进行修剪。 | 3 |
| text-align-last | 设置如何对齐最后一行或紧挨着强制换行符之前的行。 | 3 |
| text-emphasis | 向元素的文本应用重点标记以及重点标记的前景色。 | 3 |
| text-justify | 规定当 text-align 设置为 "justify" 时所使用的对齐方法。 | 3 |
| text-outline | 规定文本的轮廓。 | 3 |
| text-overflow | 规定当文本溢出包含元素时发生的事情。 | 3 |
| text-shadow | 向文本添加阴影。 | 3 |
| text-wrap | 规定文本的换行规则。 | 3 |
| word-break | 规定非中日韩文本的换行规则。 | 3 |
| word-wrap | 允许对长的不可分割的单词进行分割并换行到下一行。 | 3 |
5. !important
!important是CSS1就定义的语法，作用是提高指定样式规则的应用优先权(参见：W3.org的解释)。
语法:{ sRule!important }
div{color:green !important;}
最好不要使用