一.HTML文档应用CSS,有三种方法可供选择。下面对这三种方法进行了概括。
1.内联方式 Inline Styles
内联定义即是在对象的标记内使用对象的style属性定义适用其的样式表属性。
<p style="color:#f00">这一行的字体颜色将显示为红色</p>
2.内部样式块对象 Embedding a Style Block
你可以在你的HTML文档的<head>标记里插入一个<style>块对象。
<style> body{background:#fff;color:#000;} p{font-size:14px;} </style>
3.链入外部样式表 Linking to a Style Sheet
你可以先建立外部样式表文件*.css,然后使用HTML的link对象。
<head> <title>文档标题</title> <link rel="stylesheet" href="*.css" /> </head>
二. CSS的具体使用可依据CSS选择器,用于选择需要添加样式的元素。常见的CSS选择器有以下三种:
1.标签选择器
每个html页面都由很多个标签组成,通过标签选择器可以对某类标签应用相应的样式,如对p标签应用下面的样式,则页面中所有的p标签都会生效.
标签的每个申明属性用分号“;”分割,最后一个申明末尾可加分号,也不不加分号。
<style type="text/css"> p{ font-size:12px; color:red; background:blue; } </style>
2.类(Class)选择器
以一种独立于文档元素的方式来指定样式。到页面元素使用时,添加属性Class指定为定义的样式的名称。
- 类名称在CSS中必须以点(.)作为前缀,紧跟一个具有语义性的自定义类名(className)。
- CSS只允许在类名称中使用字母、数字、连字号(-)和下划线(_)。
- 在圆点之后,名称始终必须以字母开头。
- 类名称区分大小写。
- 一个标签可以有多个类选择器,不同的值用空格隔开,这样多个样式便可以应用的一个标签上。
定义如下:
<style type="text/css"> .error{ width:200px; padding:5px; color:red;} </style>
使用如下:
<div class="error"> </div>
另外类Class选择器也可以针对不同的标签,实现同样的样式命名对于不同的标签有不同的样式,只要在样式名前加标签即可。
定义如下:
<style type="text/css"> input.accountinfo{text-align:right;color:red;} label.accountinfo{font-style:italic} </style>
使用如下:
<input class="accountinfo" type="text" value="确定" /> <label class="accountinfo" >月之圣痕</label>
3.ID选择器
为标记特定id的HTML元素指定特定的样式。
- ID选择器名称在CSS中必须以井号(#)作为前缀,紧跟一个具有语义性的自定义名称。
- CSS只允许在选择器名称中使用字母、数字、连字号(-)和下划线(_)。
- 在井号后,名称始终必须以字母开头。
- ID选择器名称区分大小写。
- 在一个 HTML 文档中,ID 选择器会使用一次,而且仅一次。
定义如下:
<style type="text/css"> #divID{width:100px;height:20px;border:1px solid red;} </style>
使用如下:
<div id="divID"></div>