CSS入门：初识层叠式样式表CSS

郎哥
前端
2024-06-17
543热度
0评论

CSS是什么?

CSS的英文全称是Cascading Style Sheets，翻译过来就是层叠式样式表。样式就是一个事物的外观和样子，例如服装有不同的样式，穿到不同的人身上就会有不同的效果；人们浏览网页，有的网页很漂亮，让人赏心悦目，留客率就很高。反之乱七八糟、不够美观的网页就会让人厌烦，也不愿意再次进入该网页，留客率就低。

对网页来说，样式就是网页的外观和样子，不同的样式应用到同一个网页，它会展现出不同的外观和样子，有的样式注重体现艺术美感、有的样式注重体现庄重大方、有的样式注重体现文化韵味。在网页设计中，样式被细化为一个一个的标签，每个标签定义了一个单独的样式外观，并应用到HTML元素的外观展示。

例如，CSS在描述文字外观样式上，就提供了font-size（字体尺寸样式）、font-family（字体样式，如宋体、黑体等）、color（字体颜色）等样式。这些样式都可以应用到网页文字元素上，如p元素、span元素等。当多个样式标签应用到网页元素时，浏览器会把这些样式效果叠加起来用于展现网页元素的外观。

现在就可以理解什么是层叠式样式表了？CSS把描述网页元素的样式细化为一个一个的标签，标签的组合组成了样式表，当多个样式标签组合应用到网页元素时，浏览器会把这些样式效果叠加起来用于展现网页元素的外观。

CSS用什么软件来编辑？

CSS主要用于描述网页的外观和样子，CSS和网页就是一家人，编辑网页的软件工具都可以用来编辑CSS。CSS即可以和网页内容在同一网页文件中混合编辑；也可以对CSS进行单独编辑，独立保存为一个CSS文件（文件扩展名为css），在网页文件中引入CSS文件就可以了。

一个和网页内容混合编辑的CSS样例

下面的网页代码没有使用CSS样式，下图是该网页代码在浏览器的显示效果。

<html>
<head>
<title>送杜少府之任蜀州</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<p>送杜少府之任蜀州</p>
<p>城阙辅三秦，风烟望五津。</p>
<p>与君离别意，同是宦游人。</p>
<p>海内存知己，天涯若比邻。</p>
<p>无为在歧路，儿女共沾巾。</p>
</body>
</html>

下面的网页代码使用了CSS样式，下图是该网页代码在浏览器的显示效果。

<html>
<head>
<title>送杜少府之任蜀州</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body style="text-align:center; margin-top:20px;padding:0;">
<p style=" font-size:22px; font-family:微软雅黑; font-weight:bolder;">送杜少府之任蜀州</p>
<p style="font-size:18px; margin-top:30px;">城阙辅三秦，风烟望五津。</p>
<p style="font-size:18px; ">与君离别意，同是宦游人。</p>
<p style="font-size:18px; ">海内存知己，天涯若比邻。</p>
<p style="font-size:18px; ">无为在歧路，儿女共沾巾。</p>
</body>
</html>

在上面的网页代码中，CSS样式作为网页元素的style属性，内置到网页元素中。在body元素内置的样式属性会影响到整个网页的显示效果，也称为全局样式属性。在单个元素内置的样式属性仅对该元素及其它的子元素起到作用，也称为局部样式属性。当局部样式属性和全局样式属性发生冲突时，以局部样式属性为主。

CSS样式的继承性

CSS样式具有继承性，父元素设置的样式会影响到其所有的子元素，也包括所有的后代元素，除非子元素重新定义了样式，父元素的样式才会被覆盖。例如，在body元素设置的样式，将会影响到body内所有的HTML元素。