感觉CSS学习起来很难?很恐惧,消除恐惧的权威CSS学习指南来了

CSS 是自定义网页呈现的语言。它用于添加颜色、背景图像和纹理,以及在页面上排列元素。然而,CSS 不仅仅是绘制漂亮的图片。它还能增强网站的可用性。下图显示了 YouTube 的首页。左边是页面的常规渲染,右边是没有 CSS 的页面。

右侧的图像不仅不那么有趣,而且使用起来也更加困难

在这个简短的指南中,我们将介绍 CSS、演示 CSS 语法、解释 CSS 的工作原理、向您展示如何将 CSS 标记添加到 HTML 文档中,并为您提供来自网络的大量资源,您可以在其中了解有关 CSS 的更多信息。

什么是 CSS?

CSS 代表层叠样式表,它是用于设置网页视觉呈现样式的语言。CSS 是告诉 Web 浏览器如何呈现网页的不同部分的语言。

网页上的每个项目或元素都是以标记语言编写的文档的一部分。在大多数情况下,HTML 虽然是标记语言,但也有其他语言在使用,例如 XML。在本指南中,我们将使用 HTML 来演示 CSS 的实际应用,请记住,如果您使用 XML或不同的标记语言,同样的原则和技术也适用。

CSS 与 HTML 有何不同?

谈到 CSS 提问题时,首先要了解的是何时使用 CSS 等样式语言以及何时使用 HTML 等标记语言。

  • 所有重要的网站内容都应使用 HTML 等标记语言添加到网站。
  • 网站内容的呈现应该由样式语言定义,例如 CSS。

不属于网页演示的博客文章、页面标题、视频、音频和图片都应使用 HTML 添加到网页中。背景图像和颜色、边框、字体大小、排版以及网页上项目的位置都应该由 CSS 定义。

做出这种区分很重要,因为未能使用正确的语言可能会导致将来难以对网站进行更改,并为使用纯文本浏览器或屏幕阅读器的网站访问者造成可访问性和可用性问题。

CSS 语法

CSS 语法包括选择器、属性、值、声明、声明块、规则集、at 规则和语句。

  • 选择器是一个代码片段,用于标识受样式影响的网页元素或元素。
  • 属性是要受影响的元素的方面。例如,颜色、内边距、边距和背景是一些最常用的颜色 CSS 属性。
  • 值用于定义属性。例如,属性颜色可能被赋予红色值,如下所示color: red;
  • 属性的组合称为声明。
  • 在许多情况下,多个声明应用于单个选择器。声明块是用于指代应用于单个选择器的所有声明的术语。
  • 单个选择器和紧随其后的声明块组合称为规则集。
  • At-rules类似于规则集,但以**@符号而不是selector开头。最常见的@media规则是通常用于创建基于查看网页的设备大小应用的 CSS 规则块的规则。
  • 规则集at-rules都是CSS语句。

CSS 语法示例

让我们使用一段 CSS 来阐明这些项目是什么。

h1{color: red;font-size:3em;text-decoration: underline; 
    }

在本例中,h1是选择器。选择器后跟一个包含三个声明的声明块。每个声明与下一个声明之间用分号分隔。制表符和换行符是可选的,但大多数开发人员使用它来使 CSS 代码更易于阅读。

通过h1用作选择器,我们是说网页上的每个 1 级标题都应遵循此规则集中包含的声明。

规则集包含三个声明:

  • color:red;
  • font-size: 3em;
  • text-decoration: underline;

colorfont-sizetext-decoration都是性质。您可以使用数百个 CSS 属性,但常用的只有几十个。

我们将值red3emunderline应用于我们使用的属性。每个 CSS 属性都被定义为接受以特定方式格式化的存在。

对于color属性,我们可以使用颜色关键字或HexRGBHSL 格式的颜色公式。在这种情况下,我们使用了 color 关键字red。CSS3 中有几十个颜色关键字可用,但其他颜色模型可以访问数百万种颜色。

我们将 的值应用于3em属性font-size。我们可以使用多种尺寸单位,包括像素、百分比等

最后,我们将值添加underline到属性text-decoration中。我们也可以使用overlineorline-through作为 的值text-decoration。此外,CSS3 允许使用纯线、双线、点线、虚线和波浪线样式,这些都是文本装饰颜色的规范。我们可以通过使用这样的声明一次应用所有三个值:

text-decoration: blue double underline;

该规则将导致h1我们最初示例中的 用蓝色双线下划线。color文本本身将保持为我们属性中定义的红色。

为样式准备 HTML 标记

CSS 应该用于向网页添加内容。该任务最好由HTMLXML等标记语言处理。相反,CSS 用于选择网页上已经存在的项目并定义每个项目的显示方式。

为了尽可能容易地选择网页上的项目,应将标识符添加到网页上的元素中。这些标识符,在 CSS 上下文中通常称为钩子,可以更容易地识别应该受 CSS 规则影响的项目。

类和 ID 用作 CSS 样式的挂钩。虽然 CSS 的呈现方式不受使用类和钩子的影响,但它们使开发人员能够精确定位他们希望设置样式的 HTML 元素。

类和 ID 不可互换。知道何时使用它们很重要。

何时使用类

当单个网页上有多个元素需要设置样式时,请使用类。例如,假设您希望页面页眉和页脚中的链接以一致的方式设置样式,但与页面正文中的链接不同。要查明这些链接,您可以为每个链接或包含链接的容器添加一个类。然后,您可以使用该类指定样式,并确保它们仅应用于具有该类属性的链接。

何时使用 ID

对仅在网页上出现一次的元素使用 ID。例如,如果您使用 HTML 无序列表进行站点导航,则可以使用nav等 ID为该列表创建唯一的挂钩。

这是一个用于基本电子商务网站的简单导航栏的HTMLCSS 代码示例。