CSS学习笔记 —— 基础

最新推荐文章于 2022-03-03 14:21:03 发布

Libra0809

最新推荐文章于 2022-03-03 14:21:03 发布

阅读量220

点赞数

分类专栏：前端学习笔记文章标签： css

本文链接：https://blog.csdn.net/bobbi001/article/details/117353017

版权

前端学习笔记专栏收录该内容

10 篇文章 0 订阅

订阅专栏

本文是作者本人学习过程中的笔记总结，如若文中有不正确，或需要补充的地方，欢迎在评论区中留言。

1. CSS简介

1.1. 产生背景

从HTML被发明开始，样式就以各种形式存在，最初的HTML只包含很少的显示属性。
为了满足页面设计者的需求，HTML后续添加了很多显示功能，如文本格式化标签。
但是随着这些功能的增加，HTML变得越来越杂乱，页面也变得越来越臃肿。
CSS的引入，就是为了使HTML更好地适应页面的美工设计。

1.2. 概念

CSS（Cascading Style Sheet），层叠样式表。
是一种用于控制网页样式，并允许将样式信息与网页内容分离的一种标记语言。
“层叠式”，是指CSS中贯穿始终的加载特性：层叠性与继承性。
“样式”，是指定义如何显示HTML元素。

想要了解更多层叠性与继承性的相关内容，请点击链接进行查看。

后续内容也会对此有所介绍。

2. CSS的引入

2.1. 内联式

内联式，也称为行内式。
内容书写在HTML标签的 style 属性中，作为其属性值。

代码展示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>内联式</title>
</head> 
<body>
    <!-- 样式相关内容书写在P标签上 -->
    <!-- 作为该标签的 style 属性的值 -->
    <p style="font-size: 20px; color: pink;">这是一个段落</p>
</body>
</html>

显示效果：

内联式的缺点：

内联式必须书写在标签上，没有完全脱离HTML标签。
CSS样式代码让标签结构繁重，不利于HTML结构的解读。
一个内联式的CSS代码，只能给一个标签使用；
若多个标签有相同的样式，则需要书写多次相同的CSS代码，增加了重复的代码量。

注意：由于内联式存在很多缺陷，实际开发中不会采用内联式编写CSS代码。

2.2. 内嵌式

内容书写在 <head> 标签中的 <style> 标签内部

代码展示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>内嵌式</title>
    <!-- 添加一个 style 标签 -->
    <style>
        /* 选中p标签，以键值对的方式，设置样式 */
        /* 这里涉及到了选择器的内容，会在后面做详细的介绍 */
        p {
            font-size: 20px;
            color: orange;
        }
    </style>
</head> 
<body>
    <p>这是一个段落</p>
</body>
</html>

显示效果：

优点：

实现了结构和样式的初步分离，CSS只负责样式，HTML只负责结构。
多个标签可以利用一段代码实现同样的样式，避免了书写重复代码。

缺点：

结构和样式并没有完全分离，代码依旧是书写在HTML文件中。
CSS代码只能给一个HTML文件使用，不能被多个HTML同时使用。
在HTML文件中，如果CSS代码过多，会造成文件头重脚轻。

2.3. 外联式

外联式，也成为外链式和外部式
内容是书写在一个单独CSS文件中

引用：

外联式样式表是一个单独的CSS文件，必须引用到HTML文件中，才能正常生效。
引入方式：在HTML的 <head> 标签中，使用 <link> 标签进行引入。
<link> 标签属性：

（1）rel="stylesheet" --> 表示引入的外部文件与HTML文件之间的关系，样式表。

（2）href="css文件路径" --> hypertext reference, 超文本引用。

（3）type="text/css" --> 表示按照纯文本的形式的CSS代码进行加载

代码展示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>外联式</title>

    <!-- 通过 link 标签进行引入 -->
    <link rel="stylesheet" href="./style.css" type="text/css">
</head>
<body>
    <p>这是一个段落</p>
    <div>
        这是一个div
    </div>
</body>
</html>

使用到的CSS文件：

