css原理及制作

CSS 基本原理

CSS（层叠样式表）是一种样式表语言，用于描述HTML或XML文档的呈现方式。它通过选择器匹配文档中的元素，并为其定义样式属性。CSS的核心原理包括层叠、继承和优先级。

层叠指多个样式规则可以同时作用于同一元素，最终样式由优先级和顺序决定。继承指子元素会继承父元素的某些样式属性（如字体、颜色）。优先级由选择器类型决定，顺序为：!important > 行内样式 > ID选择器 > 类/属性/伪类选择器 > 元素/伪元素选择器。

CSS 基本语法

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

selector {
  property: value;
  /* 注释 */
}

• 选择器：匹配HTML元素的模式（如p、.class、#id）
• 声明块：包含一组用{}包裹的属性-值对
• 属性和值用冒号分隔，每条声明以分号结束

常用CSS属性

文本样式

p {
  color: #333;
  font-family: Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  text-align: center;
}

盒模型

.box {
  width: 300px;
  height: 200px;
  padding: 20px;
  border: 1px solid #ccc;
  margin: 10px auto;
  background-color: #f9f9f9;
}

布局属性

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

.item {
  flex: 1;
  position: relative;
}

CSS 制作实践

响应式设计 使用媒体查询适配不同设备：

@media (max-width: 768px) {
  .container {
    flex-direction: column;
  }
}

动画效果 通过@keyframes创建动画：

@keyframes slidein {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}

.slide {
  animation: slidein 0.5s ease-out;
}

CSS变量 定义可复用的值：

:root {
  --primary-color: #4285f4;
}

.button {
  background-color: var(--primary-color);
}

现代CSS技术

Grid布局 创建二维布局系统：

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

Flexbox布局 实现弹性盒子模型：

.flex-container {
  display: flex;
  align-items: center;
  justify-content: center;
}

CSS预处理器 如Sass的嵌套语法：

nav {
  ul {
    margin: 0;
    li {
      display: inline-block;
    }
  }
}