这是我参与「第四届青训营」笔记创作活动的的第1天

简单的css样式

1.通配选择器(给所有元素添加样式)

*{ color：red }

2.根据标签的属性值来选择样式

例如: <input type="password" />

css可以用下面方式来选择：
input[type="password"] {
    color:red
}

3.伪类选择器

常见的有：

:linke（默认情况下样式）、:visited(访问情况下样式)、:hover(鼠标悬停样式)、:active(鼠标按下之后样式)、:focus(聚焦时样式) 除此之外，还有： :first-child(第一个孩子)、last-child(最后一个孩子)

4.组合式样式

通过将error和input组合起来，要满足两个条件样式才使用：

.error{

}
input.error{
    
}

5.HSL颜色

Hue:色相,取值为0-360;Saturation:饱和度,取值为0-100%;Lightness:亮度,取值为0-100%;所以可以用hsl(20,100%,100%)来表示颜色

6.font-family字体

可以指定多个字体样式给font-family: font-family:Optima,Georgia,serif通过逐次查找是否有该样式，有则渲染，没有就寻找下一个字样样式有无

7.white-space样式

给文本指定样式
normal:合并多个空格
nowarp:不换行
pre:保留所有
pre-warp:一行内显示超出换行
pre-line:合并空格，保留换行

深入css

选择器的优先级

根据特异度来决定： #id(id选择器) .(伪类选择器) E(标签选择器)
优先级从左到右一次降低。比如：
#nav .list li a:link =>特异度: 1 2 2
.hd ul.links a =>特异度 0 2 2
1 2 2 > 0 2 2,所以上面的样式优先级更高

布局（layout）

相关技术：常规流、浮动流、绝对定位注意：当元素所在的容器有高度时，其设置高度为百分比才生效常见的布局大概有两种：分别是flex布局和grid布局

flex布局

flex-direction 设置主轴对齐方式默认 row x轴从左到右；
flex-wrap 子元素换行的方式默认nowrap ；
flex-flow flex-direction和flex-wrap的简写默认row nowrap；
justify-content 子元素的对齐方式默认flex-start 左对齐
align-items
align-content

grid布局

小结：Grid布局和flex布局是有实质性的区别的，flex是一维布局，只能处理一个维度上的布局，一行或者是一列。但是Grid布局是二维布局，将容器划分成了“行”和“列”，产生了一个个的网格，可以将网格元素放在行和列相关的位置上，从而达到了布局的目的。

CSS样式|青训营笔记