CSS基础个人学习笔记

最新推荐文章于 2026-07-14 21:37:13 发布

原创最新推荐文章于 2026-07-14 21:37:13 发布 · 846 阅读

21 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

收录于

前端学习之路

0、简介

CSS，即层叠样式表是一种样式表语言，用来描述 HTML 或 XML(包括如 SVG、MathML 或 XHTML 之类的 XML 分支语言)文档的呈现方式。
学习 CSS，需要在基本掌握 HTML 的前提下进行，本人的笔记也建立在运用 HTML 实现一些显示功能的基础上。

1、修改元素字体颜色

元素字体的默认颜色是黑色，如果想修改成其他颜色的元素字体，只需要修改标签内style属性里的color属性就行：

<标签 style="color:颜色;">文本</标签>

注意style声明里的“;”，可删去但不建议删去！便于继续扩展！

而color属性，你可以直接输入对应颜色的英文名，比如greenyellow,gainsboro,red等等

2、使用元素选择器设置元素的样式

我们可以使用内联样式来设置元素样式，但当设置的过多，代码全部挤在一起，不美观，不利于阅读，就可以使用元素选择器(Element Selector)进行设置。在代码的顶部，创建一个style声明区域，如下方所示：

<style>
标签{
    属性:属性值;
    ......
}
</style>

注意，每个元素的样式规则都应该有开始和结束大括号{ 和 }。还需要确保元素的样式定义在开始和结束样式标签之间。需要确保所有样式规则位于花括号之间，并且每条样式规则都以分号结束。

3、使用类选择器设置元素的样式

元素选择器缺乏针对性，难以对某个特定的元素进行样式设置。如果只想为某一个或几个特定的 <div> 元素设置样式，元素选择器就无法精准实现。
而类选择器(Class Selector)：具有很强的针对性和灵活性。可以通过给不同的元素添加相同或不同的类名，为它们灵活地应用样式。比如，在一个网页中，可能有多个按钮，有的按钮需要突出显示，有的不需要，这时可以给需要突出显示的按钮添加一个特定的类名，然后为这个类设置样式。一个class声明区域的创建如下方所示：

<style>
.类名 {
    属性: 属性值;
    ......
}
</style>

在标签中，

 <标签 class="类名">文本</p>

就可以使用该类的设置样式！

4、修改元素的字体大小

在选择器中，通过设置font-size属性就可以进行修改元素字体大小，单位：px（像素），即

类名或标签名 {
  font-size: 字体大小;
}

5、设置元素的字体族名

在选择器中，通过font-family 属性，我们可以设置元素里的字体族名。

常用通用字体族名:serif（衬线字体)、sans-serif（无衬线字体）、monospace（等宽字体）、cursive（手写体字体）、fantasy（奇幻字体）

.类名或标签名 {
  font-family: 字体族名;
}

6、引入字体库字体

除了使用系统提供的默认字体以外，我们也可以使用自定义字体。可以使用本地字体库和在线字体库的字体。网络上有很多在线字体库。

比如：

有字库：有字库-首页-全球第一中文web font（在线字体）服务平台、web font、webfont、在线字体、网络字体

Google Fonts：Google Fonts | 谷歌字体中文版 | GoogleFonts

而要引入在线字体库的字体，我们需要到字体库复制字体的URL，粘贴到代码编辑器顶部，即放到 style 标签之前，并使用<link>标签。即

<link href="字体URL" rel="stylesheet" type="text/css">

现在可以在 CSS 中使用导入的字体，并像下面一样使用该字体作为 FAMILY_NAME：

font-family: FAMILY_NAME, GENERIC_NAME;

GENERIC_NAME 是可选的，它用来指明在其他字体不可用时的后备字体。如果第一个字体 FAMILY_NAME 在用户设备上不可用，浏览器就会尝试使用下一个字体 GENERIC_NAME，以此类推，直到找到可用的字体或使用浏览器的默认字体。

字体名区分大小写，并且如果字体名含有空格，则在声明时需要用引号包起来。

7、字体的优雅降级

