CSS入门丨10分钟轻松上手CSS
warning:
这篇文章距离上次修改已过183天，其中的内容可能已经有所变动。
CSS (Cascading Style Sheets) 是用于描述网页样式的语言。以下是一个简单的CSS示例，它将改变HTML元素的颜色和布局。
/* 设置页面中所有段落的文本颜色为蓝色 */
p {
color: blue;
}
/* 设置页面中类名为"header"的元素的背景颜色为灰色，字体大小为24px */
.header {
background-color: grey;
font-size: 24px;
}
/* 设置页面中所有<h1>标签的文本对齐方式为居中 */
h1 {
text-align: center;
}
/* 设置页面中所有带有"container"类的元素的边框，并且将其置于页面中心 */
.container {
border: 1px solid black;
margin: auto;
width: 50%;
}在HTML中使用这些样式，只需将上述CSS代码放入<style>标签内，并在HTML文档的<head>部分引入：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Example</title>
<style>
p {
color: blue;
}
.header {
background-color: grey;
font-size: 24px;
}
h1 {
text-align: center;
}
.container {
border: 1px solid black;
margin: auto;
width: 50%;
}
</style>
</head>
<body>
<div class="header">页头</div>
<div class="container">
<h1>标题</h1>
<p>这是一个段落。</p>
</div>
</body>
</html>这个简单的示例展示了CSS的基本使用方法，包括如何选择元素、应用颜色、设置字体大小和文本对齐等。通过这个例子，开发者可以快速了解CSS的基本功能，并开始在自己的网页设计中应用它。
评论已关闭