CSS使用方法

       css就是规定各种显示风格样式的名称和设置值的规则。它有4种方式可以将样式加入到HTML中，分别是内联样式表、嵌入样式表、外联样式表、输入样式表。

       ①内联样式表：在html标签中直接使用style属性。它适用于只需要将一些简单的样式应用于某个独立的元素的情况。在使用时，需要在head标签中添加meta标签，如下：

<meta  http-equiv=”Content-Style-Type”   content=”text/css” >

使用方法如下：

<input  style=”border:2px”  name=”username”  type=”text”>

       ②嵌入样式表：在head标签内添加style标签对，在标签对中定义需要的样式。如下：

<style type=”text/css”>

td{font:7pt;color:blue}

</style>

       ③外联样式表：将style标签内的样式语句定义在扩展名为.css的文件中，通过link标签引入样式文件。如下：

<link  rel=”stylesheet”  href=”/css/default.css” >

属性rel指定这里连接的是一个独立的css文件，href属性给出所要连接的css文件的URL地址。

       ④导入样式表：使用css的@import命令将一个外部样式文件输入到另外一个样式文件中，使之成为被输入到的样式文件的一部分。如下：

<style type=”text/css”>

@import url(/css/style.css)

</style>

 

    下面介绍一下样式规则选择器。

    样式的定义分为两部分：一是，定义样式规则选择器，它主要包括HTML标签选择器、类选择器、ID选择器、通用选择器和伪类选择器；二是，定义具体的样式规则。

       ①HTML标签选择器：在HTML页面中使用的标签，如果在css中被定义，那么此网页的所有该标签都将按照css中定义的样式显示。如下：

<style>

h1{color:red}

h4{color:blue}

p{font-weight:bold}

</style>

       ②类选择器：使用HTML标签的class属性引入css中定义的样式规则的名字，class属性指定的样式的名字必须是以“.”开头。它常用来定义一组功能或者格式相同的HTML标签元素。如下：

<style type=”text/css”>

.firstcss{background-color:#8866CC;}

</style>

使用方式如下：

<td class=”firstcss” ></td>

        ③ID选择器：用来定义某一个特定的HTML元素，定义的css必须以“#”开头。

<style type=”text/css”>

#secondcss{background-color:#8866CC;}

</style>

使用方式如下：

<td  id=” secondcss” ></td>

       ④通用选择器：它的作用就像通配符，匹配所有的可用元素。如下：

*{

    padding:0

    margin:2

}

       ⑤伪类选择器：对同一个HTML元素的各种状态和其所包括的部分内容的一种定义方式。如下：

<style type=”text/css”>

td.t1{background-color:#8866CC;}

td.t2{background-color:#8877CC;}

td.t3{background-color:#8833CC;}

</style>

使用方式如下：

<td  class=”t1” ></td>

<td  class=”t2” ></td>

 

       总结：外联样式表和导入样式表推荐使用，因为多个HTML文档可以共享同一个样式文件，且修改样式表文件的时候不用打开HTML文档。类选择器和ID选择器推荐使用，因为多个HTML文档或者多个元素可以共享同一个样式，且修改样式的时候不用打开HTML文档。样式规则的注释仅需要在注释内容前面加上/*，在其后加上*/即可。