css语言制作
CSS 基础语法
CSS（层叠样式表）用于描述 HTML 或 XML 文档的呈现方式。基本语法由选择器和声明块组成。选择器指定要样式化的元素，声明块包含一个或多个属性-值对。
选择器 {
属性: 值;
属性: 值;
}常用选择器类型
元素选择器：通过 HTML 标签名称选择元素。
p {
color: blue;
}类选择器：通过 class 属性选择元素，以点号（.）开头。
.highlight {
background-color: yellow;
}ID 选择器：通过 id 属性选择元素，以井号（#）开头。
#header {
font-size: 24px;
}盒模型
CSS 盒模型包含内容（content）、内边距（padding）、边框（border）和外边距（margin）。
.box {
width: 200px;
padding: 20px;
border: 5px solid black;
margin: 10px;
}布局技术
Flexbox：弹性布局，适合一维布局（行或列）。
.container {
display: flex;
justify-content: space-between;
}Grid：网格布局，适合二维布局。
.container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}响应式设计
使用媒体查询（Media Queries）适配不同屏幕尺寸。
@media (max-width: 600px) {
body {
background-color: lightblue;
}
}动画与过渡
过渡（Transition）：平滑改变属性值。
.button {
transition: background-color 0.5s ease;
}
.button:hover {
background-color: red;
}动画（Animation）：通过关键帧定义复杂动画。
@keyframes slide {
from { transform: translateX(0); }
to { transform: translateX(100px); }
}
.element {
animation: slide 2s infinite;
}变量与自定义属性
CSS 变量（自定义属性）便于统一管理样式。
:root {
--main-color: #3498db;
}
.element {
color: var(--main-color);
}常见单位
- 绝对单位：
px（像素）、pt（点） - 相对单位：
em（相对于父元素字体大小）、rem（相对于根元素字体大小）、%（百分比） - 视口单位：
vw（视口宽度百分比）、vh（视口高度百分比）
浏览器兼容性
使用前缀确保兼容性，例如：
.box {
-webkit-border-radius: 10px; /* Chrome, Safari */
-moz-border-radius: 10px; /* Firefox */
border-radius: 10px; /* 标准语法 */
}
