轻松易懂的CSS学习权威指南来了

最新推荐文章于 2024-05-05 15:36:35 发布

艾编程前端技术

最新推荐文章于 2024-05-05 15:36:35 发布

阅读量296

点赞数

分类专栏： WEB前端入门 html+css教程文章标签：前端 css

本文链接：https://blog.csdn.net/Codinglaoshi/article/details/124261303

版权

WEB前端入门同时被 2 个专栏收录

53 篇文章 3 订阅

订阅专栏

html+css教程

13 篇文章 0 订阅

订阅专栏

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;

color、font-size 和text-decoration都是性质。您可以使用数百个 CSS 属性，但常用的只有几十个。

我们将值red、3em和underline应用于我们使用的属性。每个 CSS 属性都被定义为接受以特定方式格式化的值。

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

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

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

text-decoration: blue double underline;

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

为样式准备 HTML 标记

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

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

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

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

何时使用类

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

何时使用 ID

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

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

<style>
    #nav { 
         background: lightgray; 
         overflow: auto; 
         } 
     #nav li {
         float: left; 
         padding: 10px;
         } 
      #nav li:hover {
         background: gray; 
         } 
  </style> 
  <ul id="nav"> 
      <li><a href="">Home</a></li>
      <li><a href="">Shop</a></li>
      <li><a href="">About Us</a></li>
      <li><a href="">Contact Us</a></li> 
  </ul>

该代码将生成一个从页面左侧开始的浅灰色背景的水平导航菜单。每个导航项目的四周都有 10 像素的间距，当您将鼠标悬停在每个项目的背景上时，它的背景会变暗。

同一网页上的任何其他列表都不会受到该代码的影响。

#example-nav {
background: lightgray;
overflow: auto;
}
#example-nav li {
float: left;
padding: 10px;
}
#example-nav li:hover {
background: gray;
}

何时不使用 Hooks

您不必为 HTML元素添加类或 ID 即可使用 CSS对其进行样式设置。如果您知道要为网页上特定元素的每个实例设置样式，则可以使用元素标签本身。

例如，假设您要创建一致的标题样式。与向每个标题添加类或 ID 相比，使用标题标签简单地设置所有标题元素的样式会容易得多。

<style> 
   ul { 
       list-style-type: upper-roman; 
       margin-left: 50px; 
       } 
     p { 
       color: darkblue 
       } 
 </style> 
 <p>Some paragraph text here. Two short sentences.</p> 
 <ul> 
 <li>A quick list</li>
 <li>Just two items</li> 
 </ul> 
 <p>Additional paragraph text here. This time let's go for three sentences. Like this.
 </p>

该代码显示的效果如下：

.code_sample ul {
list-style-type: upper-roman;
左边距：50px；
}
.code_sample p {
颜色：深蓝色
}

这里有一些段落文本。两个短句。

快速列表
只有两个项目
此处附加段落文本。这次让我们来三句话。像这样。

另一个清单
仍然只有两个项目

在这种情况下，即使我们只为ul和p元素编写了一次样式规则，但会影响多个项目。通过在网站的每个页面上创建一致的标题、列表和段落文本样式，使用元素选择器是创建有吸引力、可读性和一致的网站体验的好方法。

为样式准备标记的最佳实践

既然您知道如何将类、ID 和元素标签用作 CSS 规则集的钩子，那么您如何才能最好地利用这些知识来编写标记，以便轻松定位特定元素？

自由而一致地应用课程。对应该在一个方向或另一个方向对齐的项目以及在单个网页上重复出现的任何元素使用类。
将 ID 应用于在网页上仅出现一次的项目。例如，在div包含您的网页内容的ul、包含导航菜单的以及div包含您的网页标题的上使用 ID。

将 CSS 规则链接到 HTML 文档的方法

向网页添加 CSS 规则的方法有以下三种：

内联样式
内部样式表
外部样式表

在绝大多数情况下，应该使用外部样式表。但是，在某些情况下可以使用内联样式或内部样式表。

内联样式

内联样式应用于特定的 HTML 元素。HTML 属性style用于定义仅适用于该特定元素的规则。下面看一下编写内联样式的语法。

<h1 style="color:red; padding:10px; text-decoration:underline;">Example Heading</h1>

该代码将导致该标题以红色下划线文本和所有边的 10 像素填充呈现。在极少数情况下应该使用内联样式。在几乎所有情况下，都应该避免它们并将样式添加到样式表中。

内部样式表

前面的示例使用了内部样式表。内部样式表是添加到 HTML 文档head元素的 CSS 块。style元素用于开始和结束标签之间，head所有的 CSS 声明都添加在style标签之间。

我们可以使用这种语法在内部样式表中复制上面代码中的内联样式。

<head> 
     <style> 
         h1 { 
              color: red; 
              padding: 10px; 
              text-decoration: underline;
             } 
      </style> 
   </head> 
<body> 
       <h1>Example Heading</h1>
</body>

该代码将产生与内联样式相同的结果。但是，使用内部样式表而不是内联样式的好处是h1页面上的所有元素都会受到样式的影响。

