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

相关资讯

深圳网站设计公司谈网站页面的平衡性

  • 2018-07-31

网站设计行业是当今发展最快的行业之一,众多的企业或公... 查看详情

如何判断一家品牌网站设计公司

  • 2017-07-20

维仆品牌网站设计公司助力企业发展,由于网络的快速开展... 查看详情

怎么提供网站设计的转化率

  • 2017-07-20

您的网站设计可能在视觉上很吸引人,但它们真的为您的用... 查看详情

日本YANGAI机械制造官网设计赏析

  • 2017-07-20

说起日本,大家想到的都是第三产业异常的发达,很多人不知... 查看详情

定价网页设计如何做到更好

  • 2017-07-20

想象一下网站需要设计一个定价页面,该页面适用于具有四... 查看详情

深圳网站设计公司分享最佳底部导航设计

  • 2017-07-20

底部导航是网站底部的区域,网站所有者经常忽略它。通过... 查看详情

从设计到排名:网页设计和SEO如何连接

  • 2017-07-20

你的站点是企业的数字中心。你需要它排名良好才能开展... 查看详情

自适应的网站建设应该要考虑哪些方面

  • 2017-07-20

现在的网站建设的方式是越来越多了,那么哪种建站的方式... 查看详情

网站进入沙盒期是什么意思?

  • 2017-07-20

在这段时间,你网站上的文章内容很有可能迅速会被百度百... 查看详情

三站合一响应式网站是什么?

  • 2017-07-20

建一个好的官网是何等重要,好的官网还必须满足用户随时... 查看详情


联系
  • 地址:深圳市罗湖区中海慧智大厦1A座706
  • 热线:0755-8672-1169
  • 直线:137-2893-6255
  • Email: 2503595831@qq.com
  • 周一 - 周五:10:00 am - 7:30 pm
    周六 - 周日:休整
  • 服务城市: 深圳   广州   香港   成都   台湾   珠海   汕头    甘肃   中山   佛山   长沙    东莞
  • 深圳区域: 罗湖   福田   南山   盐田   宝安   龙岗   龙华   光明   大鹏   坂田   西乡   科技园