p {
    font-size: 30px;
    color: pink;
}
div {
    font-size: 20px;
    color: orange;
}

显示效果：

优点：

实现了结构（HTML）和样式（CSS）的完全分离
多个HTML文件可以共用同一个CSS文件，便于提取公共CSS代码，减少代码量。
一个HTML文件可以引入多个CSS文件，可以实现同一个页面中CSS代码分层。

2.4. 导入式

书写在 <style> 标签中，或者单独的CSS文件中

代码展示：

<style>
    /* 导入外部CSS文件 */
    /* 在CSS文件中，也可用这种方式，导入一个其他的CSS文件 */
    @import url(./style.css);

    /* 书写自己的CSS代码 */
    div {
        font-size: 20px;
        color: orange;
    }
</style>

缺点：

导入式在浏览器中加载时，会在HTML加载完毕后再进行编译；
如果网速较慢，会导致网页出现没有CSS样式的效果，给用户的体验不好。

注意：实际开发中，不会采用导入式这种方式。

3. CSS规则

3.1. 书写格式

CSS规则由两个主要的部分组成：选择器，以及一条或多条声明

3.2. 样式规则

以内嵌式样式表为例：

所有的CSS代码都必须书写在 <head> 标签内部的 <style> 标签里面；
CSS在给某个标签设置样式前，必须使用选择器先选中标签；
CSS样式的属性，属性名和属性值的键值对写法为 k: v；
给每个选择器添加的样式属性都必须写在一对大括号 {} 里面；
给一个标签添加的所需要的样式，都要在 {} 内部一一罗列出来。

注意：

分号必要性：每条属性后面的分号必须写，否则会造成加载错误；
CSS中所有属性与属性之间对空格、空行、缩进不敏感。

3.3. 空格规范

选择器与大括号 {} 之间保留一个空格；
冒号后面，属性值前面，保留一个空格。

4. 选择器

4.1. 普通选择器

（1）id选择器

通过标签上的 id 属性去选择标签
书写格式： #id属性值
选择范围：只能选中一个标签，因为 id 是唯一的。
id命名规则：必须以字母开头，后面可以有数字、字母、下划线、横线，严格区分大小写。

<style>
    #test {
        color: pink;
    }
</style>

<p id="test">这是一个段落</p>

（2）类选择器

概述：

通过标签的 class 属性去选择标签
书写格式： .class属性值
选择范围：页面中所有包含同一 class 属性值的标签
class命名规则：以id命名规则相同

特点：

多个不同的标签，不区分标签类型，只要class属性值相同，都可以呗同一个类选择器选中
一个标签的 class 属性可以有多个属性值，中间用逗号隔开

原子类：

在CSS中提前设置一些类名，每个类选择器后面只添加一条CSS样式属性；
这些属性会在页面中常被使用，后期可以不需要多次进行书写；
只需要将对应的类名添加给所需要的标签即可；
例如，可以设置一些字体大小、颜色等相关的原子类。

<style>
    /** 设置两个字体相关的原子类 **/
    .fs16 {
        font-size: 16px;
    }

    .cp {
        color: pink;
    }
</style>

（3）标签选择器

通过标签名去选择标签元素
书写格式：标签名
选择范围：选中的是HTML文件中所有的同名标签
注意：标签选择器会忽视HTML元素的嵌套关系，不管嵌套多深，都能被选中。

<style>
    p {
        color: pink;
    }
</style>

<p>这是一个段落</p>

（4）通配符选择器

通过一个特殊符号选择页面中所有的标签
书写格式： *
选择范围：包含 <html> 标签在内的所有标签

<style>
    /** 清除所有元素的内边距和外边距 **/
    * {
        margin: 0;
        padding: 0;
    }
</style>

4.2. 高级选择器

由于基础选择器不能实现所有选择情况，后期就衍生出了几种高级选择器
高级选择器的组成部分是基础选择器

（1）后代选择器

