CSS全解析

TT-Kun

于 2024-10-01 23:54:35 发布

阅读量548

点赞数 23

分类专栏：前端文章标签：前端 CSS

本文链接：https://blog.csdn.net/TTKunn/article/details/142676367

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

CSS全解析

在现代网页开发中，CSS（层叠样式表，Cascading Style Sheets）就像是一位幕后的魔法师，将平淡无奇的HTML结构变幻成视觉上令人惊艳的网页。今天，我们就来深入探索CSS的奇妙世界。

一、CSS是什么

CSS是层叠样式表，它在网页开发中扮演着不可或缺的角色。它能够对网页中元素位置的排版进行像素级精确控制，就像一位技艺精湛的工匠，精心雕琢每个元素的布局。通过CSS，我们可以轻松实现美化页面的效果，将内容与样式分离，使HTML文件专注于结构，而CSS文件专注于样式呈现。这就好比化妆术（被誉为“东方四大邪术”之一），可以为网页这个“脸庞”增添魅力。

二、基本语法规范

CSS的基本语法遵循“选择器 + {一条/N条声明}”的模式。其中，选择器如同指挥官，决定针对哪些元素进行修改（也就是“找谁”）；而声明则像指令，决定对这些元素修改什么（也就是“干啥”）。声明中的属性是键值对的形式，使用“;”来区分不同的键值对，使用“:”区分键和值。

CSS的注释使用“/* */”，这在代码中添加解释和说明时非常有用，我们还可以使用“ctrl + /”在代码编辑器中快速切换注释状态。在HTML中，CSS可以写在“style”标签内，这个“style”标签理论上可以放到页面的任意位置，但一般放到“head”标签内，这样有助于提高代码的可读性和维护性。

三、引入方式

（一）内部样式表

内部样式表是将CSS代码写在“style”标签中，然后嵌入到HTML内部。虽然理论上“style”标签可以放在HTML的任何地方，但将其放在“head”标签中是一种良好的实践，这样可以使样式和页面结构分离。然而，这种方式也有缺点，当CSS内容较多时，分离得还不够彻底。在实际开发中，这种方式并不常用，不过在一些简单的页面或者小型项目中，还是可以看到它的身影，比如搜狗搜索中仍然保留着这种写法。

（二）行内样式表

行内样式表是通过元素的“style”属性来指定某个标签的样式。这种方式适合编写简单的样式，并且只针对某个特定的标签生效。它的缺点是不能编写太复杂的样式，不过它的优先级较高，会覆盖其他方式定义的样式。例如：

<style>
    p {
        /* 设置字体颜色 */
        color: red;
        /* 设置字体大小 */
        font - size: 30px;
    }
</style>
<p style="color: green;">hello</p>

在这个例子中，行内样式的“color: green”会覆盖在“style”标签中定义的“color: red”。

（三）外部样式

外部样式是实际开发中最常用的方式。其步骤包括创建一个.css文件，然后使用“link”标签将这个CSS文件引入到HTML文件中。这种方式的优点是样式和结构彻底分离，使得代码的可维护性大大提高。但它也有一个小缺点，那就是受到浏览器缓存的影响，修改之后不一定立刻生效。这是因为浏览器为了提高访问效率，会对网页依赖的资源（如图片、CSS、JS等）进行缓存。当我们修改了外部的CSS文件后，可能需要通过“ctrl + F5”强制刷新页面，才能让浏览器重新获取最新的CSS文件。

四、代码风格

（一）样式格式

紧凑风格：这种风格的代码较为紧凑，节省空间，但可能在可读性上稍逊一筹。
展开风格（推荐）：代码展开，结构清晰，易于阅读和维护，是一种比较好的代码编写风格。

（二）样式大小写

虽然CSS不区分大小写，但为了保持代码的规范性和一致性，在开发时统一使用小写字母是一种良好的编程习惯。

（三）空格规范

