博学谷前端 CSS外观属性及标签语义化

1. CSS外观属性

1.1 color:文本颜色

color属性用于定义文本的颜色，其取值方式有如下3种：

1.预定义的颜色值，如red，green，blue等。

2.十六进制，如#FF0000，#FF6600，#29D794等。实际工作中，十六进制是最常用的定义颜色的方式。

3.RGB代码，如红色可以表示为rgb(255,0,0)或rgb(100%,0%,0%)。

需要注意的是，如果使用RGB代码的百分比颜色值，取值为0时也不能省略百分号，必须写为0%。

小技巧：

1.一般情况下颜色我们喜欢小写字母 比如 #ff0000。

2.css我们颜色简写 比如 #ff0000 可以简写为 #f00 #ff00ff 简写为 #f0f

1.2 line-height:行间距

ine-height属性用于设置行间距，就是行与行之间的距离，即字符的垂直间距，一般称为行高。line-height常用的属性值单位有三种，分别为像素px，相对值em和百分比%，实际工作中使用最多的是像素px。

小技巧：

一般页面中的行高设置比字号大7~8像素左右就可以了, 比如当前使用14像素的字号，行高设为24像素左右合适。

1.3 text-align:水平对齐方式

text-align属性用于设置文本内容的水平对齐，相当于html中的align对齐属性。其可用属性值如下：

left：左对齐（默认值）

right：右对齐

center：居中对齐

1.4 text-indent:首行缩进

text-indent属性用于设置首行文本的缩进，其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%，允许使用负值, 建议使用em作为设置单位。

2. 标签语义化

语义化的主要目的就是让大家直观的认识标签(markup)和属性(attribute)的用途和作用

语义化的网页的好处，最主要的就是对搜索引擎友好，有了良好的结构和语义你的网页内容自然容易被搜索引擎抓取。

核心：合适的地方给一个最为合理的标签。

语义是否良好： 当我们去掉CSS之后，网页结构依然组织有序，并且有良好的可读性。

不管是谁都能看懂这块内容是什么。

遵循的原则：先确定语义的HTML ，再选合适的CSS。

小技巧：

1.重语义的地方多用有语义的标签，比如 h 和 p 等等，少用没有语义的标签比如 div span 等等。

2. 如果有地方可以用p 又可以用div，特别是文字段落， 优先选用 p标签（结构更清晰）

3.少用纯样式标签 比如 b u font，可以运用css样式。 如果有强调的地方，可以考虑 strong em 等 有强调语义的标签。

学IT，上博学谷
感谢博学谷老师们强大的技术储备