这是我参与「第五届青训营 」伴学笔记创作活动的第 2 天
选择器 -- 优先级（依据特异度判断 ）
通配选择器
给所有标签设置样式
* {
color:red;
}
标签选择器
给某一种标签设置样式
<span>Hello Css</span>
span {
color:red;
}
id选择器
给某一个指定的标签设置样式，id名唯一
类选择器
给某一类标签设置样式
属性选择器
给含有某一属性或者某个属性含有某个特定值的的标签设置样式
伪类选择器
当标签处于某种状态时，设置样式
状态伪类
<a>Hello Css</a>
<input type="text" >
a：link{} // a标签在默认状态时的样式
a：visited{} // 在访问过a标签后的样式
a：hover{} // 鼠标悬停在a标签上时的样式
a：active{} // 鼠标按下a标签后的样式
:focus {} // 鼠标聚焦input标签时的样式
结构伪类(根据dom结点在dom树中的位置，来选中元素)
li:first-child {
color: red;
}
li:nth-child(2) {
color: yellow;
}
li:last-child {
color: blue;
}
li:first-child{} // 选中第一个孩子结点
li:nth-child(2){} // 选中某个指定的孩子结点
li:last-childd{} // 选中最后一个孩子结点
颜色：
rgb -- 通过调节三原色的数量调配不同的颜色，每个颜色可以分别使用16进制表示，组合成一个6位的16进制数
rgba -- 在rgb上多了一个不透明度
HSL -- 通过调节色相，饱和度，透明度来调配不同的颜色
值 -- 直接使用颜色的值名称
字体：
font-famliy : // 使用字体名称，选择字体
@font-face {
src:url(); // 添加src属性指定url地址
}:
font-size: // 指定字体尺寸，关键词（small，medium，large），长度（px，em)，百分数(先对于父元素字体大小)
font-weight: // 字重
line-height：// 行高
继承 -- 某些属性会自动继承其父元素的计算值，除非显示指定一个值
* {
box-sizing：inherit; // 显示继承：让原本不可继承的元素可以继承，使用inherit关键字，显示继承父元素的属性
}
* {
background-clolr：initial; // 初始值：css中的每个属性都有一个初始值，可以使用initial关键字显式重置初始值
}
布局技术
常规流：行级，块级，表格布局，flexbox，grid布局
盒子模型：
-
块级盒子 -- 不和其他盒子并列排放（适合所有的盒子模型）
如：body,article,div,main,section,h1~h6,p,ul,li等 display:block
-
行级盒子 -- 和其他行级盒子一起放在一行或拆开成多行（盒模型中的width，height不适用）
如：span,em,strong,cite,code等 display:inline
border //边框
margin // 外边距
padding // 内边距
height // 高度
width // 宽度
Flex Box布局：
-
justify-content：主轴方向的布局
-
align-items：侧轴方向
Grid布局：
-
grid-template: /将相关属性将容器划分为网格
-
grid-area： 指定盒子的面积
浮动：float
选择器 {
float：left; // 左浮动
}
选择器 {
float：right; // 右浮动
}
绝对定位：position
-
static 默认值，非定位元素
-
relative 相对自身原本位置偏移，不脱离文档流
-
absulute 绝对定位，相对非static祖先元素定位
-
fixed 相对于视口绝对定位
在页面中使用css
-
外链：使用link标签引入
-
嵌入：使用style设置样式
-
内联：在标签中使用style属性设置标签样式
总结：打好基础是学习的关键