外部样式表

外部样式表是只包含 CSS 语句的文档。文档中定义的规则通过使用 HTML 文档元素中的link标记链接到一个或多个 HTML文档。head

要使用外部样式表，首先要创建 CSS 文档。

/************************************************* 
Save with a name ending in .css such as styles.css 
*************************************************/
h1 { 
    color: red; 
    padding: 10px; 
    text-decoration: underline;
    }

现在我们有了一个带有一些样式的外部样式表，我们可以使用该link元素将它链接到一个 HTML 文档。

<head>
     <link rel="stylesheet" type="text/css" href="styles.css">
</head> 
<body> 
    <h1>Example Heading</h1>
</body>

加载此 HTML 文档时，该link标记将导致将文件styles.css中*的样式加载到网页中。因此，所有 1 级标题元素都将显示为红色文本、带下划线，并且每边都应用了 10 像素的填充。

何时使用每种方法

在几乎所有情况下，外部样式表都是设置网页样式的正确方法。使用外部样式表的主要好处是它们可以链接到任意数量的 HTML 文档。因此，可以使用单个外部样式表来定义整个网站的呈现方式。

设计简单的单页网站时可以使用内部样式表。如果网站永远不会超出使用内部样式表的单个初始页面是可以接受的。

内联样式可以在两种情况下使用：

编写仅应用于单个网页上的单个元素的 CSS 规则时。
当被集成到内容管理系统（如 WordPress）中的 tinyMCE 编辑器等所见即所得编辑器应用时。

在所有其他情况下，应避免使用内联样式以支持外部样式表。

CSS 是如何工作的

在编写 CSS 时，很多时候编写的规则相互冲突。例如，在设置标题样式时，以下所有规则都可能适用于h1元素。

h1在网站的所有页面上创建一致呈现的元素级规则。
定义在特定位置呈现的元素的类级别规则h1——例如博客文章的标题。
一个 id 级别的元素，定义了一个h1元素在一个或多个网页上的一个地方的渲染——例如网站名称。

开发人员如何编写足够通用的规则以涵盖每一个h1又足够具体的规则，以定义只应出现在给定元素的特定实例上的样式？

CSS 样式遵循两个规则，您需要了解这些规则才能编写有效的 CSS。了解这些规则将帮助您编写在需要时可以广泛使用的 CSS，但在需要时却可以非常具体。

控制 CSS 行为方式的两个规则是继承和特异性。

级联继承

为什么CSS 样式被称为级联？当编写多个相互冲突的规则时，将执行最后编写的规则。通过这种方式，样式向下级联并应用最后写入的规则。

让我们看一个例子。让我们在一个内部样式表中编写两个直接相互矛盾的 CSS 规则。

<head>
     <style> 
         p {color: red;} 
         p {color: blue;} 
      </style> 
</head> 
<body> 
<p>What color will the text of this paragraph be?</p> 
</body>

浏览器将级联样式并应用遇到的最后一个样式，推翻所有以前的样式。结果，标题是蓝色的。

.code_sample_p {颜色：红色；}
.code_sample_p {颜色：蓝色；}

这一段的文字是什么颜色的？

当使用外部样式表时，同样的级联效应也会发挥作用。使用多个外部样式表是很常见的。head发生这种情况时，样式表会按照它们在 HTML 文档元素中出现的顺序加载。如果样式表规则之间发生冲突，则每个样式表中包含的 CSS 规则将覆盖先前加载的样式表中包含的那些规则。以下面的代码为例：

<head>
<link rel="stylesheet" type="text/css" href="styles_1.css">
<link rel="stylesheet" type="text/css" href="styles_2.css">
</head>

如果这两个样式表中包含的样式之间存在冲突，则将应用styles_2.css中的规则。

样式的继承是 CSS 样式级联行为的另一个例子。

当您为父元素定义样式时，子元素会收到相同的样式。例如，如果我们将颜色样式应用于无序列表，则子列表项将显示相同的样式。

<head>
    <style>
        ul {color: red;} 
    </style>
 </head> 
 <body> 
   <ul> 
 <li>Item 1</li> 
 <li>Item 2</li>
   </ul> 
 </body>

以下是该代码的呈现方式。

.code-sample-ul {颜色：红色；}
项目 1
第 2 项

并非每个属性都从父元素传递到其子元素。浏览器将某些属性视为非继承属性。边距是不从父元素传递到子元素的属性的一个示例。

特异性

