这是我参与「第四届青训营 」笔记创作活动的第1天 主要内容为CSS

CSS

1. CSS介绍（美化网页）

层叠样式表（CSS），又称串样式列表。CSS能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体号样式，拥有对网页对象和模型样式编辑的能力。

1.1 CSS的使用

使用CSS可以让结构（HTML）与表现（CSS）分离，便于维护。

1.2 CSS的基本语法

CSS语法有三个组成部分：选择器、属性、属性值
selector{property:value}

1)selector选择器通常是需要改变样式的HTML元素

2）每条声明由一个属性（property）和一个属性值（value）组成

3）属性property是希望设置的样式属性（style:attribute），每个属性有一个属性值。

4）属性和属性值用冒号分开。

1.3 CSS的四种引入方式

在HTML样式中有四种CSS引用方式：行间样式、内联样式、外部样式、导入外部样式 · 行嵌样式：应用内嵌样式到各个网页元素

<p style="color:red;margin-left:20px">这是p标签</p>

· 内部样式：在网页上创建嵌入的样式表

· 外部样式：在窗口新建stylesheet，在文件中添加样式，“link:css+tab”嵌入

· 导入外部样式：（1）先创建css文件 （2）在style标签中用import导入这个样式文件

以上四种CSS引用方式的区别：

1）行间样式只用作于当前标签；

2）内部样式作用于当前文件；

3）外部样式可以被多个html文件引用（在实际样式开发中，最好使用外部样式）。

外部样式分为link引入和import引入，其区别是：

1）link是HTML标签，除了加载CSS外，还可以定义RSS等其他的事务；@import属于CSS范畴，只能加载CSS。

2）link引用CSS时，在页面载入时同时加载；@import需要页面完全载入以后才能加载。

3）link是XHTML标签，无兼容问题；@import低版本浏览器不支持。

4）link支持使用Javascript控制基于文档的DOM去改变样式；@import不支持。

5）若引用同时存在时，css样式的权重高于@import，可将其样式覆盖。

2. CSS的工作过程

3.CSS选择器

3.1分类：

1）通配符选择器

2）id选择器

3）标签选择器

4）类选择器

5）伪类选择器

6）伪元素选择器

7）属性选择器

8）关系选择器

通配符选择器

匹配HTML所有元素。

*{color：red}

id选择器

用来选择以某一id命名的标签（id是唯一的）。

#content{}

标签选择器

匹配对应标签

div{color:red;text-align:center;}

类选择器

匹配用“class”命名的标签

.container{margin:10px auto;background-color:lightblue;}

伪类选择器

描述一个元素的特殊状态

1）子元素伪类

1. :first-child  //匹配第一个子元素
2. :last-child  //匹配最后一个子元素
3. :nth-child()  //匹配第n个子元素

以上是根据子元素排序，进行匹配

1. :first-of-type  //匹配第一个子元素
2. :last-of-type  //匹配最后一个子元素
3. :nth-of-type()  //匹配第n个子元素

以上是匹配同类型的元素

特殊值： even(偶数)/2n, odd(奇数)/2n+1

2）not（否定）伪类

:not()  

3）超链接伪类（用链接表示状态）

:hover()   //鼠标移入悬停覆盖
:active()   //用户激活状态
:link()    //未被访问状态
:visited()  //被访问状态   

属性选择器

属性选择器可以根据元素的属性及属性值来选择元素

1: Elector[attr]   //选择具有attr属性的Elector元素

    <div title="标题"></div>
    <style>
        div[title]{color:lightblue}
    </style>

