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地址。

      

<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>
       
<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文档。样式规则的注释仅需要在注释内容前面加上/*,在其后加上*/即可。