制作css
CSS 基础语法
CSS（层叠样式表）用于定义HTML元素的样式。基本语法由选择器和声明块组成：
选择器 {
属性: 值;
属性: 值;
}- 选择器：指定要样式化的HTML元素（如
p、.class、#id）。 - 声明块：包含一对花括号
{}，内部是属性-值对（如color: red;）。
引入CSS的三种方式
-
内联样式：直接在HTML标签中使用
style属性。<p style="color: blue;">这是蓝色文本</p> -
内部样式表：在HTML的
<head>中使用<style>标签。<style> p { color: green; } </style> -
外部样式表：通过
<link>引入独立的.css文件（推荐）。<link rel="stylesheet" href="styles.css">文件
styles.css内容示例：p { color: red; }
常用CSS属性示例
-
文本样式：
p { color: #333; /* 文字颜色 */ font-size: 16px; /* 字号 */ font-family: Arial; /* 字体 */ text-align: center; /* 对齐 */ } -
盒模型：
div { width: 200px; /* 宽度 */ padding: 20px; /* 内边距 */ margin: 10px; /* 外边距 */ border: 1px solid black; /* 边框 */ } -
背景与颜色：
body { background-color: lightgray; /* 背景色 */ background-image: url("image.jpg"); /* 背景图 */ }
选择器优先级
CSS优先级由高到低：
!important（覆盖所有规则，慎用）。p { color: red !important; }- 内联样式（
style属性）。 - ID选择器（如
#header）。 - 类/伪类选择器（如
.button:hover）。 - 元素选择器（如
div）。
响应式设计（媒体查询）
通过 @media 适配不同屏幕尺寸：
/* 屏幕宽度小于600px时的样式 */
@media (max-width: 600px) {
body {
font-size: 14px;
}
}Flexbox布局示例
弹性布局用于快速对齐元素：
.container {
display: flex; /* 启用Flex布局 */
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
}
.item {
flex: 1; /* 等分剩余空间 */
}动画与过渡
-
过渡效果：平滑改变属性值。
button { transition: background-color 0.3s ease; } button:hover { background-color: gold; } -
关键帧动画：
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .element { animation: fadeIn 2s; }
调试与优化工具
- 浏览器开发者工具（Chrome按
F12）可实时编辑CSS。 - 使用工具如 CSS Minifier 压缩代码。
通过实践和参考文档（如 MDN CSS）逐步掌握高级技巧。
