前端之CSS

CSS(CasCading Style Sheets)，翻译为层叠样式表，它的主要功能是将内容和表现分离。

在之前学习html时，如果需要对某一部分内容加上特定的样式，比如下：

<font color="red">红色</font>

显示结果：红色

需要在内容外加上标签用以修饰其表现。而如果内容较多或者较为复杂，再逐一修饰会导致可读性变差，且工作繁杂。因此，有必要引入CSS，将内容和表现分离。代码如下：

<style>
p{color:red;}
</style>
<p>红色</p>
<p>红色</p>
<p>红色</p>

这样，就实现了内容和表现部分分离，可以完成同时将<p>标签中的红色字符渲染为红色。
其中<style>标签中的内容，就是表现部分。

CSS的语法非常简单，如：selector{property:value}，中文标记为选择器{属性:值}。<style>为其标签。

选择器分为三种，元素选择器，id选择器和类选择器。

元素选择器：通过标签名选择元素。
如上例的代码中，p就是一个元素选择器，它使得下面内容中所有的<p>标签中的内容都被渲染成红色。

id选择器：
id选择器需要搭配内容中元素的id属性一起使用。
每一个元素的id应该是唯一的，不能重复使用。
如下例<style>标签中，p为元素选择器，#p1和#p2为id选择器，表明渲染内容中具有id="p1"或者id="p2"属性的元素。

<style>
p{color:red;}
#p1{color:blue;}
#p2{color:green;}
</style>

<p>没有id</p>
<p id="p1">id=p1</p>
<p id="p2">id=p2</p>

类选择器：
与id选择器类似，类选择器也需要搭配元素的类属性一起使用。

<style>
.pre{color:blue;}
.latter{color:green;}
</style>
<p class="pre">靠前的</p>
<p class="pre">靠前的</p>
<p class="after">靠后的</p>
<p class="after">靠后的</p>

属性和值的内容较多，于此不展开详细登记，需要的时候可以查询文档。