CleverCSS是什么?

CleverCSS是一个用于css的小型标记语言,从Python得到灵感,采用通过简单和干净的结构方式,它可用于以整洁和结构化的方式创建一个样式表;CleverCSS与CSS最明显的区别是句法,它基于缩进而且不单调。

CleverCSS是什么?

CleverCSS是一个用于css的受Python启发的小型的标记语言,它可用于以整洁的和结构化的方式创建一个样式表。在很多方面它都比CSS2整洁和强大。

CleverCSS与CSS最明显的区别是句法:它基于缩进而且不单调。虽然这显然违反了Python的规则,它依然是组织样式的很好的主意。

一个小例子:

ul#comments, ol#comments:  margin: 0  padding: 0  li:    padding: 0.4em    margin: 0.8em 0 0.8em    h3:      font-size: 1.2em    p:      padding: 0.3em    p.meta:      text-align: right      color: #ddd

但是,你也可以使用属性:

立即学习“前端免费学习笔记(深入)”;

#main p:   font->    family: Verdana, sans-serif    size: 1.1em    style: italic

定义常量:

background_color = #ccc #main:  background-color: $background_color

隐式串接:

padding: $foo + 2 + 3 $foo - 2 // returns: padding: 15 8; if $foo is 10

计算:

// calculations with numbers / values42px + 2                    -> 44px10px * 2                    -> 20px1cm + 1mm                   -> 11mm(1 + 2) * 3                 -> 9 // string concatenationfoo + bar                   -> foobar"blub blah" + "baz"         -> 'blub blahbaz' // You can also calculate with numbers:#fff - #ccc                 -> #333333cornflowerblue - coral      -> #00169d // You can also add or subtract a number from it and it will do so for all three channels (red, green, blue):crimson - 20                -> #c80028

更多编程相关知识,请访问:编程教学!!

以上就是CleverCSS是什么?的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1615970.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月24日 05:09:52
下一篇 2025年12月24日 05:10:04

