网站建设之CSS简介：级联样式表的入门指南

CSS是层叠样式表的缩写，是网页设计师的重要工具。在CSS简介中，我们将介绍您对该语言应该了解的重点。但是在开始之前，您应该知道开发人员在CSS之前经历的痛苦。过去，我们直接在标记中设置应用程序的样式，这很难维护。这是CSS旨在解决的第一个问题之一：通过将样式与内容分离，我们可以一次更新许多页面的演示文稿。

在早期，CSS充斥着各种漏洞，以解决渲染引擎中的错误并以CSS规范的不一致实现来支持各种浏览器。这导致CSS作为hacky，legacy和奥术语言的声誉不佳。

但是，我们目前生活在CSS的黄金时代。现在它是一种成熟的语言，并且仍在幕后发展和发展。

通过本CSS简介，您将了解CSS在Web应用程序中扮演的角色，CSS如何应用样式以及最常用的概念及其相关属性的细分。

掌握CSS会花费一些时间，但是有了本文的指导，您将可以成为一名熟练的CSS。

Web应用程序的4层

Web应用程序包括四个部分：

1. 商业逻辑 
2. 内容（HTML）
3. 互动（JavaScript）
4. 简报（CSS）

业务逻辑是最模糊的，因此在本文中，我们假定它是服务器端代码或与服务器交互的代码。

网站建设

每次浏览器请求网页时，业务逻辑都会向下发送HTML，我们将其称为内容。此内容此时是白色背景上的无样式黑色文本。

加载HTML时，浏览器将加载更多资源，例如图像和视频，但更重要的是JavaScript和CSS。

JavaScript是一门通用的编程语言，因此可以做很多伟大的事情。作为核心，在Web浏览器中，JavaScript用于处理用户交互。例如，如果用户单击一个按钮，则会发生某些情况。从提交表单到更改HTML文档，这一切都是“事”。

CSS使用HTML的结构来设置网页样式。读取CSS代码后，内容将从白色背景上的黑色文本转换为样式集描述的任何创作。

在CSS的幕后

为我们的Web应用程序编写可伸缩CSS的基础是规则集。规则集包含一个或多个选择器和一个带有声明集合的声明块。声明包含键/值对语法中的属性和值。

网站建设

选择器是CSS用于将规则集与HTML文档中的元素进行匹配的接口。多个选择器和规则集可能适用于同一元素，这就是CSS的“层叠”部分起作用的地方。

级联是在考虑选择器的特殊性和可能的继承属性的基础上确定将哪些属性应用于给定元素的裁判。如果规则冲突，我们需要一名裁判来确定哪种样式优先。

根据经验，级联决定按以下顺序应用哪些属性：

1. 选择器特异性水平
2. 规则集的源顺序
3. 继承值

 

知识登记

在这一点上，您应该对CSS，它在Web应用程序中的作用以及浏览器如何将样式应用到元素上有较高的了解。您可能想知道的是如何实际设置内容样式。在CSS简介的下一部分中，您将了解一些属性以及它们如何帮助构建网页的出色视觉体验。

Web应用程序样式的基础

在介绍更复杂的CSS概念之前，让我们介绍一些样式和呈现内容的基本知识。

1.矩形的概念

在对内容进行样式设置时，需要牢记一些注意事项，以帮助构建关于如何呈现内容的可靠思维模型：

1. 一切都是矩形。即使它看起来不像矩形，也受一个边界限制。
2. 每个矩形都以某种方式与另一个矩形相关。
3. 默认情况下，嵌套（子）矩形在其包含（父）矩形上方。

设置这些准则将在您布置网页时为您提供帮助。

2. display财产

在CSS简介中，我们应该了解的第一个属性是该display属性。有许多不同的值display，下面我们将介绍其中的一些，但是我们现在应该知道的两个是block和inline。默认情况下，所有HTML元素都将具有这两个值之一。

块级元素将从其父矩形的顶部到底部呈现，每个块级同级从上一个元素的下方开始。

考虑一个标题，然后是一个段落，另一个标题，然后是最后一个段落。我们从上到下查看这些元素。

内联元素将从左向右呈现（对于本机阅读的语言，则是从右向左呈现），其内容将包裹到下一行，并且其下一个内联同级元素将在上一个内容之后开始。

考虑一些粗体文本，然后是带下划线的文本，一个链接，然后是一些普通文本。我们在阅读方向上然后从上到下查看这些元素。

您可以在Mozilla的网络文档中阅读有关块级元素和内联元素的更多信息。在每个页面的底部，是所有元素的列表以及它们各自的默认显示属性。

3.文件流程

文档流的基础是如何呈现块级和内联元素。要知道的重要一点是，对于每种显示类型，矩形分别从上到下或沿读取方向放置。

