HTML基础学习的内容框架标签，很容易操作上手，只要多练习多操作也不会有什么问题，接下来进行CSS的基础学习记录。
一，CSS的基础学习
1，概念
CSS，层叠样式表，用来给HTML标签添加样式，美化页面
CSS的本质就是直接列出样式。书写合适的选择器，把指定的样式一条条罗列出来
CSS与HTML是彼此分开的，二者之间的链接，就是"选择器"来进行结合；
2，CSS书写的位置
内嵌式：在.html文件中书写，<head></head>标签对中添加<style></style>标签，<style>标签里书写css语句
外链式：可将CSS单独存为.css文件，然后使用<link>标签引入它至.html文件中，<link>标签依旧是在<head>标签内添加
添加<link>标签后，.css文件可以直接创建一个新的，操作步骤如下
3，CSS基本语法
css注释快捷键 ctrl+/，注释内容不会显示，只是一个提示说明的作用
插件 live server,代码和浏览器实时同步查看
二，CSS选择器
1，选择器的作用
找到合适的元素，然后给元素加上正确的样式
2，标签选择器
它直接使用元素的标签作为选择器，会选中页面上所有此种标签，无论是父元素还是子元素还是更深层的元素，都会选中
3，id选择器
标签都可以有id属性，id的名称是唯一的，同一个页面上不能有相同的id名称（id名称只能由字母、数字、下划线、短横构成，不能以数字开头）
CSS选择器使用井号 # 前缀，选择指定的 id 标签
4，class选择器（类选择器）
class属性表示"类名"，命名规范同id命名规范
与 id 属性的区别，class属性不是唯一的，多个标签可以用同一个类名；
同一个标签可以同时属于多个类，类名用空格隔开即可
使用点 . 前缀选择指定class标签
5，通配符选择器
* 号，可以找到页面上所有的元素进行样式定义
6，后代选择器
使用空格表示“后代”，可以有很多空格，隔开好几代
7，并集选择器
可以同时选择多个标签，用逗号，隔开
8，子选择器
使用 > 符号隔开，两个标签必须为父子标签
9，相邻兄弟选择器
同级标签相邻的两个标签，使用 + 号隔开
10，通用兄弟选择器
使用 ~ 小波浪隔开，a~b会选择a元素之后所有同层级b元素
11，序号选择器
CSS Selectors Cheatsheet - FrontEnd30 （序号选择器练习，学习页面）
：first-child 选择器：选取其父元素的首个子元素的指定选择器
：last-child 选择器：选择最后一个子元素
：nth-child（）选择器：选取第（）个子元素
括号内填写even会选中偶数元素；填写odd会选中奇数元素
：nth-of-type（）选择器：选取某类型的第（）个元素
：only-child（）选择器：父级标签唯一子元素
：nth-last-child（）选择器：选取倒数第（）个元素
：nth-last-of-type（）选择器：选取某个类型的倒数第（）个元素
type结尾表类型只看一类的排序，child结尾看全部的顺序
取反选择器，：not 取反
12，属性选择器
在标签内添加属性，利用属性来选择元素
主要的符号有：
^ ，表示以什么开头；
$，表示以什么结尾；
*，表示包含什么；
~，表示有空格隔开什么
| ，表示以什么 - 开头
13，伪类
是添加到选择器的描述性词语，指定要选择的元素的特殊状态，超级链接拥有4个特殊状态
4个状态前两个的顺序可以进行互换，其余的顺序不可更换
a：link ，没有被访问
a：visited ，已经被访问过
a：hover ，正被鼠标悬停
a：active ，正被激活，鼠标按中还未松开
新增伪类：
：empty 选择空标签
：focus 选择当前获得焦点的表单元素
：enabled 选择当前有效的表单元素，：disabled选择无效的表单元素
：checked 选择当前已勾选的单选按钮或者复选按钮
：root 选择根元素，即<html>标签
14，伪元素
：：before 元素之前添加内容；：：after 元素之后添加内容
设置 content 属性添加内容，（注：内容无论是什么都要用引号 " " 引起来才会读取）
：：selection 鼠标选中部分添加高亮
：：first-letter 选中第一个单词
：：first-line 选中第一行
三，CSS三大特性
1，继承性
子标签会继承父标签的某些css属性，比如颜色、字体大小等
2，层叠性
给同一个选择器设置了同一个样式不同的数值，新设置的样式就会与原样式冲突，避免样式冲突，层叠性遵循的原则就是就近原则，样式离的近的就会选择哪个样式执行。样式不冲突，就不会影响。
3，优先级
样式会有不同的权重，根据权重的大小来决定最后实现的样式。
优先级一样的，写在最后的样式生效
优先级的选择器权重：
继承 < 通配符 *< 标签(元素选择器) < 类选择器，伪类选择器 < id选择器 < 行内样式 < ! important
选择器的权重是由四组数字组成，
四，CSS字体颜色、背景边框
字体、颜色
1，字体颜色
2，字体样式
3，文本样式
单行文本垂直居中：设置行高=父级高度
水平垂直居中：设置text-align：center；line-height：父级高度；
字体属性连写：
font：倾斜 加粗 字号/行高 字体主题；（中间用空格隔开即可，字号和行高用斜线隔开）
背景、边框
背景连写：
background：颜色 图片 重复 附着 位置/大小；（中间用空格隔开）
五，CSS盒模型
组成
content（内容）、padding（内边距）、border（边框）、margin（外边距）四部分组成
（content相当于盒内物品，padding是盒内填充物，border是包装盒，margin是盒子之间的距离）
（图片为百度盒模型图片）
1，content
内容区域，由 width 和 height 组成
2，padding
内边距，有四个样式，padding-left、padding-right、padding-top、padding-bottom
padding后面的数值，
只写一个值：20px（意思是上下左右的内边距都是20px）
写两个值：20px 30px （上下边距是20；左右边距是30）
写四个值：20px 30px 40px 50px （分别表示为上、右、下、左的值）
3，margin
外边距（外填充），四个样式与数值，同padding
4，其他
box-sizing :盒尺寸，可以改变盒子模型中对于内容的默认
盒模型中 width 和 height 默认表示内容区的宽高
添加盒尺寸 box-sizing：border-box；属性，
宽高默认内容区就会更改为 content+padding+border，三者加起来的总宽高
margin叠加：给两个盒子同时添加上下外边距，二者就会叠加，会取上下值中最大值，左右不会
如果想避免叠加情况出现，便想办法只给一个元素添加间距
margin传递：会出现在嵌套结构中，只有margin-top会出现传递问题
想避免此问题，可以给父容器加边框；或者把margin换成padding
margin的自适应，也就是盒子居中，设置auto即可，自适应只有左右可以，上下不行
720
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
