标签：
一、字体样式（font）
1、 font-style ：指定文本字体样式。
取值：
1）normal：指定文本字体样式为正常的字体（默认值）
2）italic：指定文本字体样式为斜体。对于没有设计斜体的特殊字体，如果要使用斜体外观将应用oblique。
3）oblique：指定文本字体样式为倾斜的字体。人为的使文字倾斜，而不是去选取字体中的斜体字。
代码如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .normal{font-style: normal;} .italic{font-style: italic;} .oblique{font-style: oblique;} </style> </head> <body> <p class="normal">看下字体是什么</p> <p class="italic">看下字体是什么</p> <p class="oblique">看下字体是什么</p> </body> </html>
2、font-weight：指定文本字体的粗细。
取值：
1）normal：正常的字体。相当于数字值400
2）bold：粗体。相当于数字值700。
3）bolder：定义比继承值更重的值
4）lighter：定义比继承值更轻的值
5）integer：用数字表示文本字体粗细。取值范围：100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
代码如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .normal{font-weight:normal;} .bold{font-weight:bold;} .bolder{font-weight:bolder;} .lighter{font-weight:lighter;} .number{font-weight:700;} </style> </head> <body> <p class="normal">这是一个段落</p> <p class="bold">这是一个段落</p> <p class="bolder">这是一个段落</p> <p class="lighter">这是一个段落</p> <p class="number">这是一个段落</p> </body> </html>
3、 font-size：指定文本字体尺寸。
取值：
1）absolute-size：根据对象字号进行调节。以 medium 作为基础参照，xx-small相当于medium 3/5 (h6)，x-small: 3/4，small: 8/9 (h5)，medium: 1 (h4)，large: 6/5 (h3)，x-large: 3/2 (h2)，xx-large: 2/1 (h1)。
2）relative：相对于父对像中字号进行相对调节。取值：larger | smaller
3）length：用长度值指定文字大小。不允许负值。
4）percentage：用百分比指定文字大小。其百分比取值是基于父对象中字体的尺寸。不允许负值。
代码如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .xx-small{font-size:xx-small;} .x-small{font-size:x-small;} .small{font-size:small;} .medium{font-size:medium;} .large{font-size:large;} .x-large{font-size:x-large;} .xx-large{font-size:xx-large;} .smaller{font-size:smaller;} .larger{font-size:larger;} .float{font-size:20px;} .percentage{font-size:20px;} .percentage span{font-size:60%;} </style> </head> <body> <p class="xx-small">这里是h6</p> <p class="x-small">这里是h5</p> <p class="small">这里是small</p> <p class="medium">这里是正常1(h4)</p> <p class="large">这里是h3</p> <p class="x-large">这里是h2</p> <p class="xx-large">这里是h1</p> <p class="smaller">这里是小一点</p> <p class="larger">这里是大一点</p> <p class="float">这里是20px</p> <p class="percentage">这里是20px<span>这里只有60%</span></p> </body> </html>
4、 font-family：指定文本使用某个字体或字体序列。
说明：1）序列可包含嵌入字体；2）一般字体引用可以不加引号，如果字体名包含了空格、数字或者符号（如连接符）、中文则需加上引号，避免引发错误。
3）user agent会遍历定义的字体序列，直到匹配到某个字体为止。
取值：
1）family-name：字体名称。按优先顺序排列。以逗号隔开。如果字体名称包含空格或中文，则应使用引号括起。
2）generic-family：字体序列名称。
代码如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> p{font-family: "微软雅黑" "宋体" arial;} </style> </head> <body> <p>字体测试</p> </body> </html>
二、颜色（Color）
说明：
颜色属性值分三种值的格式
1、英文单词，比如red，yellow，blue......
2、十六进制表示方式，#开头，6个十六进制的字符或数字组合。比如：#FFFFFF，#000000，#CCAABB，#22BCAD。十六进制：0-9和a-f。
3、RGB模式，红0-255,绿0-255，蓝0-255。比如：RGB（120,33,234）
RGBA(255,0,0,.5) RGBA模式，最后的A表示透明度50%。
代码如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{ width: 200px; height: 200px; } .English{ color: white; background-color: green; } .FFFFFF{ color: #FFFFFF; background-color: #FF0000; } .rgb{ color: rgb(255,251,240); background-color: rgb(0,0,255); } .rgba{ background-color: rgba(255,0,0,.5); } </style> </head> <body> <div class="English">这里是英文单词</div> <div class="FFFFFF">这里是十六进制</div> <div class="rgb">这里是RGB</div> <div class="rgba">然而这里是RGBA透明的</div> </body> </html>
三、文本修饰（Text Decoration）
1、text-decoration：控制文本装饰线条。
取值：
1）text-decoration-line：指定文本装饰的种类 可取值：none | underline | overline | line-through | blink
2）text-decoration-style：指定文本装饰的样式 可取值：solid：实线|double：双线|dotted：点状线条|dashed：虚线|wavy：波浪线
3）text-decoration-color：指定文本装饰的颜色 可取值：color颜色。
代码如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .none{text-decoration: none;} .underline{text-decoration: underline;} .overline{text-decoration: overline;} .line-through{text-decoration: line-through;} .blink{text-decoration: blink;} </style> </head> <body> <ul> <li class="none">无装饰文字</li> <li class="underline">下划线</li> <li class="overline">上划线</li> <li class="line-through">贯穿线</li> <li class="blink">带闪烁（- -！我就尼玛！只有火狐浏览器支持的）</li> </ul> </body> </html>
2、text-shadow（文字阴影）：控制文字的阴影部分。
取值：
text-shadow: h-shadow v-shadow blur color;
1)h-shadow：必需。水平阴影位置。允许负值。
2)V-shadow：必需。垂直阴影位置。允许负值。
3)blur：可选。模糊的距离。
4)color：可选。阴影的颜色。
代码如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> h1{text-shadow: 2px 2px 2px red;} </style> </head> <body> <h1>是时候展现真正的技术了</h1> </body> </html>
四、尺寸（Dimension）
1、宽度（width）：width:auto | length
例如：
p{width:30px;}
p{width:50%;}
2、高度（height）：height:auto | length
例如：
p{height:50px;}
p{height:50%}
五、外边距（margin）：检索或设置对象四边的外延边距。margin:auto | length
margin-top：设置上边的外边距。
margin-bottom：设置下边的外边距。
margin-left：设置左边的外边距。
margin-right：设置右边的外边距。
缩写：
margin:上 右 下 左
margin:上下 左右
margin:上 左右 下
代码如下：
p{margin:20px;}
六、内边距（padding）：检索或设置对象四边的内部边距。paddi:length
padding-top：设置上边的内边距。
padding-bottom：设置下边的内边距。
padding-left：设置左边的内边距。
padding-right：设置右边的内边距。
缩写：
padding:上 右 下 左
padding:上下 左右
padding:上 左右 下
代码如下：
div{padding:10px}
标签：
原文地址：http://www.cnblogs.com/lzh739887959/p/5759160.html
