css 制作
CSS 制作基础方法
使用 CSS（层叠样式表）可以控制网页的样式和布局。以下是几种常见的 CSS 制作方法。
内联样式
直接在 HTML 元素的 style 属性中编写 CSS，适用于单个元素的样式调整。
<p style="color: blue; font-size: 16px;">这是一段蓝色文字。</p>内部样式表
在 HTML 文件的 <head> 部分使用 <style> 标签定义 CSS，适用于单个页面的样式控制。
<head>
<style>
p {
color: blue;
font-size: 16px;
}
</style>
</head>
<body>
<p>这是一段蓝色文字。</p>
</body>外部样式表
将 CSS 代码保存在单独的 .css 文件中，并通过 <link> 标签引入，适用于多页面共享样式。
HTML 文件：
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p>这是一段蓝色文字。</p>
</body>CSS 文件（styles.css）：
p {
color: blue;
font-size: 16px;
}CSS 选择器使用
标签选择器
通过 HTML 标签名称选择元素。
p {
color: red;
}类选择器
通过元素的 class 属性选择元素，以 . 开头。
.text-blue {
color: blue;
}<p class="text-blue">蓝色文字</p>ID 选择器
通过元素的 id 属性选择元素，以 # 开头。
#header {
background-color: gray;
}<div id="header">页眉</div>CSS 常用属性示例
颜色和字体
body {
color: #333; /* 文字颜色 */
font-family: Arial, sans-serif; /* 字体 */
font-size: 14px; /* 字号 */
}盒模型
.box {
width: 200px; /* 宽度 */
height: 100px; /* 高度 */
padding: 10px; /* 内边距 */
margin: 20px; /* 外边距 */
border: 1px solid #000; /* 边框 */
}布局属性
.container {
display: flex; /* 弹性布局 */
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
}CSS 动画效果
过渡效果
通过 transition 实现平滑的属性变化。
.button {
background-color: blue;
transition: background-color 0.3s ease;
}
.button:hover {
background-color: red;
}关键帧动画
使用 @keyframes 定义动画序列。
@keyframes slide {
from { transform: translateX(0); }
to { transform: translateX(100px); }
}
.slider {
animation: slide 2s infinite;
}响应式设计
媒体查询
根据屏幕尺寸调整样式。
@media (max-width: 768px) {
.container {
flex-direction: column;
}
}CSS 预处理器（Sass/Less）
变量使用
Sass 示例：
$primary-color: blue;
.button {
background-color: $primary-color;
}嵌套规则
nav {
ul {
margin: 0;
li {
display: inline-block;
}
}
}以上方法涵盖了 CSS 制作的基础和进阶技巧，可根据需求选择适合的方式实现网页样式设计。
