CSS 总结学习笔记

CSS (层叠样式表) 是一种用于描述网页样式表现的语言，也是前端开发中非常重要的一部分。在本次学习中，我掌握了以下几个方面的知识：

选择器

CSS 选择器用于选择需要样式化的 HTML 元素。以下为一些基础选择器的示例：

标签选择器：选择相应标签类型的元素。如 p 选择所有段落元素。
类选择器：选择带有指定类名的元素。如 .red 选择所有类名为 "red" 的元素。
ID 选择器：选择带有指定 ID 的元素。如 #header 选择 ID 为 "header" 的元素。

属性

CSS 属性用于定义元素的样式，以下为一些基础属性的示例：

color 属性：定义文字颜色。
background-color 属性：定义背景颜色。
font-size 属性：定义字体大小。

盒模型

盒模型指 HTML 元素包裹内容的矩形框，也是 CSS 布局的基础概念之一。以下为一些相关属性的示例：

width 属性：定义盒子的宽度。
height 属性：定义盒子的高度。
padding 属性：定义内容与盒子边缘的距离。
border 属性：定义盒子的边框。
margin 属性：定义盒子与其他元素之间的距离。

实例

以下为一个基本示例，以展示如何使用 CSS 定义样式：

htmlCopy Code
<!DOCTYPE html>
<html>
  <head>
    <style>
      /* 选择器和属性 */
      body {
        font-family: Arial, sans-serif;
        background-color: lightblue;
      }
      
      h1 {
        color: purple;
        text-align: center;
      }

      /* 盒模型 */
      p {
        width: 80%;
        margin: auto;
        padding: 20px;
        border: 1px solid gray;
        background-color: white;
      } 
    </style>
  </head>
  <body>
    <h1>Hello, World!</h1>
    <p>This is an example paragraph.</p>
  </body>
</html>

在这个示例中，body 元素应用了 font-family 和 background-color 属性，h1 元素应用了 color 和 text-align 属性，p 元素应用了 width、margin、padding、border 和 background-color 属性。最终结果将是一个紫色标题和白色背景的段落，它处于蓝色背景的网页上。