CSS 教程
CSS(层叠样式表)是一种用于描述HTML或XML文档样式的样式表语言。它允许你将文档内容和文档的外观(样式)分离,使得你可以轻松地更改网页的样式而不需要修改HTML结构。
基础语法
CSS的基本语法由选择器和声明块组成。以下是一个简单的CSS示例:
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
这里,body
是选择器,它指定了样式将应用于HTML文档的 <body>
元素。大括号 {}
内的声明块包含了具体的样式规则。
选择器
CSS选择器用于指定要应用样式的HTML元素。以下是一些常用的选择器:
- 元素选择器:
<标签名>
,例如p
选择所有<p>
元素。 - 类选择器:
.类名
,例如.highlight
选择所有具有highlight
类的元素。 - ID选择器:
#id名
,例如#title
选择具有title
ID的元素。
属性
CSS属性用于定义元素的样式。以下是一些常用的CSS属性:
- 颜色:
color
,例如color: red;
设置文本颜色。 - 背景色:
background-color
,例如background-color: #fff;
设置背景颜色。 - 字体:
font-family
,例如font-family: '微软雅黑', sans-serif;
设置字体。
实例
以下是一个简单的HTML和CSS示例:
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>我的网页</title>
<style>
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
.highlight {
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<h1 id="title">欢迎来到我的网页</h1>
<p class="highlight">这是一个示例段落。</p>
</body>
</html>
在这个例子中,我们设置了一个标题和段落的样式。
更多信息
想要了解更多关于CSS的信息,请访问我们的CSS教程页面。
[center]https://cloud-image.ullrai.com/q/css/[/center]