css网页制作教程

CSS网页制作基础教程

CSS（层叠样式表）用于控制网页的样式和布局，与HTML结合使用可创建美观的网页。

基本语法结构

CSS规则由选择器和声明块组成：

选择器 {
  属性: 值;
  属性: 值;
}

例如：

p {
  color: blue;
  font-size: 16px;
}

常用选择器类型

类选择器（以.开头）：

.classname {
  background-color: yellow;
}

ID选择器（以#开头）：

#header {
  width: 100%;
}

元素选择器：

h1 {
  font-family: Arial;
}

盒模型

每个HTML元素都是一个盒子，包含：

• 内容(content)
• 内边距(padding)
• 边框(border)
• 外边距(margin) 示例：

  .box {
  width: 300px;
  padding: 20px;
  border: 1px solid black;
  margin: 10px;
  }

布局技术

浮动布局：

.left {
  float: left;
  width: 70%;
}
.right {
  float: right;
  width: 30%;
}

弹性盒子(Flexbox)：

.container {
  display: flex;
  justify-content: space-between;
}

网格布局(Grid)：

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
}

响应式设计

使用媒体查询适应不同屏幕尺寸：

@media screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

动画效果

创建简单动画：

@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}

.animated {
  animation-name: example;
  animation-duration: 4s;
}

最佳实践

• 使用外部样式表（.css文件）而非内联样式
• 合理组织CSS代码结构
• 使用CSS预处理器如Sass/Less提高效率
• 遵循浏览器兼容性标准
• 使用CSS重置或标准化样式

学习资源推荐

1. MDN Web Docs的CSS教程
2. W3Schools CSS教程
3. CSS-Tricks网站
4. Codepen实践项目
5. FreeCodeCamp CSS课程