03 CSS 杨亮 《PHP语⾔程序设计》

• 语言: 中文（简体）
• 格式: .pdf
• 来源: yangliang.github.io

摘要

文档主要讲解了CSS的基本概念和应用，包括颜色设置、布局、盒子模型、浮动等核心内容。通过多个实例展示了如何使用CSS样式表来定义网页元素的样式，如背景颜色、间距、边框、浮动布局等。文档还涉及了HTML标签如div、p、h1等的CSS属性应用，以及如何通过class和id选择器对元素进行样式控制。

AI总结

### 文档总结

#### 1. **CSS 基础**
- **颜色设置**：
- `color: rgb(255,0,0);`
- `color: #ff0000;`
- `color: rgb(100%,0%,0%);`

- **盒模型**：
- `padding`：内边距
- `margin`：外边距
- `border`：边框
- 示例：`body { margin: 0; padding: 0; }`

#### 2. **HTML/CSS 示例**
- **示例 1**：
- HTML结构：

    first box
    second box

- CSS样式：

    #first { background-color: blue; padding: 20px; margin: 15px; }
    #second { padding: 50px; }

- **示例 2**：
- HTML结构：

    
      red em red
      red
    

- CSS样式：

    #redP p { color: #F00; }
    #redP .red em { color: #00F; }

#### 3. **内联与块元素**
- **内联元素**：`span, a, input, img, em, strong`
- **块元素**：`div, p, h1, form, ul`
- **列表项**：`li` 不是块元素

#### 4. **布局与样式**
- **全局样式**：

  * { font-size: 20px; padding: 4px; margin: 0px; }
  body { background-color: #00ff00; }

- **容器样式**：

  .container { width: 300px; background-color: #ff0000; }
  .title { float: left; width: 100px; }
  .more { float: right; }

- **列表样式**：

  li { height: 40px; list-style-type: none; }
  li img { float: left; background-color: #0000FF; }

#### 5. **display 属性**
- `display: none`：隐藏元素
- `display: left` 和 `display: right`：控制元素排列

#### 6. **其他**
- 文档包含多个 CSS 示例和案例，展示了如何通过样式控制布局和外观。
- 文档中还提供了外部链接（如 `http://load18.com/default.htm` 和 `http://www.w3school.com.cn/css/index.asp`）供进一步学习。