一、CSS 添加到HTML的方式:
- 内联样式- 在HTML元素中使用"style" 属性
<p style="color:blue;margin-left:20px;">这是一个段落。</p>- 内部样式表 -在HTML文档头部 <head> 区域使用<style> 元素 来包含CSS
<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>- 外部引用 - 使用外部 CSS 文件
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>二、 CSS选择器
1、id选择器，使用 # 来进行选择
<p id="part1">段落1</p>
<p id="part2">段落2</p>#part1 {
color: red;
}
2、class选择器，使用.来进行选择
<p class="green">段落1</p>
<p class="bold">段落2</p>
<p class="green bold">段落3</p>
.green {
color: green;
}
.bold {
font-weight: bold;
}
3、标签选择器
<p>段落1</p>
<p>段落2</p>
<p>段落3</p>
<a href="https://www.baidu.com/">打开百度，你就知道！</a>p {
color: yellow;
}
a {
color: red;
}
4、子代选择器
<div>
<h1>儿子标题</h1>
<span><h1>孙子标题</h1></span>
<h1>儿子标题</h1>
</div>
div>h1{
color: red;
}
5、后代选择器
<p class="part">
<a href="http://www.baidu.com/">打开百度，你就知道！</a>
</p>
<a href="http://www.baidu.com/">打开百度，你就知道！</a>
.part a {
color: red;
}