CSS学习笔记（一）

最新推荐文章于 2024-07-26 08:00:00 发布

CSPsy

最新推荐文章于 2024-07-26 08:00:00 发布

阅读量605

点赞数 7

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/m0_51573433/article/details/119418553

版权

CSS 专栏收录该内容

11 篇文章 8 订阅

订阅专栏

文章目录

CSS介绍

什么是CSS？

CSS 是层叠样式表（Cascading Style Sheets）的简称，它可以让你创建好看的网页。
使用CSS就可以控制浏览器如何显示HTML元素，从而充分展示你喜欢的设计样式。

CSS的作用

设置HTML页面中的文本内容(字体、大小、对齐方式等)
e.g. 改变正文内容或标题的颜色及大小
设置HTML页面中的图片的外形(宽高、边框样式、边距等)
设置HTML页面中版面的布局和外观显示样式
e.g. 设置一个布局：存放相关信息的侧边栏区域

CSS语法

下面一段HTML代码，包含CSS。

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>CSS语法</title>
    <!-- CSS样式 -->
    <style>
    	p {
    		background: blue;
    	}
    </style>
</head>
<body>
    <p>
		Hello, CSS!
	</p>
</body>
</html>

我们对其中的CSS代码进行分析。

p {
	background: blue;
}

p：选择器(用于选择页面中的元素)，这里选择页面中的p元素。
{ } 样式表(样式规则)
background：属性
blue：值

CSS 注释

CSS注释以 /* 开头，以 */ 结尾。

/* 单行注释 */
/*
	多行
	注释
*/

CSS引入方式

行内样式
使用style属性引入CSS样式。

e.g.

<p style="color:skyblue;">CSS引入方式---行内样式</p>

内部样式表
在style标签中书写CSS代码。
style标签写在head标签中。

e.g.

<head>
	<style>
		p {
			background: cyan;
		}
	</style>
</head>

外部样式表

链接式
将所有的样式放在一个或多个CSS文件，通过link标签将CSS文件链接到HTML文档中。

<link rel="stylesheet" href="index.css">

rel：定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件。
href：定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。

导入式
先引入一个CSS文件，在文件里面有一个import后面跟一个CSS文件地址。
在CSS文件中写在开头。

@import url("index.css");

对于上面两个方式，推荐使用link。

当 HTML 文件被加载时，link 引用的文件会同时被加载，而 @import 引用的文件则会等页面全部下载完毕再被加载

样式优先级
行内样式 > 内部样式 > 外部样式
(在同级情况下，后两者根据就近原则确定样式)

CSS三大特性

1) 层叠性

所谓层叠性是指多种CSS样式的叠加
是浏览器处理冲突的一个能力，如果一个属性通过两个相同选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉
主要遵循的原则是就近原则，在不考虑优先级的情况下，在多个样式中最终生效的样式是离标签最近的样式。

举个例子：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>CSS层叠性</title>
    <style>
        div {
            background: tomato;
        }

        div {
            background: royalblue;
        }
    </style>
</head>
<body>
    <div>a Hello</div>
    <div style="background: cyan;">b Hello</div>
</body>
</html>

运行结果：
在这里插入图片描述

2) 继承性

继承性是指当子标签没有设置样式时，会继承父标签的样式。
e.g. 比如一个子标签没有设置背景颜色，那么子标签会继承父标签的背景颜色。

举个例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS继承</title>
    <style>
        .second {
            font-size: 25px;
        }

        .third {
            color:aquamarine;
        }
    </style>
</head>
<body>
    <div class="first">
        I am the first generation.
        <div class="second">
            I am the second generation.
            <div class="third">
                I am the third generation.
                <div class="fourth">
                    I am the fourth generation.
                </div>
            </div>
        </div>
    </div>
</body>
</html>

运行结果：
在这里插入图片描述

要注意子标签不会继承父标签的宽度、高度、边距等属性。
对于CSS属性继承有哪些的总结，可以参考：css属性继承有哪些？css中可继承的属性和不可继承属性的总结

3) 优先级

优先级：
!important > 行内样式 > ID 选择器 > 类选择器 / 属性选择器 / 伪类选择器 > 元素选择器 / 伪元素选择器 > 通配符 > 继承

当如果使用多个选择器混杂来定义样式的时候就要依据权重来判断。
权重相同的时候考虑就近原则。

权重计算方法：
权重使用四个数字来衡量 (x,x,x,x)
值从左到右，左边的最大，右边的最小
权重之和的数制是不会进位的

权重计算公式：

选择器	权重
继承或者 * (不过 * 的权重要比继承高)	(0, 0, 0, 0)
元素 / 伪元素选择器	(0, 0, 0, 1)
类 / 伪类 / 属性选择器	(0, 0, 1, 0)
ID选择器	(0, 1, 0, 0)
行内样式	(1, 0, 0, 0)
!important	∞ 无穷大

CSS学习笔记（二）

CSPsy

关注

7
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS学习笔记（一）

CSS基础知识一CSS介绍CSS语法CSS 注释CSS引入方式CSS三大特性CSS介绍什么是CSS？CSS 是层叠样式表（Cascading Style Sheets）的简称，它可以让你创建好看的网页。使用CSS就可以控制浏览器如何显示HTML元素，从而充分展示你喜欢的设计样式。CSS的作用设置HTML页面中的文本内容(字体、大小、对齐方式等)e.g. 改变正文内容或标题的颜色及大小设置HTML页面中的图片的外形(宽高、边框样式、边距等)设置HTML页面中版面的布局和
复制链接

扫一扫

专栏目录