css风格制作
CSS 风格制作方法
内联样式
直接在 HTML 元素的 style 属性中编写 CSS 代码，适用于单个元素的快速样式设置。
示例：
<p style="color: blue; font-size: 16px;">示例文本</p>内部样式表
在 HTML 文件的 <head> 部分使用 <style> 标签定义 CSS 规则，适用于单个页面的样式控制。
示例：
<style>
p {
color: red;
font-family: Arial;
}
</style>外部样式表
将 CSS 代码保存在独立的 .css 文件中，并通过 <link> 标签引入到 HTML 中，适用于多页面共享样式。
示例（HTML 中引入）：
<link rel="stylesheet" href="styles.css">styles.css 文件内容：
body {
background-color: #f4f4f4;
margin: 0;
}CSS 选择器使用
元素选择器
通过 HTML 标签名直接选择元素。
示例：
h1 {
text-align: center;
}类选择器
通过元素的 class 属性选择，以 . 开头。
示例：
.highlight {
background-color: yellow;
}ID 选择器
通过元素的 id 属性选择，以 # 开头。
示例：
#header {
font-size: 24px;
}伪类选择器
定义元素在特定状态下的样式，如悬停或点击。
示例：
a:hover {
color: green;
}CSS 常用属性
文本样式
控制字体、颜色、对齐等文本属性。
示例：
p {
font-family: "Times New Roman", serif;
color: #333;
text-align: justify;
}盒模型
通过 margin、padding、border 控制元素间距和边框。
示例：
.box {
margin: 10px;
padding: 20px;
border: 1px solid #ccc;
}布局属性
使用 display、flex 或 grid 实现复杂布局。
示例（Flexbox）：
.container {
display: flex;
justify-content: space-between;
}CSS 预处理器（如 Sass/Less）
变量定义
通过变量复用颜色、尺寸等值。
Sass 示例：
$primary-color: #3498db;
.button {
background: $primary-color;
}嵌套规则
简化选择器的层级结构。
Sass 示例：
nav {
ul {
margin: 0;
li {
display: inline-block;
}
}
}混合宏（Mixin）
定义可复用的样式块。
Sass 示例：
@mixin rounded-corners($radius) {
border-radius: $radius;
}
.box {
@include rounded-corners(5px);
}响应式设计
媒体查询
根据屏幕尺寸调整样式。
示例：
@media (max-width: 600px) {
.sidebar {
display: none;
}
}视口单位
使用 vw、vh 实现比例缩放。
示例：
.header {
height: 10vh;
width: 100vw;
}动画与过渡
过渡效果
通过 transition 平滑变化属性值。
示例：
.button {
transition: background-color 0.3s ease;
}
.button:hover {
background-color: #2980b9;
}关键帧动画
使用 @keyframes 定义复杂动画序列。
示例：
@keyframes slide {
from { transform: translateX(0); }
to { transform: translateX(100px); }
}
.slider {
animation: slide 2s infinite;
}
