这是我学习B站pink老师的前端教程时自己手打的笔记，对你有用，点赞收藏关注三连走起！
1. CSS 简介
1.1 HTML 的局限性
HTML 是网友的骨架，只关注内容的语义。例如<h1>表示大标题，<p>表示段落。
早期的时候，HTML 只能做一些简单的样式，网页非常丑，而且使 HTML 代码臃肿。
1.2 CSS-网页的美容师
CSS 是 层叠样式表（Cascading Style Sheets）的简称。
CSS 也是一种标记语言。
CSS 主要用于设置 HTML 页面中的文本内容（字体、大小、对齐方式）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。·
HTML 呈现结构，CSS 决定样式，结构与样式分离。
1.2 CSS 语法规范
CSS 规则由两个部分组成：选择器和一条或多条声明。
1.3 CSS 代码风格
- 展开式
- 选择器，属性名，属性关键字全部小写
- 空格规范
2. CSS 基础选择器
2.1 选择器的作用
选择器就是根据不同需求把不同标签选择出来。
2.2 选择器分类
选择器分为基础选择器和复合选择器两大类。
- 基础选择器由单个选择器组成
- 基础选择器包括：标签选择器、类选择器、id 选择器和通配符选择器
2.3 标签选择器
直接用 HTML 标签名作为选择器，按标签名称分类，为页面某一类标签指定统一的 CSS 样式。
语法
标签名 {
属性1： 属性值1;
属性2： 属性值2;
属性3： 属性值3;
}
优点
标签选择器可以把某一标签全部选择出来，快速为同类型标签设置统一样式。
缺点
不能设置差异化样式，只能选择全部当前标签。
2.4 类选择器
差异化选择不同标签，单独选一个或者某个标签。
语法
使用 class 属性来调用 class 类，样式点定义，结构类调用，一个或多个，开发最常用。
类选择器用 . 号显示。
注意
- 类选择器用
.标识，紧跟类名。 - 小写，使用
-连接单词。 - 不要用纯数字、中文。
- 命名有意义。
2.4.1 类选择器-多类名
类名间用空格分开
<p class="class-name1 class-name2"></p>
2.5 id 选择器
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
HTML 元素以 id 属性来设置 id 选择器，用 # 来定义。
#id名 {
属性1: 属性值1;
...
}
样式 # 定义，结构 id 调用，别人切勿使用。
id 选择器与类选择器的区别
- 类选择器可以被多个元素调用。
- id 选择器只能允许一个标签调用。
- 类选择器使用的较多，id 选择器用于唯一特性的标签。
2.6 通配符选择器
语法
* {
属性1: 属性值1;
...
}
- 用
*定义通配符选择器，选取页面中所有标签。 - 不需要调用，自动给所有标签。
- 特殊情况使用
* {
margin: 0;
padding: 0;
}
2.7 基础选择器总结
| 基础选择器 | 作用 | 特点 | 使用情况 | 用法 |
|---|---|---|---|---|
| 标签选择器 | 选中所有相同标签 | 不能差异化选择 | 较多 | p{color:red;} |
| 类选择器 | 选出一个或多个标签 | 可以根据需求选择 | 较多 | .nav {color: red;} |
| id 选择器 | 一次只能选出一个标签 | 一个 id 属性在页面中只能出现一次 | 一般配合 js 使用 | #nav {color: red;} |
| 通配符选择器 | 选择所有标签元素 | 选择的太多，有部分不需要 | 特殊情况使用 | * {color: red; } |
- 每个选择器都有自己的使用场景，都要掌握。
- 如果是修改样式，类选择器是使用最多的。
3. CSS 字体属性
3.1 字体系列
CSS 使用 font-family 属性定义文本字体系列。
尽量使用默认字体，保证不同浏览器的兼容性。
body {
font-family: "微软雅黑", Arial, Helvetica, sans-serif;
}
3.2 字体大小
CSS 使用 font-size 属性定义字体大小。
body {
font-size: 16px;
}
px大小是我们网页常用单位- 谷歌浏览器默认是
16px - 可以给
body指定整个页面文字大小
3.3 字体粗细
CSS 使用 font-weight 属性设置字体粗细
p {
font-weight: 700;
}
实际开发中，更常用数字来表示加粗或变细。400为normal，700 为 bold。
| 属性值 | 描述 |
|---|---|
| normal | 默认值 |
| bold | 定义粗体 |
| 100-900 | 400 等价于 normal，700 等价于 bold，无单位 |
3.4 文字样式
CSS 使用 font-style 属性设置文本风格。
p { font-style: italic; }
| 属性值 | 描述 |
|---|---|
| normal | 正常显示 |
| italic | 斜体 |
注意：平常很少给字体加斜体，而是给斜体标签（em,i）给位不倾斜字体。
3.5 字体复合属性写法
将各种字体属性写在同一选择器下，节约代码。
规则
严格遵守顺序，且 font-sieze 和 font-family 必须有。
body {
font: font-style font-weight font-size/line-hight font-family;
}
3.6 字体属性总结
| 字体属性 | 表示 | 注意 |
|---|---|---|
| font-size | 字号 | 单位是 px |
| font-family | 字体 | 按照团队约定来写 |
| font-weight | 字体粗细 | 400=normal，700=bold |
| font-style | 字体样式 | italic，normal，常用 normal |
| font | 属性连写 | 顺序不能变，字体和字号属性必须有 |
4. CSS 文本属性
CSS Text（文本）属性定义文本外观，比如颜色、对齐、装饰、缩进、行间距等。
4.1 文本颜色
color 属性定义文本颜色。
div {
color: red;
}
属性值
| 表示颜色 | 属性值 |
|---|---|
| 预定义的颜色值 | red,green,pink |
| 十六进制 | #FF0000，#FF6600 |
| RGB 代码 | rgb(255,0,0) |
实际开发中，最常用的是十六进制。
4.2 对齐文本
text-align 属性用于设置元素文本内容的对齐方式。
div {
text-align: center;
}
| 属性值 | 解释 |
|---|---|
| left | 左对齐（默认） |
| right | 右对齐 |
| center | 居中对齐 |
4.3 装饰文本
text-decoration 属性规定添加到文本的修饰。可以给文本添加下划线、删除线、上划线等。
text-decoration: underline;
| 属性值 | 描述 |
|---|---|
| none | 默认，无装饰（最常用） |
| underline | 下划线，a 标签自带（常用） |
| overline | 上划线。（几乎不用） |
| line-through | 删除线。（不常用） |
4.4 文本缩进
text-indent定义段落首行缩进。
p {
text-indet: 5px;
}
em 是一个相对单位，1em 就是一个字符所占大小。当 text-indent=2em，则恰好缩进两个文字。
4.5 行间距
line-height 设置行间的距离，行间距=文本高度+上间距+下间距
4.6 文本属性总结
| 属性 | 表示 | 注意 |
|---|---|---|
| color | 文本颜色 | 通常十六进制缩写 |
| text-align | 文本对齐 | |
| text-indent | 文本缩进 | 记住 text-indent: 2em; |
| text-decoration | 文本装饰 | 记住下划线和去除下划线 |
| line-height | 行高 |
5. CSS 引用方式
按照 CSS 书写的位置不同，CSS 样式表可以分为三大类：
- 行内样式表（行内式）
- 内部样式表（嵌入式）
- 外部样式表（链接式）
5.1 内部样式表
将 CSS 代码写在 HTML 页面内部，单独放在一个 <style> 标签中。
<style>理论上可以放在 HTML 文档中任何一个地方，一般放在<head>标签中。- 方便控制整个页面中的元素样式。
练习时使用，实际开发不用。
5.2 行内样式表
行内样式表（内联样式表）是在元素标签内部的 style 属性中设定 CSS 样式，适合修改简单样式。
<div style="color: red; font-size: 12px">行内样式表</div>
- 设置当前标签样式
- 书写繁琐，不推荐大量使用。
5.3 外部样式表
实际开发中都是外部样式表，适用于样式比较多的情况。
核心：样式单独写到 CSS 文件中，再将 CSS 文件引入到 HTML 页面中。
引入格式
<link rel="stylesheet" href="css文件路径" />
230
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
