（承接上一篇）
CSS:层叠样式表（Cascading Style Sheet）
引用css的方法
第一种：写在head标签中，写<style> </style>内联样式表（标签、类、id选择器）
标签选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css" >
h1{font-size:30px;
color:blue;
}
</style>
</head>
<body>
<h1>这是我的标题</h1>
</body>
</html>
类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css" >
.cfourone{font-size:;
color:red;
}
</style>
</head>
<body>
<h1 class="cfourone">这是我的标题</h1>
</body>
</html>
ID选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css" >
#cfourone_1{
color:red;
}
</style>
</head>
<body>
<h1 id="cfourone_1">这是我的标题</h1>
</body>
</html>
各类选择器之间优先级：ID选择器>类选择器>标签选择器
以上三种选择器均属于内部样式表
内联样式
<! - - <p style="font-size:14px;color:green;">......</p> - ->
外部样式表
引入一个文件名为style.css的文件
css文件内容如下
p{
font-size:25px;
color: blue ;
}
.box{
font-size:50px;
color: red ;
}
#box{
font-size:75px;
color: green ;
}
在html中文件<head></head>插入<link rel="stylesheet" type="text/css" href="style.css">（href="路径"）
HTML文件内容如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<p>这是一段文字</p>
<p class="box">这是一段文字</p>
<p id="box">这是一段文字</p>
</body>
</html>
样式表之间优先级：内联样式 > 内部样式表 > 外部样式表
扫一扫
680
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
