返回

CSS及其基本概念

前端

CSS全称Cascading Style Sheets，中文名为层叠样式表，是一种用于HTML元素的样式的语言。它是Web设计中的关键技术之一，用于控制网站的外观和布局。CSS可以使网页更美观、更易读，并可以使网页在不同的设备上都能够很好地显示。

CSS简介

CSS诞生于1996年，由世界万维网联盟（W3C）推荐。CSS最初是为了解决HTML在网页排版方面的不足而设计的。HTML只提供了一些简单的排版标签，例如、
和

等，而CSS则提供了更多的样式选项，例如字体、颜色、背景和边框等。

CSS是一种非常灵活的语言，它可以应用于任何HTML元素。CSS代码可以内嵌在HTML代码中，也可以放在单独的文件中。当浏览器解析HTML代码时，它会自动加载CSS代码并将其应用于相应的HTML元素。

CSS版本

CSS目前有三个版本：

  • CSS1 ：CSS1是CSS的第一个版本，于1996年发布。它提供了基本的选择器、属性和声明块。
  • CSS2 ：CSS2是CSS的第二个版本，于1998年发布。它在CSS1的基础上增加了更多的选择器、属性和声明块。
  • CSS3 ：CSS3是CSS的第三个版本，于2001年发布。它在CSS2的基础上增加了更多的选择器、属性和声明块。CSS3还引入了新的布局模式和动画效果。

CSS语法

CSS语法非常简单，它由选择器、属性和声明块组成。

  • 选择器 ：选择器用于选择要应用样式的HTML元素。选择器可以是元素名称、类名或ID。
  • 属性 ：属性用于指定要应用于HTML元素的样式。属性可以是字体、颜色、背景和边框等。
  • 声明块 ：声明块用于包含要应用于HTML元素的样式。声明块由一对大括号组成，大括号里面包含了属性和值。

CSS选择器

CSS选择器用于选择要应用样式的HTML元素。选择器可以是元素名称、类名或ID。

  • 元素名称 ：元素名称选择器用于选择具有特定名称的HTML元素。例如，要选择所有

    元素，可以使用下面的选择器：

p {
    /* CSS代码 */
}
  • 类名 ：类名选择器用于选择具有特定类名的HTML元素。例如，要选择所有具有类名"red"的元素，可以使用下面的选择器：
.red {
    /* CSS代码 */
}
  • ID ：ID选择器用于选择具有特定ID的HTML元素。例如，要选择具有ID"header"的元素，可以使用下面的选择器：
#header {
    /* CSS代码 */
}

CSS属性

CSS属性用于指定要应用于HTML元素的样式。属性可以是字体、颜色、背景和边框等。

CSS属性的语法如下：

属性名：属性值；

例如，要将

元素的字体设置为红色，可以使用下面的CSS代码：

p {
    color: red;
}

CSS声明块

CSS声明块用于包含要应用于HTML元素的样式。声明块由一对大括号组成，大括号里面包含了属性和值。

CSS声明块的语法如下：

选择器 {
    属性名：属性值；
    属性名：属性值；
    ...
}

例如，要将

元素的字体设置为红色，并将其背景设置为蓝色，可以使用下面的CSS代码：

p {
    color: red;
    background-color: blue;
}

CSS规则

CSS规则由选择器和声明块组成。CSS规则的语法如下：

选择器 {
    属性名：属性值；
    属性名：属性值；
    ...
}

CSS规则可以放在CSS文件中，也可以内嵌在HTML代码中。当浏览器解析HTML代码时，它会自动加载CSS代码并将其应用于相应的HTML元素。

CSS注释

CSS注释用于在CSS代码中添加注释。注释可以帮助您理解CSS代码并使CSS代码更容易阅读。

CSS注释的语法如下：

/* 注释内容 */

例如，要注释一段CSS代码，可以使用下面的注释：

/* 这是一个注释 */

p {
    color: red;
}