【转译】介绍CSS变量

时间:2015-03-30 13:38:47 浏览:829次

    CSS是现在网站建设一种语言,也是现在最为常用的建站方式。在CSS中存在真很多变量,这些变量可以让建设网站更加便捷。CSS变量给我们很多相同的优势,经典的变量提供了编程语言:方便、代码可重用性、更可读的代码库、提高预防错误措施。

    例如:

    :root {
           base-font-size: 16px;
           link-color: #6495ed;
           }
    p {
       font-size: var( --base-font-size );
      }
    a {
       font-size: var( --base-font-size );
       color: var( --link-color );
       }

    第一,基础知识。

    CSS有三个主要组件时,你应该知道使用CSS变量:

    1、自定义属性

    2、var()Functİon

    3、:root伪类

    4、自定义属性

    我们已经知道这个标准类的CSS属性包含了color、 margin、width以及font-size。那么下面的例子使用了colorCSS属性:

    body {color: #000000; /* The "color" CSS property */}

    自定义属性只是意味着我们作者定义属性的名字,定义一个自定义属性名称,我们需要用两个破折号(前缀--)。如果我们想要创建一个自定义属性的名称text-color有黑色的颜色值(#000000十六进制代码),这就是我们可以做的:

    :root {--text-color: #000000; /* A custom property named "text-color" */}

    var()函数,为了让我们的自定义属性应用于我们的工作,我们必须使用 var()Functİon,否则浏览器不会知道他们的存在。如果我们想使用这些,我们就会知道其价值--text-color自定义属性在我们 p、 h1、 h2这样式规则,然后我们需要使用 var()函数如下:

    :root { --text-color: #000000; }
    p {
       color: var( --text-color );
       font-size: 16px;
       }
    h1 {
        color: var( --text-color );
        font-size: 42px;
       }
    h2 {
        color: var( --text-color );
        font-size: 36px;
        }

    上面的例子是相当于:

    p {
       color: #000000;
       font-size: 16px;
       }
    h1 {
        color: #000000;
        font-size: 42px;
        }
    h2 {
        color: #000000;
        font-size: 36px;
        }

    :root伪类,我们需要一个地方来把我们的自定义属性。我们可以指定自定义属性在任何样式规则,但很多时候不是一个好主意,因为指定自定义属性到处是礼物可维护性和CSS-readability挑战。:root伪类代表了顶级的HTML文档。这把我们的自定义属性选择器是一个很好的地方,因为我们可以通过这些预见覆盖自定义属性值其他更有特异性的CSS选择器。

    CSS变量的好处,可维护性。在这给定web开发项目中,我们常常会重用特定CSS属性值。我们会经常重用colors,line heights,margins,font sizes等变量值。

    这里有四个样式规则的一个例子可能会受益于CSS变量:

    h1 {
        margin-bottom: 20px;
        font-size: 42px;
        line-height: 120%;
        color: gray;
        }
    p {
       margin-bottom: 20px;
       font-size: 18px;
       line-height: 120%;
       color: gray;
       }
    img {
         margin-bottom: 20px;
         border: 1px solid gray;
         }
    .callout {
              margin-bottom: 20px;
              border: 3px solid gray;
              border-radius: 5px;
              }

    问题表面这就当我们需要改变某些属性值。如果我们手动更改这个值,它可能需要我们大量的时间,还有一个巨大的机会我们将这个错误地方,尤其是我们的样式表是巨大的。同样的,如果我们执行一个批处理查找和替换,我们可能会无意中这就会影响其他样式规则。

    我们可以使用CSS变量改写上面的例子:

    :root {
           --base-bottom-margin: 20px;
           --base-line-height:   120%;
           --text-color:         gray;
           }
    h1 {
        margin-bottom: var( --base-bottom-margin );
        font-size: 42px;
        line-height: var( --base-line-height );
        color: var( --text-color );
        }
    p {
       margin-bottom: var( --base-bottom-margin );
       font-size: 18px;
       line-height: var( --base-line-height );
       color: var( --text-color );
       }
    img {
         margin-bottom: var( --base-bottom-margin );
         border: 1px solid gray;
         }
    .callout {
              margin-bottom: var( --base-bottom-margin );
              border: 1px solid gray;
              border-radius: 5px;
              color: var( --text-color );
             }

    现在想象一下你的客户说你屏幕上的文字是难以阅读,因为文本的颜色太轻了。在这种情况下,我们只需要更新在我们的CSS这一行:--text-color: black;

    这-66%少一行代码编辑,在以前的样式规则集的上下文中一行与行。同样,使用CSS变量让我们更容易,当我们想与我们的实验设计。当我们开发这个项目,我们可以快速测试的颜色值、目的和底部边距值都在一个地方,我们可以看到整体的影响。

    CSS改善可读性,自定义属性可以帮助使我们的样式表达易于阅读,它可以使我们的CSS属性声明更有意义。比较:

    background-color: yellow;
    font-size: 18px;

    相对于这个:

    background-color: var( --highlight-color );
    font-size: var( --base-font-size );

    定义属性的名字--base-font-size和--highlight-color甚至当我们阅读别人的代码时,我们立刻知道属性值在做什么。要记住的事情和大小写敏感,自定义属性区分大小写(与常规CSS属性)。

    :root {
           --main-bg-color: green;
           --MAIN-BG-COLOR: RED;
           }
    .box {background-color: var( --main-bg-color ); /* green background */}
    .circle {
             BACKGROUND-COLOR: VAR(--MAIN-BG-COLOR ); /* red background */
             border-radius: 9999em;
             }

    .box,
    .circle {
             height: 100px;
             width: 100px;
             margin-top: 25px;
             box-sizing: padding-box;
             padding-top: 40px;
             text-align: center;
             }
    在上面的例子中,实际上有两个已定义的自定义属性:--main-bg-color和--MAIN-BG-COLOR。

    自定义属性值的决议,当一个自定义属性被声明为不止一次分配遵循正常的CSS层叠和继承规则。在下面的示例中,该链接将被指派的颜色red因为.container选择器相比有更高的特异性:root和 body。

    html
    <body>
    <div class="container">
    <a href="">Link</a>
    </div>
    </body>

    CSS

    :root {--highlight-color: yellow;}
    body {--highlight-color: green;}
    .container {--highlight-color: red;}
    a {color: var( --highlight-color );}

    然而,如果我们删除.container从我们的代码样式规则,链接将被指派的颜色green因为body成为下一个选择器匹配我们的链接。

    回退值,你可以分配一个后备属性值时使用var()函数表示法。简单地提供后备属性值作为一个额外的参数用逗号划(,)。在以下示例中,.box元素应该是呈现黑色背景。然而,由于有一个错误引用自定义属性的名字时,使用这个呈现背景将这个回退值(即red)。

    html
    <div class="box">A Box</div>

    CSS
    div { --container-bg-color: black;}
    .box {
          width: 100px;
          height: 100px;
          padding-top: 40px;
          box-sizing: padding-box;
          background-color: var( --container-bf-color, red );
          color: white;
          text-align: center;
          }

    避免这种情况的一个好方法就是想出描述性定义属性的名称。例如,命名上面的自定义属性--small-button-width使其不当使用不太可能。

    (转载请注明转自:www.wangzhan.net.cn/news/n1643.htm,谢谢!珍惜别人的劳动成果,就是在尊重自己!)

 

上一篇:新站排名三部曲之破而后立,打破平衡原理

下一篇:杀死你网站SEO的5个技术

返回列表

网站建设知识

品牌创意网站建设 上市公司网站建设 大型门户类网站建设 全方位网站运营代理
企业官方网站建设 B2C电子商务网站建设 专题活动网站(MINISITE)

更多 +联系我们

24小时服务热线:400-1180-360

业务 QQ:  444961110传真: 0311-80979256

渠道合作:  444961110@qq.com

更多 +关于我们

河北供求互联信息技术有限公司(河北供求网)诞生于2003年4月,是康灵集团旗下子公司,也是河北省首批从事网站建设、电子商务开发,并获得国家工业和信息化部资质认证的企业。公司自成立以来,以传播互联网文化为已任, 以高科技为起点,以网络营销研究与应用为核心,致力于为各企事业单位提供网络域名注册、虚拟主机租用、网站制作与维护、网站推广和宣传、网站改版与翻译、移动互联网营销平台开发与运营、企业邮局、网络支付、系统集成、软件开发、电子商务解决方案等优质的信息技术服务,与中国科学院计算机网络信息中心、腾讯、百度、阿里巴巴、搜狗、360、电信、联通、中国数据、万网、中资源、阳光互联、点点客、北龙中网、电信通等达成战略合作伙伴关系。

版权所有 © 河北供求互联信息技术有限公司-最优秀的石家庄网站建设公司,为您提供石家庄网站建设、网站推广等优质服务.   
服务热线:400-1180-360 传真:0311-80979256 增值电信业务经营许可证:冀B2-20105159 冀ICP备09010972号

在线留言
免费试用
扫一扫

扫一扫
赠送神秘大礼

全国免费服务热线
400-1180-360

返回顶部