CSS值和单位

最新推荐文章于 2024-05-29 22:27:45 发布

原创最新推荐文章于 2024-05-29 22:27:45 发布 · 270 阅读

1 ·

CC 4.0 BY-SA版权

html&CSS 专栏收录该内容

8 篇文章

订阅专栏

该博客主要介绍了CSS中的各类值及自定义变量。包括关键字，如none、inherit等；值涵盖绝对和相对长度单位、视区相关单位；计算值可通过calc()和attr()获取；颜色有关键字transparent和currentColor；还有角度、时间和频率单位，最后介绍了以--开头并通过var调用的自定义CSS变量。

1.关键字

有时，值用一个词表示，这叫关键字。none是一个非常常见的关键字，若想移除HTML文档中链接的下划线，可以这样写

a:link, a:visited {
    text-decoration: none;
}
//去掉下划线

a:link, a:visited{
    text-decoration: underline;
}
//加上下划线

全局关键字

inherit initial unset

inherit继承 initial改为初始值 unset是inherit和initial的通用替身。对继承的属性来说，unset的作用与inherit一样，对不继承的属性来说,unset的作用与initial一样

有个特殊的属性只接受这几个全局的关键字，all。all表示除direction和unicode-bidi之外的所有属性。如果一个元素声明 all: inherit ,意思是除direction和unicode-bidi之外的所有属性都从父元素上继承值。

如果只想几个属性值继承，那就一个一个的inherit

2.值

绝对的长度单位如px,in,cm这种就不再细说了。

dpi 在长为1英寸的范围内能显示的点数

相对长度单位 em和ex单位

1em = 元素的font-size属性值

1ex = 所用字体中小写字母x的高度（字体的不同也会导致ex值不同）

rem 与em类似，但是是根据根元素计算的

CSS3新增单位：ch 一个零加上空隙的宽度

视区相关的单位：vw 视区宽度单位 vh 视区高度单位单位的大小都是视区的高和宽除以100

vmin 视区宽度和高度的最小值 / 100 尺寸最小值单位

vmax 视区宽度和高度的最大值 / 100 尺寸最大值单位

3.计算值

p {
    width: calc(90% - 2em);
}

calc()函数计算

+ - 运算符的两侧必须有空格，避免与负数混淆

attr（）来获取HTML元素属性的值

p::before {
    content: "[" attr(id) "]";
}

在p元素之前插入id元素的值

4.颜色

RGB和RBGa应该都比较熟悉，就不再介绍

两个颜色的关键字

transparent 和 currentColor

transparent与rgba(0,0,0,0)等效，currentColor 当前元素color属性计算得到的值

5.角度

deg 度数圆是360deg

grad 百分度圆是400grad

rad 弧度圆是2pi

turn 圈数

6.时间和频率

s,ms,hz,khz

7.自定义CSS变量

html {
    --base-color: #639;
    --highlight-color: #AEA;
}

h1 {
    color: var(--base-color);
}

h2 {
    color: var(--highlight-color);
}

自定义值以--开头，并通过var调用