CSS(层叠样式表,Cascading Style Sheets)是用来描述HTML或XML(包括各种XML:SVG, MathML 或 XHTML)等文档的外观和格式的语言。以下是CSS的基本语法:
1.选择器
1.元素选择器
元素选择器是基于HTML标签名称来选择元素的。当你使用元素选择器时,你是在告诉浏览器对页面中所有该类型的HTML元素应用特定的样式。以下是两个使用元素选择器的CSS示例:
示例 1: 修改所有段落的字体颜色和大小
假设你想改变网页上所有段落(<p>
标签)的文本颜色为蓝色,并且设置字体大小为16像素,你可以这样写:
p {
color: blue;
font-size: 16px;
}
这段CSS代码将应用于HTML文档中的每一个<p>
元素,使得它们的文本颜色变为蓝色,字体大小变为16px。
示例 2: 设置所有链接的样式
如果你想更改所有超链接(<a>
标签)的默认样式,比如去掉下划线并且当鼠标悬停在链接上时改变背景颜色,你可以这样做:
a {
text-decoration: none; /* 去掉下划线 */
}
a:hover {
background-color: yellow; /* 当鼠标悬停时背景变黄 */
}
在这个例子中,第一个规则去掉了所有链接的下划线,第二个规则设置了当用户将鼠标悬停在链接上时,链接的背景颜色会变成黄色。请注意,:hover
是一个伪类,它允许你定义当特定事件发生时元素的样式,在这个情况下,是指当用户的鼠标指针悬停在链接上方时。
这两个示例展示了如何使用元素选择器来快速地为同类型的所有HTML元素应用统一的样式。
2.类选择器
类选择器是通过在HTML元素中定义的class
属性来选择元素,并为其应用特定样式的。使用类选择器可以让你更加灵活地控制页面上的样式,因为同一个类可以在多个元素上使用,而且不会像ID选择器那样限制为文档中的唯一实例。以下是两个使用类选择器的CSS示例:
示例 1: 使用类选择器设置文本对齐方式
假设你有一个网页,其中某些段落需要居中文本,而其他的则不需要。你可以创建一个名为.center-text
的类,然后将这个类应用到需要居中显示的段落上。
<p class="center-text">这段文字将会居中。</p>
<p>这段文字保持默认对齐。</p>
对应的CSS代码如下:
.center-text {
text-align: center;
}
这样,所有带有.center-text
类的段落都会以居中的方式显示其文本内容。
示例 2: 使用类选择器更改按钮样式
如果你想为网页上的按钮添加自定义样式,比如改变背景颜色、字体颜色和边框圆角等,你可以定义一个类(例如.custom-button
),并将其应用于各个按钮元素。
<button class="custom-button">点击我</button>
<button>普通的按钮</button>
对应的CSS代码如下:
.custom-button {
background-color: #4CAF50; /* 绿色背景 */
color: white; /* 白色文字 */
padding: 10px 20px; /* 内边距 */
border: none; /* 无边框 */
border-radius: 8px;