css怎么制作
使用 CSS 制作样式
CSS（层叠样式表）用于定义 HTML 文档的样式。通过 CSS 可以控制网页的布局、颜色、字体等视觉效果。
内联样式
直接在 HTML 元素的 style 属性中编写 CSS 代码：
<p style="color: blue; font-size: 16px;">这是一段蓝色文字</p>内部样式表
在 HTML 文件的 <head> 部分使用 <style> 标签定义样式：
<head>
<style>
p {
color: blue;
font-size: 16px;
}
</style>
</head>外部样式表
创建一个独立的 .css 文件，并在 HTML 中通过 <link> 标签引入：
<head>
<link rel="stylesheet" href="styles.css">
</head>styles.css 文件内容：
p {
color: blue;
font-size: 16px;
}CSS 选择器
CSS 选择器用于指定需要样式化的 HTML 元素。
元素选择器 通过 HTML 标签名称选择元素：
p {
color: red;
}类选择器
通过类名选择元素，类名前加 .：
.highlight {
background-color: yellow;
}ID 选择器
通过 ID 选择元素，ID 名前加 #：
#header {
font-size: 24px;
}常用 CSS 属性
颜色和背景
color: 设置文本颜色background-color: 设置背景颜色body { color: #333; background-color: #f4f4f4; }
字体和文本
font-family: 设置字体font-size: 设置字体大小text-align: 设置文本对齐方式h1 { font-family: Arial, sans-serif; font-size: 2em; text-align: center; }
盒模型
width和height: 设置元素的宽度和高度margin: 设置外边距padding: 设置内边距border: 设置边框.box { width: 200px; height: 100px; margin: 10px; padding: 20px; border: 1px solid black; }
布局技术
Flexbox Flexbox 提供了一种高效的方式来布局、对齐和分配容器内项目的空间。
.container {
display: flex;
justify-content: center;
align-items: center;
}Grid CSS Grid 布局系统允许创建复杂的二维布局。
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
gap: 10px;
}响应式设计
使用媒体查询可以根据不同的屏幕尺寸应用不同的样式。
@media screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}动画和过渡
过渡
transition 属性可以在状态改变时平滑过渡。
.button {
transition: background-color 0.5s ease;
}
.button:hover {
background-color: blue;
}动画
@keyframes 规则创建动画效果。
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
.element {
animation: example 4s infinite;
}
