CSS基础全解析

TT-Kun

已于 2024-11-23 19:06:59 修改

阅读量3k

点赞数 89

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

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

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

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

CSS全解析

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

一、CSS是什么

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

二、基本语法规范

CSS语法主要包括两部分：选择器和声明。

基本格式如下：

选择器 {声明1}

选择器用于指定我们要修改的HTML元素。例如，在上述实例中，body和h1就是选择器。在之后的实训中，我们也会学习使用多种更复杂的选择器。

通过声明，我们定义要改变的元素样式。

声明由属性和值构成，包含在花括号中，基本格式如下：

{属性: 值;}

例如：

{background-color: teal;}这一声明，指定了body元素的背景颜色为蓝绿色(teal)。

同样的，对h1添加了多行声明：

{
/* 声明代表h1的字体颜色设置为白色*/
color: white;
/* 字体大小(font-size)为36px /
font-size: 36px;
/ 文字居中方式(text-align)为居中 */
text-align: center;
}

在平时开发网站时，建议每个声明通常单独列为一行，有助于阅读。当网站发布时，可以使用工具压缩，将多行声明写在一行，使得CSS文件大小更小，加载速度更快。

提示：

语句最后的分号可以不写。如果多个声明写在一行，就必须书写。一般情况下，建议都书写。

示范样例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Hello World</title>
    <style type="text/css">
      body {
        text-align: center;
      }

      h1 {
        text-align: center;
        font-size: 40px;
        color: #62A8CB;
      }

      img {
        height: 250px;
      }
      p {
        color: grey;
        font-size: 18px;
      }
    </style>
  </head>
  <body>
    <h1>CSS让网页样式更丰富</h1>
    <img src="image1.png">
    <p>使用CSS(Cascading Style Sheets)，可以使网页样式更加的丰富多彩，它解决内容与表现分离的问题，提高了工作效率。</p>
  </body>
</html>

页面效果：

在这里插入图片描述

对h1标题的text-align属性设置了center居中对齐，使得标题可以居中显示，另外font-size属性设置字体大小，color属性设置颜色

对img图片设置高度为250px，这里仅作实例，图片没有加载出来

对段落
中的内容设置颜色为灰色，字体大小为18

三、引入方式

（一）内部样式表

在 HTML 文件的<head>标签内部使用<style>标签来定义样式。示例如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <style>
        h1 {
            text-align: center;
            font-size: 40px;
        }
        p {
            color: grey;
            font-size: 18px;
        }
    </style>
</head>
<body>
    <h1>这是一个标题</h1>
    <p>这是一个段落。</p>
</body>
</html>

（二）行内样式/内联样式

行内样式表是通过元素的“style”属性来指定某个标签的样式。适合编写简单的样式，且只针对某个特定的标签生效。它的优先级较高，会覆盖其他方式定义的样式。直接在 HTML 标签内部使用style属性来定义样式。例如，如果你想为一个<h1>和<p>标签设置样式，可以这样写：

<h1 style="text-align: center; font-size: 40px;">这是一个标题</h1>

<p style="color: grey; font-size: 18px;">这是一个段落。</p>

再举例：

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

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

（三）外部样式表

首先创建一个独立的.css文件（例如styles.css），并在其中定义样式：

h1 {
    text-align: center;
    font-size: 40px;
}
p {
    color: grey;
    font-size: 18px;
}

然后在 HTML 文件中通过<link>标签引入这个.css文件。<link>标签通常放在<head>标签内，示例如下：
```
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <h1>这是一个标题</h1>
    <p>这是一个段落。</p>
</body>
</html>
```
样式和内容完全分离，使得 HTML 文件更简洁，易于阅读和维护。多个 HTML 页面可以共享同一个外部样式表，提高了样式的复用性。对于大型项目，修改样式只需要在.css文件中进行，而不需要逐个修改 HTML 文件。

四、代码风格

（一）样式格式

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

（二）样式大小写

虽然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。