基础 CSS 轨道(1) - 芒果文档

📌 相关文章

📜 基础 CSS 轨道(1)

📅 最后修改于: 2023-12-03 15:37:49.580000 🧑 作者: Mango

基础 CSS 轨道

CSS （层叠样式表）是一种用于定义网页样式的语言。基础 CSS 轨道是学习 CSS 的第一步，它为你打下了扎实的基础，让你逐步了解 CSS 的原理和各种概念。

简介

CSS 与 HTML 和 JavaScript 并列成为 Web 开发的三大基础部分。HTML 用于定义网页的结构，JavaScript 用于处理网页的行为和交互，CSS 则用于定义网页的样式。

CSS 的作用是把 HTML 文档从头到尾美化起来。它可以控制文本的字体、大小、颜色，以及元素的背景、边框、大小和位置等等。通过定义不同的样式，你可以让网页达到丰富、有活力的外观，呈现出令人印象深刻的效果。

基础语法

CSS 的基本语法如下所示：

selector {
  property1: value1;
  property2: value2;
  property3: value3;
}

其中，selector 指的是要应用样式的元素，而 property 和 value 则分别指样式的属性和属性值。每行样式定义以分号（;）结尾，整个样式定义以花括号（{}）包含。

例如，这里是一段使用 CSS 样式的 HTML 代码：

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        background-color: lightblue;
      }

      h1 {
        color: navy;
        text-align: center;
      }

      p {
        font-family: verdana;
        font-size: 20px;
      }
    </style>
  </head>
  <body>
    <h1>Welcome to My Website</h1>
    <p>This is a paragraph.</p>
  </body>
</html>

它应用了三个样式：一个设置了背景颜色为淡蓝色的 body 元素，一个设置了标题颜色、居中对齐的 h1 元素，和一个设置了字体和字号的 p 元素。

基本选择器

要创建 CSS 样式，你需要知道如何选择元素。CSS 提供了不同的选择器，帮助你选择特定的元素进行样式定义。

以下是几个基本的选择器：

元素选择器：使用标签名称选择元素，如 h1 或 p。
类选择器：使用类名选择元素，如 .my-class。
ID 选择器：使用 ID 名称选择元素，如 #my-id。
属性选择器：使用元素的属性选择元素，如 [href] 或 [type="radio"]。
伪类选择器：用于元素状态，如 :hover 或 :first-child。

例如，以下样式选择了所有 h1 元素并设置它们的颜色为红色：

h1 {
  color: red;
}

而以下样式选择了类名为 my-class 的元素，设置它们的字体为 Times New Roman：

.my-class {
  font-family: "Times New Roman", Times, serif;
}

盒模型

在 CSS 中，每个元素都被看作一个矩形框，称为“盒子”（box）。盒子有四个边界：上边界、下边界、左边界和右边界。

盒模型就是描述这个矩形框的模型。它包含四个方面：填充（padding）、边框（border）、外边距（margin）以及内容（content）。

盒模型示意图：

 ________________________
|   margin-top           |
|   __________________   |
|  |   border-top       |  |
|  |  __________________  |
|  | |   padding-top   | | |
|  | |   ___________   | | |
|  | |  |  content  |  | | |
|  | |  |   area    |  | | |
|  | |  |           |  | | |
|  | |  |           |  | | |
|  | |  |___________|  | | |
|  | |   padding-bottom | | |
|  | | _______________ | | |
|  | || border-bottom || | |
|  | ||_______________|| | |
|  | |    padding-left | | |
|  | |   border-left   | | |
|  | |    padding-right| | |
|  | |   border-right  | | |
|  | |  margin-bottom  | | |
|  | |________________| | |
|  |      margin-right    | |
|  |______________________|
      margin-left

填充（padding）指的是元素内容和元素边界之间的距离。边框（border）指的是元素的边界，包围元素。外边距（margin）指的是元素边界与相邻元素之间的距离。

CSS 通过 padding、border 和 margin 属性控制盒模型的属性。例如：

.box {
  padding: 10px;
  border: 2px solid black;
  margin: 20px;
}

这个选择器控制了类名为 box 元素的外边距为 20px，内边距为 10px，边框宽度为 2px 并设置边框颜色为黑色。

布局

CSS 的一个重要功能是控制元素的位置和大小，以便实现网页布局。以下是几个常用的布局属性：

display：控制元素的显示方式，如 block、inline 或 inline-block。
position：控制元素的定位方式，如 static、relative、absolute 或 fixed。
float：控制元素在文档中的浮动方式，如 left、right 或 none。
clear：控制元素对浮动元素的清除方式，如 left、right、both 或 none。

以下是一个简单的网页布局例子，它使用了 display 和 float 属性来实现三栏布局：

<!DOCTYPE html>
<html>
  <head>
    <style>
      * {
        box-sizing: border-box;
      }

      .header,
      .footer {
        background-color: #333;
        color: white;
        text-align: center;
        padding: 5px;
      }

      .left-column,
      .right-column {
        background-color: #f1f1f1;
        padding: 10px;
        float: left;
        width: 25%;
      }

      .main-column {
        background-color: #ddd;
        padding: 20px;
        float: left;
        width: 50%;
      }
    </style>
  </head>
  <body>
    <div class="header">
      <h1>Header</h1>
    </div>

    <div class="left-column">
      <h2>Left Column</h2>
      <p>Some text here...</p>
    </div>

    <div class="main-column">
      <h2>Main Column</h2>
      <p>Some text here...</p>
    </div>

    <div class="right-column">
      <h2>Right Column</h2>
      <p>Some text here...</p>
    </div>

    <div class="footer">
      <p>Footer Text</p>
    </div>
  </body>
</html>

总结

本篇文章介绍了 CSS 的基础概念和语法，包括盒模型、选择器和布局。了解了这些内容后，你已经可以开始编写简单的 CSS 样式，实现将 HTML 网页转化为具有美观外观的网页。