通过标签之间的嵌套关系（族谱关系）去选择元素
书写格式：空格表示后代，两个基础选择器之间使用空格分隔；
例如：div p {...} 表示 div 标签内部的 p 标签
选择范围：通过后代选择器中，前面的一系列基础选择器来缩小选择范围，最终由最后一个选择器确定选中的标签。
注意：后代关系不一定只能是父子关系，只要是满足后代关系即可

<style>
    div p {
        color: pink;
    }
</style>

<div>
    <p>这是 div 内部的 p 标签</p>
</div>
<p>这是 div 外部的 p 标签</p>

（2）并集选择器

不同选择器选中的元素都要设置相同的样式，多次书写相同的属性会产生重复代码；
可以将前面六种选择器进行并集书写，来进行简化
书写格式：将多个选择器之间用逗号隔开
选择范围：所有单独的选择器选中的标签的并集集合
例如： div, p, .demo {...} 表示同时选中 div 标签、p 标签和 class="demo" 的标签

<style>
    div, p, .demo {
        color: pink;
    }
</style>

<div>
    <p>这是 div 内部的 p 标签</p>
</div>
<p class="demo">这是 class="demo" 的 p 标签</p>

（3）交集选择器

通过一个标签之上，满足所有的基础选择器的需求去选择标签。
书写格式：基础选择器进行连续书写，如果有标签选择器参与交集，须写在开头。
选择范围：满足所有基础选择器需求的标签
常见的是标签与类的交集，如 p.demo 表示带有 class="demo" 的 p 标签

<style>
    p.demo {
        color: pink;
    }
</style>

<div>
    <p>这是 div 内部的 p 标签</p>
</div>
<p class="demo">这是 class="demo" 的 p 标签</p>

5. 继承性

若一个标签没有设置过一些样式，它的祖先级设置过；
在浏览器中，该标签也会加载一些样式；
这些样式是从其祖先级那里继承过来的，这种现象就是继承性。
能够被继承的样式是所有的文字相关样式属性，其他的属性都不能被继承。

HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>继承性</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            font-size: 16px;
            color: green;
        }
    </style>
</head> 
<body>
    <div>
        <p>这是一个段落</p>
    </div>
</body>
</html>

显示效果：

说明：

我们给 div 设置了样式，没有给 p 设置样式

最后我们可以看到 p 标签从 div 那里继承了文字相关的属性

浏览器的调试面板（右图所示）中，也有详细的说明。

6. 层叠性

（1）概述：

问题一：同一个标签被多个选择器选中，该标签最终加载哪一个选择器中的样式？
问题二：在继承性中，多个祖先设置了文本样式，后代中该继承哪一个祖先级的样式
解决方法：使用层叠性来解决冲突，最终只有一个属性会成功加载，它会层叠、覆盖其他属性
判断哪个属性会被成功加载，需要根据优先级来判断

（2）优先级判断

（3）选择器权重

通配符选择器权重最低，权重值为 0；
标签选择器，权重值为 1；
类选择器，权重值为 10；
id选择器，权重值为 100

（4）!important 关键字

!import 关键字，可以将某条样式属性的权重提升到最大
书写位置：在某个属性的属性值后面，空格，加上 !important

注意：

就近原则中，不需要比较选择器权重，所有 important 关键字会失效
important 不能提升选择器的权重，只能提升某条属性的权重为最大。

<style>
    p {
        color: pink !important;
        font-size: 16px;
    }
</style>

（5）行内式权重

行内式样式权重高于内嵌式和外联式
但是比 !important 关键字的权重低

Libra0809

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS学习笔记 —— 基础

本文是作者本人学习过程中的笔记总结，如若文中有不正确，或需要补充的地方，欢迎在评论区中留言。
复制链接

扫一扫

专栏目录

CSS学习笔记 —— 基础

1. CSS简介

1.1. 产生背景

1.2. 概念

2. CSS的引入

2.1. 内联式

2.2. 内嵌式

2.3. 外联式

2.4. 导入式

3. CSS规则

3.1. 书写格式

3.2. 样式规则

3.3. 空格规范

4. 选择器

4.1. 普通选择器

4.2. 高级选择器

5. 继承性

6. 层叠性

“相关推荐”对你有帮助么？