制作css
CSS基础语法
CSS（层叠样式表）通过选择器和声明块控制HTML元素的样式。基本语法结构如下：
选择器 {
属性: 值;
属性: 值;
}- 选择器：指定要样式化的HTML元素（如
p、.class、#id）。 - 声明块：包含一对花括号
{}，内部是属性-值对（如color: red;）。
常用CSS属性
-
文本样式
color: #333; /* 文字颜色 */ font-size: 16px; /* 字体大小 */ font-family: Arial; /* 字体类型 */ text-align: center; /* 对齐方式 */ -
盒模型
width: 200px; /* 宽度 */ height: 100px; /* 高度 */ padding: 10px; /* 内边距 */ margin: 20px; /* 外边距 */ border: 1px solid #000; /* 边框 */ -
背景与颜色
background-color: #f0f0f0; /* 背景色 */ background-image: url("image.jpg"); /* 背景图 */ background-repeat: no-repeat; /* 禁止重复 */
CSS选择器类型
- 元素选择器：直接匹配HTML标签（如
div）。 - 类选择器：以
.开头（如.header）。 - ID选择器：以
#开头（如#main）。 - 伪类选择器：如
a:hover（鼠标悬停状态）。
引入CSS的方式
-
内联样式（直接写在HTML标签内）：
<p style="color: blue;">文本</p> -
内部样式表（在HTML的
<style>标签中定义）：<style> p { color: green; } </style> -
外部样式表（通过
.css文件引入，推荐方式）：<link rel="stylesheet" href="styles.css">
响应式设计示例
使用媒体查询适配不同屏幕尺寸：
@media (max-width: 600px) {
body {
font-size: 14px;
}
}动画效果
通过@keyframes创建简单动画：
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.element {
animation: fadeIn 2s;
}Flexbox布局
快速实现弹性布局：
.container {
display: flex;
justify-content: space-between; /* 水平分布 */
align-items: center; /* 垂直居中 */
}注意事项
- 属性值单位需统一（如
px、em、%）。 - 使用缩写属性简化代码（如
margin: 10px 20px;）。 - 避免过度嵌套选择器以提高性能。
