css样式表的制作方法
内联样式
在HTML元素的style属性中直接编写CSS代码。适用于单个元素的简单样式调整，但不推荐大规模使用。
<p style="color: red; font-size: 16px;">示例文本</p>内部样式表
在HTML文档的<head>部分使用<style>标签定义CSS规则。适用于单个页面的样式设计。
<head>
<style>
p {
color: blue;
font-family: Arial;
}
</style>
</head>外部样式表
创建独立的.css文件，通过<link>标签引入到HTML中。这是最推荐的方式，可实现多页面样式复用。
<head>
<link rel="stylesheet" href="styles.css">
</head>styles.css文件内容示例：
body {
background-color: #f0f0f0;
margin: 0;
}CSS规则结构
每条CSS规则由选择器和声明块组成。声明块包含属性与值的组合。
选择器 {
属性1: 值1;
属性2: 值2;
}常用选择器类型
- 元素选择器：
p { } - 类选择器：
.className { } - ID选择器：
#idName { } - 属性选择器：
[type="text"] { } - 伪类选择器：
a:hover { }
盒模型控制
通过width、height、padding、border和margin控制元素布局。
.box {
width: 200px;
padding: 20px;
border: 1px solid #000;
margin: 10px;
}响应式设计
使用媒体查询适配不同设备屏幕。
@media (max-width: 600px) {
body {
font-size: 14px;
}
}动画效果
通过@keyframes和animation属性创建动画。
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.element {
animation: fadeIn 2s;
}预处理器使用
Sass/Less等预处理器可增强CSS功能，需编译为原生CSS。
$primary-color: #333;
body {
color: $primary-color;
}现代布局技术
Flexbox和Grid系统实现复杂布局。
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
