你是否觉得网页默认的样式过于单调？想让你的博客、作品展示页或者任何网页都拥有独特而吸引人的外观吗？那么，CSS 就是你为网页“穿上漂亮衣服”的关键工具！
本教程将带你一步步了解 CSS 的基础知识，让你能够轻松地控制网页的样式，打造出令人赏心悦目的用户界面。
什么是 CSS？
CSS (Cascading Style Sheets) 是一种样式表语言，用于描述 HTML（或 XML）文档的呈现方式（例如，颜色、字体、布局等）。简单来说，HTML 负责网页的结构和内容，而 CSS 则负责美化这些内容，让它们看起来更漂亮、更有条理。
想象一下，HTML 是一个房子的骨架，而 CSS 就像是房子的装修材料、油漆和家具，让房子变得舒适美观。
CSS 的基本语法
CSS 的基本语法由以下几个部分组成：
CSS
选择器 {
属性: 值;
属性: 值;
/* 这是注释 */
}
- 选择器 (Selector): 用于指定你想要应用样式的 HTML 元素。例如，你可以选择所有的段落 (
<p>)、特定的标题 (<h1>) 或者拥有某个特定属性的元素。 - 属性 (Property): 你想修改的元素的样式属性。例如，
color（颜色）、font-size（字体大小）、background-color（背景颜色）等等。 - 值 (Value): 你为属性设置的具体数值或关键字。例如，
color: blue;中的blue就是color属性的值。 - 分号 (;): 用于分隔不同的属性-值对。
- 花括号 ({}): 用于包裹一个或多个属性-值对。
- *注释 (/ ... */)**: 用于在 CSS 代码中添加说明，不会被浏览器解析。
举个例子：
如果你想让所有段落的文字变成蓝色，你可以这样写 CSS：
CSS
p {
color: blue;
}
CSS 的引入方式
有三种主要的方式将 CSS 应用到你的 HTML 文档中：
-
内联样式 (Inline Styles): 直接在 HTML 元素的
style属性中添加 CSS 样式。
HTML<p style="color: green; font-size: 16px;">这是一段绿色的文字。</p>优点： 简单直接，优先级最高。 缺点： 不利于维护和管理，会使 HTML 代码显得冗余，不推荐在大型项目中使用。
-
内部样式表 (Internal Style Sheet): 将 CSS 代码写在 HTML 文档
<head>标签内的<style>标签中。
HTML<!DOCTYPE html> <html> <head> <style> h1 { color: purple; text-align: center; } p { line-height: 1.5; } </style> </head> <body> <h1>这是一个紫色的标题</h1> <p>这是一段设置了行高的段落。</p> </body> </html>优点： 比内联样式更易于管理，可以将页面的样式集中在一起。 缺点： 只适用于单个 HTML 文件，不利于跨页面共享样式。
-
外部样式表 (External Style Sheet): 将所有的 CSS 代码写在一个单独的
.css文件中，然后在 HTML 文档的<head>标签中使用<link>标签引入。
styles.css 文件内容：
CSSbody { background-color: #f0f0f0; font-family: sans-serif; } a { text-decoration: none; color: navy; }HTML 文件内容：
HTML
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="styles.css"> </head> <body> <h1>欢迎来到我的网站</h1> <p>这是一个使用了外部样式表的页面。</p> <a href="#">一个链接</a> </body> </html>优点： 最推荐的方式，结构清晰，易于维护和管理，可以跨多个 HTML 文件共享样式，提高开发效率。
常用的 CSS 属性
CSS 提供了非常丰富的属性来控制网页元素的各个方面。这里列举一些最常用的基础属性：
-
文本属性 (Text Properties):
color: 设置文字颜色。font-size: 设置字体大小。font-family: 设置字体类型。font-weight: 设置字体粗细（如bold、normal）。font-style: 设置字体样式（如italic、normal）。text-align: 设置文本对齐方式（如left、center、right）。line-height: 设置行高。text-decoration: 设置文本装饰（如下划线、删除线等）。
-
背景属性 (Background Properties):
background-color: 设置背景颜色。background-image: 设置背景图片。background-repeat: 设置背景图片如何重复（如repeat、no-repeat、repeat-x、repeat-y）。background-position: 设置背景图片的位置。
-
盒子模型 (Box Model): 这是 CSS 布局的基础概念，每个 HTML 元素都可以看作一个盒子，由以下几个部分组成：
content: 元素的内容。padding: 内容与边框之间的空白区域（内边距）。border: 元素的边框。margin: 元素边框之外的空白区域（外边距）。
相应的 CSS 属性有
padding、padding-top、padding-right、padding-bottom、padding-left、border、border-width、border-style、border-color、margin、margin-top、margin-right、margin-bottom、margin-left。 -
尺寸属性 (Dimension Properties):
width: 设置元素的宽度。height: 设置元素的高度。
-
显示属性 (Display Property): 控制元素的显示方式，常用的值有：
block: 元素会占据整行，前后都有换行。inline: 元素只占据它内容所需的宽度，不会强制换行。inline-block: 结合了inline和block的特性，可以设置宽度和高度，但不会独占一行。none: 元素及其内容完全不显示。
简单的网页样式示例
让我们通过一个简单的例子来演示如何使用 CSS 美化一个基本的 HTML 页面。
HTML (index.html):
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>我的第一个网页</h1>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">关于</a></li>
<li><a href="#">联系</a></li>
</ul>
</nav>
</header>
<main>
<section class="intro">
<h2>欢迎！</h2>
<p>这是一个使用 CSS 进行美化的简单网页示例。</p>
</section>
</main>
<footer>
<p>© 2023 我的网站</p>
</footer>
</body>
</html>
CSS (style.css):
CSS
body {
font-family: sans-serif;
margin: 0;
background-color: #f4f4f4;
color: #333;
}
header {
background-color: #333;
color: white;
padding: 1em 0;
text-align: center;
}
nav ul {
list-style: none;
padding: 0;
margin: 0;
}
nav ul li {
display: inline;
margin: 0 1em;
}
nav a {
color: white;
text-decoration: none;
}
main {
padding: 20px;
}
.intro {
background-color: white;
padding: 20px;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
h1, h2 {
color: #555;
}
footer {
text-align: center;
padding: 1em 0;
background-color: #333;
color: white;
position: fixed; /* 固定在底部 */
bottom: 0;
width: 100%;
}
将这两个文件放在同一个目录下，用浏览器打开 index.html，你就能看到一个经过简单样式美化的网页了。