这是我参与「第四届青训营」笔记创作活动的的第2天。今天复习了学过的CSS知识，这一部分知识点还是挺多的，顺便写写笔记巩固一下自己的知识框架

CSS

CSS是什么？CSS简介

之前我学了HTML，HTML可以将网页的文本内容呈现到浏览器之中。HTML标签也能够对网页进行美化和布局，但是只使用HTML标签容易造成丑，臃肿和繁琐。

CSS的全称是层叠样式表（Cascading Style Sheets），它也是一种标记语言。

CSS的主要使用场景就是美化网页，对网页的页面进行布局。

引入CSS的三种方式

行内样式

在html标签内部进行设置

<标签 style="属性:属性值;"> </标签>

内部样式

在html文件头部通过选择器来进行设置

选择器{属性:属性值;属性：属性值}

外部样式

通过link引入外部css文件

<link rel="stylesheet" href="外部css文件" />

CSS的选择器

CSS之中可以根据选择器的类型把选择器分为基础选择器和复合选择器,复合选择器是建立在基础选择器之上，对基本选择器进行组合形成的,由两个或多个基础选择器，通过不同的方式组合而成的，可以更准确、更高效的选择目标元素（标签）常用的复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器等等。

基础选择器

复合选择器

CSS能够做到的事情

通过选择器把相关的HTML标签选出来之后，我们可以使用CSS来对这些标签进行设置。将HTML标签及其内容改成我们熟悉和想要的样式。下面来一个例子(使用CSS选择器来实现有颜色的圆形和圆角矩形盒子)：

 <!DOCTYPE html>
 <html lang="en">
 
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>title</title>
     <style>
         .yuanxing {
             width: 200px;
             height: 200px;
             background-color: blue;
             border-radius: 50%;
         }
 
         .juxing {
             width: 200px;
             height: 100px;
             background-color: red;
             border-radius: 50px;
         }
     </style>
 </head>
 
 <body>
     <div class="yuanxing"></div>
     <div class="juxing"></div>
 </body>
 
 </html>

结果图如下：

CSS主要的三大特性

1.层叠性
当不同的选择中设置了同一个css样式的时候，发生样式冲突当样式冲突的时候，样式会发生层叠，只有一个起作用
2.继承性
父标签设置的样式特性会被子标签继承
3.优先性
当样式冲突的时候，选择器的权重大则该选择器下面的样式起作用

传统网页布局的三种方式CSS的三种设计方法

盒子模型

盒子模型一般用来处理网页布局的上下分布，即上下的排列，一个标签就是一个矩形盒子。

盒子模型包括外边距(margin)，边框(border)，内边距(padding)，内容四个部分。

外边距用来处理和其他盒子直接的距离，内边距用来处理内容和边框之间的距离。

浮动

浮动一般用来处理网页布局的左右分布，即左右的排列，一般和盒子模型一起使用来进行网页布局的定位(一个负责上下，一个负责左右)。

浮动可以通过float来设置浮动样式，float 属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。

定位

定位的使用场景是网页布局的时候

1.某个元素可以自由的在一个盒子内移动位置，并且压住其他盒子
2.当我们滚动窗口的时候，盒子是固定屏幕某个位置的

即我们常常在浏览网页的时候，出现在网页左侧或者右侧的小窗口之类的。

CSS观望

CSS除了以上提到的，对于网页布局还有很多工具，比如精灵图和CSS3中的工具。并且就算是三大网页布局工具受于篇幅限制我也只是随意介绍了一下，我还有很多需要学和了解的地方。

CSS | 青训营笔记

CSS