css是层叠样式表的缩写，是网页设计师的重要工具。在css简介中，我们将介绍您对该语言应该了解的重点。但是在开始之前，您应该知道开发人员在css之前经历的痛苦。过去，我们直接在标记中设置应用程序的样式，这很难维护。这是css旨在解决的第一个问题之一：通过将样式与内容分离，我们可以一次更新许多页面的演示文稿。
在早期，css充斥着各种漏洞，以解决渲染引擎中的错误并以css规范的不一致实现来支持各种浏览器。这导致css作为hacky，legacy和奥术语言的声誉不佳。
但是，我们目前生活在css的黄金时代。现在它是一种成熟的语言，并且仍在幕后发展和发展。
通过本css简介，您将了解css在web应用程序中扮演的角色，css如何应用样式以及最常用的概念及其相关属性的细分。
掌握css会花费一些时间，但是有了本文的指导，您将可以成为一名熟练的css。
在这篇文章中web应用程序的4层web应用程序样式的基础矩形的概念该display物业文件流程版式盒子模型版面堆码多媒体转变过渡和动画条件设计
web应用程序的4层web应用程序包括四个部分：
商业逻辑?内容（html）互动（javascript）简报（css）业务逻辑是最模糊的，因此在本文中，我们假定它是服务器端代码或与服务器交互的代码。
web应用程序的四层。每次浏览器请求网页时，业务逻辑都会向下发送html，我们将其称为内容。此内容此时是白色背景上的无样式黑色文本。
加载html时，浏览器将加载更多资源，例如图像和视频，但更重要的是javascript和css。
javascript是一门通用的编程语言，因此可以做很多伟大的事情。作为核心，在web浏览器中，javascript用于处理用户交互。例如，如果用户单击一个按钮，则会发生某些情况。从提交表单到更改html文档，这一切都是“事”。
css使用html的结构来设置网页样式。读取css代码后，内容将从白色背景上的黑色文本转换为样式集描述的任何创作。
在css的幕后为我们的web应用程序编写可伸缩css的基础是规则集。规则集包含一个或多个选择器和一个带有声明集合的声明块。声明包含键/值对语法中的属性和值。
css中规则集的细分。选择器是css用于将规则集与html文档中的元素进行匹配的接口。多个选择器和规则集可能适用于同一元素，这就是css的“层叠”部分起作用的地方。
级联是在考虑选择器的特殊性和可能的继承属性的基础上确定将哪些属性应用于给定元素的裁判。如果规则冲突，我们需要一名裁判来确定哪种样式优先。
根据经验，级联决定按以下顺序应用哪些属性：
选择器特异性水平规则集的源顺序继承值
知识登记在这一点上，您应该对css，它在web应用程序中的作用以及浏览器如何将样式应用到元素上有较高的了解。您可能想知道的是如何实际设置内容样式。在css简介的下一部分中，您将了解一些属性以及它们如何帮助构建网页的出色视觉体验。
web应用程序样式的基础在介绍更复杂的css概念之前，让我们介绍一些样式和呈现内容的基本知识。
1.矩形的概念在对内容进行样式设置时，需要牢记一些注意事项，以帮助构建关于如何呈现内容的可靠思维模型：
一切都是矩形。即使它看起来不像矩形，也受一个边界限制。每个矩形都以某种方式与另一个矩形相关。默认情况下，嵌套（子）矩形在其包含（父）矩形上方。设置这些准则将在您布置网页时为您提供帮助。
2.?display财产在css简介中，我们应该了解的第一个属性是该display属性。有许多不同的值display，下面我们将介绍其中的一些，但是我们现在应该知道的两个是block和inline。默认情况下，所有html元素都将具有这两个值之一。
块级元素将从其父矩形的顶部到底部呈现，每个块级同级从上一个元素的下方开始。
考虑一个标题，然后是一个段落，另一个标题，然后是最后一个段落。我们从上到下查看这些元素。
css中的块和内联元素。内联元素将从左向右呈现（对于本机阅读的语言，则是从右向左呈现），其内容将包裹到下一行，并且其下一个内联同级元素将在上一个内容之后开始。
考虑一些粗体文本，然后是带下划线的文本，一个链接，然后是一些普通文本。我们在阅读方向上然后从上到下查看这些元素。
您可以在mozilla的网络文档中阅读有关块级元素和内联元素的更多信息。在每个页面的底部，是所有元素的列表以及它们各自的默认显示属性。
3.文件流程文档流的基础是如何呈现块级和内联元素。要知道的重要一点是，对于每种显示类型，矩形分别从上到下或沿读取方向放置。
但是，有时候我们不希望我们的内容遵循这种直接的文档流方法，因此css提供了不同的方式来操纵它。我们稍后将介绍这些细节，但就目前而言，仅意识到这种可能性就足够了。
为了更好地理解文档流，您可以阅读有关流入和流出的文章。
4.版式网络的基础是内容，内容的最简单形式是文本。在网络上使用排版时，要记住一些要使您的设计实用且有吸引力的事情。
为了提高可读性和可访问性，我们需要考虑文本颜色与背景颜色的对比度以及字体大小（取决于字体系列）。对于像素完美而言，重要的是要知道line-height在font-size影响较小的同时控制行距。
相关属性这是要熟悉的相关属性的列表：
font-family：字体的优先列表，将使用第一个可用字体color：文字的颜色text-align：元素中文本的对齐方式font-size：文字本身的高度line-height：文字行的高度，其中不可见空间基于该文字和?font-sizefont-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：元素中或元素周围的阴影效果*关于箱型
盒子模型的挑战更新与箱模型相关的属性时，应牢记两个主要挑战：
内联元素忽略边距。元素之间共享的顶部和/或底部边距可以“折叠”并仅使用最大值。您可以阅读更多有关利润下降的信息，以了解原因。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- *属性用于fl