2: Elector[attr=val]  //选择具有attr属性且其属性等于val的元素
3: Elector[attr`=val]  //选择具有attr属性且其属性值包含val的元素
4: Elector[attr^=val]  //选择具有attr属性且其属性以val开头的元素
5: Elector[attr$=val]  //选择具有attr属性且其属性以val结尾的元素

关系选择器

1)后代选择器（空格）：选择作为某元素后代的元素

<h1><strong>strong标签</strong></h1>
<style>
h1 strong{
color:red;
}
</style>

2)子选择器：只能选择作为某元素子元素的元素

<h1>
<strong>strong1</strong>    //strong1显示为红色
<strong>strong2<strong>
</h1>
<style>
h1 strong{
color:red;
}
</style>

3)相邻选择器：选择紧跟某元素的元素

<h1>
<strong>strong标签</strong>  //strong标签显示红色
<p>p标签</p>
</h1>
<style>
h1 strong{
color:red;
}
</style>

4)兄弟选择器：选择紧跟在某元素后且同级的元素

<p>div标签</p>
<h1>h1标签</h1>     //显示红色
<style>
p+h1{
color:red;
}
</style>

伪元素选择器

:first-letter  //向文本的第一个字母添加样式
:first-line   //向文本的第一行添加样式
:before()     //在元素之前添加
:after()     //在元素之后添加
......

3.2 优先级（样式权重）

（外部样式）<（内部样式）<（内联样式） id选择器 > 类、伪类 >标签选择器

4.颜色

颜色的三种设置方式

1)颜色的名字 eg:red、yellow、lightblue...

2)RGB(r,g,b)/RGB(r,g,b,a) eg:rgb(233,123,34)...

3)HSL(h,s,l)/HSL(h,s,l,a) h:色调值 s:饱和度值 l:亮度值

注：可在RGB()和HSL()后添加a(透明度)

5.字体

常用属性 1）font-size:字号

2）font-family:字体

3）font-style:字体样式

4）font-weight:字体粗细（normal|bold|bolder|lighter）

5）color:颜色

6）line-height:行高

7）text-decoration:字体修饰（normal|underline|line-through|overline）

8）text-align:文本对齐（center|left|right）

9）text-indent:文本缩进（num+px|num+em）

10）letter-space:字母间距

11）word-space:单词间距

6.继承

CSS继承是指被包在内部的标签拥有外部标签的样式

6.1无继承属性

1)display

2)文本属性（vertical-align\text-shadow\text-decoration...）

3)有关盒子模型的属性

4)背景属性

5)定位属性

6)生成内容属性

7)页面样式

8)声音样式属性

6.2可继承属性

1)字体属性

2)文本部分属性（text-indent\text-align\line-height\color\diection\letter-space...）

3)元素可见性:visibility

4)表格布局属性

5)列表布局属性

...

6.3 CSS求值过程

7.布局

7.1常规流盒子属性

margin padding width height border

7.2块内元素和行级元素

7.3display属性

7.4常规流normal flow

IFC

BFC

7.布局

7.1 Flex Box

7.2 Flexibility

7.3 Grid布局

7.4 float浮动

浮动的原理：让元素脱离文档流，不占用标准文档

浮动的元素会脱离文档流

·浮动后面的元素如果是块级元素，会占据块级元素的文本位置，与背景和边框重叠

·浮动不会重叠

·会将块级元素和行内元素变成行内块元素

浮动的问题

1）背景不能显示，由于浮动产生，若对父级元素设置背景，父级不能撑开，导致背景不能显示

2）边框不能撑开

3）不能正确显示margin padding设置值

清除浮动的方法

1）为父元素设定固定宽高：简单粗暴，无兼容问题。但是内部元素高度不确定的情况下无法使用。

2）添加新元素(clear属性):在浮动元素后面添加一个空的div，css属性设置clear:both。但是添加了无意义的HTML标签，结构化比较差。

3）使用伪元素:after、:before实现。但是仅支持IE8以上和非IE浏览器。

4）父元素添加overflow:hidden，通过触发BFC方式，实现清除浮动，但最终实现的元素可能造成内部正常显示的元素被裁剪。

7.5 布局中的position

1）static:默认值，没有定位（不能设置偏移值），占用文档流。

2）relative:相对定位，相对于自身位置进行偏移，占用文档流。（设置之后仍然占用文档流）。

3）absolute:绝对定位，脱离文档流，相对于位置最近的父元素作偏移。若所有父元素无法定位，则依据body浏览器窗口作定位。

4）fixed:固定定位，脱离文档流，相当于浏览器窗口左上角（0，0）作偏移。

position的属性总结如下：

建议