测试小工具_Css碎碎念

CSS主要用于定义怎么显示HTML元素，使用外部样式表可与html代码分离，减少耦合。文件保存后缀名为.css。本文仅针对目前已用到的部分模块进行介绍说明。

CSS模块

1.id和class选择器，想要在html元素中设置CSS样式，需要在元素中设置“id”和"class"选择器。

id选择器可以为标有特定id的HTML元素指定特定的样式，CSS中id选择器以“#”来定义。比如：

<p id = "para1">每个表格从一个 table 标签开始。</p>

#para1

{

text-align:center;

color:red;

}

此时html中的段落会根据css文件中的设定来进行显示。

注：id属性不要以数字开头，数字开头的id在Mozilla/Firefox 浏览器中不起作用。

class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。 

class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示，比如：

<h1 class="center">标题居中</h1>

<p class="center">段落居中。</p>

.center

{

text-align:center;

}

此时html中的段落和标题会根据css文件中的设定来进行显示。

注：类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用。

两者使用过程中需关注的点：

1)需要单独操作某一个元素时，Javascript和Css可通过id属性完成；需要操作属于同一个class下的所有元素的时候，Javascript和Css可通过class属性完成

2)id是先找到结构/内容，再给它定义样式；class是先定义好一种样式，再套给多个结构/内容。

2.div

目前未用到，待用到后再补充

3.span

目前未用到，待用到后再补充

4.其他模块：

CSS注释以 /* 开始, 以  */ 结束