网页制作CSS样式

CSS样式基础语法

CSS规则由选择器和声明块组成。选择器指向需要设置样式的HTML元素，声明块包含一条或多条用分号分隔的声明，每条声明由一个属性和一个值组成。

selector {
  property: value;
  property: value;
}

常用选择器类型

• 元素选择器：通过HTML标签名称选择元素

  p {
  color: blue;
  }

• 类选择器：通过class属性选择元素，前缀为点号

  .highlight {
  background-color: yellow;
  }

• ID选择器：通过id属性选择元素，前缀为井号

  #header {
  font-size: 24px;
  }

• 属性选择器：通过属性值匹配元素

  a[target="_blank"] {
  color: red;
  }

盒模型布局

每个HTML元素都被视为一个矩形盒子，包含内容(content)、内边距(padding)、边框(border)和外边距(margin)。

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

常用布局技术

• Flexbox布局：一维布局模型，适合组件和小规模布局

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

• Grid布局：二维网格系统，适合整体页面布局

  .grid-container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  }

• 定位属性：控制元素在文档中的位置

  .absolute {
  position: absolute;
  top: 50px;
  left: 100px;
  }

响应式设计

使用媒体查询根据设备特性应用不同样式

@media screen and (max-width: 768px) {
  .menu {
    display: none;
  }
}

动画与过渡效果

• 过渡效果：属性变化时的平滑过渡

  .button {
  transition: background-color 0.3s ease;
  }
  .button:hover {
  background-color: #ff0000;
  }

• 关键帧动画：创建复杂动画序列

  @keyframes slidein {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
  }
  .slide {
  animation: slidein 1s forwards;
  }

预处理技术

Sass/Less等CSS预处理器提供变量、嵌套、混合等功能

$primary-color: #333;

.header {
  background-color: $primary-color;

  .logo {
    width: 100px;
  }
}

性能优化建议

• 避免过度使用通配符选择器(*)
• 减少不必要的嵌套层级
• 使用transform和opacity实现高性能动画
• 压缩生产环境CSS文件
• 合理使用CSS精灵图减少HTTP请求