前文我们知道，如果第一个字体 FAMILY_NAME 在用户设备上不可用，浏览器就会尝试使用下一个字体 GENERIC_NAME。而字体优雅降级是指在网页设计中，当首选字体在用户设备上不可用时，能够平滑地过渡到通用字体，以确保文本内容的可读性和视觉效果的相对一致性。通用字体名不区分大小写。同时，也不需要使用引号，因为它们是 CSS 中的关键字。在5中，我给出了常用的通用字体族名。

8、调整图片的大小

CSS 的 width属性可以控制图片的宽度,height属性可以控制图片高度。和设置文本字号一样，我们以 px（像素）为单位。即

.类名或标签名{
    width: 宽度大小;
    height: 高度大小;
}

9、在元素周围增加边框

CSS 边框具有 style、color、width、radius 属性。如果要给一个HTML元素设置边框，则需要这样做：

.类名或标签名{
    border-color: 颜色;
    border-width: 宽度大小;
    border-style: 边框样式;
  }

而边框样式有：

none：默认值，不显示边框。
solid：显示实线边框。
dotted：显示点状边框。
dashed：显示虚线边框。
double：显示双实线边框。
groove：显示具有立体感的凹槽边框。
ridge：显示具有立体感的脊状边框。
inset：显示具有嵌入效果的边框。
outset：显示具有突出效果的边框。

如果图片边框的四个角看起来很尖锐，我们可以使用 border-radius 属性来让它变得圆润。和前文一样，在那个标签或类名里增加这个属性就行,单位也可以用px:

border-radius:圆角边框大小;

除单位px外，你也可以使用百分比来指定 border-radius 的值。

10、设置元素的背景色

background-color 属性可以设置元素的背景颜色。即:

.类名或标签名{
  background-color: 颜色;
}

11、设置元素的id

除了 class 属性，每一个 HTML 元素都有一个 id 属性。使用 id 有几个好处：你可以通过 id 选择器来改变单个元素的样式。根据规范，id 属性应是唯一的。尽管浏览器并非必须执行这条规范，但这是广泛认可的最佳实践。因此，请不要给多个元素设置相同的 id。给元素设置id非常简单：

<元素 id="元素的id">

12、使用ID选择器来设定元素的样式

id 属性就像 class 一样，你可以使用 CSS 来设置他们的样式。不过，id 不可以重复，它只能作用于一个元素上。如果一个元素同时应用了 class 和 id，且两者设置的样式有冲突，会优先应用 id 中所设置的样式。

在 style 标签里，声明 class 的时候必须在名字前插入 . 。同样，在声明 id 的时候，也必须在名字前插入 # ，即：

<style>
#id {
    属性: 属性值;
    ......
}
</style>

13、调整元素的矩形空间

所有的 HTML 元素都是以矩形为基础。每个 HTML 元素所占有的矩形空间由这三个重要的属性来控制：内边距 padding、外边距 margin 、边框 border。单位可以用px。

内边距padding 用来控制着元素内容与 border 之间的空隙大小。增加矩形空间的 padding 值，其中的文本内容与边框的距离就也会变大。

外边距 margin 用来控制元素的边框与其他元素之间的 border 距离。增加矩形空间的 margin 值，它也会增加元素边框到其他周围元素的距离。把元素的 margin 设置为负值，元素会变得占用更多空间。

如果想给一个元素每个方向的 padding 都设置一个特定的值，CSS 允许你使用 padding-top、padding-right、padding-bottom、padding-left 属性来设置四个不同方向的 padding 值。

同样，CSS 允许你使用 margin-top、margin-right、margin-bottom、margin-left 属性来设置四个不同方向的 margin 值。

以调整内边距为例：

元素 {
    padding-top: 内边距大小;
    padding-right: 内边距大小;
    padding-bottom: 内边距大小;
    padding-left: 内边距大小;
}

有点繁琐了，于是我们引入顺时针指定标记，可以把它们汇总在一行里面一并声明，以顺时针指定元素内边距为例：

padding: 上内边距大小 右内边距大小 下内边距大小 左内边距大小;

这四个值按顺时针排序：上、右、下、左，并且设置的效果等同于分别声明每一个方向的内边距。

