保姆级教程 CSS 知识点梳理大全，超详细！！！

Posted 2021-10-27 王同学要努力

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了保姆级教程 CSS 知识点梳理大全，超详细！！！相关的知识，希望对你有一定的参考价值。

保姆级教程 CSS 知识点梳理大全，超详细！！！

✴️大家好,我是王同学，好久不见，趁着假期王同学把CSS 知识点梳理了一遍
✴️如果对你有帮助就给我点个赞吧，这样我们就互不相欠了
✴️星光不负赶路人，所有的幸运都来自于坚持不懈的努力，大家一起加油吧

一、前端三层

二、CSS的书写位置

(一)、内嵌式

内嵌式，顾名思义，内嵌在.html文件中
在<head></head>标签中，书写 <style></style>标签对，里面书写CSS语句。

(二)、外链式

可以将CSS单独存为.css文件，然后用link标签引入它
外链式的优点：多个HTML文件，可以共用一个CSS样式表文件

(三)、导入式

导入式是最不常见的样式表导入方法,使用导入式引入文件，不会等待CSS文件加载完毕，而是会立即渲染HTML结构

(四)、行内式

行内式：样式可以直接通过style属性写在标签上，行内式牺牲了样式表的批量设置样式的能力，只能给一个标签设置样式，所以不常用。

三、CSS选择器

首先我们来介绍传统的CSS2.1 选择器

（一）、标签选择器

标签选择器：又称元素选择器，类型选择器，它直接使用元素的标签名当做选择器，将选择页面上所有的标签

标签选择器将选择页面上所有该种标签，无论这个标签所处位置的深浅

标签选择器的覆盖面非常大，所以通常用于标签的初始化

（二）、id选择器

标签可以有id属性，它是这个标签的唯一标识
id的命名只能由字母、数字、下划线、短横线构成，且不能以数字开头，字母区分大小写，但习惯上一般为小写字母
同一个页面上不能有相同的id标签
CSS选择器可以使用#井号选择指定的id标签

（三）、类选择器

class属性表示类名
类名的命名规范和id的命名规范相同
我们使用点.前缀来指定class的标签
class类名十分灵活，多个标签可以为相同的类名
同一个标签可以同时属于多个类，类名用空格隔开

在开发中我们也用到过原子类，这里简单的介绍一下

（四）、原子类

在做网页前、可以将所有的常用字号、文字颜色、行高、外边距、内边距等都设置为单独的类。
在HTML标签就可以“则需选择”它的类名，这样可以非常快速的添加一些常见的样式

<style>
        .fs18 {
            font-size: 18px;
        }
        
        .fs20 {
            font-size: 20px;
        }
        
        .fs22 {
            font-size: 22px;
        }
        
        .fs24 {
            font-size: 24px;
        }
        
        .fs26 {
            font-size: 26px;
        }
        
        .color-blue {
            color: blue;
        }
        
        .color-red {
            color: red;
        }
        
        .color-orange {
            color: orange;
        }
        
        .color-pink {
            color: pink;
        }
        
        .color-purple {
            color: purple;
        }
    </style>
</head>

<body>
    <p class="fs18 color-blue">好好学习 天天向上</p>
    <p class="fs20 color-red">好好学习 天天向上</p>
    <p class="fs22 color-orange">好好学习 天天向上</p>
    <p class="fs24 color-pink">好好学习 天天向上</p>
    <p class="fs26 color-purple">好好学习 天天向上</p>

</body>

（五）、复合选择器

后代选择器

交集选择器

并集选择器

并集选择器也叫做分组选择器，逗号表示分组

（六）、伪类选择器

伪类是添加到选择器的描述性词语，指定要选择的元素的特殊状态，超级链接拥有4个特殊的状态

a 标签的伪类书写，要按照“爱恨准则”的顺序，否则会有伪类不生效的问题

    <style>
        a:link {
              color: rgb(255, 0, 242);
        }
        
        a:visited {
            color: red;
        }
        
        a:hover {
            color: pink;
        }
        
        a:active {
            font-size: 40px;
            color: green;
        }
    </style>
</head>

<body>
    <p>
        <a href="http://www.baidu.com"> 百度</a>
    </p>
    <p>
        <a href=" http://www.jd.com"> 京东</a>
    </p>
    <p>
        <a href="http://www.taobao.com"> 淘宝</a>
    </p>
    <p>
        <a href="http://www.jd.com"> 慕课</a>
    </p>
</body>

（七）、元素关系选择器

（七）、子选择器

当使用 >符号分隔两个元素时，它只会匹配那些作为第一个元素的直接后代元素，即两个标签为父子关系

（八）、相邻兄弟选择器

相邻兄弟选择器（+）介于两个选择器之间，当第二个元素紧跟着第一个元素之后，并且两个元素都是属于同一个父元素的子元素，则第二个元素将被选中。
说白了，a+b就是选择紧跟在a后面的一个b

