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

CSS是什么？

用来定义页面元素的样式
通过设置字体和颜色、设置位置和大小、添加动画效果等修饰页面。

在页面使用CSS的三种方法

外链

<link rel="stylesheet" href=".../style.css">

嵌入

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

内联

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

使用外链的方法，将CSS样式写在独立文件中具有一些优点：

便于复用
便于管理

选择器 Selector

通配选择器

*{
    选择器 : 属性值;
}

标签选择器

<标签>{
    选择器 : 属性值;
}

id选择器

为标签设置id

#id{
    选择器 : 属性值;
}

类选择器

为标签设置class

.class{
    选择器 : 属性值;
}

属性选择器

标签中设置了属性，如disabled

[属性]{
    选择器 : 属性值;
}

input[type="password"]{
    ... : ...;
}

匹配href以#开头的标签

a[href^="#"]{
    ... : ...;
}

匹配href以.jpg结尾的标签

a[href$=".jpg"]{
    ... : ...;
}

伪类

标签 ：一些行为{
    ... : ...;
}
标签.class值{
    ... : ...;
}

选择器的组合

捕获.PNG
对于兄弟选择器和相邻选择器一开始没有搞清楚有什么区别，其实很容易区别：
跟A拥有同个父元素的所有B都能称为兄弟，但需要紧挨在A后且具有相同父元素的B才能称为相邻。如果中间间隔了其他的元素，能称为兄弟却不能称为相邻。

选择器特异度

id # ：100
（伪）类 . ：10
标签 E ：1

颜色

RGB
HSL 色相、饱和度、亮度相比起RGB颜色，HSL更符合人的阅读习惯，更易于人眼辨别、调整颜色

颜色后增加alpha可以调整显示的不透明度从0→1是完全透明→完全不透明的效果。

字体

font-family
Web Fonts
font: style weight size/height family;

继承

可以通过在选择其中使用：inherit关键字使原本不具有继承的属性变为可继承的。

布局

常规流

行级
- span
- em
- strong
- cite
- code
块级
- body
- article
- div
- main
- section
- h
- p
- ul
- li
表格布局
FlexBox
Grid布局

行级排版上下文 IFC

text-align决定一行内盒子的水平对齐
vertical-align决定一个盒子在行内的垂直对齐
避开浮动元素

块级排版上下文 BFC

根元素
浮动、绝对定位、inline-block
Flex子项和Grid子项
overflow值不为visble的块盒
display：flow-root；

排版规则

盒子从上到下摆放
垂直margin合并
BFC内盒子的margin不会与外面的合并
BFC不会和浮动元素重叠

总结与思考

使用mdn文档可以阅读和了解更多与css相关的细节developer.mozilla.org/zh-CN/docs/…

CSS基础 | 青训营笔记