前端入坑第五弹——初识CSS-CSDN博客

本文介绍了CSS的基本概念和用途，强调了其在网页美化中的重要性。通过实例展示了如何使用内部样式表、标签选择器、类选择器和ID选择器，以及如何设置字体和文本属性。此外，还提到了行内样式表和外部样式表的使用，帮助读者快速掌握CSS修饰网页的基本技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

从这一次的开始，我将分享CSS的相关应用。

CSS的概念、使用目的和基本使用规范

CSS的概念和使用目的

说起CSS，这其实是Cascading Style Sheets（层叠样式表）的缩写，说白了就是用于修饰网页的。有人会问，用html不香吗，为什么要用CSS呢，这就要从html的局限性说起了。

html的重点在于网页的语义，要想用其修改网页的样式是非常的复杂和繁琐的，这时CSS就出场了。CSS的出现，可以保证我们的网页既美观制作又简便。

CSS的基本样式

这里以内部样式表为主要对象进行说明，行内样式表和外部样式表也会在之后有所提及。

像这样， CSS修饰是用style标签标记的。其中，p是选择器，就是想要对于后面p标签中内容进行修饰。而后面花括号中的声明，属性和属性值是以键值对的形式出现的，它们之间用分号隔开，完整的代码是这样的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    p {
        font-family: "Microsoft yahei";
        font-size: medium;
    }
</style>
<body>
    <p>
        今天是12月6日，星期一，农历冬月初三，欢迎收看新闻联播节目。
    </p>
</body>
</html>

一般情况下，我们经常会把这部分内容放在head部分，实现内容和样式的分离。此时，p标签内部的内容就会被相应地修饰。

CSS的书写规范

很多的语言都有一些约定俗成的书写规范，CSS也不例外。

还是这个例子，我们习惯将每个属性单写一行，这样看起来会比较清楚；在属性和属性值这里，我们一般使用小写字母；并且在选择器和前花括号以及冒号和属性值之间加上一个空格。

CSS的选择器

选择器的作用，顾名思义，就是用于选择修饰对象。而在不同的情况下，选择器的使用也有所不同，接下来介绍一些常用的基础选择器。

标签选择器

标签选择器，就是用body主题部分的内容作为选择器进行修饰。

像上文中提及的，这个就是一个标签选择器。它选择了下文里标签是p的内容进行修饰。

它的好处也非常明显，就是可以同时修改所有标签相同的内容。

而缺点就是，不能够对内容进行差异化修饰，不能使同一标签的不同内容出现不同的修饰。

类选择器

针对上面的问题，我们可以选择使用类选择器。

例如，我这里有一个无序列表，我们需要对其中的元素进行不同的修饰，然而它们的标签相同，这时候类选择器就不能够被使用了。

我们就可以使用类选择器。例如，我们想要把“概率论与数理统计”设置为红色，“信号与系统”设置为蓝色，“模拟电子技术基础”设置为黄色，可以这样做。

首先，设置类，就是在小点的后面加上类名，在花括号里添加属性和属性值。

然后在需要的地方用class：

就会得到这样的效果：

其实，class里面可以引用很多的类，它们之间用空格隔开就行了。例如，我需要把“信号与系统”设置为蓝色的同时，将其字号设置为35像素，此时我就可以再设置一个类将字体大小属性设置为35像素，并同时调用两个类，代码将不再详细赘述，得到了这样的结果。

id选择器

这种选择器使用较少，因为这个类只能调用一次，一般应用于有页面唯一性的元素上，经常和JS搭配使用。

通配符选择器

这种选择器可以通过设置，对于页面中所有元素进行修饰。

像这样一首诗，我想对它进行修饰：

可以使用通配符选择器，如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>通配符选择器</title>
    <style>
        * {
            color: blue;
            font-family: 'Courier New', Courier, monospace;
            font-size: 30px;
            font-weight: 700;
        }
    </style>
</head>
<body>
    <p>黄梅时节家家雨，<br>青草池塘处处蛙。<br>有约不来过夜半，<br>闲敲棋子落灯花。</p>
</body>
</html>

整首诗歌都被修饰了：

CSS设置字体属性

font-size

这一属性用于修饰文字大小，例如我想要30像素大小的字，直接在font-size后面的值里面设置30px就可以，记得带上单位。

font-family

这一属性是用于设置字体的，可以同时设置好几个，由前到后使用优先级依次递减。

font-weight

这一属性用于设置字体大小，一般400为正常大小，700为较大的字体，不需要单位。

实例代码可以参考上面通配符修饰器那里的。

CSS设置文本属性

color

这一属性用于设置文字颜色。

text-align

这一属性用于设置文字的对齐方式，常用参数有"left"、"center"、"right"，分别是左对齐、剧中和右对齐。

text-decoration

这一属性主要用于设置上划线、下划线以及删除线等。其中最常用的参数是"None"和“underline"，分别是不设置和设置下划线。在链接中，我们为了去掉下划线，就可以将本属性设置为”None“。

text-incent

这一属性用于首行缩进。我们一般的语言习惯是首行缩进两个字的长度，所以一般的常用参数是"2em"。

line-height

这一属性用于设置行间距，一般25px的间距比较大适于观看。

比如说下面的《天净沙秋思》：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本属性</title>
    <style>
        p {
            color:green;
            text-align: center;
            text-decoration: none;
            text-indent: 0em;
            line-height: 25px;
        }
    </style>
</head>
<body>
    <p>
        枯藤老树昏鸦，<br>小桥流水人家，<br>古道西风瘦马。<br>夕阳西下，<br>断肠人在天涯。
    </p>
</body>
</html>

就有如下的效果：

还可以结合字体属性进一步修饰：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本属性</title>
    <style>
        p {
            color:green;
            text-align: center;
            text-decoration: none;
            text-indent: 0em;
            line-height: 50px;
            font-family: "Microsoft yahei";
            font-size: 35px;
            font-weight: 700;
        }
    </style>
</head>
<body>
    <p>
        枯藤老树昏鸦，<br>小桥流水人家，<br>古道西风瘦马。<br>夕阳西下，<br>断肠人在天涯。
    </p>
</body>
</html>

得到的结果就更加美观了：

行内样式表和外部样式表

行内样式表

这种样式表用于对于局部文本的修饰。例如我想要将上面页面的最后一句变为红色，可以这样写：

可以对最后一句进行一些单独修改：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本属性</title>
    <style>
        p {
            color:green;
            text-align: center;
            text-decoration: none;
            text-indent: 0em;
            line-height: 50px;
            font-family: "Microsoft yahei";
            font-size: 35px;
            font-weight: 700;
        }
    </style>
</head>
<body>
    <p>枯藤老树昏鸦，</p>
    <p>小桥流水人家，</p>
    <p>古道西风瘦马。</p>
    <p>夕阳西下，</p>
    <p style="color: red">断肠人在天涯。</p>
    
</body>
</html>

加上style以及具体的属性和属性值，就可以了。