在CSS中，冒号后面带空格，选择器和“{”之间也有一个空格，这样可以使代码更加清晰易读。

五、选择器

（一）选择器的功能

选择器的主要功能是选中页面中指定的标签元素，只有先选中元素，才能设置元素的属性。这就好比在游戏（如SC2、War3）中，需要先选中单位，才能指挥该单位行动。

（二）选择器的种类

1. 基础选择器

标签选择器：能够快速为同一类型的标签都选择出来，但不能进行差异化选择。例如，我们可以使用“p”标签选择器来设置所有“p”标签的样式：

p {
    color: red;
}

类选择器：它可以实现差异化表示不同的标签，多个标签可以使用同一个类名，一个标签也能使用多个类名（多个类名之间用空格分割）。类名以“.”开头，下方的标签使用“class”属性来调用。类选择器是最灵活、最常用的选择器之一。例如：

.blue {
    color: blue;
}
<div class="blue">咬人猫</div>
<div>咬人猫</div>

id选择器：和类选择器类似，但在HTML中，id是唯一的，不能被多个标签使用，同一个id在一个HTML中只能出现一次。CSS中使用“#”开头表示id选择器，并且id选择器的值和html中某个元素的id值相同，html的元素id不必带“#”。例如：

#myElement {
    background - color: yellow;
}
<div id="myElement">这是一个独特的元素</div>

通配符选择器：使用“*”定义，选取所有的标签。不过这种选择器通常在特殊情况下使用，因为它会选中页面的所有内容。例如：

* {
    color: red;
}

2. 复合选择器

后代选择器：又叫包含选择器，用于选择某个父元素中的某个子元素。元素1和元素2之间使用空格分割，元素1是父级，元素2是子级，只会选择元素2，而不影响元素1。这种选择器非常灵活，可以是任意基础选择器的组合。例如：

ol li {
    color: red;
}

子选择器：和后代选择器类似，但只能选择子标签，使用大于号“>”分割。它只会选择亲儿子元素，不选孙子元素。例如：

.two > a {
    color: red;
}

并集选择器：用于选择多组标签（集体声明），通过逗号“,”分割多个元素，表示同时选中这些元素。任何基础选择器都可以使用并集选择器，建议竖着写，每个选择器占一行，最后一个选择器不能加逗号。例如：

div, h3 {
    color: red;
}

伪类选择器
- 链接伪类选择器：用于选择不同状态的链接，如“a:link”选择未被访问过的链接，“a:visited”选择已经被访问过的链接，“a:hover”选择鼠标指针悬停上的链接，“a:active”选择活动链接（鼠标按下了但是未弹起）。在书写时要按照“LVHA”的顺序，否则可能会导致某些样式失效。在实际开发中，主要给链接做一个样式，然后给“a:hover”做一个样式即可，“link”、“visited”、“active”用的相对较少。例如：

a:link {
    color: black;
    /* 去掉a标签的下划线 */
    text - decoration: none;
}

a:visited {
    color: green;
}

a:hover {
    color: red;
}

a:active {
    color: blue;
}

- **:focus伪类选择器**：选取获取焦点的input表单元素。例如：

.three > input:focus {
    color: red;
}

六、常用元素属性

（一）字体属性

字体设置：字体名称可以使用中文，但不建议，因为可能会存在兼容性问题。多个字体之间使用逗号分隔，从左到右查找字体，如果都找不到，会使用默认字体。如果字体名有空格，需要使用引号包裹。例如：

body {
    font - family: '微软雅黑', 'Microsoft YaHei';
}

字体大小：不同浏览器的默认字号不一样，所以最好给一个明确的值，单位通常为“px”。可以给“body”标签设置一个全局的字体大小，同时标题标签可能需要单独指定大小。例如：

p {
    font - size: 20px;
}

字体粗细：可以使用数字表示粗细，“700 == bold”，“400 == normal”，取值范围是100 - 900。例如：

