16 2022.05

网站开发用 CSS 编写逻辑

发布日期:2022-05-16 09:28:59
阅读数 4714

网站开发中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 非常有能力定义智能和反应式布局系统。与其他语言相比,它的控制结构和算法可能有点奇怪,但它们就在那里,它们可以胜任任务。让我们停止仅仅描述一些风格并开始让它们发挥作用。

在线咨询 热线咨询 微信咨询 返回顶部
联系项目经理
获取解决方案、项目报价
项目需求
联系方式
您的姓名

联系电话:

13528173451

立即咨询