确定对每个 HTML 元素应用哪些规则的第二个规则是[特异性规则。

具有更多特定选择器的CSS 规则将覆盖具有较少特定选择器的 CSS 规则，无论哪个先出现。正如我们所讨论的，三个最常见的选择器是元素标签、类和 ID。

最不具体的选择器类型是元素级别选择器。
当一个类被用作选择器时，它会否决使用元素标签作为选择器编写的 CSS 规则。
当一个 ID 用作选择器时，它会否决使用元素或类选择器编写的 CSS 规则。

影响特异性的另一个因素是编写 CSS 样式的位置。与属性内联style编写的样式会覆盖在内部或外部样式表中编写的样式。

增加选择器特异性的另一种方法是使用一系列元素、类和 ID 来精确定位您要处理的元素。例如，如果您想精确定位列表上的无序列表项目，其中包含divid 为“example-div”的类“example-list”，您可以使用以下选择器来创建具有高度特异性的选择器。

div#example-div > ul.example-list > li {styles here}

虽然这是创建非常具体的选择器的一种方法，但建议限制使用这些类型的选择器，因为它们比简单的选择器需要更多的时间来处理。

一旦您了解了继承和特异性的工作原理，您将能够高度准确地定位网页上的元素。

CSS 能做什么？

一个更好的问题可能是：“CSS 不能做什么？”

CSS 可用于将 HTML 文档转换为专业、精美的设计。下面是一些你可以通过 CSS 完成的事情：

创建一个灵活的网格，用于设计在任何设备上都能呈现精美的完全响应式网站。
从排版到表格，再到表格等，应有尽有。
float使用诸如、position、overflow、flex和等属性将网页上的元素相对于彼此定位box-sizing。
将背景图像添加到任何元素。
创建形状、交互和动画。

这些概念和技术超出了本入门指南的范围，但以下资源将帮助您解决这些更高级的主题。

盒子模型

如果您打算使用 CSS 来构建网页布局，那么首先要掌握的主题之一就是盒子模型。盒子模型是一种可视化和理解网页上每个项目如何组合内容、填充、边框和边距的方法。

了解这四个部分如何组合在一起是一个基本概念，在继续讨论其他 CSS 布局主题之前必须掌握它。

了解盒子模型的两个好地方包括：

来自万维网联盟的盒子模型的解释。
来自 Mozilla 开发者网络的CSS 盒子模型介绍。

创建布局

有许多技术和策略用于使用 CSS 创建布局，理解盒子模型是每个策略的先决条件。掌握了盒子模型后，您将准备好学习如何操作网页上的内容盒子。

Mozilla 开发者网络对 CSS 布局进行了很好的介绍]。这篇简短的阅读涵盖了 CSS 布局背后的基本概念，并快速介绍了诸如text-align、float和position.

W3C 提供了更广泛、更深入的 CSS 布局指南：CSS 布局模型。本文档是面向专业开发人员的资源，因此如果您是 CSS 新手，请花点时间查看它。这不是快速阅读。但是，您需要了解的有关创建 CSS 布局的所有信息都包含在本文档中。

多年来，网格布局一直是设计响应式布局的首选策略。CSS 网格已经从零开始创建多年，市场上有许多不同的网格生成网站和开发框架。然而，在几年内，对网格布局的支持将成为 CSS3 规范的一部分。您可以通过阅读 W3C 网站上的主题来了解很多关于网格的知识。有关网格布局的更轻松、更简短的介绍。

几年之内，CSS3灵活框或flexbox有望成为设计网站布局的主导模型。flexbox 规范还没有完全完成和最终确定，并且浏览器之间对 flexbox 的支持并不一致。然而，每个初露头角的 CSS 开发者都需要熟悉flexbox并准备在不久的将来实现它。

网页字体和排版

可以做很多事情来增加个性并提高网站内容的可读性。在我们的字体和网页排版指南中了解有关为网络选择字体和排版的更多信息。

创建一致的跨浏览器体验

每个浏览器对 HTML 规范的解释略有不同。因此，当在两个不同的浏览器中呈现相同的代码时，呈现代码的方式通常会存在细微差别。

以这段简短的代码为例。

<h1>Heading 1</h1> 
<p>A short paragraph of text. Just four sentences. Most of the sentences are quite short. Especially this one.</p> 
<h2>Heading 2</h2>
<ul>
   <li>Just a short list</li>
   <li>Three items on this list</li> 
   <li>We'll make it an unordered list</li>
 </ul>
  <h3>Heading 3</h3>
  <p>One final short paragraph of text. Just four sentences. Most of the sentences are quite short. Especially this one.</p>

如果我们在两个不同的浏览器中渲染该代码，我们会看到细微的差别。以下是 Mozilla Firebox 和 Microsoft Edge 呈现该代码的方式。

你能看出细微的差别吗？左边的 Firefox 在每个标题元素周围增加了一点边距。此外，在 Edge 中渲染时，项目符号点会小一些。虽然这些差异不是必然的，但在某些情况下，浏览器之间的这些微小差异可能会产生问题。

CSS 可用于解决这些跨浏览器兼容性问题。一种流行的方法是实现一个名为normalize.css的样板 CSS 文档。这个免费提供的 CSS 文件可以链接到任何 HTML 文档，以帮助最小化跨浏览器的呈现差异。

在您的设计工作中包含normalize.css的最简单方法是链接到Google 托管的副本。为此，只需将这行代码放入HTML 文档的元素中。head

<link rel="stylesheet" src="//normalize-css.googlecode.com/svn/trunk/normalize.css" />