css层叠样式表，是一种标记语言，是用来修饰文档的语言，让文档以更优雅的形式呈现给用户。
为了内容和样式进行分离，提高工作效率
1996年12月第一份正式标准完成 CSS
1998年5月CSS规范第二版出版
1999年开始修订，2001年完成了工作草案主要设置HTML页面中的文本内容、图片的外形、版面的布局和外观显示样式, CSS写在head标签中的style标签中
DOM树的简单理解：
CSS声明
CSS核心功能：给特定的属性设置特定的值
CSS的属性和值：大小写敏感
属性名和属性值通过":"分割
属性和属性之间通过","分割
CSS声明块
将多个CSS声明写到一起，声明和声明之间通过";"分割
使用'{}'将多个声明括起来，形成一个声明块，最后一个声明后面的分号";"可省略，但最好加上
eg. {
background-color:black;
border:1px solid black;
}
CSS选择器：
CSS声明块前面添加选择器，用来指定将该声明用在哪些元素上
eg. *{
background-color:black;
border:1px solid black;
}
CSS可读性
CSS注释：/* */
padding:10px 8px 20px 15px; /*上 右 下 左 顺时针*/
等价于：
padding-top:10px;
padding-right:8px;
padding-bottom:20px;
padding-left:15px;
上 右 下 左
margin：10px 20px 8px 30px;
利用css更改文字样式
<style>
p {
color:blueviolet;
font-style: italic;
}
#col {
color :#f3b8b8;
}
</style>类选择器：差异化选择不同标签，利用class属性，口诀：样式点定义，结构类调用，一个或多个，开发最常用。
一个标签可以有多个类名，eg.<div class="size color">中间用空格隔开</div>
<div id="col">id选择器的口诀：样式#定义，结构id调用，只能调用一次，别人且勿使用</div>
id选择器和类选择器的区别:类选择器可以重复，id只能一个标签调用 ，#id名{}
通配符选择器，用*定义，表示页面中所有元素
字体系列：
- font-family:字体（中文/英文都行，所有多个字体则用"，"分割），利用多个字体是为了浏览器兼容，默认第一个字体，若第一个字体不兼容则显示第二个字体。
- 字体大小：font-size:字体大小px;不同的浏览器默认显示的字号大小不相同，标题标签比较特殊，需要单独指定文字大小
- 字体粗细：font-weight:normal（默认字体，400）/bold(粗体，700)/bolder/light/数字(不加单位),实际开发中更提倡用数字来设置字体粗细。
- 文字样式：font-style：normal(正常的，让倾斜字体不斜)/italic(倾斜)
复合：font:font-style font-weight font-size font-family
不能更换顺序（文字样式、字体粗细、字体大小、字体类型），省略时必须有font-size和font-family
设置：
- 文本颜色：color:预定义的颜色值/十六进制/RGB代码；
- 对齐文本：text-align:center/left（默认左对齐）/right;（水平对齐）
- 装饰文本：text-decoration:none(默认没有装饰)/underline(下划线)/overline(上划线)/
- line-through(删除线)
- 文本缩进：text-indent:10px;(用于指定首行缩进距离)，em是一个相对单位，就是当前元素一个文字的大小。如果当前元素没有设置大小，则会按照父元素的一个文字大小 eg.text-indent:2em;（缩进当前元素2个文字大小的距离）
- 行间距：line-height:26px;用于设置行间的距离，可以控制文字行与行之间的距离
CSS的引入方式：
- 1.行内样式表：在元素标签内部的style属性中设定CSS样式，控制当前标签设置样式（使用少）
- 2.内部样式表/嵌入式：写到HTML内部，写入head标签中的style标签中，控制整个页面中的元素样式设置
- 3.外部样式表：样式单独写到CSS文件中，之后再引入，实际常用。在CSS文件里只有样式，没有标签style ，在HTML页面中用<link>标签引入：在head标签里写<link rel="stylesheet(样式表)" href="引入文件名">
优先级：行内样式表>内部样式表>外部样式表
Chrome调试工具：
- ctrl+滚轮：放大缩小开发者工具代码
- 左边是HTML元素结构，右边是CSS样式
- 右边CSS样式可以改动数值（左右箭头或者直接输入）和查看颜色
- Ctrl+0：复原浏览器大小
- 如果点击元素发现右侧没有样式引入，既有可能是类名或者样式引入错误
- 如果有样式，但是样式前面有黄色感叹号提示，则是样式属性书写错误
特性值（只是相对概念，优先级由上到下依次递减）
style 行内样式表 1000
id选择器 100
类选择器、属性选择器、伪类选择器 10
元素选择器和伪元素选择器 1
color: tomato !important;
样式继承
有些规则会被子元素默认继承，有些不会
会被继承的：font 文本 列表 cursor等
不会被继承：margin padding border等
三个特殊的值来改变继承关系
/* 将可继承的属性改为不继承 */
color: initial;
/* 将不继承的属性改为继承 */
border: inherit;
/* 跟随默认情况 */
/* color: unset; */
emmet语法：
自增符号：$
.demo$*5的结果:
<div class="demo1"></div>
<div class="demo2"></div>
<div class="demo3"></div>
<div class="demo4"></div>
<div class="demo5"></div>.{$}*5的结果：
<div class="demo1"></div>
<div class="demo2"></div>
<div class="demo3"></div>
<div class="demo4"></div>
<div class="demo5"></div>复合选择器：
（1）后代选择器：元素1 元素2{ 样式声明}
元素2是元素1的后代
（2） 子代选择器：只能选择作为某元素的最近一级子元素
元素1>元素2{ 样式声明}
元素1是父级，元素2是子级，最终改变元素2的是子集，有严格的父子关系
补充：相邻同胞选择器 下一个兄弟元素："+"
.myP+* 选的是class为myP的元素的下一个兄弟元素
一般同胞选择器： "~"
.myP~* 选的是class为myP的元素的后面的所有兄弟元素
（3）并集选择器：选择多组标签，同时为他们定义相同的样式
元素1，元素2{ 样式声明}
约定的语法规范：并集选择器竖着写，最后一个元素不加逗号","
（4）伪类选择器：用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第一个、第N个元素
特点：用冒号(:)表示，比如；hover、:first-child
1） 链接伪类选择器：
- a:link 选择所有未被访问的链接
- a:visited 选择所有已访问的链接
- a:hover 选择鼠标指针位于其上的链接
- a:active 选择活动链接，鼠标正在按下但还没有弹起的链接
注意事项：
按照link、visited、hover、active的顺序声明，口诀：love hate（L-V-H-A）
一般情况先设置a的属性，再设置hover的属性
2） focus伪类选择器：用于选取获得焦点的表单元素，焦点就是光标
一般情况，input类表单元素才能获取，所以这个选择器主要针对表单
input:focus{
样式声明
eg.background-color:red;
}
3)其他伪类选择器：
①子代元素相关
以:开头，用于其它选择器之后，指明元素在某种状态下才能被选中
:only-child 独生子元素
:first-child 第一个孩子元素
:last-child 最后一个孩子元素 */
:nth-child(n) 第n个孩子元素 n从1开始
:nth-last-child(n) 倒数第n个孩子元素 n从1开始
:first-of-type 选中app类子代的每种类型的第1个孩子元素
:last-of-type 选中app类子代的每种类型的最后1个孩子元素
:nth-of-type(n) 选中app类子代的每种类型的第n个孩子元素 n从1开始
:nth-last-of-type(n) 选中app类子代的每种类型的倒数第n个孩子元素
②元素状态相关的
:checked 按钮被选中时的状态
:default 默认选中时的状态
:enabled 表单项可用时的状态
:disabled 表单项禁用时的状态
:valid
:invalid 通过表单验证和不通过
:required
:optional 必填项和选填项
:in-range
:out-of-range 在范围内、不在范围内
（5）伪元素选择器 ，以"::" 开头 用在其它选择器之后
::after 选中之后的不存在的节点，然后结合content添加内容
::before 选中之前的不存在的节点，然后结合content添加内容
::first-letter 选中第一个文本字符
::first-line
::selection
（6）属性选择器
[title] {
color: khaki;
}
[title=div2] {
color: khaki;
}
// 属性包含title，属性值以di开头
[title^=di] {
color: khaki;
}
// 属性包含title，属性值以Div结尾
[title$=Div] {
color: khaki;
}
// 属性包含title，属性值包含i(模糊匹配 只要有这字符串就行)
[title*=i] {
color: greenyellow;
}
// 属性包含title，属性值中有di(必须是目标字符串)
[title~=di] {
color: greenyellow;
}
* ****^^^***div # .
<div class="mydiv di" id="one">1</div>
CSS中的一些单位值
px #333 red blue hotpink
颜色：
①关键字：
https://developer.mozilla.org/zh-CN/docs/Web/CSS/color_value
②rgb()
三个参数rgb(0-255，0-255，0-255) 红 绿 蓝
rgb（204, 247, 202）
③rgba()
三个参数rgb(0-255，0-255，0-255，0-1) 红 绿 蓝 代表透明度 0完全透明 1完全不透明
④十六进制
#六个十六进制的数 两个代表一个通道 红 绿 蓝 0-F
#aaa = #aaaaaa
#602653
⑤HSL
第一个参数 色调 0-360 0 红色 120 绿色 240 蓝色
第二个参数 饱和度 0-100% 0 灰色 100% 全彩
第三个参数 亮度 0-100% 0 黑色（暗） 100%白色
background-color: hsl(120, 100%, 50%);
⑥HSLA
透明度 0完全透明 1完全不透明
background-color: hsla(120, 100%, 50%, 0.5);
1307
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
