CSS零基础入门详细内容（一）

CSS是什么

CSS，全称为层叠样式表（Cascading Style Sheets），是一种用于描述网页上元素外观和布局的样式语言。它与HTML（Hypertext Markup Language）一起被广泛用于构建和设计网页。

CSS通过定义样式规则来指定元素的外观和布局，这些规则包括选择器和属性。选择器用于选择要应用样式的HTML元素，而属性用于指定元素的样式属性，例如颜色、字体、大小、边框、背景等。

使用CSS，您可以轻松地控制网页上的各个元素的样式，从而实现一致的外观和布局。它具有层叠性（多个样式规则可以叠加应用）、继承性（某些属性可以从父元素继承）、优先级（规定了样式规则的优先级顺序）等特性，使得样式的管理和调整更加灵活和高效。

通过将CSS样式规则与HTML结构相分离，使得网页的内容与其外观和布局相互独立，提高了代码的可维护性和重用性。CSS还支持媒体查询，允许根据设备特性（如屏幕大小、分辨率等）调整样式，实现响应式设计。

总的来说，CSS是一种用于美化和布局网页的样式语言，为网页设计提供了更大的自由度和控制力。它是构建现代网页的重要组成部分之一。

体验CSS

先写一个html文件，在头部写一个style标签，CSS的内容可以写在style标签内，在style标签内写选择器（此处的标签名div就是一种选择器），选择器后写大括号。在大括号中，color属性代表字体颜色，属性值red意为将字体颜色改为红色，font-size属性代表字体大小，属性值20px代表字体大小改为20px。注意在属性值之后要加上分号。

px是CSS中代表像素（pixel）单位的缩写，像素是计算机图像的最基本单元，它代表屏幕上的一个点。在网页设计中，像素常用于指定元素的尺寸、边距、字体大小等。p,div,span等标签的默认字号是16px。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            color:red;
            font-size:30px;
        }
    </style>
</head>
<body>
    <div>这是div标签</div>
    <span>这是span标签</span>
</body>
</html>

网页效果如下，div的字体颜色果然变为红色，同时字体也变大。

CSS的引入方式

CSS的引入方式主要有三种，分别是内部样式表、外部样式表和内联样式。

内部样式表

可以将CSS样式定义放置在HTML文档的<head>标签内的<style>标签中。如上一部分体验CSS时给出的实例。内部样式表作用于整个HTML文档。

外部样式表

可以将CSS样式定义放置在一个独立的外部CSS文件中，然后在HTML文档中通过<link>标签引用该文件。

这是CSS文件内容，其中background-color属性代表背景颜色。外部样式表可以在多个HTML文档之间共享。

p {
    color:blue;
    font-size:30px;
    background-color:yellow;
}

这是HTML文件内容，其中link标签也要放在head标签（头部）内，link标签内的rel属性代表关系，属性值stylesheet代表样式表，href属性代表路径，属性值为文件的路径（包括绝对路径和相对路径，在HTML那篇文章中讲过），此处为相对路径。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="02.css">
</head>
<body>
    <p>CSS，全称为层叠样式表（Cascading Style Sheets），是一种用于描述网页上元素外观和布局的样式语言。</p>
</body>
</html>

网页效果：

内联样式

可以直接在HTML元素的"style"属性中定义CSS样式。例如：

<body>
    <p style="color:green;background-color:red;">CSS，全称为层叠样式表（Cascading Style Sheets），是一种用于描述网页上元素外观和布局的样式语言。</p>
</body>

网页效果：

选择器

标签选择器

标签选择器，也叫元素选择器，通过标签名称选择元素。例如，选择所有的 <p> 标签，可以使用 p 选择器。标签选择器对所有的这个标签起作用。例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        a {
            color:pink;
            background-color:blue;
        }
    </style>
</head>
<body>
    <a href="#">链接1</a>
    <a href="#">链接2</a>
</body>
</html>

网页效果：

类选择器

通过标签的 class 属性选择标签。类选择器以点 . 开头，后面跟着类名。例如，选择所有具有 red 类的标签，可以使用 .red 选择器。一个类选择器可以作用于多个标签，一个标签也可以有多个类选择器。类选择器的优先级要先于标签选择器。例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .blue {
            color:blue;
        }
        .red {
            color:red;
        }
    </style>
</head>
<body>
    <p class="red">段落一</p>
    <p class="blue">段落二</p>
    <p class="red">段落三</p>
</body>
</html>

网页效果：

id选择器

通过标签的 id 属性选择标签。id 选择器以井号 # 开头，后面跟着 id 名称。例如，选择具有 red id 的标签，可以使用 #red 选择器。一个id选择器只能作用于一个标签，一个标签只能有一个id选择器。id选择器的优先级要先于类选择器。例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #one {
            font-size:30px;
        }
        #two {
            color:yellow;
            background-color:purple;
        }
    </style>