同样地，顺时针指定元素外边距：

margin:  上外边距大小 右外边距大小 下外边距大小 左外边距大小;

14、使用属性选择器来设置元素的样式

前面，我们已经学过三种选择器来设置元素的样式，现在，我们引入属性选择器[attr=value]。这个选择器使用特定的属性值来匹配和设置元素样式。这个选择器使用特定的属性值来匹配和设置元素样式。只有当元素的指定属性的值与给定的值完全一致时，该元素才会被选中。

[属性名=属性值] {
    属性: 属性值;
    ......
}

其中，选择器[属性名=属性值]中

属性名：是 HTML 元素的属性名称，例如 href、type、class 等。
属性值：是要匹配的属性的具体值，需要用引号括起来（单引号或双引号均可），如果属性值不包含空格等特殊字符，引号也可以省略。

15、绝对单位和相对单位

在前文中，我们一直使用px像素。像素是一个长度单位，它告诉浏览器应该如何调整元素的大小和位置。其实除了 px，CSS 也有其他单位供我们使用。

单位长度的类型可以分成 2 种：相对和绝对。

绝对单位与长度的物理单位相关。 例如，in 和 mm 分别代表着英寸和毫米。 绝对长度单位会接近屏幕上的实际测量值，不过不同屏幕的分辨率会存在差异，这就可能会造成误差。（px就是绝对单位）
相对单位长度，比如 em 和 rem，它们的实际值会依赖其他长度的值而决定。 比如 em 的大小基于元素字体的字体大小。如果使用它来设置 font-size 值，它的值会跟随父元素的 font-size 值来改变。有些单位长度选项是相对视窗大小来改变值的（vh,vw），这种设定符合响应式网页设计的原则。

16、给 HTML 的 body 元素添加样式

每一个 HTML 页面都有一个 body 元素。之前，我们学过了内联样式。但这种方式不适用于多个属性样式。这时候，我们就可以学习内部样式表，即在<head>里的<style>进行添加样式：

<head>
    <style>
        body {
            属性名: 属性值;
            ...
        }
    </style>
</head>

17、从 body 元素继承样式

在 body 元素上使用 CSS 样式。设置 body 元素样式的方法跟设置其他 HTML 元素样式的方式一样，并且其他元素也会继承 body 中所设置的样式。如图

<head>
    <style>
        body {
            属性名: 属性值;
            ...
        }
    </style>
</head>

<body>
<h1>文本</h1>
</body>

这样，h1中的文本就继承到body设置的样式。

18、样式中的优先级

有时候，HTML 元素的样式会跟其他样式发生冲突。冲突时，遵照优先级进行覆盖，优先级（从高到低）的顺序是： !important>内联样式>ID选择器>类选择器和属性选择器>继承样式。

注意：同一优先级中，后声明的优先级高于前面声明的！因为浏览器读取 CSS 是由上到下的。这就意味着，如果发生冲突，浏览器将会应用最后声明的样式。

!important的声明很简单，只需要在选择器里的属性后面加上!important，再加上分号就可以，即:

 属性: 属性值 !important;

只要使用了 !important，该样式声明就会覆盖其他正常的样式声明。不过，过度使用 !important 会使样式表难以维护，应谨慎使用。

19、使用十六进制编码获得颜色

我们前面学过用英文单词表示颜色，这里再介绍一种新方法：十六进制编码（hex）
我们使用 6 个十六进制的数字来代表颜色，每两个数字控制一种颜色，分别是红（R）、绿（G）、蓝（B）。使用时即：

 color: #RRGGBB或#RGB;

其中，
0 是十六进制里面最小的数字，表示没有颜色。
F 是十六进制里面最大的数字，有最高的亮度。

注意，#RRGGBB由于使用了 6 位十六进制数字，每个颜色通道有 256 种可能的取值（00 - FF），因此可以表示更丰富、更精确的颜色。而缩写#RGB因为只使用了 3 位十六进制数字，每个颜色通道实际上只有 16 种可能的取值（0 - F）所以，它表示颜色的精度相对较低，颜色选择范围相对较窄，可能无法准确呈现一些复杂或微妙的颜色。

