一、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;
}