制作css

CSS 基础语法

CSS（层叠样式表）由选择器和声明块组成。选择器用于定位 HTML 元素，声明块包含属性和值，用于定义样式。

selector {
  property: value;
}

常用选择器

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

p {
  color: blue;
}

类选择器：通过类名选择元素，类名前加 .。

.classname {
  font-size: 16px;
}

ID 选择器：通过 ID 选择元素，ID 名前加 #。

#idname {
  background-color: yellow;
}

属性选择器：通过元素的属性选择元素。

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

盒模型

CSS 盒模型由内容、内边距、边框和外边距组成。

div {
  width: 300px;
  padding: 20px;
  border: 5px 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 (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

动画效果

使用 @keyframes 创建动画。

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

div {
  animation: example 4s infinite;
}

变量

CSS 变量用于存储可复用的值。

:root {
  --main-color: blue;
}

body {
  color: var(--main-color);
}

预处理器

Sass 是一种流行的 CSS 预处理器，支持变量、嵌套和混合。

$primary-color: #333;

body {
  color: $primary-color;
}

框架和工具

Bootstrap：流行的 CSS 框架，提供预定义的组件和样式。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">

Tailwind CSS：实用工具优先的 CSS 框架。

<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">