</head>
<body>
    <div id="one">hello</div>
    <div id="two">world</div>
</body>
</html>

网页效果：

通配符选择器

选择所有标签。通用选择器使用星号 * 表示。通配符选择器的优先级最低。例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            color:red;
        }
    </style>
</head>
<body>
    <a href="#">链接</a>
    <p>段落</p>
    <div>div标签</div>
</body>
</html>

网页效果：

文字外观

相对单位，如em，相对于父元素的字体大小，1em 表示与父元素相同的大小，1.5em 表示比父元素的大小大 1.5 倍。rem，相对于根元素（即 <html> 元素）的字体大小。1rem 表示与根元素相同的大小，1.5rem 表示比根元素的大小大 1.5 倍。

百分比，%，相对于父元素的字体大小的百分比。例100% 表示与父元素相同的大小，150% 表示比父元素的大小大 1.5 倍。

关键字，xx-small, x-small, small, medium, large, x-large, xx-large，均为预定义的关键字，分别表示不同的大小级别。

实例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .one {
            font-size:32px;
        }
        .two {
            font-size:2em;
        }
        .three {
            font-size:200%;
        }
        .four {
            font-size:xx-large;
        }
    </style>
</head>
<body>
    <p>原始段落</p>
    <p class="one">段落一</p>
    <p class="two">段落二</p>
    <p class="three">段落三</p>
    <p class="four">段落四</p>
</body>
</html>

前面有提到p标签的默认大小是16px，上面实例中的32px，2em，200%和xx-large代表的都是二倍的字体大小。网页效果：

字体粗细

改变文字的字体粗细用font-weight，取值有两种，一种是数字值，另一种是关键字。

数字值可以取100到900之间的整百数，关键字有lighter,normal,bold和bolder，其中lighter对应的数字值是100，normal对应的数字值是400，bold对应的数字值是700，bolder对应的数字值是900。注意，并不是所有的字体都可以提供所有的粗细程度，一些字体只有normal和bold两种关键词取值，即只能取400到700之间的整百数。例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .one {
            font-weight:400;
        }
        .two {
            font-weight:normal;
        }
        .three {
            font-weight:700;
        }
        .four {
            font-weight:bold;
        }
    </style>
</head>
<body>
    <div class="one">这是一个div标签</div>
    <div class="two">这是一个div标签</div>
    <div class="three">这是一个div标签</div>
    <div class="four">这是一个div标签</div>
</body>
</html>

网页效果：

字体样式

CSS中用font-style来指定字体样式，即指定字体是否为斜体。其中取值normal为默认值，即表示字体正常（不倾斜）显示，取值italic表示字体倾斜显示。例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        em {
            font-style: normal;
        }
        div {
            font-style: italic;
        }
    </style>
</head>
<body>
    <em>倾斜字体</em>
    <div>正常字体</div>
</body>
</html>

em标签本来表示倾斜字体，div标签本来表示正常字体，通过改变font取值即可改变其状态，网页效果如下：

文字字体

首先了解一下常见的字体类型，如表。

常见字体系列	特点	场景	常见字体
无衬线字体	文字笔画粗细均匀，而且首尾无修饰	网页中大多采用无衬线字体	黑体，微软雅黑
衬线字体	文字笔画粗细不均，而且首尾有笔锋修饰	报刊书籍中应用广泛	宋体，楷体
等宽字体	每个字母或文字的宽度相等	一般用于程序代码编写，有利于代码的阅读和编写	Consolas、fira code

改变文字字体用font-family这一属性，取值是字体名，Windows电脑默认的字体是微软雅黑，Mac电脑默认的字体是苹方。实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .one {
            font-family:黑体;
        }
        .two {
            font-family:楷体;
        }
    </style>
</head>
<body>
    <div class="one">示例</div>
    <div class="two">示例</div>
    <div>示例</div>
</body>
</html>

网页效果：

如果指定的特定字体不可用呢？可以在font-family取值最后加上serif（衬线）或sans-serif（无衬线），这样浏览器会尝试使用默认的衬线字体或无衬线字体来显示文本。为了提高兼容性，通常建议在字体系列列表中提供备选字体，以确保在不同设备和浏览器上都能够显示合适的字体。例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            font-family:华文行楷,楷体,宋体,serif;
        }
    </style>
</head>
<body>
    <div>示例</div>
</body>
</html>

font-family取值中的楷体和宋体就是备选字体，如果这三种字体均不可用，则按任意默认衬线字体显示。网页效果：

font复合属性