(九）、通用兄弟选择器（~）

通用兄弟选择器（~）,a~b选择a元素之后所有同层级b元素

（十）、序号选择器

（十一）、：first-child

first-child表示选择第一个子元素，比如下面的例子就是表示选择.box盒子中的第一个p

(十二)、：last-child

：last-child表示选择最后一个子元素，比如下面的例子

（十二）、： nth-child()

： nth-child()可以选择任意序号的子元素

：nth-child()可以写成 an+b的形式，表示从b开始每个a选一个

 <style>
        .box p:first-child {
            color: red;
        }
        
        .box p:last-child {
            color: aqua;
        }
        
        .box p:nth-child(3) {
            color: orange;
        }
        
        .box p:nth-child(2n) {
            color: pink;
        }
        
        .box1 p:nth-child(2n+1) {
            color: red;
        }
    </style>
</head>

<body>
    <div class="box">
        <p>1</p>
        <p>2</p>
        <p>3</p>
        <p>4</p>
        <p>5</p>
        <p>6</p>
        <p>7</p>
        <p>8</p>
        <p>9</p>
    </div>
    <div class="box1">
        <p>1</p>
        <p>2</p>
        <p>3</p>
        <p>4</p>
        <p>5</p>
        <p>6</p>
        <p>7</p>
        <p>8</p>
        <p>9</p>
    </div>

（十三）、序号选择器的兼容性

（十四）、属性选择器

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 
        [alt]  有这个属性
        [alt ="背景故宫"] 精准匹配
        [alt ^="abc"] 开头位置匹配
        [alt $="abc"]  结尾位置匹配
        [alt *="abc"]  任意位置匹配
        [alt |="abc"]    abc-开头
        [alt ~="abc"]  abc为空格分开的独立部分
        
        */
        
        img {
            width: 300px;
        }
        
        img[alt^="北京"] {
            border: 5px solid purple;
        }
        
        img[alt$="夜景"] {
            border: 5px solid rgb(236, 184, 12);
        }
        
        img[alt*="美"] {
            border: 5px solid rgb(52, 5, 138);
        }
        
        img[alt |="参赛作品"] {
            border: 5px solid rgb(224, 228, 9);
        }
        
        img[alt~="手机拍摄"] {
            border: 5px solid pink;
        }
    </style>
</head>

<body>
    <img src="images/bj/0.jpg" alt="北京故宫">
    <img src="images/bj/1.jpg" alt="北京鸟巢">
    <img src="images/bj/2.jpg" alt="北京十七孔桥">


    <img src="images/wx/0.jpg" alt="参赛作品-无锡体育场">
    <img src="images/wx/1.jpg" alt="手机拍摄 无锡太湖">
    <img src="images/wx/2.jpg" alt="无锡美景">
    <img src="images/wx/3.jpg" alt="无锡夜景">

</body>

</html>

（十五）、CSS3新增伪类

（十六）、伪元素

CSS3新增了伪元素特性，顾名思义，表示虚拟动态创建的元素
伪元素用双冒号表示，IE8可以兼容单冒号

：：before

：：after

（十七）、：：selection

（十八）、：：first-letter和：：first-line

三、层叠性和选择器权重的计算

CSS全名叫做“层叠样式表”，层叠性是他很重要的性质
层叠性：多个选择器可以同时作用于同一个标签，效果叠加

如果多个选择器的定义有冲突呢？CSS有严密的处理规则

复杂选择器的计算

复杂选择器可以通过（ID的个数，class的个数，标签的个数）的形式，计算权重

四、文本与字体属性

（一）、常用的文本字体属性

color属性可以设置文本内容的前景色
color属性主要用于英语单词、十六进制、rgba()、rgb() 等表示方法
用英语单词表示法，比如：color：red；仅仅用于学习时临时设置一下颜色，工作时不用这样的形式，因为追求精确。

（二）、十六进制表示法

十六进制表示法是所有设计软件中常用的颜色表示方法，设计师给我们的设计上面标注的图标颜色，通常为十六进制

（三）、rgb() 表示法

（四）、rgba()表示法

颜色可以使用rgba（）表示法，最后一个参数表示透明度，介于0-1之间，0表示纯透明，1表示纯实心

（五）、font-size属性

font-size属性用来设置字号，单位为px 后面还会说到em和rem

网页文字正文字号通常是16px浏览器最小支持10px

（六）、font-weight属性

font-weight属性设置字体的粗细程度，通常就用normal和bold两个值

（七）、font-style属性

作用：设置文字的倾斜

（八）、text-decoration属性

text-decoration属性用于设置文本的修饰外观的（下划线，删除线）

（九）、font-family属性

font-family属性用于设置字体的属性
字体可以是列表的形式，一般英语字体放到前面，后面的字体是前面的字体的后备字体
字体名称中有空格，必须要用引号来包裹

font-family：" 微软雅黑";
font-family: serif,"Times New Roman","微软雅黑";

中文字体也可以称呼他们的名字

字体通常必须是用户计算机中已经安装好的字体，所以一般来说设置为微软雅黑和宋体的较多，设置成其他字体的较少

问题一：如何设置为用户电脑中没有的字体呢？那就必须自己定义新的字体，这就需要我们有字体文件，当用户加载网页的时候，会同时下载这些字体

定义字体，当我们拥有以下字体文件之后，就可以使用@font-face定义字体

（十）、阿里巴巴普惠体

阿里巴巴提供了一套免费商用授权的普惠字体，网址 https://www.iconfont.cn/webfont#!/webfont/index

使用阿里巴巴普惠字体也省去了下载的麻烦

使用步骤：

下载字体—使用font-face声明字体—定义使用 webfont 的样式—为文字加上对应的样式

第一步：下载字体

第二步：使用font-face声明字体（注意：在引用的时候要注意引用的路径哦）

第三步：定义使用 webfont 的样式

第四步：为文字加上对应的样式

（十一）、text-indent属性

（十二）、 line-height行高

line-height属性的单位可以是px为单位的数值

line-height：30px;

line-height属性的单位可以是没有单位是数值，表示字号的倍数，这是最推荐的写法

line-height：1.5;

line-height属性也可以是百分数，表示字号的倍数

line-height：150%;

（十三）、单行文本垂直居中

行高等于盒子的高度，设置单行文本垂直居中对齐

设置text-align：center，即可实现文本水平居中

（十四）、font合写属性

（十五）、继承性

文本相关的属性普遍具有继承性，只需要给祖先标签设置，即可在后代所有的标签中生效。
因为文字相关的属性都有继承性，所以通常会设置body标签的字号、颜色、行高等、这样就能当做整个网页的默认样式了。

（十五）、继承性的就近原则

在继承的情况下，选择器权重计算失效，就近原则

五、盒子模型

（一）、什么是盒子模型

所有的HTML标签都可以看成矩形盒子，由width，height，padding、border构成，称为盒子模型

（二）、width属性

width属性表示盒子内容的宽度
width属性的单位通常是px，移动端开发也会涉及到百分数、rem等单位
当块级元素（div 、h系列、li等）没有设置width属性时，它将自动撑满，但这并不意味着width可以继承

（三）、height属性

height属性表示盒子内容的高度
height属性的单位
以上是关于保姆级教程 CSS 知识点梳理大全，超详细！！！的主要内容，如果未能解决你的问题，请参考以下文章

MYSql数据篇-----基础知识点超详细整理---图形化界面----保姆级教程

从购买服务器到网站搭建成功保姆级教程~超详细

Hadoop 3.1.3 分布式集群搭建，超详细，保姆级教程

Node.js安装及配置环境与卸载教程（最新版，超详细，保姆级）

超详细图文保姆级教程：App开发新手入门

k8s搭建（超详细，保姆级教程）

保姆级教程 CSS 知识点梳理大全，超详细！！！

保姆级教程 CSS 知识点梳理大全，超详细！！！

一、前端三层

二、CSS的书写位置

(一)、内嵌式

(二)、外链式

(三)、 导入式

(四)、行内式

三、CSS选择器

首先我们来介绍传统的CSS2.1 选择器

（一）、标签选择器

（二）、id选择器

（三）、类选择器

在开发中我们也用到过原子类，这里简单的介绍一下

（四）、原子类

（五）、复合选择器

后代选择器

交集选择器

并集选择器

（六）、伪类选择器

a 标签的伪类书写，要按照“爱恨准则”的顺序，否则会有伪类不生效的问题

（七）、元素关系选择器

（七）、子选择器

（八）、相邻兄弟选择器

(九）、通用兄弟选择器（~）

（十）、序号选择器

（十一）、：first-child

(十二)、：last-child

（十二）、： nth-child()

（十三）、序号选择器的兼容性

（十四）、属性选择器

（十五）、CSS3新增伪类

（十六）、伪元素

：：before

：：after

（十七）、：：selection

（十八）、：：first-letter和：：first-line

三、层叠性和选择器权重的计算

复杂选择器的计算

四、文本与字体属性

（一）、常用的文本字体属性

（二）、十六进制表示法

（三）、rgb() 表示法

（四）、rgba()表示法

（五）、font-size属性

（六）、font-weight属性

（七）、font-style属性

（八）、text-decoration属性

（九）、font-family属性

中文字体也可以称呼他们的名字

问题一：如何设置为用户电脑中没有的字体呢？那就必须自己定义新的字体，这就需要我们有字体文件，当用户加载网页的时候，会同时下载这些字体

定义字体，当我们拥有以下字体文件之后，就可以使用@font-face定义字体

（十）、阿里巴巴普惠体

使用步骤：

下载字体—使用font-face声明字体—定义使用 webfont 的样式—为文字加上对应的样式

第一步：下载字体

第二步：使用font-face声明字体（注意：在引用的时候要注意引用的路径哦）

第三步：定义使用 webfont 的样式

第四步：为文字加上对应的样式

（十一）、text-indent属性

（十二）、 line-height行高

（十三）、单行文本垂直居中

（十四）、font合写属性

（十五）、继承性

（十五）、继承性的就近原则

五、盒子模型

（一）、什么是盒子模型

（二）、width属性

（三）、height属性

(三)、导入式