p {
    font - weight: bold;
    font - weight: 700;
}

文字样式：虽然很少把某个文字变倾斜，但经常需要把“em”、“i”标签改成不倾斜。例如：

.font - style em {
    font - style: normal;
}

（二）文本属性

文本颜色：可以使用预定义的颜色值（直接是单词）、十六进制形式或者RGB方式来设置文本颜色。例如：

color: red;
color: #ff0000;
color: rgb(255, 0, 0);

文本对齐：用于控制文字水平方向的对齐，也能控制图片等元素的水平对齐方式，取值有“center”（居中对齐）、“left”（左对齐）、“right”（右对齐）。例如：

.text - align.three {
    text - align: center;
}

文本装饰：常用取值有“underline”（下划线，常用于链接）、“none”（啥都没有，可用于去掉a标签的下划线）、“overline”（上划线，不常用）、“line - through”（删除线，不常用）。例如：

.text - decorate.one {
    text - decoration: none;
}

文本缩进：控制段落的首行缩进（其他行不影响），单位可以使用“px”或者“em”，使用“em”作为单位更好，1个“em”就是当前元素的文字大小。缩进可以是负的，表示往左缩进，但可能会导致文字冒出去。例如：

.text - indent.one {
    text - indent: 2em;
}

行高：行高指的是上下文本行之间的基线距离，它等于上边距 + 下边距 + 字体大小。行高也可以取“normal”等值，这个值取决于浏览器的实现。当行高等于元素高度时，可以实现文字的垂直居中对齐。例如：

.line - height.two {
    height: 100px;
    line - height: 100px;
}

（三）背景属性

背景颜色：默认是“transparent”（透明）的，可以通过设置颜色的方式修改。例如：

body {
    background - color: #f3f3f3;
}

背景图片：比“img”标签更方便控制位置（图片在盒子中的位置）。在设置背景图片时，要注意“url”不要遗漏，“url”可以是绝对路径，也可以是相对路径，并且可以加引号，也可以不加。例如：

.bgi.one {
    background - image: url(rose.jpg);
    height: 300px;
}

背景平铺：重要取值有“repeat”（平铺）、“no - repeat”（不平铺）、“repeat - x”（水平平铺）、“repeat - y”（垂直平铺），默认是“repeat”。背景颜色和背景图片可以同时存在，背景图片在背景颜色的上方。例如：

.bgr.one {
    background - image: url(rose.jpg);
    height: 300px;
    background - repeat: no - repeat;
}

背景位置：可以通过方位名词（如“top”、“left”、“right”、“bottom”）、精确单位（坐标或者百分比，以左上角为原点）或者混合单位（同时包含方位名词和精确单位）来修改图片的位置。例如：

.bg p.one {
    background - image: url(rose.jpg);
    height: 500px;
    background - repeat: no - repeat;
    background - color: purple;
    background - position: center;
}

背景尺寸：可以填具体的数值（如“40px 60px”表示宽度为40px，高度为60px），也可以填百分比（按照父元素的尺寸设置），还可以使用“cover”（把背景图像扩展至足够大，以使背景图像完全覆盖背景区域，但背景图像的某些部分也许无法显示在背景定位区域中）或者“contain”（把图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域）。例如：

.bgs.one {
    width: 500px;
    height: 300px;
    background - image: url(rose.jpg);
    background - repeat: no - repeat;
    background - position: center;
    background - size: contain;
}

（四）圆角矩形

通过“border - radius”属性可以使边框带圆角效果。如果“border - radius”的值为正方形宽度的一半，则可以生成圆形；如果为矩形高度的一半，则可以生成圆角矩形。例如：

div {
    width: 200px;
    height: 200px;
    border: 2px solid green;
    border - radius: 100px;
    /* 或者用50%表示宽度的一半 */
    border - radius: 50%;
}

“border - radius”是一个复合写法，实际上可以针对四个角分别设置，例如：

