CSS语法包括三部分：选择答符，样式属性和属性值 如：
selector {property:value;property:value } 例：
body{color:red}、p{font-family:"Courier New"} 所有HTML标记都可以作为选择符。
一 、
1.类选择符
语法：标记名。类名{样式属性：取值；样式属性：取值} 如：
p.red{color:red}
p.blue{color:blue} 应用：<p class=red> <p class=blue>
定义了段落的二个类选择符 一个文字为红色一个为蓝色。也可以省略HTML标记这样类选择符就没有范围限制了。如.
.red{color:red}
.blue{color:blue}
2.id选择符
语法：标记名#标识名{样式属性：取值；样式属性：取值} 如：
#salary{color:red}
<p id="salary"> 段落p中所有id为salary的元素均显示为红色
#sarary{color:red}
<id="salary"> 页面中所有id为salary的元素均显示为红色
注：由于id选择符的局限性比较大，只能定义某个元素的样式，一般只能在特殊情况下使用
3。包含选择符 如：
table b{font-size:11px}这里只能说明表格b内的字号为11像素，对表格外的字号没有影响。
二.选择符优先级
就近原则，如果有 !important语名优先级最大。
p{color red !important}
.blue{color:blue}
#id1{color:yellow}
结果为： 红色字体显示，如果去掉!important 则为黄色字体显示
三.插入css样式表
css文件定义在html文件头部的方法：内部样式表
css文件定义在html文件主体的方法：嵌入样式表
css文件定义在html文件外部的方法：链入外部样式表，导入外部样式表
1.链入外部样式表 语法：
<head>
...
<link rel="stylesheet" type="text/css" href="样式表文件的地址">
</head>
说明：
rel="stylesheet" 是指HTML文件中使用的是外部样式表
type="text/css" 指明该文件是类型是样式表文件
href 中的样式表文件地址。可以是相对的也可以是绝对的
外部样式表文件中不能有任何 HTML标签，如<head>、<style>等
2、导入外部样式表 语法：
<head>
<style type="text/css">
@import url=(外部样式表文件的地址);
...
</style>
...
</head>
说明：
import 语句后面的;是不可省略的
3.嵌入样式表 语法：
<head>
.....
</head>
<body>
....
<html标记 style="样式属性：取值；样式属性：取值">
....
</body>
说明：
HTML标记就是页面中标记HTML元素的标记，例如body、p等。
style参数后面引号的内容就是相当于样式表大括号里的内容。注意 style参数可以应用于html文件的body标记，以及除了basefont、param、script之外的任意元素。
适用于指定网页中某个小段文字的显示风格，或某个元素的样式
四、内部样式表 语法：
<head>
<style type="text/css">
<!--
选择符{样式属性：取值；样式属性：取值}
选择符{样式属性：取值；样式属性：取值}
....
-->
</style>
</head>
说明：
<style>标记用来说明所要定义的样式
type="text/css"用来说明这是一段css样式表代码
<!--与-->标记的加入是用来防止一些不支持css的浏览器，将<style></style>之间的css代码当成普通的字符串显示在网页中。
选择符也就是样式的名称，这里的选择符可发选用html标记的所有名称。
扫一扫
2702
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