但是，有时候我们不希望我们的内容遵循这种直接的文档流方法，因此CSS提供了不同的方式来操纵它。我们稍后将介绍这些细节，但就目前而言，仅意识到这种可能性就足够了。

为了更好地理解文档流，您可以阅读有关流入和流出的文章。

4.版式

网络的基础是内容，内容的最简单形式是文本。在网络上使用排版时，要记住一些要使您的设计实用且有吸引力的事情。

为了提高可读性和可访问性，我们需要考虑文本颜色与背景颜色的对比度以及字体大小（取决于字体系列）。对于像素完美而言，重要的是要知道line-height在font-size影响较小的同时控制行距。

相关属性

这是要熟悉的相关属性的列表：

• font-family：字体的优先列表，将使用第一个可用字体
• color：文字的颜色
• text-align：元素中文本的对齐方式
• font-size：文字本身的高度
• line-height：文字行的高度，其中不可见空间基于该文字和 font-size
• font-weight：文字的粗细，例如粗体
• font-style：文字样式，例如斜体
• text-decoration：文字的装饰，如带下划线的
• letter-spacing：字母之间的空格
• word-spacing：单词之间的间隔
• text-shadow：文字周围的阴影效果

注意：所有这些与排版相关的属性都将继承，这意味着如果将它们设置在父规则集上，则它们将应用于所有后代。

5.盒子模型

矩形样式最基本的方面是框模型，它与每个矩形相关的属性有关。框模型的核心是内容，它可以是子矩形或空矩形。内容周围是填充，接着是边框，最后是边距，就像更多矩形中的矩形一样。现在，我们将介绍该模型的更多细节。

box-sizing

该box-sizing属性控制框模型的计算方式。有两个主要值box-sizing：content-box和border-box。content-box是所有元素的默认值。

content-box通过在内容的宽度和高度上添加填充和边框来计算矩形的框模型。content-box对于许多人来说是一个陷阱，因为由于填充，边框和边距，它允许宽度为100％的元素变得大于100％。

border-box通过吸收边框的宽度和高度的元素填充来计算盒模型。因此，宽度为100％的元素将包括填充和边框在内为100％，但是边距仍会使元素大于100％的宽度。如果边距使元素溢出，则应考虑向父级添加填充或边距。

相关属性

这是Box模型的几个相关属性：

• width：元素的宽度*
• height：元素的高度*
• max-width：元素的最大宽度*
• max-height：元素的最大高度*
• padding：元素内容周围的空间（注意：设置背景会绘制元素的填充空间）
• border：围绕元素填充空间的边界
• border-radius：元素任何给定角的圆度
• margin：元素周围的空白区域
• outline：其他不影响文档流或框模型大小的类似边框的属性
• outline-offset：从元素边界到轮廓起点的距离
• box-shadow：元素中或元素周围的阴影效果

*关于箱型

盒子模型的挑战

更新与箱模型相关的属性时，应牢记两个主要挑战：

1. 内联元素忽略边距。
2. 元素之间共享的顶部和/或底部边距可以“折叠”并仅使用最大值。您可以阅读更多有关利润下降的信息，以了解原因。

6.布局

掌握了盒子模型之后，我们在CSS入门中的下一步就是构建布局。两种最实用的布局方法是使用Flexbox（Flex）或Grid，它们都是显示属性。双方flex并grid影响子元素的定位，同时也有两者之间有很多相似之处，他们的目的不同。

两者本身都是非常深入的主题，因此最好的学习方法是通过实验。Flexbox Froggy是一款通过将青蛙放在lilypads上来学习Flexbox的游戏，而Grid Garden通过在花园上工作来帮助教授CSS Grid。

除了Grid和Flex，还值得一提的方向和编写模式。方向控制是应该从左向右还是从右向左书写文本，这是内联方向。写入模式更进一步，可以控制块的流动方向和行内方向。可以在本文CSS写作模式中找到更多详细信息。

相关属性

这是布局时要牢记的几个重要的相关属性：

• display：确定元素及其子元素的块格式化上下文
• place-content：设置内容之间及其周围的空间
• place-items：place-self为所有直系子女设置属性
• place-self：相对于其各自的轴定位内容
• gap：设置行和列之间的装订线
• overflow：控制应如何处理大于元素的内容
• direction：设置文本的流向，例如从左到右（LTR）或从右到左（RTL）
• writing-mode：控制块和内联内容方向

注意： place- *属性用于Flex和Grid，但对于其他display值将被忽略。

7.堆叠

除了所有内容都遵循标准文档流程的布局之外，还可以将元素彼此堆叠。它的基础是Stacking Context，它在元素具有某些属性（例如静态以外的位置值，网格或flex容器的子代）时形成。

相关属性

以下是一些重要的相关属性，请记住：

• position:：确定可以在其中放置元素的上下文
• top，right，bottom，left：适用有关当前堆叠内容轻推的位置
• z-index：指定沿z轴的堆叠层，较高的值位于较低的值之上
• mix-blend-mode：混合堆叠的图层与复合照明效果

