隔了好几天，继续学习！
菜鸟教程CSS实例：http://www.runoob.com/css/css-examples.html
W3SCHOOL HTML参考手册：http://www.w3school.com.cn/tags/tag_a.asp
数了一下后面的练习还是有很多的，本篇学习（练习）5个部分：文本、字体、链接、列表、表格。
———————————————文本、字体、链接、列表、表格练习———————————————
（1）文本练习：
文本对齐原图：
练习图：
练后感：比较简单，text-align（center、left、right），<b>，
* "；（“）
文本的其他属性：由于看了一下这些属性除了text-align、color其余的都不怎么熟悉，就一起都学习+练习了吧~
这部分的练习结果就不写了，太基础了。。。整理了一个表格，勉强看看
| 属性 | 描述 | 语法/备注 | 值/样例 |
| color | 设置文本颜色 | / | rgb(255,255,255) 、#123456 、red |
| direction | 设置文本方向 | / | ltr、rtl... |
| line-height | 设置行高 | 在大多数浏览器默认行高约20 px | normal、number(倍数)、length(px)、percent(%)、inherit |
| text-align | 对齐元素中的文本 | / | left、right、center、inherit |
| text-decoration | 向文本添加修饰 | / | none、underline、overline、line-through、blink、inherit |
| text-indent | 缩进元素中文本的首行 | / | 50px |
| word-spacing | 设置字间距 | / | 50px |
| letter-spacing | 设置字符间距 | / | 50px |
| text-shadow | 设置文本阴影 | text-shadow: h-shadow v-shadow blur color; | 20px 20px 20px #123456 |
| text-transform | 控制元素中的字母大小写 | / | uppercase、lowercase |
| unicode-bidi | 设置或返回文本是否被重写 | / | normal、embed、bidi-override、initial、inherit |
| vertical-align | 设置元素的垂直对齐 | / | |
| white-space | 设置元素中空白的处理方式 | / | normal(默认忽略)、pre(保留)、nowrap(不换行)、pre-wrap()、pre-line()、inherit |
（2）字体练习
练习题：
# 设置文本的字体：font-family
# 设置字体大小：font-size
用px设置的字体的大小
用em设置的字体的大小
用百分比和em设置字体的大小
# 设置字体样式：font-style
# 设置字体的异体：font-variant
# 设置字体的粗细：font-weight
# 在一个声明的所有字体属性：font
贴个小表格：
| font | 在一个声明中设置所有的字体属性 | 可行顺序之一：font-style font-variant font-weight font-size/line-height font-family | / |
| font-family | 指定文本的字体系列 | family-name 、generic-family | / |
| font-size | 指定文本的字体大小 | 单位：px、em、rem | / |
| font-style | 指定文本的字体样式 | / | normal、italic(斜体)、oblique(倾斜)、inherit |
| font-variant | 以小型大写字体或者正常字体显示文本 | / | normal、small-caps(显示小型大写字母的字体) |
| font-weight | 指定字体的粗细 | 100-900：400为normal | normal、bold、bolder、lighter、inherit、100-900 |
知识点：
* em：
子元素字体大小的em是相对于父元素字体大小；
元素的width/height/padding/margin用em的话是相对于该元素的font-size
（放个链接）css中单位em和rem的区别：https://www.cnblogs.com/koubazhuanshu/p/6985331.html
* rem：
rem是全部的长度都相对于根元素，根元素是谁？<html>元素。
通常做法是给html元素设置一个字体大小，然后其他元素的长度单位就为rem。
* font顺序：
font 简写属性在一个声明中设置所有字体属性。
可设置的属性是（按顺序）： "font-style font-variant font-weight font-size/line-height font-family"
font-size和font-family的值是必需的。如果缺少了其他值，默认值将被插入，如果有默认值的话。
（3）链接
练习题：
# 为访问/未访问链接添加不同的颜色：a:link、a:visited、a:hover、a:active
# 在链接上使用文本装饰：text-decoration
# 指定链接的背景颜色：background-color、background
# 超链接添加其他样式：改变文字颜色；改变背景颜色；改变字号；改变字体；改变文字修饰
# 高级 - 创建链接框：background
知识点：
* link、visited、hover、active
a:link {color:#000000;} /* 未访问链接*/
a:visited {color:#00FF00;} /* 已访问链接 */
a:hover {color:#FF00FF;} /* 鼠标移动到链接上 */
a:active {color:#0000FF;} /* 鼠标点击链接时 */a:hover 必须跟在 a:link 和 a:visited后面
a:active 必须跟在 a:hover后面
以上练习题都是基于了解<a>的4个状态的情况下添加的样式。
* 链接的常见样式：见练习题（插一个gif动图来看看效果 ↓↓↓）
* href是Hypertext Reference的缩写（来源百度百科）
（4）列表
练习题：
# 列表中所有不同的列表项标记
# 设置作为列表项标记的图像
# 使用跨浏览器解决方案设置一个列表项标记的图像
# 在一个声明中的所有列表属性
知识点：
* 列表
无序列表：<ul> square、circle...
有序列表：<ol> upper-roman、lower-alpha....
* 列表属性
list-style、list-style-type、list-style-position、list-style-image
？ 遇到一个问题：当list-style-image引入的图片很大时（如下图），如何调整可以使图片与文字大小相符呢？
目前还没搜索到合适的答案。
（5）表格
练习题：
# 指定一个表的Th，TD元素和黑色边框：border
# 使用border-collapse
# 指定表格的宽度和高度：width、height
# 设置内容的水平对齐方式：text-align
# 设置内容的垂直对齐：：vertical-align
# 指定TH和TD元素的填充：padding
# 指定表格边框的颜色：border
# 设置表格标题的位置：capital-side
# 创建一个奇特的表
知识点：
* border-collapse：separate/collapse
在上面的例子中的表格有双边框。这是因为表和th/ td元素有独立的边界。
为了显示一个表的单个边框，使用 border-collapse属性。
* capital-side：设置表格标题的位置 top/bottom
* 练习
练后感：遇到不会的就看看样例代码，勉强做出来了，字体不想换了就没换；但是没搞懂是怎么实现每列不同宽度。
学习（练习）之路还很长远，继续努力！