您的位置: 首页  >  文章  >  CSS回到基础：术语解释

CSS回到基础：术语解释

分类: 文章 • 2023-10-27 12:14:15

CSS或级联样式表完善了我们网站设计规则的定义语言。 各地的艺术家每天都在使用CSS来创建，组织和编码基本网站布局的规则集。 这已成为前端设计中最受欢迎的语言，并且在CSS3的最新版本中提供了惊人的功能。 但是所有这些代码实际上是什么意思？

语言本身已经完全发展了几年。 混淆可能主要是由于错误传达和误用类似术语引起的。 CSS为表带来了许多新概念。 我们将介绍一些最流行的术语，以帮助您成为CSS专家。

您可能忽略了15个有用CSS技巧

您可能忽略了15个有用CSS技巧

如果你已经有一段一个前端Web开发人员，有一个高的机会，你... 阅读更多

为什么要专门研究CSS？

这个问题以前已经提出过，即使进入2011年，我们也可以看到同样的结果。 CSS是一种健壮的语言，不像脚本或编程那样。 这是一种样式语言，更具体地说是用于描述网页行为的代码。

CSS回到基础：术语解释

使用CSS，我们可以直接从单个HTML元素操纵属性。 所有的块，段落，链接和图像都可以通过CSS规则受到影响。 完善Web的表示语义一直是重要的一步。 这就是CSS仍然是设计师的领先者的主要原因-没有人能创造出更好的产品！

属性和值

这是闯入CSS的最简单方法。 所有代码都分为两个动作：选择要应用设计的元素以及要应用的内容。 后者是通过属性/值对创建的。

例如， color: red; 是一个非常简单的属性/值对。 我们使用的属性是color ，它允许我们传递任何可接受的值来更改文本颜色。 这也可以是十六进制代码或RGB（红-绿-蓝）颜色数据。 很多时候，设计师不会提及价值观念，因为它可能会引起误解。

CSS回到基础：术语解释

属性和值实际上是一个单一的想法。 每个属性声明都需要一个值，而单独的值是没有意义的。 在线上有很多文档介绍了许多不同的属性以及它们如何影响HTML元素。 我建议从附近的任何书店购买CSS参考书。 它们相当便宜，可以容纳您所需的大多数信息。

选择器值

需要选择器来完成整行CSS代码。 这些是我们声明的内容，用于设置我们要定位的元素类型。 选择器很多，而且很多选择者都很费解，普通设计师将不需要这些技能。 如果您想了解更多信息，请查看W3的选择器文档 。

开始样式定义的最简单方法是将裸元素用作属性选择器。 这意味着可以操纵根代码，例如用于段落的p ，用于分隔的div ，甚至body和html都可以用来操纵整个网页文档。 下面是一个样式化所有段落元素的快速示例。 

p { font-family: Arial, sans-serif; color: #222; font-weight: bold; }

使CSS真正具有分量的是选择器狙击的精确度。 完成目标样式的最佳方法是通过两种称为类和ID的方法 。 这些是HTML中常见的想法，您可以在其中通过属性将任何元素设置为具有ID和类值。 然后使用CSS，将样式应用于该特定块很简单。 

p#firstpar { font-size: 14px; } /* styles paragraph with ID of "firstpar" */
p.comment { font-size: 1.0em; line-height: 1.3em; } /* styles paragraph(s) with class of "comment" */

长度单位和值

通常，这些术语混淆不清，这并不奇怪。 值已在前面解释为用于描述属性的位置。 长度单位也是值，因为它们用于描述属性。

CSS回到基础：术语解释

不同之处在于这些值需要数值数据，因此必须返回某种形式的单位。 像素（px）最流行，可用于大多数事物：宽度/高度，字体大小，填充/边距，仅举几例。

除此之外，您可能还会看到通过流体布局经常使用的百分比（％）。 将宽度值设置为百分比时，编译器将假定100％为Web浏览器的整个宽度。 在将样式应用于布局结构甚至页面排版时，这为设计人员提供了很多精度。

宣言栏

现在，将所有这些术语放在一起后，我们终于可以讨论样式表背后的核心思想。 代码块用于描绘主题区域并指定元素详细信息。 例如，以下是一个简单导航容器的代码行： 

div#nav { display: block; width: 100%; padding: 3px 6px; margin-bottom: 20px; }

显示此代码的最简单方法是依次插入属性。 CSS开发人员已使用代码块将每个属性分成自己的一行。 该议程不仅占用了更多空间，而且降低了“浏览”工作表以准确找到所需内容的能力。

CSS回到基础：术语解释

拆分代码块的一种更好的方法是在达到阈值后将卷积的元素分离为自己的元素。 这个数字是个人的，在开发人员之间会有所不同。 这是临界点，逻辑指示它愚蠢地将所有内容保持在一行上，这主要是由于可读性。

下面，我一起编写了一个导航属性块的示例。 这种做法可以将更深的元素保留在同一位置，因此对所有导航元素的编辑要简单得多。 

div#nav  { display: block; width: 100%; padding: 3px 6px; margin-bottom: 20px; }
div#nav ul { list-style: none; display: block; }
div#nav ul li { float: left; margin-right: 10px; font-size: 12px; }
div#nav ul li a { color: #0f0f0f; text-decoration: none; display: inline-block; padding: 2px 5px; }

CSS2 / CSS3可能取得的进步

最近在头条新闻中不停地谈论CSS3的惊人好处。 但是语言的真正变化是什么？ 显然，旧代码仍然可以正常运行。 这至少表明编译器之间具有完全的向后兼容性（总是一件好事）。

CSS回到基础：术语解释

主要差异主要与新属性有关。 这些允许在浏览器中渲染圆角和阴影效果。 CSS3还提供了用于描述文档中颜色的新工具。 HSL（色相-饱和度-亮度）是除HSLA之外的最新版本，HSLA包括一个Alpha通道以减少不透明度。

属性选择器是直线标记样式方面的一大进步。 使用这种代码风格，您可以指定一个特定的元素名称，其中包含具有某些值的属性。 这些在使用没有标准设计原则来操作节点的XML等标记时非常有用。 下面的示例是一个相对简单的想法： 

div[attrib^="1"] { /* styles here */ }

上面的代码是CSS选择器库的一部分。 这将影响具有属性“ attrib”（其值也为“ 1”）的所有div元素。 如果这仍然令人困惑，请参考以下示例进行说明。 理论上，这两个选择器应执行相同的操作。 

p[id^="primary"] { /* styles */ }
p#primary { /* styles */ }

结论

在分解了一些最令人困惑的术语之后，CSS似乎就像在公园里散步一样。 该语言非常直观，初学者可以在头几个小时内开始设计。 这就是CSS在Web开发人员中如此受欢迎的原因。

CSS3的好处才刚刚开始生效。 在最近几年中，不断发展的网络趋势将向我们展示我们对网页设计的真正控制权。 当前，CSS作为前端网站样式设计的主要语言而感到自豪。 练习甚至是基本的中级技能也可以产生丰富的设计经验和进一步的知识。

翻译自: https://www.hongkiat.com/blog/css-back-to-basics-terminology-explained/

相关推荐