制作css

CSS基础语法

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

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

常用选择器类型

元素选择器直接使用HTML标签名称作为选择器，类选择器以点（.）开头，ID选择器以井号（#）开头。后代选择器用于选择特定元素内的元素，伪类选择器用于定义特殊状态。

p {
  color: blue;
}
.className {
  font-size: 16px;
}
#idName {
  background: yellow;
}
nav a {
  text-decoration: none;
}
a:hover {
  color: red;
}

盒模型概念

每个HTML元素都可以看作一个盒子，由内容（content）、内边距（padding）、边框（border）和外边距（margin）组成。标准盒模型的总宽度计算公式为：

width = margin-left + border-left + padding-left + content-width + padding-right + border-right + margin-right

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

布局技术

浮动布局通过float属性实现元素横向排列，Flex布局提供更灵活的排列方式，Grid布局创建二维网格系统。定位属性position允许精确定义元素位置。

.float-box {
  float: left;
  width: 50%;
}
.flex-container {
  display: flex;
  justify-content: space-between;
}
.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.absolute-box {
  position: absolute;
  top: 50px;
  left: 100px;
}

响应式设计

媒体查询@media允许根据设备特性应用不同样式，视口单位vw/vh基于视口尺寸，rem基于根元素字体大小。这些技术共同实现响应式布局。

@media (max-width: 768px) {
  .menu {
    display: none;
  }
}
.responsive-box {
  width: 80vw;
  font-size: 2rem;
}

动画与过渡

transition属性在状态改变时创建平滑过渡效果，@keyframes规则定义复杂动画序列。transform属性实现旋转、缩放等变换效果。

.button {
  transition: background 0.3s ease;
}
.button:hover {
  background: #ff0000;
}
@keyframes slide {
  from { transform: translateX(0); }
  to { transform: translateX(100px); }
}
.slider {
  animation: slide 2s infinite;
}

预处理器特性

Sass和Less等预处理器支持变量、嵌套规则、混合宏和函数等高级功能，提高CSS的可维护性。这些代码需要编译为标准CSS才能使用。

$primary-color: #333;
@mixin border-radius($radius) {
  border-radius: $radius;
}
.box {
  @include border-radius(10px);
  color: $primary-color;
}