border - top - left - radius: 10px;
border - top - right - radius: 20px;
border - bottom - right - radius: 30px;
border - bottom - left - radius: 40px;

七、Chrome调试工具

在开发过程中，Chrome调试工具是一个非常强大的助手。我们可以通过两种方式打开它，直接按“F12”键或者鼠标右键页面然后选择“检查元素”。

（一）标签页含义

elements：可以查看标签结构，还能通过“ctrl + 滚轮”进行缩放，“ctrl + 0”恢复原始大小。使用左上角箭头选中元素后，在右侧可以查看当前元素的属性，包括引入的类，也可以修改选中元素的CSS属性，并且如果CSS样式写错了，会在这里有提示（黄色感叹号）。
console：用于查看控制台信息。
source：查看源码并进行断点调试。
network：查看前后端交互过程。
application：查看浏览器提供的一些扩展功能，如本地存储等。
Performance、Memory、Security、Lighthouse：这些暂时不使用，先不深究。

八、元素的显示模式

在CSS中，HTML标签的显示模式主要有块级元素和行内元素两种。

（一）块级元素

常见的块级元素有“h1 - h6”、“p”、“div”、“ul”、“ol”、“li”等。块级元素的特点是独占一行，高度、宽度、内外边距、行高都可以控制，宽度默认是父级元素宽度的100%，并且是一个容器（盒子），里面可以放行内和块级元素。不过要注意，文字类的元素内不能使用块级元素，例如“p”标签主要用于存放文字，内部不能放“div”等块级元素。

（二）行内元素/内联元素

常见的行内元素有“a”、“strong”、“b”、“em”、“i”、“del”、“s”、“ins”、“u”、“span”等。行内元素的特点是不独占一行，一行可以显示多个；设置高度、宽度、行高无效；左右外边距有效（上下无效），内边距有效；默认宽度就是本身的内容；并且行内元素只能容纳文本和其他行内元素，不能放块级元素。同时要注意，“a”标签中不能再放“a”标签（虽然chrome不报错，但不建议这么做），“a”标签里可以放块级元素，但更建议先把“a”转换成块级元素。

我们可以使用“display”属性来改变元素的显示模式，例如“display: block”可以将元素改成块级元素（常用），“display: inline”改成行内元素（很少用），“display: inline - block”改成行内块元素。

九、盒模型

在CSS中，每一个HTML元素都可以看作是一个矩形的“盒子”，这个盒子由边框（border）、内容（content）、内边距（padding）、外边距（margin）这几个部分构成。

（一）边框

边框有基础属性，包括粗细（border - width）、样式（border - style，默认没边框，如solid为实线边框、dashed为虚线边框、dotted为点线边框）、颜色（border - color），这些属性支持简写且没有顺序要求。我们可以单独修改四个方向的任意边框，例如只给上边框设为红色，其余为蓝色：

div {
    width: 500px;
    height: 250px;
    border - width: 10px;
    border - style: solid;
    border - color: green;
    border - top: red;
}

需要注意的是，边框会撑大盒子，例如设置了10px的边框后，width和height原本是500 * 250，但最终整个盒子大小变成了520 * 270。我们可以通过box - sizing属性修改浏览器的行为，使边框不再撑大盒子，如使用通配符选择器“* {box - sizing: border - box;}”。

（二）内边距

padding用于设置内容和边框之间的距离。它有基础写法，可以给四个方向分别添加边距（padding - top、padding - bottom、padding - left、padding - right）。当添加padding后，盒子的大小会被撑大，例如：

div {
    height: 200px;
    width: 300px;
    padding - top: 5px;
    padding - left: 10px;
}

原本盒子大小为300 * 200，添加内边距后变成了310 * 205。同样，使用box - sizing: border - box属性可以使内边距不再撑大盒子。此外，padding还有复合写法，可以将多个方向的padding合并到一起，常见的有四种情况：

