CSS的基本语法结构

CSS的基本语法结构

CSS（层叠样式表）是一种用于描述HTML或XML文档样式的语言。它通过选择器和声明块来控制页面元素的外观和布局。理解CSS的基本语法结构是编写有效样式表的关键。

选择器

选择器用于指定要应用样式的HTML元素。常见的选择器类型包括：

1. 元素选择器：直接使用HTML标签名

p {
  color: blue;
}

2. 类选择器：以点号(.)开头

.highlight {
  background-color: yellow;
}

3. ID选择器：以井号(#)开头

#header {
  font-size: 24px;
}

4. 属性选择器：根据元素属性选择

input[type="text"] {
  border: 1px solid #ccc;
}

5. 伪类选择器：用于元素特定状态

a:hover {
  color: red;
}

声明块

声明块包含在大括号{}中，由一个或多个声明组成。每个声明由属性和值组成，用冒号(:)分隔，以分号(;)结束。

selector {
  property1: value1;
  property2: value2;
}

属性和值

CSS有数百种属性和值组合。一些常见属性包括：

• 颜色相关：

color: #FF0000;
background-color: rgba(255, 0, 0, 0.5);
border-color: hsl(120, 100%, 50%);

• 尺寸相关：

width: 100px;
height: 50%;
max-width: 1200px;
min-height: 200px;

• 文本相关：

font-family: "Arial", sans-serif;
font-size: 16px;
line-height: 1.5;
text-align: center;

注释

CSS使用/* */语法添加注释：

/* 这是一个CSS注释 */
body {
  margin: 0; /* 重置默认边距 */
}

@规则

@规则是CSS中的特殊指令，以@符号开头：

1. @import：导入其他CSS文件

@import url("styles/print.css") print;

2. @media：媒体查询

@media (max-width: 600px) {
  .sidebar {
    display: none;
  }
}

3. @keyframes：动画关键帧

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

值和单位

CSS支持多种值和单位：

1. 长度单位：

.box {
  width: 300px; /* 像素 */
  padding: 2em; /* 相对于当前字体大小 */
  margin: 5%; /* 相对于包含块的宽度 */
}

2. 颜色值：

.text {
  color: #FF5733; /* 十六进制 */
  background: rgb(255, 87, 51); /* RGB */
  border-color: hsl(12, 100%, 60%); /* HSL */
}

3. 函数值：

.container {
  width: calc(100% - 40px);
  background: linear-gradient(to right, red, blue);
}

选择器组合

选择器可以通过多种方式组合使用：

1. 分组选择器：用逗号分隔

h1, h2, h3 {
  font-family: "Georgia", serif;
}

2. 后代选择器：用空格分隔

article p {
  line-height: 1.6;
}

3. 子选择器：用大于号(>)分隔

ul > li {
  list-style-type: square;
}

4. 相邻兄弟选择器：用加号(+)分隔

h2 + p {
  margin-top: 0;
}

优先级和继承

CSS规则的应用遵循特定优先级：

1. 继承：某些属性会从父元素继承

body {
  font-family: Arial;
} /* 所有子元素继承此字体 */

2. 优先级计算：

• 内联样式：1000
• ID选择器：100
• 类/属性/伪类选择器：10
• 元素/伪元素选择器：1

#content .highlight { /* 100 + 10 = 110 */
  color: red;
}
div.highlight { /* 1 + 10 = 11 */
  color: blue;
}

盒模型

CSS盒模型是布局的基础概念：

.box {
  width: 300px;
  height: 200px;
  padding: 20px;
  border: 5px solid black;
  margin: 10px;
  box-sizing: border-box; /* 可选，改变宽度计算方式 */
}

布局相关属性

1. display：

.inline {
  display: inline;
}
.block {
  display: block;
}
.flex-container {
  display: flex;
}

2. position：

.relative {
  position: relative;
  top: 10px;
}
.absolute {
  position: absolute;
  right: 0;
}
.fixed {
  position: fixed;
  bottom: 0;
}

3. float：

.image {
  float: left;
  margin-right: 15px;
}

响应式设计基础

使用媒体查询创建响应式布局：

.container {
  width: 100%;
  padding: 15px;
}

@media (min-width: 768px) {
  .container {
    width: 750px;
    margin: 0 auto;
  }
}

@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}

CSS变量

自定义属性（CSS变量）可以存储和重用值：

:root {
  --primary-color: #4285f4;
  --spacing-unit: 8px;
}

.button {
  background-color: var(--primary-color);
  padding: calc(var(--spacing-unit) * 2);
}

伪元素

伪元素用于样式化元素的特定部分：

p::first-line {
  font-weight: bold;
}

blockquote::before {
  content: '"';
  font-size: 2em;
  color: gray;
}

过渡和动画

1. 过渡：

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

2. 动画：

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}

.ball {
  animation: bounce 1s infinite;
}

现代CSS特性

1. Grid布局：

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

2. Flexbox布局：

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

3. 自定义滤镜：

.image {
  filter: blur(2px) brightness(1.2);
}