web网页制作css
CSS 基础语法
CSS（层叠样式表）用于控制网页的样式和布局。基本语法由选择器和声明块组成：
选择器 {
属性: 值;
属性: 值;
}例如：
p {
color: blue;
font-size: 16px;
}引入 CSS 的方式
内联样式：直接在 HTML 标签中使用 style 属性
<p style="color: red;">文本</p>内部样式表：在 HTML 文件的 <head> 中使用 <style> 标签
<head>
<style>
p { color: green; }
</style>
</head>外部样式表：通过 <link> 标签引入独立的 .css 文件
<head>
<link rel="stylesheet" href="styles.css">
</head>常用 CSS 属性
文本样式
p {
color: #333; /* 文字颜色 */
font-family: Arial; /* 字体 */
font-size: 14px; /* 字号 */
text-align: center; /* 对齐 */
line-height: 1.5; /* 行高 */
}盒模型属性
div {
width: 200px;
height: 100px;
padding: 10px; /* 内边距 */
margin: 20px; /* 外边距 */
border: 1px solid #000; /* 边框 */
}背景与渐变
body {
background-color: #f0f0f0;
background-image: url('image.jpg');
background: linear-gradient(to right, red, yellow);
}布局技术
Flexbox 布局
.container {
display: flex;
justify-content: space-between; /* 主轴对齐 */
align-items: center; /* 交叉轴对齐 */
}Grid 布局
.grid-container {
display: grid;
grid-template-columns: 1fr 2fr; /* 列宽比例 */
gap: 10px; /* 间距 */
}响应式设计
媒体查询：根据屏幕尺寸应用不同样式
@media (max-width: 768px) {
.menu { display: none; }
.content { width: 100%; }
}视口单位：实现相对尺寸
.header {
height: 10vh; /* 视口高度的10% */
width: 80vw; /* 视口宽度的80% */
}动画与过渡
CSS 过渡
.button {
transition: all 0.3s ease;
}
.button:hover {
transform: scale(1.1);
}关键帧动画
@keyframes slide {
from { transform: translateX(-100%); }
to { transform: translateX(0); }
}
.slide-in {
animation: slide 1s forwards;
}实用技巧
CSS 变量：定义可复用的值
:root {
--primary-color: #4285f4;
}
.button {
background-color: var(--primary-color);
}伪类与伪元素
a:hover { color: red; } /* 悬停状态 */
li:nth-child(odd) { background: #eee; } /* 奇数行 */
p::first-letter { font-size: 2em; } /* 首字母 */
