1.什么是CSS?
CSS 指的是层叠样式表* (Cascading Style Sheets),描述了如何在屏幕、纸张或其他媒体上显示 HTML 元素,CSS 节省了大量工作。它可以同时控制多张网页的布局,外部样式表存储在 CSS 文件中。
2.css的语法。
CSS 规则集(rule-set)由选择器和声明块组成:选择器指向需要设置样式的 HTML 元素。声明块包含一条或多条用分号分隔的声明。每条声明都包含一个 CSS 属性名称和一个值,以冒号分隔。多条 CSS 声明用分号分隔,声明块用花括号括起来。
3.CSS选择器
(1)元素选择器根据元素名称来选择 HTML 元素。如下面的语句将<h1>元素居中并设置为红色文本:
h1 {
color: red;
text-align: center;
}
(2)id 选择器使用 HTML 元素的 id 属性来选择特定元素。元素的 id 在页面中是唯一的,因此 id 选择器用于选择一个唯一的元素。要选择具有特定 id 的元素,需要写一个井号(#),后跟该元素的 id。如下面的语句将id=“id1”的元素居中并设置为红色文本:
#id1 {
text-align: center;
color: red;
}
(3)类选择器选择有特定 class 属性的 HTML 元素。如需选择拥有特定 class 的元素,需要写一个句点(.)字符,后面跟类名。如下面的语句将class=“class1”的元素居中并设置为红色文本:
.class1 {
text-align: center;
color: red;
}
(4)可以指定只有特定类的的 HTML 元素会受影响。如下面语句将class=”class1”的<h1>元素居中并设置为红色文本:
h1.class1 {
text-align: center;
color: red;
}
(5)可以指定一个元素受多个类影响,如:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
.class1 {
text-align: center;
color: red;
}
.class2 {
font-size: 50px;
}
</style>
</head>
<body>
<h1>这段文字不受影响</h1>
<h1 class="class1 class2">这段文字受两个类选择器影响</h1>
</body>
</html>
显示效果为: