【转、修改】添加css的几种方法

最新推荐文章于 2025-12-26 14:47:21 发布

原创最新推荐文章于 2025-12-26 14:47:21 发布 · 901 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #html #class #import #table #语言

本文介绍了CSS的基本概念，包括层叠样式表的定义及其简单的运用。详细解析了类选择符、ID选择符和包含选择符的使用方法，并阐述了四种添加CSS的方式：链入外部样式表、内部样式表、导入外部样式表及内嵌样式。

1.CSS简介
CSS------Cascading Style Sheet的缩写,译为:层叠样式表 or 级联样式表即样式表

2.CSS的简单运用
CSS的基本语法: 选择符{样式属性:取值;样式属性;取值;....}
如 : body{color;black} 实现功能是将页面中的文字显示为黑色.

CSS的选择符:
一. 类选择符 ------ .
用类选择符可以把相同的元素分类定义成不同的样式.定义选择符时,在自定类名称的前面加一个句点 ( . )
类选择符的语法:标记名.类名{样式属性:取值;样式属性:取值;........}
例:p.red{color:red}
p.black{color:black}
在这段代码中,定义了段落选择符P的red和black两个类,red和black就可以称为类选择符.
类的名称可以是任意英文单词或以英文开头与数字的组合.
值得注意的是.类选择符在实际应用中,可以省略HTML标记名,也就是实例中的P,直接写成下面的代码: .red{color:red} .black {color:black} 这段代码定义了样式,并没有应用样式.如果要应用样式中的red类,还需要在正文中添加如下代码: <p class=red> 要应用black样式同样要添加<p class=black>.

二.ID选择符 ------ #

在HTML/XML中,在需要惟一标识一个元素时,就会赋予它一个id标识,以便在整个文档中快速找到这个元素.而ID选择符则用来对这个单一元素定义单独的样式.定义方法和类选择符大同小异.只是把句号. 改成井号＃而在调用类时需要把class换成id.
ID选择符语法:标记名#标识名{样式属性:取值;样式属性:取值;......}
例：定义＃exam{color:#ff0000} 引用 <p id="exam">
　ＩＤ选择符局限性很大，只能单独定义某个元素的样式，一般只在特殊情况下使用．

三.包含选择符
　包含选择符也称为联选择符，是对某种元素包含关系（对元素１里包含元素２）定义的样式表．这种方式只对在元素１里的元素２定义，对单独的元素１或元素２无定义．
例：table a{font-size:12px}
这段代码只对表格内的链接文字有效，设定了文字大小为１２像素，而对于表格外的链接文字则不起作用．

添加CSS的方法
1.链入外部样式表
把样式表单独保存为一个文件,然后在页面中用<link>标记链接,而<link>标记必须放页面的<head>区域内.
语法:<link rel="styleshee" type="text/css" href="样式表文件的地址">
rel="styleshee"指在页面中使用的是外部样式表.
type="text/css"是指文件的类型是样式表文本.
href参数则用来设定文件的地址.可以是绝对地址或相对地址.
样式表文件扩展名.css 其内容就是定义的样式,不包含HTML的标记,如:
hr{color:#000ff}
p{color:black;font-famil:"宋体"}
2.内部样式表
内部样式表是把样式表的内容直接放到页面的<head>区域里,通过<stle>标记插入.
语法: <style type="text/css">
选择符{样式属性:取值;样式属性:取值;....}
选择符{样式属性:取值;样式属性:取值;....}
.......................
</style>
由于有些低版本的浏览器不能识别style标记,因此使用HTML语言的注释语句来隐藏样式表的定义内容.写成
语法: <style type="text/css">

</style>
3.导入外部样式表
导入外部样式表是指内部样式表的<style>区域里引用一个外部的样式表文件,导入里需要使用@import声明
语法:<style type="text/css">
@import url(样式表地址)
选择符{样式属性:取值;样式属性:取值;....}
选择符{样式属性:取值;样式属性:取值;....}
.......................
</style>
4.内嵌样式
内嵌样式是混合在HTML标记里使用的,用这种方法可以很直观的对某个元素直接定义样式,内嵌样式的使用是直接在HTML标记里加入<style>参数.
语法:< HTML标记 style="样式属性:取值;样式属性:取值;...."}

书写CSS的注意事项
1.如果属性的值是多个单词组成,则必须使用引号将属性值括起来.
2.如果要对一个选择符指定多个属性,则需要使用分号将所胡的属性和值分开.
3.可以将具有相同属性的值勤的先择符组合起来,用逗号将其分开.
如:p,table{font-size:9pt} td,body,div{font:13px arial,sans-serif,宋体}
4.CSS样式表中的注释语句以:"/*"开头,以"*/"结尾. C语言好像也是这么注释的.:)