制作html的css
创建HTML的CSS样式表
CSS（层叠样式表）用于控制HTML文档的样式和布局。以下是几种常见的CSS使用方法：
内联样式
直接在HTML元素的style属性中编写CSS：
<p style="color: blue; font-size: 16px;">这是一段蓝色文字</p>内部样式表
在HTML文档的<head>部分使用<style>标签定义CSS：
<head>
<style>
body {
background-color: lightgray;
}
h1 {
color: navy;
margin-left: 20px;
}
</style>
</head>外部样式表
创建单独的.css文件并通过<link>标签引入：
- 创建
styles.css文件：body { font-family: Arial, sans-serif; } .container { width: 80%; margin: 0 auto; } - 在HTML中链接该文件：
<head> <link rel="stylesheet" href="styles.css"> </head>
常用CSS选择器
元素选择器
通过HTML标签名选择元素：
p {
line-height: 1.5;
}类选择器
通过class属性选择元素（前缀为点）：
.highlight {
background-color: yellow;
}ID选择器
通过id属性选择元素（前缀为井号）：
#header {
height: 100px;
}伪类选择器
定义元素特殊状态：
a:hover {
color: red;
}CSS盒模型
每个HTML元素被视为一个盒子，包含：
content：实际内容padding：内边距border：边框margin：外边距
示例代码：
.box {
width: 300px;
padding: 20px;
border: 5px solid black;
margin: 10px;
}响应式设计
使用媒体查询适配不同设备：
@media screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}CSS Flexbox布局
创建灵活的容器布局：
.container {
display: flex;
justify-content: space-between;
}
.item {
flex: 1;
}CSS Grid布局
创建网格系统：
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
gap: 10px;
}动画效果
使用@keyframes创建动画：
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
.box {
animation: example 4s infinite;
}变量使用
定义CSS变量提高可维护性：
:root {
--main-color: #06c;
}
.element {
color: var(--main-color);
}
