怎么制作CSS样式
创建CSS样式的基本方法
CSS（层叠样式表）用于控制网页的视觉呈现。可以通过以下方式创建和应用CSS样式：
内联样式
直接在HTML元素的style属性中编写CSS规则，仅影响当前元素。
<p style="color: blue; font-size: 16px;">示例文本</p>内部样式表
在HTML文件的<head>部分使用<style>标签定义CSS规则，影响当前页面所有匹配元素。
<head>
<style>
p {
color: blue;
font-size: 16px;
}
</style>
</head>外部样式表
创建单独的.css文件，通过<link>标签引入到HTML中，可实现多页面样式复用。
<head>
<link rel="stylesheet" href="styles.css">
</head>styles.css文件内容示例：
p {
color: blue;
font-size: 16px;
}CSS规则结构与语法
一个完整的CSS规则由选择器和声明块组成：
选择器 {
属性: 值;
属性: 值;
}- 选择器：指定样式应用的目标（如元素、类或ID）
- 声明块：包含一对大括号
{}，内部是属性-值对
常用选择器类型
元素选择器 通过HTML标签名称选择元素
p {
color: red;
}类选择器（.） 通过class属性选择元素
.highlight {
background-color: yellow;
}ID选择器（#） 通过id属性选择单个元素
#header {
font-size: 24px;
}组合选择器
- 后代选择器（空格分隔）
div p { color: green; } - 子元素选择器（>）
div > p { color: blue; }
常见CSS属性示例
文本样式
p {
color: #333333;
font-family: Arial, sans-serif;
font-size: 14px;
line-height: 1.5;
text-align: center;
}盒模型属性
div {
width: 300px;
height: 200px;
padding: 20px;
margin: 10px;
border: 1px solid black;
}背景样式
body {
background-color: #f0f0f0;
background-image: url('bg.png');
background-repeat: no-repeat;
}CSS最佳实践
- 使用外部样式表实现内容与表现分离
- 合理使用类选择器，避免过度依赖ID选择器
- 采用一致的命名约定（如BEM方法论）
- 使用CSS预处理器（如Sass/Less）增强可维护性
- 遵循响应式设计原则，使用媒体查询适配不同设备
/* 响应式设计示例 */
@media (max-width: 600px) {
body {
font-size: 14px;
}
}