复合属性是指在 CSS 中可以同时设置多个相关属性的一种简写语法。通过使用复合属性，可以将多个单独的属性值合并到一个属性中，以减少代码量并提供更简洁的样式定义。

复合属性由一个属性名称和一个包含多个子属性值的值组成。每个子属性值表示要设置的特定属性和对应的值。子属性值之间使用空格或斜杠进行分隔。

其中font复合属性，font后面依次写font-style，font-weight，font-size和font-family的值。注意不同取值之间用空格连接。例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            font:italic bold 30px 楷体;
        }
    </style>
</head>
<body>
    <div>这是一个div标签</div>
</body>
</html>

网页效果：

文本缩进

控制文本缩进用text-indent属性，属性值可以是绝对单位px或相对单位em，前面在讲字体大小的时候已经讲过，不再赘述。例如，想要控制段落首行缩进两个字符可以使text-indent的值为32px（不改变默认字体大小的情况下）或2em。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .one {
            text-indent:2em;
        }
        .two {
            text-indent:32px;
        }
        .three {
            font-size:20px;
            text-indent:40px;
        }
    </style>
</head>
<body>
    <p class="one">复兴号飞驰的背后，是复兴号高速列车研发创新团队的不懈奋斗。他们以推动铁路科技创新事业为己任，攻坚克难、锐意进取，形成了以复兴号动车组为代表的一大批科技创新成果。</p>
    <p class="two">复兴号飞驰的背后，是复兴号高速列车研发创新团队的不懈奋斗。他们以推动铁路科技创新事业为己任，攻坚克难、锐意进取，形成了以复兴号动车组为代表的一大批科技创新成果。</p>
    <p class="three">复兴号飞驰的背后，是复兴号高速列车研发创新团队的不懈奋斗。他们以推动铁路科技创新事业为己任，攻坚克难、锐意进取，形成了以复兴号动车组为代表的一大批科技创新成果。</p>
</body>
</html>

网页效果：

文本对齐方式

在CSS中，可以使用text-align属性来设置文本的对齐方式。以下是常见的取值：

text-align:left; ：将文本左对齐；
text-align:right; ：将文本右对齐；
text-align:center; ：将文本居中对齐；
text-align:justify; ：将文本两端对齐，通过增加单词间的空白来调整行的宽度。

文本修饰线、

在CSS中，可以使用text-decoration来添加文本修饰线，通过改变不同的属性值来添加不同的修饰线。

其中，none为无修饰线（默认值），underline为下划线，overline为上划线，line-through为删除线。例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h2 {
            text-decoration:underline;
        }
        p {
            text-decoration:line-through;
        }
        div {
            text-decoration:overline;
        }
        a {
            text-decoration:none;
        }
    </style>
</head>
<body>
    <h2>二级标题</h2>
    <p>p标签</p>
    <div>div标签</div>
    <a href="#">我是链接，点我</a>
</body>
</html>

网页效果：

行高

行高代表是的是哪部分具体看这张图片。

在CSS中，可以使用line-height属性来控制行框的高度。行高指定了行框中文本行的高度，它可以影响到行内元素的垂直对齐和行间距。

line-height的属性值有三种：一种是绝对单位（px），一种是相对单位（em），还有一种是使用数字值，例如1.5代表的就是1.5倍行距。以下是行高属性的使用示例，其中32px，2em，2代表的都是二倍行距：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .one {
            line-height:32px;
        }
        .two {
            line-height:2em;
        }
        .three {
            line-height:2;
        }
    </style>
</head>
<body>
    <div>这是一个div标签</div>
    <div class="one">这是一个div标签</div>
    <div class="two">这是一个div标签</div>
    <div class="three">这是一个div标签</div>
</body>
</html>

网页效果：

层叠性

最开始的讲到过，CSS是层叠样式表，故而具有层叠性，层叠性顾名思义就是旧的属性会被新的属性所覆盖。看具体示例：

这里我们给p标签设定了两个颜色属性，上边是红色，下边是蓝色，根据层叠性，红色在上，蓝色在下，因此文字将会按蓝色显示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p {
            color:red;
            color:blue;
        }
    </style>
</head>
<body>
    <p>段落文字</p>
</body>
</html>

观察网页效果，果然是蓝色。

颜色取值

颜色常见取值：

1.关键词：预定义的颜色名，例如red、green、blue；

2.rgb表示法：红绿蓝三原色，每项取值范围0~255，例如rgb(0,0,0)、rgb(255,255,255)、rgb(255,0,0)；

3.rgba表示法：红绿蓝三原色-a表示透明度。取值范围是0~1，例如rgba(255,255,255,0.5)、rgba(255,0,0,0.3)；

4.十六进制表示法：#开头，将数字转换为十六进制表示，例如#000000、#ff0000、#e92322，简写#000、#f00。