一、CSS 是什么?
CSS 意为层叠样式表 (Cascading Style Sheets),是一种标记语言,用来描述 HTML 或 XML(包括整个页面以及其中元素的样式)。一份 CSS 文件可以控制整站的样式,让您不必为每个页面重复编写 HTML 标签。
举个例子,下面是一个简单的 HTML 文件:
<!DOCTYPE HTML>
<html>
<head>
<title>网站标题</title>
</head>
<body>
<h1>一级标题</h1>
<p>文字内容文字内容文字内容文字内容文字内容</p>
<img src="image.jpg" alt="图片">
</body>
</html>
现在,假如您想对这个页面中的文字和图片做一些简单的样式设计,您就可以使用 CSS 把页面更好看。下面是一个使用 CSS 的新版本 HTML 文件。
<!DOCTYPE HTML>
<html>
<head>
<title>网站标题</title>
<style>
h1 {
text-align: center;
font-size: 2em;
color: #333;
margin: 0;
padding: 1em 0;
}
p {
font-size: 1.2em;
line-height: 1.5;
margin: 0;
}
img {
max-width: 100%;
}
</style>
</head>
<body>
<h1>一级标题</h1>
<p>文字内容文字内容文字内容文字内容文字内容</p>
<img src="image.jpg" alt="图片">
</body>
</html>
在新版本中,我们添加了一个 style 标签(位于 head 元素内),然后定义了三个 CSS 规则,分别将 h1 元素、p 元素和 img 元素的样式设置为:横向居中、字体大小、字体颜色、上下外边距、顶部内边距、字体行高和最大宽度。
二、CSS 的使用方式
CSS 并不局限于上面提到的将样式直接写在 HTML 页面中。在实践中,有三种主要的样式集成方法:
1. 内部样式表
这种方法可以让您将样式直接写在 HTML 页面的 head 部分内。只需要在 head 标签内使用一个 style 标签定义样式即可。
2. 外部样式表
这种方法可以让您将整个站点的样式保存在一个文件内,然后在 HTML 页面内引入该文件。同时,您可以将多个 HTML 页面引用同一个样式表文件。
3. 内联样式
这种方法允许您在特定的元素内写入行内样式,例如:
<h1 style="color: red; font-size: 3em">Heading One</h1>
三、CSS 的基本语法
CSS 由两个主要的部分组成:
- 属性和属性值的组合
- 选择器
1. 属性和属性值的组合
CSS 中的属性和属性值定义了元素的样式。属性通常描述元素的特征,如字体大小、颜色、背景等。属性值定义了属性的取值范围。例如:
color: red;
font-size: 1.2em;
background: #f4f4f4;
在上面的例子中,color 属性的属性值为 red,font-size 属性的属性值为 1.2em,background 属性的属性值为 #f4f4f4。
2. 选择器
选择器告诉浏览器哪个 HTML 元素需要应用样式。选择器与元素相匹配,并将样式添加到该元素。
例如,下面的 CSS 代码使用 "h1" 选择器对页面中的所有 h1 标签应用样式:
h1 {
color: red;
font-size: 3em;
margin: 0;
padding: 0.5em 0;
text-align: center;
}
四、如何提高CSS的灵活性和可维护性
1. 注释
注释是可读性和可维护性的基石,尤其当你使用一个大型的样式表时更是如此。CSS 支持两种注释风格:单行注释和多行注释。
/* 这是一个注释 */
单行注释用于在一行中添加注释,而多行注释用于在多行之间添加注释。用注释将代码分成段落也是个好主意。
2. 模块化和嵌套
当您面对一个拥有大量元素的站点时,您需要确定如何分组元素和关联的样式。为了使 CSS 更灵活和容易维护,您可以将其拆分为多个模块,并为每个模块定义一个明确的用途。
嵌套允许您快速编写易于阅读和修改的复杂 CSS 规则,例如:
.class {
color: red;
font-size: 1.2em;
.child-class {
text-decoration: underline;
}
}
在上面的例子中,我们在 .class 的定义内部定义了一个 .child-class,这可避免了样式耦合,从而让 CSS 更灵活和可维护。
3. 继承与层叠
CSS 的继承和层叠使得声明重载和继承是可能的。这种方法让您的样式表更加简洁。
例如,下面的 CSS 代码应用了一个通用的样式表,用于所有元素继承:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, sans-serif;
}
在上面的代码中,星号选择器指定应用于所有 HTML 元素。这使得整个站点的布局和页面表现更加规范。
五、总结
在这篇文章中,我们简要介绍了 CSS 的基本概念,包括属性和属性值、选择器、注释、模块化和嵌套以及继承和层叠。CSS 能够让我们对网站的样式进行自由的控制,使其更好看、更具吸引力、更易于阅读。