石家庄企业网站设计 展为网络 13933871212
CSS简介
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）
业务逻辑是最模糊的，因此在本文中，我们假定它是服务器端代码或与服务器交互的代码。
CSS Web应用程序层
Web应用程序的四层。
每次浏览器请求网页时，业务逻辑都会向下发送HTML，我们将其称为内容。此内容此时是白色背景上的无样式黑色文本。
加载HTML时，浏览器将加载更多资产，例如图像和视频，但更重要的是JavaScript和CSS。
JavaScript是一门通用的编程语言，因此可以做很多伟大的事情。作为核心，在Web浏览器中，JavaScript用于处理用户交互。例如，如果用户单击一个按钮，则会发生某些情况。从提交表单到更改HTML文档，这一切都是“事”。
CSS使用HTML的结构来设置网页样式。读取CSS代码后，内容将从白色背景上的黑色文本转换为样式集描述的任何创作。
要查看CSS原始功能的一些示例，请浏览CSS Zen Garden上的示例。
通过Shopify合作伙伴计划发展您的业务
无论您提供市场营销，定制服务还是网站设计和开发服务，Shopify合作伙伴计划都将助您成功。免费加入并获得收益分享机会，发展业务的工具以及充满激情的商业社区。
在CSS的幕后
为我们的Web应用程序编写可伸缩CSS的基础是规则集。规则集包含一个或多个选择器以及一个带有声明集合的声明块。声明包含键/值对语法中的属性和值。
CSS规则集
CSS中规则集的细分。
选择器是CSS用于将规则集与HTML文档中的元素进行匹配的接口。多个选择器和规则集可能适用于同一元素，这就是CSS的“层叠”部分起作用的地方。
级联是裁判，它根据选择器的特殊性和可能的继承属性来确定将哪些属性应用于给定元素。如果规则冲突，我们需要一名裁判来确定哪种样式优先。
根据经验，级联决定按以下顺序应用哪些属性：
选择器特异性水平
规则集的源顺序
继承值
有关级联的深入方法，请查看有关级联和继承的MDN文章，或者更进一步，请阅读有关级联和继承的最新规范。
对于仅关于特异性的介绍，CSS Tricks撰写了一篇很棒的文章，称为CSS特异性的Specifics。
知识登记
至此，您应该对CSS，它在Web应用程序中的作用以及浏览器如何将样式应用到元素上有一个高级的了解。您可能想知道的是如何实际设置内容样式。在CSS简介的下一部分中，您将了解一些属性以及它们如何帮助构建网页的出色视觉体验。
您可能还会喜欢： CSS Pt的现代方法。1：工具和组织。
Web应用程序样式的基础
在介绍更复杂的CSS概念之前，让我们介绍一些样式和呈现内容的基本知识。
1.矩形的概念
在对内容进行样式设置时，需要牢记一些注意事项，以帮助构建关于如何呈现内容的可靠思维模型：
一切都是矩形。即使它看起来不像矩形，也受一个边界限制。
每个矩形都以某种方式与另一个矩形相关。
默认情况下，嵌套（子）矩形在其包含（父）矩形上方。
设置这些准则将在您布置网页时为您提供帮助。
2. display财产
在CSS简介中，我们应该了解的第一个属性是该display属性。有许多不同的值display，下面我们将介绍其中的一些，但是我们现在应该知道的两个是block和inline。默认情况下，所有HTML元素都将具有这两个值之一。
块级元素将从其父矩形的顶部到底部呈现，每个块级同级从上一个元素的下方开始。
考虑一个标题，然后是一个段落，另一个标题，然后是最后一个段落。我们从上到下查看这些元素。
CSS块和内联元素
CSS中的块和内联元素。
内联元素将从左向右呈现（对于本机阅读的语言，则是从右向左呈现），其内容将包裹到下一行，并且其下一个内联同级元素将在上一个内容之后开始。
考虑一些粗体文本，然后是带下划线的文本，一个链接，然后是一些普通文本。我们在阅读方向上然后从上到下查看这些元素。
您可以在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：元素中或元素周围的阴影效果
*关于箱型
盒子模型的挑战
更新与箱模型相关的属性时，应牢记两个主要挑战：
内联元素忽略边距。
元素之间共享的顶部和/或底部边距可以“折叠”并仅使用最大值。您可以阅读更多有关保证金崩溃的信息，以了解原因。
6.布局
掌握了盒模型之后，我们在CSS入门中的下一步就是构建布局。两种最实用的布局方法是使用Flexbox（Flex）或Grid，它们都是显示属性。双方flex并grid影响子元素的定位，同时也有两者之间有很多相似之处，他们的目的不同。
两者本身都是非常深入的主题，因此最好的学习方法是通过实验。Flexbox Froggy是一款通过将青蛙放在lilypads上来学习Flexbox的游戏，而Grid Garden通过在花园上工作来帮助教授CSS Grid。
除了Grid和Flex，还值得一提的方向和编写模式。方向控制是应从左向右还是从右向左书写文本，这是内联方向。写入模式更进一步，可以控制块的流动方向和行内方向。有关CSS写作模式的更多信息，请参见本文。
您可能还会喜欢： 使用HTML和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.多媒体
当使用
![]()
和
到尺寸的图像或相对于其容器视频，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中，以检查是否存在使我们的代码更加明确和井井有条的功能。
通过Shopify合作伙伴计划发展您的业务
无论您提供市场营销，定制服务还是网站设计和开发服务，Shopify合作伙伴计划都将助您成功。免费加入并获得收益分享机会，发展业务的工具以及充满激情的商业社区。
从基础到精通
首先，我只想感谢您的跟随。我知道这篇文章在技术上是很密集的，但是您已经读完了，现在在CSS中有了坚实的基础。我们已经介绍了样式Web应用程序的最常见属性，更重要的是，这些样式的作用。
尽管有更多的属性，更多的工具和更多的创新正在不断开发中，但是如果您迷路了并且需要对CSS的核心主题进行复习，则可以随时参考本文。
如果您在CSS入门中研究了所有这些概念并尝试了自己的项目，那么您很快就会成为CSS向导。
