您现在的位置是:主页 > 网站建设 > 网站建设

【转译】介 兰州网站优化绍CSS变量

邢台网站优化h-5321CSS(4)CSS变量(1)自定义属性(1)人已围观

简介CSS是现在网站建设一种语言,也是现在最为常用的建站方式。在CSS中存在真很多变量,这些变量可以让建设网站更加

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;
              }

很赞哦! ()

文章评论

站点信息

  • 建站时间:2018年04月24日
  • 微信公众号:扫描二维码,关注我们
  • 站点地图:xml地图/html地图