第二章：基本样式设定

1. 文本样式

• 字体：通过font-family属性设置文本字体，例如：

  Css

  p {
    font-family: "Arial", sans-serif;
  }

  如果浏览器不支持第一个指定的字体，则会尝试下一个。

• 颜色：使用color属性改变文本颜色，例如：

  Css

  h1 {
    color: #333; /* 十六进制颜色码 */
  }

  或者

  Css

  h2 {
    color: rgb(255, 165, 0); /* RGB颜色值 */
  }

• 字号：通过font-size属性设置文本大小，例如：

  Css

  body {
    font-size: 14px; /* 绝对单位 */
  }

  或者基于父元素比例的相对单位：

  Css

  span {
    font-size: 1.2em; /* 相对单位，基于父元素字体大小 */
  }

• 行高：使用line-height属性设置行间距，例如：

  Css

  p {
    line-height: 1.5; /* 行间距是字体大小的1.5倍 */
  }

• 对齐方式：text-align属性用于设置文本水平对齐方式，例如：

  Css

  .center-text {
    text-align: center; /* 文本居中对齐 */
  }

2. 背景与边框

• 背景色：通过background-color属性设置元素背景颜色，例如：

  Css

  div {
    background-color: lightblue;
  }

• 背景图片：使用background-image属性添加背景图片，并配合其他背景属性如background-repeat、background-position和background-size等：

  Css

  .bg-image {
    background-image: url("image.jpg");
    background-repeat: no-repeat; /* 不重复 */
    background-position: center; /* 图片居中 */
    background-size: cover; /* 图片填满整个背景区域 */
  }

• 边框样式：设置边框样式、宽度和颜色：

  Css

  .styled-border {
    border-style: solid; /* 边框样式为实线 */
    border-width: 2px; /* 边框宽度为2像素 */
    border-color: black; /* 边框颜色为黑色 */
  }

  或者简写成：

  Css

  .border-shortcut {
    border: 2px solid black;
  }

• 边距：margin属性用于设置元素与其他元素之间的距离，例如：

  Css

  .example {
    margin: 10px 20px 30px 40px; /* 上、右、下、左边距分别为10px、20px、30px、40px */
  }

• 填充：padding属性设置元素内容与边框之间的空白区域，例如：

  Css

  .padded-element {
    padding: 5px 10px; /* 上下填充均为5px，左右填充均为10px */
  }

3. 盒模型与定位

• 内容区域、内边距、边框、外边距：盒子模型包括内容区域（content）、内边距（padding）、边框（border）和外边距（margin）四个部分。

• 浮动与清除：

  • 浮动（Float）：让元素在一行内左右移动，例如：

    Css

    .floated-element {
      float: left; /* 左浮动 */
    }

  • 清除浮动（Clear）：阻止元素出现在浮动元素旁边或下方，例如：

    Css

    .cleared-element {
      clear: both; /* 清除两侧浮动 */
    }

• 元素定位机制：

  • static（静态定位）：默认定位方式，例如：

    Css

    div.static {
      /* 默认无特殊定位 */
    }

  • relative（相对定位）：相对于元素原位置进行偏移，例如：

    Css

    .relative {
      position: relative;
      top: 10px; /* 向上偏移10px */
      left: 20px; /* 向左偏移20px */
    }

  • absolute（绝对定位）：相对于最近已定位（非static）的祖先元素进行定位，例如：

    Css

    .absolute {
      position: absolute;
      top: 0;
      right: 0; /* 定位在最近已定位祖先元素的右上角 */
    }

  • fixed（固定定位）：相对于视口定位，不受页面滚动影响，例如：

    Css

    .fixed-header {
      position: fixed;
      top: 0;
      width: 100%; /* 创建一个始终固定在顶部的页眉 */
    }

通过这些详尽的例子，本章将进一步帮助读者深入理解和掌握CSS中涉及文本样式、背景与边框设置，以及盒模型与定位的基本概念和具体应用。