CSS教程（第一章）：CSS入门-谷穗社区

CSS（层叠样式表）是用于描述HTML或XML（包括如SVG、MathML等衍生技术）文档样式的语言。CSS描述了如何在屏幕、纸质、音频等媒介中渲染元素。在本章中，我们将介绍CSS的基本概念、如何在HTML中使用CSS，以及CSS选择器的基础知识。

一、CSS概述

CSS是一种样式表语言，用于描述HTML文档的呈现方式。通过CSS，我们可以控制网页的布局、颜色、字体以及其他视觉效果。CSS使网页内容与样式分离，这意味着我们可以改变整个网站的外观和感觉，而无需修改HTML代码。

二、CSS的引入方式

在HTML中引入CSS的方式主要有三种：

内联样式：直接在HTML元素中使用style属性来添加CSS样式。例如：<p style="color:red;">这是一段红色的文字。</p>

内部样式表：在HTML文档的<head>部分使用<style>标签来包含CSS代码。例如：

<head>  
  <style>  
    p {  
      color: red;  
    }  
  </style>  
</head>  
<body>  
  <p>这是一段红色的文字。</p>  
</body>

外部样式表：通过<link>标签在HTML文档中链接到外部的CSS文件。这是推荐的方式，因为它允许样式代码与HTML代码分离，使代码更易于管理和维护。例如：

<head>  
  <link rel="stylesheet" type="text/css" href="styles.css">  
</head>  
<body>  
  <p>这是一段红色的文字（如果styles.css中定义了p元素的color属性为red）。</p>  
</body>

三、CSS选择器

CSS选择器是用于选择你想要样式化的HTML元素的模式。以下是一些常用的CSS选择器：

元素选择器：根据HTML元素的名称来选择元素。例如，p {color: red;}会选择所有的<p>元素并将其文本颜色设置为红色。
类选择器：通过HTML元素的class属性来选择元素。类选择器以点（.）开头。例如，.highlight {background-color: yellow;}会选择所有class属性为highlight的元素，并将其背景颜色设置为黄色。
ID选择器：通过HTML元素的id属性来选择元素。ID选择器以井号（#）开头。例如，#intro {font-size: 20px;}会选择id属性为intro的元素，并将其字体大小设置为20像素。
属性选择器：根据元素的属性及其值来选择元素。例如，input[type="text"] {border: 1px solid black;}会选择所有type属性为text的<input>元素，并为其添加边框。

四、CSS规则

CSS规则由选择器和一条或多条声明组成，每条声明都包含一个属性和一个值，用冒号（:）分隔，并用分号（;）结束。例如：

p {  
  color: red;  
  font-size: 16px;  
}

在这个例子中，p是选择器，color: red;和font-size: 16px;是声明。

五、总结

在本章中，我们介绍了CSS的基本概念、引入方式以及选择器的基础知识。CSS是网页开发中不可或缺的一部分，它使我们能够精确地控制网页的样式和布局。随着学习的深入，我们将进一步探索CSS的各种特性和功能，如盒模型、布局、动画等。

文章版权归作者所有，未经允许请勿转载。

THE END

代码
# CSS教程