一、字体样式（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}