20、使用RGB值为元素上色

RGB 值与我们学到的十六进制编码不同。RGB 值不需要用到 6 位十六进制数字，而只需要指定每种颜色的亮度大小，数值范围从 0 到 255。稍微计算一下，就不难发现这两种表示方式本质上是等价的。在十六进制编码中，我们用两个十六进制数表示一个颜色；这样，每种颜色都有 16 * 16（即 256）种可能。所以，RGB 从零开始计算，与十六进制代码的值的数量完全相同。

color: rgb(R, G, B);

R，G，B分别代表红、绿、蓝三种颜色通道的强度值，取值范围为 0 - 255。

21、使用 CSS 变量

传统 CSS 中，如果要修改某个重复使用的颜色、尺寸等样式值，需要在多处进行修改；为了提高代码的可维护性和灵活性，使用 CSS 变量，只需修改变量的值，所有引用该变量的地方都会自动更新。CSS 变量可以实现仅需要更新一个值，就可以将更改应用到多个 CSS 样式属性的强大方法。

为创建一个 CSS 变量，你只需要在变量名前添加两个连字符号，并为其赋值即可，例子如下：

选择器 {
    --变量名: 变量值;
}

创建变量后，CSS 属性可以通过调用变量名来使用它对应的值。

属性:var(--变量名);

使用变量来作为 CSS 属性值的时候，可以设置一个备用值来防止由于某些原因导致变量不生效的情况。即：

属性:var(--变量名,备用值);

注意：备用值不是用于增强浏览器的兼容性，它也不适用于 IE 浏览器。相反，它是用来让浏览器在找不到你的变量时可以显示一种颜色。

22、通过浏览器降级提高兼容性

使用 CSS 时可能会遇到浏览器兼容性问题。提供浏览器降级方案来避免潜在的问题会显得很重要。当浏览器解析页面的 CSS 时，会自动忽视不能识别或者不支持的属性。举个例子，如果使用 CSS 变量来指定站点的背景色，IE 浏览器由于不支持 CSS 变量而会忽略背景色。此时，浏览器会尝试使用其它值。但如果没有找到其它值，则会使用默认值，也就是没有背景色。这意味着如果想提供浏览器降级方案，在声明之前提供另一个更宽泛的值即可。这样老旧的浏览器会降级使用这个方案，新的浏览器会在后面的声明里覆盖降级方案。

23、继承CSS变量

当创建一个变量时，变量会在创建变量的选择器里可用。同时，在这个选择器的后代选择器里也是可用的。这是因为 CSS 变量是可继承的，和普通的属性一样。
CSS 变量经常会定义在 :root 元素内，这样就可被所有选择器继承。
:root 是一个伪类选择器，它是一个能够匹配文档根元素的选择器，通常指的是 html 元素。我们在 :root 里创建变量在全局都可用，即在任何选择器里都生效。

24、更改特定区域变量

当你在 :root 里创建变量时，这些变量的作用域是整个页面。然后，你可以通过在一个特定的选择器中再次设置这些变量来重写这些变量。因为当在特定选择器中重新声明一个已经存在的 CSS 变量时，会创建一个新的局部作用域，在这个局部作用域内，新声明的变量值会覆盖全局变量的值，这就是 CSS 的层叠机制在变量层面的体现。

25、使用媒体查询更改变量

CSS 变量可以简化媒体查询的定义方式。在传统的使用方式中，如果要对多个元素的相同属性根据不同媒体条件进行调整，就需要在每个媒体查询块里重复编写样式规则，这会导致代码冗余，降低可维护性。通过使用 CSS 变量，我们可以将需要根据媒体查询改变的属性值定义为变量。然后在不同的媒体查询块中，只需要修改变量的值，而引用这些变量的元素样式会自动更新，从而避免了代码的重复编写。

当媒体类型和媒体特性表达式都满足条件时应用的该CSS 样式 :

@media [媒体类型] and (媒体特性表达式) {
    选择器 {
        属性: 属性值;
    }
}

26、后记

这部分内容算是很简单的了。接下来是flexbox布局的学习内容，敬请见证...

标签

#css #学习 #笔记