CSS初学者指南：理解CSS的作用与应用-优快云博客

本文链接：https://blog.youkuaiyun.com/csxypr/article/details/79388227

本文介绍了CSS的基础知识，包括其用于美化HTML页面的用途，以及通过标记来控制样式。CSS解决了HTML在美工设计、维护、定位等方面的问题，提供了更高效的页面布局和样式控制。文章探讨了行内样式、内嵌式和链接式这三种CSS应用方式，强调了链接式在维护和扩展性上的优势。

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

前言
结语

前言

今天小咸儿来总结一下，在学习CSS网页样式之后，对于CSS的第一感觉。

首先先来一盘重口味的小菜儿：小咸儿自己画的思维导图
这里写图片描述
怎么样？看起来颜色绚烂多彩，而且结构分明吧！在这里小咸儿就不多说些什么了，欢迎大家在评论区多多指教……

接下来，来介绍一下CSS到底是个什么：

概念

CSS（Cascading Style Sheet），中文译为层叠样式表，它是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

简单来说：CSS的引入就是为了使的HTML语言能够更好地适应页面的美工设计。它以HTML语言为基础，提供了丰富的格式化功能。

标记

在这里引入一下标记的概念，标记：在HTML语言中，对于标记的运用是驾轻就熟的，在页面中各种标记以及位于标记中间的所有内容，组成了整个页面。例如：

<h1>哈哈哈哈哈</h1>

其中的'<h1>'称为起始标记，对应的'</h1>'称为结束标记，在这两者之间为实际的标题内容

传统HTML缺点

1、维护困难。尤其是对于整个网站而言，后期修改和维护的成本很高。
2、标记不足。HTML本身的标记十分的少，很多标记都是为网页内容服务的。
3、网页过“胖”。没有统一对各种风格样式进行控制。
4、定位困难。在整体布局页面时，HTML对于各个模块的位置调整显得捉襟见肘。

CSS优点

1、采用CSS布局，并没有像表格布局充满各种属性和数字，而且很多CSS文件都可以通用，大大缩减了页面代码，提高页面浏览速度。
2、结构清晰，对搜索引擎更加友好。
3、兼容性更好，符合web标准规范的发展趋势。
4、缩短改版时间。
5、强大的字体控制和排版能力。
6、提高易用性，使用CSS可以结构化HTML。
7、更好地扩展性。
8.更灵活控制页面布局。
9、表现和内容相分离，干净利落，将设计部分剥离出来放在一个独立样式文件中，可以减少未来网页无效的可能。

控制页面

行内样式：所有样式方法中最为直接的一种，直接对HTML的标记使用style属性，然后将CSS代码直接写在其中。

<html>
<head>
<title>哈哈哈哈</title>
</head>
<body>
    <P style="color:#FF0000; font-size:10px;text-decoration:underline;">
    我笑的
    </p>
</body>
</html>

行内样式：后期维护成本高，而且网页容易过胖，因此不推荐使用。

内嵌式：内嵌样式就是将CSS写在head与/head之间，并且用style和/style标记进行声明。

<html>
<head>
<title>哈哈哈哈</title>
<style type="text/css">
p{
    color:#FF00FF;
    text-decoration:underline;
    font-weight:bold;
    font-size:25px;
}
</head>
<body>
    <p>
    我笑的
    </p>
</body>
</html>

内嵌式：所有的CSS的代码部分被集中在了同一个区域，方便了后期的维护，页面也大大瘦身。但是如果采用同一个样式，内嵌式的方法就显得略微麻烦，维护成本也不低。

链接式：将HTML页面本身与CSS样式风格分离为两个或多个文件，实现页面框架HTML代码与美工CSS代码的完全分离，使得前期制作和后期维护都十分方便。

<html>
<head>
<title>哈哈哈哈</title>
<link href="1.css" type="text/css" rel="stylesheet">
</head>
<body>
    <p>
    我笑的
    </p>
</body>
</html>

创建文件1.css，如下所示：

p{
    color:#FF00FF;
    text-decoration:underline;
    font-weight:bold;
    font-size:20px;
}

导入样式：采用import方式导入的样式表，在HTML文件初始化时，会被导入到HTML文件内，作为文件的一部分，类似内嵌式的效果。放在style与/style之间：

@import url(sheet1.css);
@import url("sheet1.css");
@import url('sheet1.css');
@import sheet1.css;
@import "sheet1.css";
@import 'sheet1.css';

优先级

行内样式的优先级最高，其次是采用link标记的链接式，再次是位于style和/style之间的内嵌式，最后才是@import导入式。

结语

每学习一个新内容，总结下来，打造一个节点，构造自己的知识网，达到“牵一发而动全身”是自己的目标。

CSS之初相识

前言

概念

标记

传统HTML缺点

CSS优点

控制页面

优先级

结语