CSS是一种美化网页的技术。
2.2.1CSS样式表的定义与使用
定义选择器的基本语法:
selector{属性:属性值;属性;属性值;......}
说明:
(1)CSS选择器分为三种类型:
标记选择器,通过HTML标签定义选择器。
类别选择器,使用class定义选择器。
ID选择器,使用id定义选择器。
(2)属性和值被冒号分开,属性之间用分号间隔,并由花括号包围。
例如:p{background-color:blue;color:red}//定义标记P选择器
.cs1{font-family:华文行楷;font-size:15px} //定义类别选择器.csl
#cs2{color:yellow} //定义id选择器#cs2
1、CSS样式表的定义
CSS样式表的定义实际上是定义CSS选择器。
(1)标记选择器——通过HTML标签定义样式表
基本语法格式:
引用样式的对象{标签属性:属性值;标签属性:属性值;标签属性:属性值;......}
(2)类别选择器——使用class定义样式表
格式1:标签名.类名{标签属性:属性值;标签属性:属性值;标签属性:属性值;......}
格式2: .类名{标签属性:属性值;标签属性:属性值;标签属性:属性值;......}
(3)id选择器——使用id定义样式表
基本语法:#id名称{标签属性:属性值;标签属性:属性值;标签属性:属性值;......}
2、样式表的使用
在HTML中使用CSS有4种方式:行内式、内嵌式、链接式、导入式。
(1)行内式(不需要定义选择器):利用style属性直接为元素设置样式,只对当前的标签起作用。
例如:<p style="color:#FF0000;font-size:20px;text-decoration:underline;">正文内容1</p>
<p style="color:#000000;font-style:italic;">正文内容2</p>
(2)内嵌式:这种方式需要先定义有关的选择器,然后再使用。利用<style></style>标签对,将样式表定义在<head></head>标签之间,内嵌式样式表的作用范围是该HTML文档内。例如:
<html>
<head>
<title>页面标题</tittle>
定义两个选择器:标签选择器p和类选择器info
<style type="text/css">
p{color:#0000FF;text-decoration:underline;font-weight:bold;font-size:25px;}
.info{font-size:12px;color:red;}
</style>
</head>
<body>
使用选择器:第一行:标签选择器的使用。第二行:类选择器的使用。
<p>这是第一行正文内容......</p>
<p class="info">这是第二行的内容.....</p>
</body>
</html>
(3)链接式:外联式样式表是将定义好的css单独放到一个以.css为扩展名的文件中,在使用<link>标签链接到所需要使用的网页中,在<head>与</head>之间。
<link>标签链接到网页的格式:
<link href="*,css文件路径"type="text/css"rel="stylesheet">
例如:首先定义一个sheet-x,css文档,其代码如下:
h2{color:#0000FF;}
p{color:#FF0000;text-decoration:underline;font-weight:bold;font-size:15px;}
其次,在HTML中使用:
<html>
<head>
<title>页面标题</title>
<link href="sheet x.css"type="text/css"rel="stylesheet">
</head>
<body>
<h2>CSS标题1</h2>
<p>这是正文内容1......</p>
</body>
</html>
(4)导入式:该方式与链接是方式类似,只是通过import倒入页面中。
import导入格式:(注意import句尾的句号不要省略)
<style type="text/css">@import url(*,css文件路径);</style>
3、css样式表继承性
css是级联样式表,级联是指继承性,即在标签中嵌套的标签继承外层标签的样式。级联的优先级顺序:
(1)嵌入式样式表(优先级最高)
(2)内联式样式表。
(3)外联式样式表。
(4)浏览器默认(优先级最低)。
注意:当样式表继承遇到冲突时,总是以最后定义的样式为准,例如:
<head>
<style type="text/css">
p{color:red;font-size:25px;}
</style>
</head>
<body>
<p>这式样式表第1行正文内容.....</p>//这一行按选择器规定的样式显示:按红色、25显示内容
<p style="color:blue;>正文内容1</p>//这一行是按标识内的样式显示:按蓝色、但字大小仍按25px显示
</body>