值和单位
文章目录
一、关键字、字符串和其他文本值
1.关键字
有时,值用一个词表示,这叫关键字。例如none、normal、underline等。
全局关键字
CSS3定义了几个“全局”关键字,规范中的每个属性都能使用:inherit、initial和unset。
inherit关键字 把元素某个属性的值设为与父元素同一属性的值一样。即这个关键字强制继承,即便是在通常情况下不继承时。
代码如下(示例):
#toolbar{background: blue;color: white;}
//通常a标签未设置时未点击颜色为蓝色
<div id="toolbar">
<a href="css4_0404.html">One</a> | <a href="css4_0406.html">Two</a> |
<a href="css4_0405.html">Three</a>
</div>
效果:
代码如下(示例):
#toolbar{background: blue;color: white;}
#toolbar a {color:inherit;}//强制继承值
<div id="toolbar">
<a href="css4_0404.html">One</a> | <a href="css4_0406.html">Two</a> |
<a href="css4_0405.html">Three</a>
</div>
效果:
initial关键字 把属性的值设为预定义的初始值,相当于“重设”值。
unset关键字 是inherit和initial的通用替身。对于继承的属性来说,unset的作用相当于inherit;对于不继承的属性来说,unset的作用和initial一样。
all表示除direction和unicode-bidi之外的所有属性。all只接受inherit、initial和unset这三个全局关键字 。
2.字符串
字符串值指在单引号和双引号内的任意字符序列,定义可取得值时以表示。
3.URL
引用URL的一般格式如下:
url(protocol://server/pathname)//绝对位置
url(pathname)//相对位置
4.图像
图像值引用的是图像,句法使用<image>表示。<image>表示下面三种值中的一个:
- <url>指向外部资源的URL标识符
- <image-set>一系列图像,根据图中的条件选择
- <gradient>线性渐变或径向渐变图像,可以是单个的,也可以是重复的。
5.标识符
有些属性接收标识符值,即用户定义的某种标识符。标识符本身是词,而且区分大小写。
二、数字和百分数
1.整数
整数值由一到多个数组成,前面还可以有+或-号,分别表示正数和负数。在取值语法中,整数值用<integer>表示。
2.数字
数字值是<integer>或实数,后者指整数后跟一个点号,再跟一些整数。在取值句法中,数字值用<number>表示。
3.百分数
百分数值是在<number>后跟一个百分号(%),在取值句法中用<percentage>表示。
4.弹性值
弹性值是<number>后跟fr。单位弹性值是1fr。
三、距离
长度单位分为两种:绝对长度单位和相对长度单位。
1.绝对长度单位
绝对长度单位有七个,包括:英尺(in)、厘米(cm)、毫米(mm)、四分之一毫米(q)、点(pt)、派卡(pc)和像素(px)。
2.分辨率单位
随着媒体查询和响应式设计的出现,为了描述显示器的分辨率,出现了三个新的单位:点每英寸(dpi)、点每厘米(dpcm)和点每像素单位(dppx)。
3.相对长度单位
相对长度单位中的“相对”是指其长度是相对其他东西而言的,相对长度的实际值(或绝对值)根据不受其控制的因素而变。
em和ex单位
按CSS定义,1em等于元素的font-size属性值。理论上,1em等于所用字体中小写字母m的宽度 。如果使用em设定字号,那么它相对父元素的字号而言。
ex值所用字体中小写字母x的高度。
rem单位
rem也基于声明的字号。em相对于元素的字号计算,而rem是指相对于根元素(html)计算 。rem实际作用相当于重设字号。
代码如下(示例):
<p> This paragraph has the same font size as the root element thanks to inheritance.</p>
<div style="font-size: 30px; background: silver;">
<p style="font-size: 1em;">This paragraph has the same font size as its parent element.</p>
<p style="font-size: 1rem;">This paragraph has the same font size as the root element.</p>
</div>
效果:
ch单位
CSS把ch单位定义为所用字体中一个零的进度。
视区相关的单位
CSS新增了三个与视区尺寸相关的单位,这些单位根据视区的尺寸计算。视区单位包括:
- 视区宽度单位(vw):这个单位根据视区的宽度计算,然后除以100。
- 视区高度单位(vh):这个单位根据视区的高度计算,然后除以100。
- 视区尺寸最小单位(vmin):这个单位等于视区宽度或高度的1/100,始终取宽度和高度中较小的那个。
- 视区尺寸最大单位(vmax):这个单位等于视区宽度或高度的1/100,始终取宽度和高度中较大的那个。
代码如下(示例):
div {height: 50vh; width: 33vw; background: gray;}
body {height: 350px; width: 750px; border: 2px solid #444;}//视区大小
div {width: 50%; height: 33%;}
<div>A div! It is half the width of the viewport and a third the height. Six of them could create a full-viewport UI.</div>
<p>A paragraph which follows the single <code>div</code> we actually have in this example.</p>
效果:
四、计算值
CSS提供了cale()值,括号中允许使用的运算符有+、-、*、/,以及括号。
cale()限制:
- +和-号两侧的值必须使用相同的单位类型,或者是<number>和<integer>。
- *计算的两个值中必须有一个是<number>。
- /计算的两个值中右边的那个必须是<number>。左边是<integer>时,结果为一个<number>值,否则,结果的单位与左边的值一样。
- 任何情况下都不能除以零。
五、属性值
attr()可以使用样式对应的元素上的HTML属性值。
六、颜色
1.具名颜色
基本的具名颜色包括:aqua、gray、Navy、silver、black、green、Olive、teal、blue、lime、Purple、white、fuchsia、maroon、Red、yellow。
2.RGB和RGBa颜色
函数式RGB颜色
有两种颜色值使用函数值RGB表示法。
语法:
rgb(color) /*color是三个值,可以是百分数或整数*/
代码如下(示例):
rgb(100%,100%,100%);
rgb(0,0,0);
RGBa颜色
这种表示法在RGB的三个通道后面增加了一个alpha值,alpha(不)的取值范围为0~1。
代码如下(示例):
rgba(100%,100%,100%,0.5);
rgba(0,0,0,0.5);
十六进制RGB值
语法:
#RRGGBB
代码如下(示例):
h1{color:#000;}/*如果每个十六进制中的两个数字相等,可以使用简短表示法*/
h2{color:#999aaa;}
十六进制RGBa值
代码如下(示例):
p.one{color:#000000FF;}
3.HSL和HSLa颜色
HSL是Hue(色相)、Saturation(饱和度)和Lightness(明度)的简称,其中色相是角度值,取值范围是0-360,饱和度是从0(无饱和度)-100(完全饱和)的百分数,明度是从0(全暗)-100(全明)的百分数。
代码如下(示例):
p.one{color:hsl(0,0%,0%);}
p.two{color:hsla(0,0%,0%,1);}
4.颜色关键字
transparent和currentColor可以在任何允许使用颜色值的地方使用。transparent表示完全透明的颜色,currentColor是当前元素color属性计算得到的值。
七、角度
角度一般用<anger>表示,包括:
- deg:度数,完整的圆周是360度。
- grad:百分度,完整的圆周是400百分度。
- rad:弧度,完整的圆周是2π。
- turn:圈数,一个完整的圆周是一圈。
八、时间和频率
<time>单位s(秒)或ms(毫秒),<frequency>单位Hz(赫兹)或kHz(千赫兹)。
代码如下(示例):
a[href] {transition-duration:2.4s;}
h1 {pitch:128hz;}
九、位置
位置值用于指定图像在背景区域中的位置,使用<position>表示。
十、自定义值
自定义标识符以两个连字符开头(–)。调用的方法是使用var()值类型。