CSS基础语法

3.1 规则 (Rules)

CSS的基本元素包括规则 (rules)、属性 (properties) 和值 (values)。理解基本的 CSS语法是创建吸引人且功能丰富的网页的关键。

CSS的基本元素：

• 规则 (Rules)
• 选择器 (Selectors)
• 属性 (Properties)
• 值 (Values)

规则 (Rules)

CSS规则由一个选择器和一个声明块组成。选择器指定将应用样式的HTML元素， 而声明块包含一个或多个属性及其值。通常，它由一个或多个 属性和值组成，包裹在大括号 {} 中。

示例：

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

标题示例：

    
      h1 {
        color: blue;
        font-size: 24px;
      }
    
  

在这个例子中，h1 是选择器，color 和 font-size 是属性，blue 和 24px 是这些属性的值。

3.2 属性和值

CSS提供了一组广泛的属性，可以用于控制元素的外观。 每个属性都有一个或多个值，这些值决定了属性的应用方式。

基本属性及其值：

颜色和背景：

• color: 设置文本的颜色
• background-color: 设置元素的背景颜色

示例：

    
      div {
        color: red;
        background-color: yellow;
      }
    
  

字体：

• font-family: 定义字体系列
• font-size: 设置字体大小
• font-weight: 定义字体粗细

示例：

    
      h1 {
        font-family: 'Georgia', serif;
        font-size: 36px;
        font-weight: bold;
      }
    
  

文本：

• text-align: 对齐元素内的文本
• text-decoration: 为文本添加效果，如下划线

示例：

    
      a {
        text-align: left;
        text-decoration: none;
      }
    
  

边距和边框：

• margin: 设置元素周围的外边距
• padding: 设置元素内的内边距
• border: 定义元素的边框

示例：

    
      .container {
        margin: 0 auto;
        padding: 20px;
        border: 2px solid #000000;
      }
    
  

大小和位置：

• width 和 height: 设置元素的宽度和高度
• position: 确定元素的定位方式

示例：

    
      .box {
        width: 200px;
        height: 100px;
        position: absolute;
        top: 50px;
        left: 100px;
      }
    
  

你需要：

• 记住元素的标准属性
• 记住这些属性的标准值
• 记住不同元素的独特属性
• 记住这些属性如何在实践中运作
• 记住这些属性如何相互影响

最好通过实践来做到这一点——编写大量CSS并查看其工作原理。