注意：z-index元素的值仅在其各自的堆栈上下文中起作用，而并非在所有堆栈上下文中都有作用。这意味着有时较高的z-index值将低于较低的值，因为它在不同的堆叠上下文中。

8.多媒体

当使用<img>和<video>标签将图像和视频放置到网页中时，默认情况下它们将以嵌入式方式显示。浮动元素将允许其他内容环绕它。为了防止元素的内容环绕浮动元素，可以将其清除。

到尺寸的图像或相对于其容器视频，object-fit提供了类似的值background-size，而cover与contain两个保持纵横比。cover会用对象填充容器，并沿较大的尺寸进行裁剪，而contain沿较小的尺寸显示整个对象的空白区域。

相关属性

这是多媒体要记住的一些重要的相关属性：

• float： 从文档流中删除一个元素，从而允许内容在其周围流动
• clear：忽略先前设置的浮动
• object-fit：确定媒体对象应如何适合其包含元素
• background：设置元素的背景图像或颜色
• background-size：确定背景应如何适合其元素
• clip-path：允许掩盖元素的内容
• shape-outside：允许自定义形状绑定元素

9.转变

在掌握了布局和堆栈的知识之后，转换对CSS的介绍非常有用。它们使我们能够以各种方式操纵内容，而无需更改其在文档流中的位置。例如，当通过将不透明度更改为0隐藏元素时，它仍然存在，但完全不可见。

transform允许元素进行平移，倾斜，旋转和缩放。它还使元素可以在三个维度（3D）中进行转换。这要求父元素具有perspective属性集，该属性本质上用作3D空间的视口。

相关属性

在进行转换时，请牢记一些重要的相关属性：

• opacity： 控制元素及其子元素的透明度
• transform：修改CSS 视觉格式模型的坐标空间
• transform-origin：设置要应用的转换点
• transform-style：控制3D元素是否应该重叠或相交
• perspective：启用3D元素的观看并设置观看距离
• perspective-origin：更改3D元素的消失点
• backface-visibility：允许元素的背面可见和镜像

注意： opacity和transform是最活跃的动画属性。有关此方面的一些信息，请参见本文的渲染性能，有用的备忘单是CSS Triggers。

10.过渡和动画

为了获得流畅的用户体验，动画可以为您的网站添加微妙而优美的效果。动画也可以在一组属性中一起使用，因此可以和谐地转换，缩放和淡化内容。

另一方面，过渡对于将属性从一个值过渡到另一个值很有用，例如当用户将鼠标悬停在按钮上时，按钮的背景变暗。

动画是使用@keyframe语法构建的，该语法允许我们使用百分比添加规则集。使用该animate属性应用动画时，将根据持续时间依次触发每个规则集。

相关属性

在过渡和动画时，请牢记一些重要的相关属性：

• transition：控制属性在其值更新时应如何更改
• transition-delay：控制过渡开始之前的延迟
• transition-duration：控制过渡的时间长度
• transition-property：控制要转换的属性
• transition-timing-function：控制用于过渡的缓动功能
• animation：将微调的关键帧动画应用于规则集
• animation-delay：控制动画开始之前的延迟
• animation-direction：控制动画如何遍历关键帧
• animation-duration：控制动画的时间长度
• animation-fill-mode：控制完成后动画应停在的位置
• animation-iteration-count：控制动画应重复多少次
• animation-name：控制使用声明的动画的名称 @keyframes
• animation-play-state：控制动画是暂停还是运行
• animation-timing-function：控制用于动画的缓动功能

11.条件设计

尽管CSS不像其他编程语言那样具有典型的控制流，但它确实具有一些有条件的“规则”。这些功能使您可以指定在满足给定条件的情况下要应用的嵌套CSS规则集。两个示例是：

• @media：关于响应式设计，我们有@media，它使我们能够检查浏览器的窗口大小，屏幕像素密度，长宽比以及设备的媒体类型。
• @supports：由于CSS是一种不断发展的语言，因此并非所有浏览器都支持最新的CSS功能。如果浏览器无法理解新属性，CSS不会破坏它们，但是我们可以将相关规则集包装到@supports中，以检查是否存在使我们的代码更加明确和井井有条的功能。

从基础到精通

首先，我只想感谢您的跟随。我知道这篇文章在技术上比较密集，但是您已经读完了，现在在CSS中已经有了坚实的基础。我们已经介绍了样式Web应用程序的最常见属性，更重要的是，这些样式的作用。

尽管有更多的属性，更多的工具和更多的创新正在不断开发中，但是如果您迷路了并且需要对CSS的核心主题进行复习，则可以随时参考本文。

如果您在CSS入门期间研究了所有这些概念并尝试了自己的项目，那么您很快就会成为CSS向导。