HTML CSS

在互联网技术快速发展的今天，网页设计已经成为了一项重要的技能。HTML（超文本标记语言）是用于创建网页的标准标记语言，而CSS（层叠样式表）则是用来增强控制网页样式的设计语言。本文将带你了解CSS的基本概念以及如何在网页中应用CSS。

什么是CSS？

CSS（Cascading Style Sheets，层叠样式表）是一种用来为结构化文档（如HTML文档或XML应用）添加样式（如字体、颜色、间距等）的标记性语言。它能够精确地控制页面上每个元素的布局、外观和显示方式，使得网站更加美观、易于维护。

CSS的三种引入方式

  1. 内联样式：直接在HTML标签中通过style属性定义样式。这种方式虽然直观，但是不利于样式的复用和维护，通常只适用于单个元素的临时样式调整。
   <p style="color: blue; font-size: 16px;">这是一个蓝色的段落。</p>
  1. 内部样式：在HTML文档的<head>部分使用<style>标签来定义样式。这种方法适用于同一个页面内的样式设置，可以避免重复代码，但仍局限于单一页面。
   <!DOCTYPE html>
   <html lang="en">
   <head>
       <meta charset="UTF-8">
       <title>示例页面</title>
       <style>
           p {
               color: green;
               font-size: 14px;
           }
       </style>
   </head>
   <body>
       <p>这段文字是绿色的。</p>
   </body>
   </html>
  1. 外部样式表：将样式信息保存在一个或多个以.css为扩展名的文件中，然后通过<link>标签将其链接到HTML文档中。这种方式便于管理和更新样式，适合大型项目。
   <!DOCTYPE html>
   <html lang="en">
   <head>
       <meta charset="UTF-8">
       <title>示例页面</title>
       <link rel="stylesheet" type="text/css" href="styles.css">
   </head>
   <body>
       <p>这段文字的颜色和大小由外部样式表控制。</p>
   </body>
   </html>

外部样式表styles.css的内容可能如下：

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

如何使用CSS

使用CSS主要是通过选择器来定位HTML中的元素，并为其指定样式规则。选择器可以是元素名称、类名、ID或其他属性。例如：

  • 元素选择器：p { color: black; }
  • 类选择器：.myClass { background-color: yellow; }
  • ID选择器：#myId { font-weight: bold; }

CSS版本

CSS的发展经历了多个版本，从最初的CSS1到现在的CSS3，每个新版本都带来了更多的功能和改进。CSS3引入了众多的新特性，比如圆角、阴影、渐变、动画等，极大地丰富了网页的表现力。随着技术的进步，W3C（万维网联盟）不断推出新的规范，推动着CSS的发展。