HTML5+CSS笔记教程（CSS教程篇）
我所看的B站教程：最新最全HTML5-CSS3教程_哔哩哔哩_bilibili
官方文档：Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification (w3.org)
全属性表：Full property table (w3.org)
中文文档：CSS（层叠样式表） | MDN (mozilla.org)
查询属性是否可用：Can I use... Support tables for HTML5, CSS3, etc
CSS的全称为Cascading Style Sheet，即层叠样式表。
顾名思义，它可以一层一层的叠起来，所以这个样式应该是后定义的可以覆盖先定义的，立体一点思考页面的话，就是将页面当成一个沙盘，html是其中的布局，而CSS是其中凹凸不平的建筑，我们从顶部的视角去看，就是html的布局加最顶层的样式组合而成的页面。（有学过PS的图层概念应该更好理解）
一、熟悉CSS
带着问题：如何将CSS样式应用到元素上？为什么h1标签的字体那么大？
1.内联样式（inline style）
顾名思义，这是在行内直接定义样式。我们可以通过给h元素赋予样式进行改变
h2的样式
改变h2的样式
如果你使用调试工具对原始h2元素进行检查，就会发现使用该标签浏览器会自带样式
h2 {
- display: block;
- font-size: 1.5em;
- margin-block-start: 0.83em;
- margin-block-end: 0.83em;
- margin-inline-start: 0px;
- margin-inline-end: 0px;
- font-weight: bold;
}
由于需要保证标签语义化，不建议使用
标签改变样式成
标签之类的
这里可以要注意的是样式的格式-->style="属性：属性值;"<--键值对应，冒号分号不能丢
2.文档样式表（document style sheet）、内嵌样式表（embed style sheet）
带着问题：内联样式的缺陷在哪里？如果我们希望整篇文章都红色，要一个一个标签设置样式吗？
这样的结果会导致代码太过冗余了，我们将共同的代码抽出来然后统一管理，看例子
变绿色标题
变绿色段落
占用多大
以上head和body元素各自需要添加的内容，利用style标签统一管理其他标签的样式
需要注意的是，h1,p等的标签的前面不需要的加“.”，而.red是自己定义的选择器，需要加“.”且需要在标签中利用class属性引用
3.外部样式表（external style sheet）
带着问题：现在把共同的样式都抽取出来了，但是一个页面上千行样式放在页面开头真的好吗？
所谓外部样式表，顾名思义，就是将样式放在HTML文件外的另一个文件里，然后在HTML文件中导入它（或者说引用它好理解点）
我们在当前目录下新建一个style.css文件，将刚刚的样式复制过去
h2,p{color:green;} .red{background-color:red;}
在HTML文件将style元素删除，在
元素里使用link标签与style.css链接，如下图这样就可以实现HTML文件与CSS文件分离，一般来说，项目中都是CSS一个文件夹，JS文件一个文件夹，这里推荐使用外部样式表
4.注意事项
css文件在开头最好指定编码
@charset "utf-8";
导入的时候下面的会覆盖上面的，因此更重要的样式要放在更下面（style.css更重要）
导入的方法不止一种，也可以，别忘了分号-->效率比较低
在CSS文件可以导入其他CSS文件吗？也可以,如在style.css中
@import url(./base.css);
二、常用选择器（selectors）介绍
选择器有很多种，可以是HTML的标签名或者自定义的.red等
可以参考一下：CSS 选择器参考手册 (w3school.com.cn)
以下演示采用文档样式表的方式
1.通配选择器
可以为所有的元素附加样式，以下代码作用自己测试-->效率比较低
*{margin:0;padding:0;}
2.元素选择器
以HTML标签为名设置样式
p{color:red;}
3.类选择器
一般来说，一个网页的某一个元素的样式不会完全一样，所以需要构建类来进行层叠。使用频率高
应用两个类选择器
特点在哪呢？定义选择器的名字前要加一个“.”，class属性应用时多个选择器中间用空格隔开
命名规范可以百度一下命名规范 - iBowen - 博客园 (cnblogs.com)
4.id选择器
id是标签的唯一标识，我们可以根据id构建选择器
id选择器记得要加
5.属性选择器
顾名思义，就是有某个属性且它的值满足我们要求便可以设置样式，示例
大红
大
属性选择器 - CSS（层叠样式表） | MDN (mozilla.org)，不常用，需要再去查文档
6.后代选择器
使用两个标签，如果第二个标签是在第一个标签的“盒子”里（被包裹），则满足条件
试试，最里面也可以
多个标签以此类推
7.子代选择器
从名字就可以看出和上一个选择器的区别，需要加“>”号，示例
会变色不会变色
选择器并不是只允许标签之间的嵌套，类选择器也可以参与其中
会变色
8.相邻兄弟选择器
很明显，就是相邻的两个元素之间的关系，不过有先后关系，即兄与弟之间的关系
div元素后面紧挨着的p元素
不会变色
不会变色
会变色
不会
9.全体兄弟选择器
这个和上一个的区别主要在于它不限制相邻这个条件，即
不会变色
不会变色
会变色
会变色
10.选择器组——交集选择器
同时符合条件的元素，直接看例子
同时符合2个条件的元素，div元素、div元素的class为one
会变色不会变色
同时符合3个条件的元素，div元素、div元素的class为one，title属性为test
会变色不会变色
11.选择器组——并集选择器
满足任意一个条件的元素都设置样式
会变色会变色
12.伪类
主要用于定义元素的特殊状态，比如鼠标悬停在按钮上会变化，链接是否被点击会不一样等
伪类也有不同分类，比如动态动态伪类、目标伪类、语言伪类、元素状态伪类、结构伪类以及否定违类等
①动态伪类
:link，:visited，:hover，:active，:focus
a:link 未访问的链接
a:visited 已访问的链接
input:focus 获取焦点，a元素也有，不过要用Tab键选中聚焦
a:hover 鼠标挪动到链接上，必须放到:link和:visited后面才会生效
a:active 激活的链接（鼠标在链接上长按住未松开），必须放到hover后面
要去掉focus状态可以如下：
②结构伪类
:nth-child(n)
:nth-child(3) 子元素的第三个
:nth-child(n) n为自然数，表示子元素的0，1……元素，还可以:nth-child(2n)表示偶数
p:nth-child(even) 匹配于父元素的偶数P元素， odd表示奇数
nth-last-child(n) 倒着数
:nth-of-type(n)
:nth-of-type(3) 同类子元素的第三个
nth-last-of-type
:first-child 等同于nth-child(1)
:last-child 等同于nth-last-child(1)
:first-of-type 等同于nth-of-type(1)
:only-child 是父元素唯一的子元素
:only-of-type 父元素中唯一类型的子元素
:root 根元素，就是元素
:empty 空元素，内容为空的元素
:not(x) 否定伪类，x是一个简单选择器
:not(html):not(body):not(div) 表示除了html、body、div以外的元素
③目标和元素状态伪类
:target 目标伪类，控制锚点的样式
disabled/enable
:checked 主要用于设置单选按钮radio和复选框checkbox被选中的样式
参考：
13.伪元素
::first-letter 第一个字
p::first-letter {} 段落的第一个字做特殊效果
::first-line 第一行
p::first-line {} 段落的第一行做特殊效果
::before
::after
span::before {content:'123';color:red;margin-right:20px} 表示在span元素前添加一个元素
content属性一定要有
::placeholder
设置占位符样式
三、常用属性介绍
1.color
color: tranparent 代表透明
前景色（文字颜色），定义颜色的方式可以是颜色名red、十六进制颜色值（#FF0000）、rgb代码的颜色（rgb(255,0,0)）、带透明通道的rgba代码（rgba(255,0,0,0.5)）这四种，后三者比较精确
p{color:red;color:#FF0000;color:rgb(255,0,0);color:rgba(255,0,0,0.5);}
rgba的a是alpha，值为0-1，对应完全透明到不透明
之所以叫前景色，是因为定义的框也和文字一样的颜色，十六进制颜色和rgb颜色值可以转换
关于二进制十六进制等的介绍：各进制及其转换详解 - Felix-Zhang - 博客园 (cnblogs.com)
测试一下下划线和边框是否和文字的颜色一样
text-decoration指添加到文本的修饰，border指边框，这里不详细介绍
2.font-size
设置字体尺寸属性的方式有绝对尺寸30px，相对尺寸2em、%、rem等，30px即30像素，em和%都是针对父元素的比例，即套娃中的上一层，而rem是固定对根元素的比例，谷歌浏览器字体默认最小12px，这个通过浏览器设置进行更改
3.background-color
设置背景颜色，同color
div的背景色span的背景色
4.width与height
设置元素的宽度（width）和高度(height)，要分清宽度和高度的效果，我们同时设置背景色方便查看，经过这个例子应该能更好的理解页面的布局了
看div变成一个正方形
PS：宽度和高度不适用于非替换行业元素，如span
如何看其他网站的布局呢？这里有个小技巧分享一下
在一个页面上右键-->检查，可以显示调试工具，工具右边有个加号（新建样式规则），点击之后写上以下代码
div{outline:5px red solid;}
这里要注意，我们是可以给页面添加样式的，不过仅我们浏览器可见
5.text-decoration
用于设置文字的装饰线（下划线、删除线等等）
属性值有：none(如可以去除元素的下划线)、underline(添加下划线)、overline(上划线)、linethrough(中划线、删除线)。注：子元素无法用none删除父元素的设置
百度一下
到这里就能明白其它网站的跳转链接没有下划线的原因了
6.letter-spacing与word-spacing
letter-spacing设置字符间距，word-spacing设置单词间距，默认都为0，单位和字体尺寸类似
Hi world
Hi world
Hi world
可设置为负数，可以试试中文的效果
7.text-transform
设置字符的大小写转换，常用的属性值有使每个单词首字符大写的capitalize，将单词的所有字符变为大写的uppercase，将单词的所有字符变为小写的lowercase，以及没有任何影响的none
Hello World
8.text-indent
设置文本内容的首行缩进值，单位和字体大小差不多，谷歌浏览器默认的字体大小为16px，缩进值2em是相对于font-size（50px）的，即缩进两个字符大小
核心价值观24字分别是：富强、民主、文明、和谐、自由、平等、公正、法治，爱国、敬业、诚信、友善。
9.text-align
行内内容或者行内元素（例如文字）如何相对它的块父元素对齐。属性值有left、right、center、justify，会继承
提前接触行内盒子
如果div的样式里不设置display属性，那么即使设置了width为200px，div元素依然是一整行的
附：justify是两端对齐，对最后一行无效，使用justify-all可以强制使最后一行两端对齐或者用text-align-last来设置
10.font-family
用于设置文字的字体名称，默认是“Microsoft YaHei”（微软雅黑），设置时的值用中文英文都可以
这是微软雅黑试试宋体
为了防止客户的操作系统中没有我们设置的字体，一般设置时都设置多个字体，中间逗号隔开
从左到右选择字体，直到找到为止，因此英文字体一般放在中文字体前（要注意版权问题）
11.font-weight
用于设置字体的粗细，属性值可以用数字1-1000，也可以用normal（等同400）、bold（等同700），bold即加粗，越大的值越粗。元素默认加粗
12.font-style
用于设置字体的倾斜效果，属性值有normal、italic(选择斜体，如果当前字体没有可用的斜体版本，会选用倾斜体（oblique）替代)、oblique(选择倾斜体，如果当前字体没有可用的倾斜体版本，会选用斜体（italic ）替代)，即一般设置为italic即可
13.font-variant
不常用，用于设置小写字母的表现，设置为small-caps可以使小写字母转换为大写字母然后缩小到小写字母的大小，有兴趣可以自己实践一下
14.line-height
设置行高，即一行文字的高度
行高的属性值单位也和字体大小一致，要使字体在块元素垂直居中，如下
试试垂直居中效果
15.font
这是一个缩写属性，即将font-style、font-variant、font-weight、font-size/line-height、font-family
这六个值同时赋给font属性，可以节省代码量
试试font多重的效果
font-style、font-variant、font-weight可以随意调换位置，也可以省略，必须包含的属性是font-size和font-family，且font-size要在font-family之前，line-height可以省略
16.有关列表的属性
display的以下取值，等同于某些HTML元素
table：
，一个block-level表格
inline-table：
，一个inline-level表格
table-row：
table-row-group：
table-header-group：
table-footer-group：
table-cell：
， ，一个单元格 table-caption：
，表格的标题 list-item：
1. list-style-type 设置li元素前面标记的样式
li { list-style-type: decimal; } 由实心点变为数字，和有序列表一样
disc 实心圆 circle 空心圆 square 实心方块 decimal 阿拉伯数字 none 啥也没有
lower-roman 小写罗马数字 upper-roman 大写罗马数字
lower-alpha 小写英文字母 upper-alpha 大写英文字母
去掉 li 元素左边的空白可以用padding: 0 和 margin: 0 去掉
2. list-style-image 设置图片替换 li 元素前面的空白部分，一般不用这个，用其它元素插入
3. list-style-position 设置实心点属于盒子的内部(inside)还是外部(outside)
都不怎么用，一般都 list-style: none; 来把默认样式去掉
list-style 是list-style-type，list-style-image，list-style-position 的缩写属性
17.
的一些属性
1. border 表格边框实线的宽度
2. cellpadding 单元格内部内边距的大小
3. cellspacing 单元格之间边距的大小
4. width 表格宽度
5. height 表格高度
6. align 表格对齐方式（center, left, right），记住是表格而不是表格内容
1. valign 单元格的垂直对齐方式（top, middle, bottom, baseline）
2. align 单元格的水平对齐方式（left, center, right）
1. valign 单元格的垂直对齐方式（top, middle, bottom, baseline）
2. align 单元格的水平对齐方式（left, center, right）
3. width 表格宽度
4. height 表格高度
5. rowspan 单元格合并的行数 rowspan="2"
6. colspan 单元格合并的列数 colspan="2"