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

一、CSS简介

1、CSS是如何工作的

CSS的工作分为6步

1、浏览器载入 HTML 文件。

2、将 HTML 文件转化成一个 DOM（Document Object Model）树，DOM树是文件在计算机内存中的表现形式，下一节将更加详细的解释 DOM树。

3、浏览器会拉取该 HTML 相关的大部分资源，比如图片、视频和 CSS 样式。

4、浏览器拉取到 CSS 之后会进行解析，根据选择器的不同类型把他们分到不同的“桶”中。浏览器基于它找到的不同的选择器，将不同的规则应用在对应的 DOM树的节点中，并添加节点依赖的样式

5、上述的规则应用于渲染树之后，渲染树会依照应该出现的结构进行布局。

6、网页展示在屏幕上（这一步被称为着色）。

2、使用CSS

带入CSS

1、在head标签中写CSS标签

2、引入CSS文件

3、CSS的选择器

①、标签名选择器：

    div {
    属性：值
    }

②、ID选择器

    #ID name{
    属性：值
    }

③、类选择器

    .CLASSname{
    属性：值
    }

④、属性选择器

1、[color]{
   }
 ps:在标签中有color属性的就匹配上该选择器
2、input[type=”password”]{
   }
 ps:在标签input中type属性为password的就匹配上该选择器
3、a[href^=”D:”]{
   }
 ps:在标签a中href属性的值的开头为“D:”就匹配上该选择器
    如果是结尾使用 $=

⑤、选择器组

选择器1，选择器2，选择器3{
    属性：值
}
ps：相当于同时给多个选择器赋值

4、选择器的组合用法

使用方法：

图片.png

5、颜色

图片.png

6、字体

ps：指明字体时候可以指定多个字体，用逗号分开，
    一旦用户端没有该字体就自动使用下一个字体
    一般在字体属性最后加上一个通用字体族以便增加健壮性

通用字体族：

1、Serif：衬线族（宋体，Georgia）

2、Sans-Serif：无衬线族（Arial、Helvetica、黑体、微软雅黑）

3、Cursive：手写体（Caflisch Script、楷体）

4、Fantasy （Comic Sans MS、Papyrus）

5、Monospace：等宽字体（Consolas、Courier、中文字体）

7、CSS中的继承

    一般像字体颜色、大小如果没进行指定就显示其上一级的选择器；
    特殊地像边框大小不可继承的，可以使用*{属性a：inherit}让属性a变成可继承的

初识CSS ｜ 青训营笔记

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