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

CSS

课程内容

介绍了css的概念--什么是css？
讲述css的使用
讲解了css中的选择器
介绍了伪类
介绍了css的布局

知识点总结

什么是CSS

CSS是Cascading Style Sheets的缩写。CSS用来定义页面元素的样式，包括设置字体和颜色、设置位置和大小、添加动画效果。由选择器Selector、选择器Properly、属性值Value和声明Declaration组成。

例如：

/*选择器Selector*/
h1{  
    /*选择器Properly*/color : white/*属性值Value*/ ; 
    font-size:14px;/*声明Declaration*/
}

CSS的使用

CSS的使用有3种：外链、嵌入和内联。

外链：

<link rel="stylesheet" href="css样式文件所在路径">

嵌入：

<style>
    li{
    margin:0;
    list-style:none;
    }
    
    p{
    margin:lem 0;
    }
</style>

内联：

<p style="margin:lem 0">Example Content</p>

CSS选择器

选择器Selector

找出页面中的元素，以便给它们设置样式

使用多种方式选择元素

按照标签名、类名或ID

按照属性

按照DOM树的位置

其它选择器类型

通配选择器 如*{}
标签选择器 如h1{}
ID选择器 如#id{}
类选择器 如.class{}
属性选择器 如 [disable]{}

选择器补充知识：

选择器优先级顺序

标签选择器（body等）>id选择器（#id）>类选择器（.class）>后代选择器（#head .nav ul li）>子元素选择器（div>p）>伪类选择器（:active）

伪类

伪类不基于标签和属性定位元素

伪类类别

动态伪类（link/visited等）

目标伪类（：target）

语言伪类（:lang）

UI状态伪类（disabled/checked/enabled）

结构化伪类（nth等）

对立面伪类（not..）

动态伪类

link:用来定义链接未被访问的样式

visited:用来定义链接已经被访问过的样式(默认状态下是跟踪了用户的行为)

hover:用来定义用户用鼠标划过对应的元素，但是未激活显示的样式

focus:用来定义一个元素本身具备焦点（接受键盘、鼠标、 form的输入等）之后，显示的样式. active:用来定义用户按下鼠标后，但是并未离开时候的样式，通常是左侧的鼠标

CSS布局

布局（Layout）是确定内容大小和位置的算法，依据元素、容器、兄弟节点和内容等信息来计算

布局的相关技术

常规流 Normal Flow

行级排版上下文(IFC)
块级排版上下文(BFC)
Table排版上下文
Flex排版上下文(display:flex) --弹性布局
Grid排版上下文(display:grid) --网格布局

浮动 Float

左浮动-float:left
右浮动-float:right
清除浮动-clear

定位 position

相对定位-position:relative
绝对定位-position:absolute
固定定位-position:flxed
默认定位-position:static

个人总结

通过本次课程的学习，我对CSS的相关知识有了更系统的了解，对一些关于CSS的学习方法也有了一定掌握，CSS技术不断更新，说明我们也要不断学习，与时俱进。但是关于CSS选择器的特异度和CSS继承的计算我仍有不理解的地方，这也需要我之后加深对其的了解，不断进步，不断学习！

参考资料

第四届青训营课件《理解CSS》
CSS伪类——动态伪类（link/visited/hover/active/focus）blog.csdn.net/weixin_3435…

CSS学习笔记 | 青训营笔记

CSS