CSS(Cascading Style Sheets)用于描述 HTML 文档的外观和格式。通过 CSS,你可以控制网页的布局、颜色、字体等样式。
基本结构
CSS 规则由选择器和声明块组成。选择器用于选择要应用样式的 HTML 元素,声明块包含一组样式声明。
css
复制代码
selector {
property: value;
}
示例
html
复制代码
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightblue;
}
h1 {
color: navy; margin-left: 20px;
}
</style>
</head>
<body>
<h1>欢迎使用 CSS</h1>
<p>这是一个段落。</p>
</body>
</html>
常用选择器
1.元素选择器:选择所有指定的 HTML 元素。
css
复制代码
p {
color: blue;
}
2.类选择器:选择所有具有指定类属性的元素。
css
复制代码
.class-name {
font-size: 20px;
}
3.ID 选择器:选择具有指定 ID 的元素(在一个 HTML 文档中 ID 必须唯一)。
css
复制代码
#id-name {
background-color: yellow;
}
4.组合选择器:选择所有符合多个条件的元素。
css
复制代码
p.intro {
font-weight: bold;
}
常用属性
1.文本样式
css
复制代码
p {
color: red;
font-size: 16px;
text-align: center;
}
2.盒模型
css
复制代码
div {
width: 300px;
height: 200px;
padding: 10px;
border: 1px solid black;
margin: 20px;
}
3.背景样式
css
复制代码
body {
background-color: lightgrey;
background-image: url('background.jpg');
}
4.布局样式
css
复制代码
.container {
display: flex;
justify-content: center;
align-items: center;
}