1. css 强势登场
1.1 html 的局限性
html 主要做的是网页的结构，但是我们发现：做出来的页面特别丑。
而且如果我们在标签中添加很多属性，也会使我们的代码异常臃肿。
1.2 css 闪亮登场🌟
css：层叠样式表(英文全称：Cascading Style Sheets)
css 可以用来改变文本内容（大小、字体、对齐方式等），图片内容（宽高、边框等）以及版面的布局和外观显示样式。
使用 css 可以更灵活操作我们的元素，使布局更简单，从而美化我们的界面。
1.3 使用css的最大好处
使用 css 的最大好处：html 专注于结构，css 专注于样式，使结构和样式相分离。
充分符合了 web 标准的最佳体验方案：结构、表现、行为相互分离，即结构写到 HTML 文件里，表现写到 CSS 文件里，行为写到 JavaScript 文件里。
2. css的语法规范
2.1 规则
CSS 规则 = 选择器 + 声明块（声明块内包含一个或多个声明）
注意点：
选择器用于指定 css 样式的 HTML 标签，花括号是该标签的具体样式.
声明中以键值对的形式存在，但这个键值对不同于我们在 html 标签里写的 key = “value”，而是 key: value。
每个键值对（或者说不同属性）不同于 html 用空格隔开，而是用 ; 隔开。
2.2 样式风格
样式风格分为紧凑风格和展开风格。
紧凑风格
p {color: red;font-size: 25px;}展开风格
p { color: red; font-size: 25px; }
我们肯定是推荐使用展开风格，因为这样代码看起来更直观。
而且在代码打包的时候，我们可以使用一些工具，将展开风格 -> 紧凑风格。
并且我们推荐选择器和属性和其值全部使用大小写，更直观。
2.3 空格规范
我们写 css 代码时，通常会在选择器和花括号间，属性冒号和属性值间加入空格。
2.4 选择器的作用
选择器就是用来选标签的，选完后就可以直接操作它的样式。
3. css代码书写位置
3.1 定义
对于 HTML 代码的书写，我们没有任何疑问，就是写在 HTML 文件中。但对于 css，它的代码究竟可以写在哪呢？
为此，对于 css 代码的书写位置，我们可以分为以下三种：
- 内部样式表
- 内联样式表
- 外部样式表
3.2 内部样式表
书写在 style 元素中，放在 HTML 文件的 head 里，否则可能会导致画面闪烁（丑–>美）
<head>
<title>Document</title>
<!-- 我是内部样式表 -->
<style>
p {
color: red;
font-size: 25px;
}
</style>
</head>
如果代码很少，可以用这种方式，少一个文件，第一次加载更快🚀。
我们之后在一些简单的 css 讲解中都会使用该样式，因为不用去建立文件。
3.3 内联样式表[暂时不推荐]
<body>
<!-- 我是内联样式 -->
<p style="color:darkorchid">内联样式</p>
</body>
直接书写在元素的 style 属性中
3.4 外部样式表[推荐]
将样式书写在独立的 css 文件中，css 的代码和内部样式表 <style> 里的是一样的，但在html文件中，需要一个 <link> 标签导入 css 文件。
<link rel="stylesheet" href="css文件路径">
好处：
外部样式可以解决多页面样式重复的问题
有利于浏览器缓存，从而提高页面响应速度
有利于代码分离（HTML 和 CSS），便于阅读和维护
4. 基础选择器
4.1 选择器的分类
选择器可以分成两个大类：
- 基础选择器
- 复合选择器
我们先来讲讲基础选择器。
4.2 基础选择器的分类
基础选择器由单个选择器组成，可分为以下四类：
标签选择器
类选择器
id选择器
通配符选择器
4.3 标签选择器
4.3.1 定义
标签选择器，顾名思义，就是选择器是 HTML 的标签，也就是它可以选中特定的 HTML 标签进行操作。
4.3.2 语法
css
标签 { 属性1: 属性值1; 属性2: 属性值2; }
4.3.3 示例
css 内部样式表
<style> p { color: red; font-size: 25px; } </style>html 内容
<body> <p>你好世界</p> <div> <p>我在第一层div</p> <div> <p>我在第二层div</p> </div> </div> </body>效果：
我们发现，即使是在 <div> 内层的 <p> 标签也被选中，优点很明显：可以一下选出所有同类的标签。
但缺点也很明显：因为我有时候可能只要某个 <p> 标签有样式，而不是所有。也就是说单纯靠标签选择器是无法做到差异化的选择的。
4.4 类选择器
4.4.1 定义
由于标签选择器无法做到差异化选择，所以我们就有了类选择器，可以做到选择一个或者若干个标签。
4.4.2 语法
css
.类名 { 属性1: 属性值1; 属性2: 属性值2; }html
<标签 class = "类名">
4.4.3 示例
css 内部样式表
<style> .blue { color: blue; } </style>html 内容
<body> <!-- 对1，3设置类名blue，2没有 --> <p class="blue">类选择器1</p> <p>类选择器2</p> <p class="blue">类选择器3</p> </body>效果
注意点：
- 类的命名不要是中文，纯数字，尽量使用英文命名！
- 类的名称是长名称或词组时，可以使用中横线 - 进行连接。
- 类名虽然可以自定义，但尽量还是遵守一些规范，详情可见pink老师的gitee仓库内有web前端开发手则。
4.4.4 课堂案例
完成以下图片
代码如下：
css
<style> .red { background-color: red; height: 100px; width: 100px; } .green { background-color: green; height: 100px; width: 100px; } </style>html
<body> <div class="red"></div> <div class="green"></div> <div class="red"></div> </body>效果：
我们会发现两个问题：
- 显示层面：展示的盒子的上边和左边存在一小段空白间隙（这里主要是因为浏览器默认样式的问题，我们具体等到盒子模型再细说）
- 代码层面：red 类的样式和 green 类的样式存在重合部分，为了使我们代码松耦合（简单理解就是不要把一样的东西写在不同的代码里，就像我们这里的宽高都一样，但我分开写在两个类里），我们需要将其分离，分离前我们先来说说多类名的使用。
4.4.5 多类名的使用
语法如下：
<标签名 class="类1 类2 类3 ...">
注意点：
多类名需要用空格隔开
这个标签可以分别具有这些类名的样式，但这可能存在冲突，所以我们之后会介绍属性值的计算
4.4.6 课堂案例松耦合
css
<style> .box{ height: 100px; width: 100px; } .red { background-color: red; } .green { background-color: green; } </style>html
<body> <div class="red box"></div> <div class="green box"></div> <div class="red box"></div> </body>
4.4.7 多类名的使用场景
- 可以把相同样式放在一个类里面
- 标签可以通过调用公用的类后，然后再调用自己独有的类
- 从而节省 css 代码，统一修改也十分方便
4.5 id选择器
4.5.1 定义
id 选择器和类选择器类似，使用前需要给标签设置一个 id 属性，但一个元素只能有一个 id。
4.5.2 语法
css
#id名 { 属性1: 属性值1; 属性2: 属性值2; }html
<标签 id = "id名">
4.5.3 示例
css 内部样式表
<style> #zuolun { color: green; } </style>html 内容
<body> <div id="zuolun">我是左轮</div> </body>效果
4.5.4 id 选择器和类选择器的不同
- 类选择器可以供多个标签使用，一个标签也能使用不同的类选择器
- id 选择器像身份证一样，只有一个标签可以使用
❗️我们一定要注意：虽然我们在网页中给多个标签使用同个 id，也可以达到渲染的效果。但是这种做法及其不符合规范，一定注意：一个标签拥有一个唯一的 id。
4.6 通配符选择器
4.6.1 定义
通配符选择器可以选择页面中所有的元素，用 * 表示
4.6.2 语法
css
* { 属性1: 属性值1; 属性2: 属性值2; }
4.6.3 示例
css 内部样式表
<style> * { color: red; } </style>html 内容
<body> <p>我是1</p> <div>我是2</div> <strong>我是3</strong> <em>我是4</em> </body>效果
本文主要学习黑马程序员pink老师的视频
如有错误，敬请指正，欢迎交流🤝，谢谢♪(･ω･)ﾉ