CSS-css

时间:2019-03-15
本文章向大家介绍CSS-css,主要包括CSS-css使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

为什么使用 css variables

  • easier to get started (no transpiling)
  • have access to the DOM
    1.local scopes
    2.change width Js
    3.ideal for responsiceness
  • perfect for themes

什么是 CSS 变量

CSS 变量当前有两种形式:

  • 自定义属性。
    这些属性使用--where的特殊格式作为名字。例如--example-variable: 20px;即是一个 css 声明语句。意思是将 20px 赋值给--example-varibale 变量。
  • 变量。
    就是拥有合法标识符和合法的值。可以被使用在任意的地方。可以使用 var()函数使用变量。例如:var(--example-variable)会返回--example-variable 所对应的值

总结:
带有前缀--的属性名,比如--example--name,表示的是带有值的自定义属性,其可以通过 var()函数使用。

补充

  • CSS 自定义属性是可以级联的:每一个自定义属性可以多次出现,并且变量的值将会借助级联算法和自定义属性值运算出来。
  • CSS 变量并不支持 !important 声明,注意只是声明。

    • 初始值 *see prose
    • 适用元素 *all elements
    • 是否是继承属性 *yes
    • 适用媒体 *all
    • 计算值 *as specified with variables substituted
    • Animation type *discrete
    • 正规顺序 *per grammar

CSS 变量的继承

html

<div class="one">
  <div class="two">
    <div class="three"></div>
    <div class="four"></div>
    <div></div>
  </div>
</div>
css 

.two {
  --test: 10px;
}
.three {
  --test: 2em;
}

在这个例子中,var(--test)的结果是:

  • class="two" 对应的节点: 10px
  • class="three" 对应的节点: element: 2em
  • class="four" 对应的节点: 10px (inherited from its parent)
  • class="one" 对应的节点: 无效值, 即此属性值为未被自定义 css 变量覆盖的默认值

:root

:root 这个 CSS 伪类匹配文档树的根元素。
对于 HTML 来说,:root 表示 元素,除了优先级更高之外,与 html 选择器相同。 所以我们把自定义属性写在:root{}里面,html 标签里面的元素会继承的。

html

<body>
  <section id="container">
    <div class="item1"></div>
    <div class="item2"></div>
    <div class="item3"></div>
    <div class="item4"></div>
  </section>
</body>
css 

#container {
  width: 400px;
  height: 150px;
  background-color: #ffeead;
  border: 1px solid #666;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}
#container > div {
  width: 70px;
  height: 50px;
}
#container div:nth-child(2n) {
  background-color: lightgreen;
}
#container div:nth-child(2n + 1) {
  background-color: lightpink;
}

声明变量

css 

:root {
  --green: lightgreen;
  --lightpink: lightpink;
}

#container div:nth-child(2n) {
  background-color: var(--green);
}

#container div:nth-child(2n + 1) {
  background-color: var(--lightpink);
}

background-color 的值用 var()代替实现相同的效果

CSS 层级变量

局部变量会在作用范围内覆盖全局变量。

css 

:root {
  --green: lightgreen;
  --lightpink: lightpink;
}

#container div:nth-child(2n) {
  background-color: var(--green);
}
#container div:nth-child(2n + 1) {
  background-color: var(--lightpink);
}

.item1 {
  --green: black;
  background-color: var(--green) !important; /*选择器权重  100+10>10 所以加了!important*/
}

使用多个变量

css

:root{
      --word1:"are";
      --word2:"you";
      --word3:"ok";
}

.item2::before {
      content: var(--word1) " " var(--word2) " " var(--word3);
}

完~~

上一页 下一页

原文地址:http://www.manongjc.com/article/73050.html