css自己制作
CSS 制作基础方法
选择器与样式定义
CSS 通过选择器定位 HTML 元素，使用 属性:值 的格式定义样式。基本语法结构为：
selector {
property: value;
}内联样式
直接在 HTML 标签内通过 style 属性添加样式：
<p style="color: blue; font-size: 16px;">示例文本</p>内部样式表
在 HTML 文档的 <head> 部分使用 <style> 标签：
<head>
<style>
body {
background-color: #f0f0f0;
}
h1 {
color: darkred;
}
</style>
</head>外部样式表创建
独立 CSS 文件
创建 .css 后缀的独立文件（如 styles.css），通过 <link> 引入：
<link rel="stylesheet" href="styles.css">文件内容示例：
/* styles.css */
.container {
width: 80%;
margin: 0 auto;
}
.button {
padding: 10px 20px;
background: #4CAF50;
}常用样式属性
文本样式
p {
font-family: Arial;
font-size: 14px;
line-height: 1.6;
text-align: center;
}盒模型
.box {
width: 300px;
padding: 20px;
border: 1px solid #ddd;
margin: 15px;
box-sizing: border-box;
}布局控制
.flex-container {
display: flex;
justify-content: space-between;
}
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
}响应式设计技巧
媒体查询
@media (max-width: 768px) {
.menu {
display: none;
}
.mobile-header {
display: block;
}
}相对单位
.responsive-text {
font-size: clamp(1rem, 2vw, 1.5rem);
}
.container {
width: min(90%, 1200px);
}动画效果实现
过渡动画
.button {
transition: all 0.3s ease;
}
.button:hover {
transform: scale(1.05);
}关键帧动画
@keyframes slidein {
from { transform: translateX(-100%); }
to { transform: translateX(0); }
}
.slide-element {
animation: slidein 1s forwards;
}调试与优化
浏览器开发者工具 使用 Chrome/Firefox 的检查工具实时修改样式，通过盒模型可视化调试布局问题。
CSS 预处理 考虑使用 Sass/Less 等预处理器的嵌套语法和变量功能：
$primary-color: #3498db;
.header {
background: $primary-color;
.logo {
width: 120px;
}
}性能优化
- 减少冗余选择器层级
- 避免过度使用通配符
* - 对高频动画启用硬件加速：
.animated { will-change: transform; transform: translateZ(0); }
