网站开发用 CSS 编写逻辑

在网站开发中CSS 是一种高度专业化的编程语言，专注于样式系统。由于这个独特的用例及其声明性，有时很难理解。有些人甚至完全否认它是一种编程语言。让我们通过编写一个智能、灵活的样式系统来证明它们是错误的。 首先要控制结构，更传统的通用语言（如 JavaScript）为我们提供了条件（if/then）、循环（for、while）、逻辑门（===、&&等）和变量等工具。这些结构在 CSS 中的命名不同，它们的语法大不相同，以更好地适应文档样式的特定用例，其中一些直到几年前才在 CSS 中可用。再就是变量，变量是最直接的变量。它们在 CSS 中被称为自定义属性（尽管每个人都称它们为变量，甚至是他们自己的语法）。 :root { --color: red; } span { color: var(--color, blue); } 双破折号声明一个变量并赋值。这必须在范围内发生，因为在选择器之外这样做会破坏 CSS 语法。请注意:root选择器，它用作全局范围。 条件可以以多种方式编写，具体取决于您要在何处使用它们。选择器的范围是它们的元素，媒体查询是全局范围的，并且需要它们自己的选择器。属性选择器：[data-attr="true"] { /* if */ } [data-attr="false"] { /* elseif */ } :not([data-attr]) { /* else */ } 伪类：:checked { /* if */ } :not(:checked) { /* else */ } 媒体查询：:root { color: red; /* else */ } @media (min-width > 600px) { :root { color: blue; /* if */ } } 循环，计数器既是 CSS 中最直接的循环形式，也是使用范围最窄的一种。您只能在content属性中使用计数器，将其显示为文本。您可以在任何给定点调整其增量、起点和值，但输出始终限于文本。但是，如果您想使用循环来定义重复的布局模式怎么办？这种循环有点模糊：它是 Grid 的auto-fill属性。 这会用尽可能多的元素填充网格，同时缩放它们以填充可用空间，但在需要时将它们分成多行。只要找到项目并将其限制为最小宽度 300px 和最大宽度为其自身大小的一小部分，它就会重复。它可能比解释更容易看到。CSS 非常有能力定义智能和反应式布局系统。与其他语言相比，它的控制结构和算法可能有点奇怪，但它们就在那里，它们可以胜任任务。让我们停止仅仅描述一些风格并开始让它们发挥作用。

转载请保留出处及原文地址:/index.php?r=article/Content/index&content_id=578