padding: 5px;表示四个方向都是5px。
padding: 5px 10px;表示上下内边距5px，左右内边距为10px。
padding: 5px 10px 20px;表示上边距5px，左右内边距为10px，下内边距为20px。
padding: 5px 10px 20px 30px;表示上5px，右10px，下20px，左30px（顺时针）。

（三）外边距

外边距（margin）的基础写法可以控制盒子和盒子之间的距离，能给四个方向都加上边距（margin - top、margin - bottom、margin - left、margin - right）。其复合写法规则同padding。例如：

.div1 {
    margin - bottom: 20px;
}

.div2 {
    margin: 10px; /* 四个方向都设置 */
    margin: 10px 20px; /* 上下为10，左右20 */
    margin: 10px 20px 30px; /* 上10，左右20，下30 */
    margin: 10px 20px 30px 40px; /* 上10，右20，下30，左40 */
}

对于块级元素水平居中，可以在指定宽度（如果不指定宽度，默认和父元素一致）的前提下，将水平margin设为auto，有三种写法：margin - left: auto; margin - right: auto;、margin: auto;、margin: 0 auto;。需要注意的是，这个水平居中的方式和text - align不一样，margin: auto是给块级元素用的，text - align: center是让行内元素或者行内块元素居中的，并且对于垂直居中，不能使用“上下margin为auto”的方式。

（四）去除浏览器默认样式

浏览器会给元素加上一些默认的样式，尤其是内外边距，并且不同浏览器的默认样式存在差别。为了保证代码在不同的浏览器上都能按照统一的样式显示，我们往往会去除浏览器默认样式，使用通配符选择器“* {margin: 0; padding: 0;}”即可完成这件事情。

十、弹性布局

（一）初体验

创建一个div，内部包含三个span元素，初始状态下它们按照行内元素的特性排列。当给div加上display: flex之后，span元素有了一些变化，看起来更像是块级元素，有了高度等属性。再给div加上justify - content: space - around;后，这些span元素能够水平隔开；若把justify - content: space - around;改为justify - content: flex - end;，则三个元素会在右侧显示。

（二）flex布局基本概念

flex是flexible box的缩写，意为“弹性盒子”。任何一个html元素都可以指定为display: flex来完成弹性布局。其本质是给父盒子添加display: flex属性，从而控制子盒子的位置和排列方式。被设置为display: flex属性的元素称为flex container（弹性容器），它的所有子元素立刻成为该容器的成员，称为flex item（弹性项目）。flex item可以纵向排列，也可以横向排列，这个方向称为flex direction（主轴）。需要注意的是，当父元素设置为display: flex之后，子元素的float、clear、vertical - align都会失效。

（三）常用属性

justify - content
- 此属性用于设置主轴上的子元素排列方式，但使用之前一定要确定好主轴是哪个方向。它有多个属性取值：
  - 未指定时，默认按照从左到右的方向布局。
  - 当设置为justify - content: flex - end时，元素都排列到右侧。
  - 当设置为jutify - content: center时，元素居中排列。
  - 当设置为justify - content: space - around时，会平分剩余空间。
  - 当设置为justify - content: space - between时，先让两边元素贴近边缘，再平分剩余空间。
align - items
- 该属性用于设置侧轴上的元素排列方式。它的取值和justify - content差不多。其中，stretch（拉伸）是align - content的默认值，表示如果子元素没有被显式指定高度，那么就会填充满父元素的高度。我们可以使用align - items实现垂直居中，但需要注意的是，align - items只能针对单行元素来实现，如果有多行元素，就需要使用item - contents。

CSS是一个功能强大且内容丰富的样式语言，掌握它需要不断地学习和实践。无论是构建简单的个人博客还是复杂的商业网站，CSS都是我们实现精美页面布局和视觉效果不可或缺的工具。希望通过这篇博客，能让大家对CSS有更深入、更全面的理解，从而在网页开发的道路上更加得心应手。