网页制作 css
CSS 基础语法
CSS（层叠样式表）用于控制网页的样式和布局。基本语法由选择器和声明块组成。选择器指向需要样式化的HTML元素，声明块包含一个或多个用分号分隔的声明，每个声明由属性和值组成。
选择器 {
属性: 值;
属性: 值;
}常用选择器类型
元素选择器：通过HTML标签名选择元素。
p {
color: blue;
}类选择器：通过类名选择元素，类名前加.。
.classname {
font-size: 16px;
}ID选择器：通过ID选择元素，ID名前加#。
#idname {
background-color: yellow;
}后代选择器：选择嵌套在某个元素内的元素。
div p {
margin: 10px;
}盒模型
CSS盒模型由内容（content）、内边距（padding）、边框（border）和外边距（margin）组成。
width和height定义内容区域大小。padding控制内容与边框之间的空间。border定义边框样式。margin控制元素与其他元素之间的距离。
.box {
width: 200px;
padding: 20px;
border: 1px solid black;
margin: 10px;
}布局技术
Flexbox：弹性布局模型，适合一维布局（行或列）。
.container {
display: flex;
justify-content: center; /* 水平对齐 */
align-items: center; /* 垂直对齐 */
}Grid：网格布局模型，适合二维布局。
.container {
display: grid;
grid-template-columns: 1fr 1fr; /* 两列等宽 */
gap: 10px; /* 列间距 */
}响应式设计
使用媒体查询（Media Queries）适配不同屏幕尺寸。
@media (max-width: 768px) {
.container {
flex-direction: column;
}
}动画与过渡
过渡（Transition）：平滑改变属性值。
.button {
transition: background-color 0.3s ease;
}
.button:hover {
background-color: red;
}动画（Animation）：通过关键帧定义复杂动画。
@keyframes slide {
from { transform: translateX(0); }
to { transform: translateX(100px); }
}
.element {
animation: slide 2s infinite;
}常见样式属性
- 文本样式：
color,font-family,font-size,text-align - 背景样式：
background-color,background-image - 定位：
position,top,left,z-index - 显示方式：
display,visibility,opacity
调试工具
浏览器开发者工具（F12）可以实时查看和修改CSS，检查盒模型、计算样式及调试布局问题。
