文字样式

字体属性：

Color: 颜色名称/十六进制/RGB码 #FFF和#FFFFFF都表示白色
Font-family：字形名称/字形名称.... 可以有多个字形，但只取一个，从头开始选直到找到一个适合的。
Font-size: 数值+%/数值+单位pt、px、em、ex
Font-style：normal普通/italic斜体/oblique斜体
Font-weight: normal普通/bold粗体/bolder超粗体/lighter细体

<html>  
<body>  
<h1 style="font-family:verdana">A </h1>  
<p style="font-family:arial;color:red;font-size:20px;">哈哈</p>  
</body>  
</html>

属性：

文字水平对齐： text-align: left/center/right/justify两端对齐；
首先缩进：Text-indent: 数值+%/数值+单位pt、px、em、ex
字符间距：letter-spacing: normal/ 数值+单位pt、px、em、ex
行高： line-height: 数值+单位
是否换行：word-wrap: break-word

<html>  
<body>  
<h1 style="text-align:center">This is a 标题</h1>  
<p>这个标题在这页的中间</p>  
</body>  
</html>

文字效果属性

垂直对齐：Vertical-align：baseline一般位置/super上标/sub下标/top顶端对齐/middle垂直剧中/botton底端对齐
文字装饰：text-decoration: none/underline下划线/line-through删除线/overline上划线
转换字母大小：text-transform：none/lowercase/uppercase/capitalize首字母大写
增加阴影：text-shadow

盒子模型初步

概念：几乎所有标签其实都是一个盒子——而所谓盒子，无非就是一个“矩形的区域范围而已”。其实所谓网页，无非是一个盒子套一个盒子。

在css中，每个盒子模型都是由内容（content）、边框（border）内边距（padding）、外边距（margin）四个部分组成；
组成盒子模型的四部分也可以这样理解：

**内容（content）就是盒子里装的东西；

**边框（border）就是盒子本身了；

**内边距(padding)就是怕盒子里装的东西（贵重的）损坏而添加的泡沫或者其它抗震的辅料；

**外边距（margin）就是在有很多盒子摆放的时候不能全部堆在一起，要留一定空隙保持通风，同时也为了方便取出。

906897-20160511230352593-1097179453.png

盒子的两种初始状态（基本表现）：

类似div的盒子：一个盒子自动“占据一行”（不管其内部内容多少）：这就是“块盒子”（块元素）。常用块盒子：
p, hr, h1~h6, table, form, ul, li, ol, dl, dt, dd, blockquote, pre,
特点：可以设置固定的宽高，margin，padding，

类似span盒子：一个盒子中的内容会跟同类的盒子并排在一行出现，除非该行已满，则会自然到下一行——类似文字的表现特性。：这就是行内盒子（行内元素）。行内盒子通常放“最终的数据内容”，比如文本，图片。其他行内盒子：
b, strong, font, i, u, a, img, input, textarea, select,
特点：宽高不能设定，而是由其内容“撑出”，margin和padding没有上下方面的表现。