一、CSS 引入方式
1. 内部样式表
<head>
<meta charset="utf-8">
<title></title>
<style>
/* 内部样式表 */
div {
color: red;
}
</style>
</head>
<body>
<div style="color: blue;">行内样式表</div>
<div>第一div</div>
</body>
特点
- 方便控制当前整个页面中的元素样式设置
- 代码结构清晰，但是并没有实现结构与样式完全分离
- 通常也被称为嵌入式引入，是练习时常用的方式
2. 外部样式表（链接式）
实际开发中是外部样式表，适合于样式比较多的情况。核心是：样式单独写到CSS文件中，之后把CSS文件引入到HTML页面中使用。
引入步骤
- 新建一个后缀名为.css的样式文件，把所有CSS代码都放入此文件中
- 在HTML页面中，使用
<link>标签引入这个文件
案例
<link rel="stylesheet" href="css文件路径">
属性说明
| 属性 | 作用 |
|---|---|
rel | 定义当前文档与被链接文档之间的关系，需要指定为stylesheet，表示被链接的文档是一个样式表文件 |
href | 定义外部样式表文件的URL，可以是相对路径，也可以是绝对路径 |
示例
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="style.css">
</head>
二、复合选择器
- 复合选择器是建立在基础选择器之上，对基本选择器进行组合形成的。可以更准确、更高效的选择目标元素（标签）。
- 复合选择器是由两个或多个基础选择器通过不同的方式组合而成的。常用的复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器等。
1. 后代选择器（重要）
后代选择器又称为包含选择器，可以选择父元素里面的子元素。其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。
语法
元素1 元素2 { 样式声明 }
说明
表示选择元素1里面的所有元素2（后代元素）
例如
ul li { 样式声明 } /* 选择ul里面的所有li标签元素 */
2. 并集选择器
- 并集选择器可以选择多组标签，同时为他们定义相同的样式。通常用于集体声明。
- 并集选择器是多种选择器通过英文逗号(,)连接而成，任何形式的选择器都可以作为并集选择器的一部分。
语法
元素1, 元素2 { 样式声明 }
说明
表示选择元素1和元素2
例如
ul, div { 样式声明 } /* 选择ul和div标签元素 */
注意
- 元素1和元素2中间用逗号隔开
- 逗号可以理解为"和"的意思
- 并集选择器通常用于集体声明
3. 伪类选择器
- 伪类选择器用于给某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第1个、第n个元素。
- 伪类选择器最大的特点：用冒号(:)表示，比如：
:hover、:first-child
:hover - 鼠标悬停效果
<style>
#t1:hover {
color: coral;
}
</style>
<body>
<div id="t1">你好</div>
</body>
:focus - 获取焦点效果
input:focus {
background-color: coral;
}
示例
<style>
/* 当input获取焦点之后，将框的背景颜色设置成coral */
</style>
<body>
<div>这是div标签</div>
<p>这是p标签</p>
<span>这是span标签</span>
<div id="text">请根据标题上某</div>
用户名：<input type="text">
密码：<input type="password">
</body>
三、元素的显示模式
通过标签显示的方法不同，可以把标签分为三大类，分别是块元素、行内元素、行内块元素。
块元素
常见的块元素有 <h1>-<h6>、<p>、<div>、<ul>、<ol>、<li>等。
块元素的特性
- 比较霸道，自己独占一行
- 高度、宽度、外边距以及内边距都可以控制
- 宽度默认是容器（父级宽度）的100%
