css语言制作

CSS 基础语法

CSS（层叠样式表）用于控制网页的样式和布局。基本语法由选择器和声明块组成。选择器指向需要样式化的HTML元素，声明块包含一个或多个用分号分隔的声明。

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

常用选择器类型

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

p {
  color: blue;
}

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

.classname {
  font-size: 16px;
}

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

#idname {
  background-color: yellow;
}

盒模型

CSS盒模型包含内容（content）、内边距（padding）、边框（border）和外边距（margin）。

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 Queries）实现响应式设计。

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

动画效果

通过@keyframes和animation属性创建动画。

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

div {
  animation: example 4s infinite;
}

变量使用

CSS变量（自定义属性）可以在全局或局部范围内定义和使用。

:root {
  --main-color: #ff0000;
}

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

常见属性示例

• 文本样式：

  p {
    font-family: Arial;
    font-size: 14px;
    text-align: center;
  }

• 背景样式：

  body {
    background-image: url("image.jpg");
    background-repeat: no-repeat;
  }

• 边框样式：

  div {
    border: 2px dotted #000;
    border-radius: 10px;
  }

以上内容涵盖了CSS的基础语法、选择器、盒模型、布局技术、响应式设计、动画效果和变量使用，适合初学者快速掌握CSS的核心概念。