这是我参与「第四届青训营 」笔记创作活动的的第1天
基础班第二课的内容为理解CSS,笔记分为以下几个部分： 初步了解CSS和深入了解CSS。
初步了解CSS
CSS是什么？
CSS层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML或XML等文件样式的计算机语言。用来定义页面元素的样式。
CSS可以用来设置字体和颜色、设置位置和大小、添加动画效果等。
CSS的基本代码如下：
h1 { color:white; font-size:14px; }
h1为选择器Selector，color为选择器Property，white为属性值Value。
CSS的三大特性
层叠型、继承性、优先级（即权重）
层叠性：样式冲突，就近原则，哪个离结构近就执行哪个
样式不冲突，不会层叠
继承性
子标签会继承父标签的某些样式，如文本颜色和字号（text-,font-,line-这些元素开头的可以继承，以及color属性
恰当的使用继承可以简化代码，降低css样式的复杂性
优先级
选择器相同，执行层叠性
选择器不同，则根据选择器权重执行
继承的权重是0， 如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重都是0
如何使用CSS
1、在页面中使用CSS
在页面中使用CSS有三种方式，分别为外链、嵌入、内联。
1）外链
即从外部引入css文件
<link rel="stylesheet"href="/assets/style.css">
2）嵌入
在html文件下写入css样式
<style>
li{ margin :0; list-style :none; }
</style>
3）内联
直接在html标签中写入css样式
<p style=" margin:1em 0">EXAMPLE CONTENT</ p>
2、CSS是如何工作的
加载HTML->解析HTML->创建DOM树->展示页面
解析HTML->加载CSS->解析CSS->添加样式到DOM节点->展示页面
3、CSS中的选择器(Selector)
-
找出页面中的元素，以便给他们设置样式
-
使用多方式选择元素
按照标签名、类名或id
按照属性
按照DOM树中的位置
通配选择器
在 CSS 中，一个星号 (*) 就是一个通配选择器。它可以匹配任意类型的 HTML 元素。
标签选择器
标签选择器可以定义多个标签的样式,标签名为HTML页面中的标签名称，不可自定义。
<style>
标签名(li){
属性:属性值;
}
</style>
id选择器
ID选择器定义在style标签内，使用"#"作前缀，id名可以自定义。用于修改该id名称标签样式。在一个HTML页面中每个id名称都是唯一的。
<style>
id名(#test){
属性:属性值;
}
</style>
类选择器
类选择器定义style标签内，使用"." 来做前缀，类名可以自定义。用于修改该类名标签样式。在一个HTML页面中可以有多个相同的类名。
<style>
类名(.test){
属性:属性值;
}
</style>
属性选择器
属性选择器可以根据元素的属性及属性值来选择元素。如果希望选择有某个属性的元素，而不论属性值是什么，可以使用简单属性选择器。
将包含title的所有元素变为红色
*[title] {color:red;}
伪类（pseudo-classes）
- 不基于标签和属性定位元素
- 伪类包含状态伪类和结构性伪类
1）链接伪类选择器
为了确保生效，请按照LVHA的顺序声明
:link :visited :hover :active
2）focus伪类选择器
:focus伪类选择器用于选取获得焦点的表单元素
焦点就是光标，一般情况<input>类表单元素才能获取，因此这个选择器也主要针对与表单元素来说
调试CSS
- 右键点击页面，选择【检查】
- 使用快捷键 Ctrl + Shift + I (Windows) Cmd + Opt + I (Mac)
深入了解CSS
选择器的特异度/优先级
优先级分类
可以把 CSS 的优先级从高到低来分成6级：
第一级别：无优先条件的属性我们只要在属性后添加 !important 即可。这个属性可以覆盖此页面所有位置定义的同种元素样式。
第二级别：在元素标签内直接添加 style ，俗称内联样式。
第三级别：ID 选择器。例：#id{color:red;}
第四级别：类选择器，属性选择器或者伪类选择器。例：.one{color:blue;}
第五级别：元素选择器。例：div{color:yellow;}
第六级别：统配选择器。例：{color:green;}
选择器的权重
我们把选择器特殊性分为4个等级，每个等级是一种选择器，每个等级的值加起来就是该选择器的权重。
四个等级定义如下：
第一级：内联样式，例：style=""，它的权值为1000
第二级：ID选择器，例：#id，它的权值为100
第三级：class选择器，例：.one，它的权重为10
第四级：元素选择器，例：div,p,h1 ，它的权重为1
布局(Layout)是什么？
CSS 页面布局技术允许我们拾取网页中的元素，并且控制它们相对正常布局流、周边元素、父容器或者主视口/窗口的位置。
盒子模型
每个盒子由四个部分（或称区域）组成，其效用由它们各自的边界（Edge）所定义。与盒子的四个组成区域相对应，每个盒子有四个边界：内容边界 Content edge、内边距边界 Padding Edge、边框边界 Border Edge、外边框边界 Margin Edge。
常规流 Normal Flow
正常布局流 (normal flow) 是指在不对页面进行任何布局控制时，浏览器默认的 HTML 布局方式。
BFC（块级格式化上下文）
排版规则
Flex布局
任何一个容器都可以指定为flex布局
Flex布局下容器的属性
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
Flex布局下项目的属性
- order
- flex-grow
- flex-shrink
- flex-basis
- flex
- align-self
Grid布局
Grid布局下容器的属性
- grid-template-*
- grid-row-gap / grid-columns-gap
- grid-template-areas
- grid-auto-flow
- justify-items(水平方向)/aligh-items(垂直方向)
- justify-content(水平方向)/align-content(垂直方向)
- grid-auto-columns/grid-auto-rows
Grid布局下项目的属性
- grid-column-start/grid-column-end
- grid-area
- justify-self/align-self
Position
static
即没有定位，遵循正常的文档流对象，会忽略top,left,bottom,right的作用；
fixed
- 相对于浏览器可视区固定位置；
- 脱离文档流，不占据空间
relative
- 相对于其正常位置定位；
- 原本占据的空间不会移动；
- 常用来作为绝对定位元素的容器；
absolute
- 相对于最近的已定位的父级元素，如果没有，则相对于html元素；
- 脱离文档流，不占据空间
sticky
- 基于用户的滚动位置来定位，在position和fixed之间来回切换；
- 当页面滚出目标区域时，它会像fixed一样固定在目标位置；
- 不滚动时，其行为与相对定位相同；
- 滚动后，top，left，bottom，right生效，但margin会失效；
老师提的学习建议
-
充分利用MDN和M3C CSS规范
-
保持好奇心，善用浏览器的开发者工具
-
持续学习，CSS新特性还在不断出现