相关推荐

  • CSS属性前缀的作用是什么?

    作用:在一个新CSS属性还未成为标准时,让浏览器提前支持。w3c制定标准是很慢的;而浏览器商市场推广时间紧,如果一个属性已经够成熟了,就会在浏览器中加入支持;而为避免日后w3c公布标准时有所变更,加入一个私有前缀,来提前支持新属性。 使用过CSS3属性的同学都知道,CSS3属性都需要带各浏览器的前缀…

    好文分享 2025年12月24日
    000
  • css实现倒计时效果

    一、实现效果截图 (学习视频推荐:css视频教程) 二、实现原理  立即学习“前端免费学习笔记(深入)”; 看到上图效果应该很容易猜到原理,纯CSS的话使用轮播。通过改变图片的margin-top,再加上亿点点动画,亿点点数字图片,就实现了。 使用PS建数字图片: 然后 架结构 三、实现细节 1、纯…

    2025年12月24日 好文分享
    000
  • 你可能还不知道的7个惊人的css属性!

    推荐教程:CSS视频教程 学习CSS是构建好看网页的一种方式。 但是,在学习过程中,我们倾向于(大部分时间)限制自己,一遍又一遍地使用相同的属性。 毕竟,我们是一种习惯性的动物,我们会使用自己习惯且熟悉的东西。 因此,在这篇文章中,向你介绍7个 比较少见且好用的 CSS 属性,希望对你有所帮助。 1…

    2025年12月24日 好文分享
    000
  • 响应式css前端框架有哪些

    响应式css前端框架有:1、Semantic UI Framework;2、Less Framework;3、Foundation Framework;4、UIkit Framework;5、YUI Framework。 常用的响应式css前端框架(部分): (学习视频推荐:css视频教程) 1、S…

    2025年12月24日
    000
  • css盒模型有哪些属性

    css盒模型的属性有:1、margin属性;2、border属性;3、transparent属性;4、padding属性。 本教程操作环境:windows10系统、css3,本文适用于所有品牌的电脑。 CSS盒模型是定义元素周围的间隔、尺寸、外边距、边框以及文本内容和边框之间内边距的一组属性的集合。…

    2025年12月24日 好文分享
    000
  • css中的animation是什么

    css中的animation是一个简写属性,用于设置动画属性,如【animation-duration】,规定完成动画所花费的时间,该属性必须规定,否则动画时长为0,无法播放。 本教程操作环境:windows10系统、css3,本文适用于所有品牌的电脑。 animation 属性是一个简写属性,用于…

    2025年12月24日
    000
  • css为什么会出现清除浮动的问题

    css出现清除浮动的问题的原因:在标准流下面,父元素没有设置高度属性,且父元素中的子元素是浮动,由于浮动元素不再占用原文档流的位置,浮动元素的高度不会计算在父元素的高度中,即呈现塌陷的状态。 本教程操作环境:windows10系统、css3,本文适用于所有品牌的电脑。 一、为什么会出现清除浮动的问题…

    2025年12月24日
    000
  • css怎么改变hr标签颜色

    css改变hr标签颜色的方法:可以利用background-color属性,并结合border和height属性来实现。border属性是为了防止出现黑框,height属性是为了防止在firefox下不显示。 首先我们要知道,如果要修改hr标签的颜色,那么单纯用background-color属性是…

    2025年12月24日
    000
  • css圆角属性是什么

    css圆角属性是border-radius,通过该属性我们可以给任何元素制作圆角,例如【border-radius: 15px 50px 30px 5px】。如果我们在border-redius属性中只指定一个值,那么将生成四个圆角。 圆角属性即 border-radius 属性,通过该属性我们可以…

    2025年12月24日 好文分享
    000
  • css如何让盒子浮动

    css让盒子浮动的方法:可以利用float属性来实现,如【float: left;】。float属性可以让多个盒子水平排列成一行、居左或居右,盒子的宽度不再伸展,而是根据盒子里面的内容的宽度来决定。 盒子的浮动 在标准流中,一个块级元素在水平方向会自动伸展,知道包含它的元素的边接;而在竖直方向与相邻…

    2025年12月24日
    000
  • css的display属性有哪些

    css的display属性有:1、【display: none】把元素隐藏;2、【display: inline】把块级标签变成内联标签;3、【display: block】把内联标签变成块级标签。 css的display属性有: 1、display: none:把元素隐藏,物理位置也不在了. 2、…

    2025年12月24日 好文分享
    000
  • CSS如何实现自适应分隔线?方法介绍

    CSS如何实现自适应分隔线?下面CSS栏目就来给大家介绍一下CSS实现自适应分隔线的N种方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。 (推荐教程:CSS教程) 分割线是网页中比较常见的一类设计了,比如说知乎的更多回答 立即学习“前端免费学习笔记(深入)”; 这里的自适应是指…

    2025年12月24日 好文分享
    000
  • 详解CSS中的Media媒体查询

    一说到响应式设计,肯定离不开媒体查询media。一般认为媒体查询是CSS3的新增内容,实际上CSS2已经存在了,CSS3新增了媒体属性和使用场景(IE8-浏览器不支持)。本文将详细介绍媒体查询的内容。 (推荐教程:CSS教程) 媒介类型 在CSS2中,媒体查询只使用于和标签中,以media属性存在 …

    2025年12月24日
    000
  • css怎么使用外部艺术字

    因为系统自带的字体样式很少,并且多数不好看,所以有了引入外部艺术字体的想法。 (视频教程推荐:css视频教程) 方法如下: .shopName { /*使用你自己的字体*/ font-family:fusanghu; font-style: oblique; font-size: 29px; fon…

    2025年12月24日
    000
  • 使用css grid构建复杂布局的小技巧!(值得收藏)

    (推荐教程:CSS教程) 网格布局是现代CSS中最强大的功能之一。使用网格布局可以帮助我们在没有任何外部 UI 框架的情况下构建复杂的、快速响的布局。在这篇文章中,将会介绍所有我们需要了解的 CSS 网格知识 。 CSS 网格的基础知识 我们直接进入代码,如下所示,先写些标签,源码在这个链接里面:h…

    2025年12月24日 好文分享
    000
  • 你知道怎么使用纯css来实现下拉菜单效果么

    具体实现步骤如下: (视频教程推荐:css视频教程) 1、用ul 和 li标签写一个关联结构(ul 和 li的父子关系浑然天成,一般的关联结构都用它们) 服装 衬衫 棉袄 裤衩 2、对界面进行初始化 立即学习“前端免费学习笔记(深入)”; *{ padding: 0; margin: 0; } 3、…

    2025年12月24日
    000
  • 你知道怎么利用css实现内凹圆角么

    本文利用径向渐变来实现背景透明的内凹圆角。 (视频教程推荐:css视频教程) 基本线性渐变 div { height: 100px; width: 200px; background-image: linear-gradient(90deg, red, blue);}从左到右的红到蓝渐变 加百分比调…

    2025年12月24日
    000
  • css line-height值为150%或1.5值的区别

    下面css栏目给大家介绍一下line-height:150%与line-height:1.5的区别。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。 (推荐教程:CSS视频教程) 这是一个小小的不经意的问题,但是却常常被一些面试官提起。一般都会一下子进入懵逼状态,那让我们来看看区别在…

    2025年12月24日 好文分享
    000
  • 深入浅析css中的z-index

    z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。(推荐教程:CSS视频教程) 层级关系的比较 1. 对于同级元素,默认(或position:static)情况下文档流后面的元素会覆盖前面的。 立即学习“前端免费学习笔记(深入)”; 2. 对于同级元素…

    2025年12月24日 好文分享
    000
  • css实现图片在div中居中的方法有哪些

    本文为大家介绍了图片在div中居中的四种方法,希望对大家有所帮助。 方法一: (推荐教程:css视频教程) html: 立即学习“前端免费学习笔记(深入)”; @@##@@ css .title { width: 100%; font-size: 0; height: 10%;}.title .co…

    2025年12月24日
    000

发表回复

登录后才能评论
关注微信