2.样式表的使用
在HTML中使用CSS有四种方式:行内式。内嵌式、链接式、导入式。
(1)行内式(不需要定义选择器):利用style属性直接为元素的设置样式,只对当前标签起作用。
例如:
<p style="color:#FF0000;font-size:20px;text-decoration:underline;">正文内容1</p>
<p style="color:#000000;font-style:italic;">正文内容2</p>
(2)内嵌式:需要先定义有关的选择器,后再使用,内嵌式的作用范围是该HTML文档内。
例如:
<html>
<head>
<title>页面标题</title>
<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>之间。
例如:首先定义一个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标题</h2>
<p>这是正文内容1....</p>
</body>
</html>
(4)导入式:该方式与链接方式类似,只是通过import导入到页面中。
import导入格式:注意import句尾的分号不要省略。
<style type="text/css">@import url(*.css文件路径);</style>
3.CSS样式表继承性
CSS是级联样式表,级联是指继承性,在标签中嵌套的标签继承外层标签的样式。
级联的优先顺序:
①嵌入式样式表(优先级最高)
②内联式样式表
③外联式样式表
④浏览器默认(优先级最低)
注:当样式表继承遇到冲突时,总是以最后定义的样式为准,例如:
<head>
<style type="text/css">
p{color:red;font-size:25px;}
</style>
</head>
<body>
<p>这是第一行</p>
<p style="color:blue;>正文内容1</p>
</body>