css语言基础--css属性值的规范

1.属性值的数据类型和数据单位

1.1长度：有两种长度单位，一种是相对长度单位，一种是绝对长度单位
1.1.1：相对长度单位：em、ex、px、gd、rem、vw、vh、ch

以下是几个常用的相对长度单位:
（1）em单位：em单位等于该元素font-size属性的计算值，一个例外情况是font-size属性值本身出现了em单位，这

时它参造其父元素的font-size属性值。
（2)ex单位：ex单位也被称为x-height。之所以叫x-height,是因为它通常等于小写字母x的高度，即使字体中没有x

字母，ex单位还是会有定义的。该单位取决于每个字体的规定。
（3）px单位：px也就是像素单位，它是相对于用户浏览器设备的分辨率，最常见的就是指计算机的显示器。

1.1.2：绝对长度单位:绝对长度单位只有在其输出介质的物理特性已知的情况下才有用。in(英寸)\cm\mm\pt(点)\pc(12pt)

1.2百分比值
百分比的值总是相对于另外一个值而言，如相对一个长度。如果一个属性允许使用百分比作为属性值，那么该属性也肯定定

义了百分比所相对的绝对值。这个绝对值可以是同一元素的另外一个样式属性的值，也可以是其父元素的样式属性值，或是

格式化环境的值。
如:line-height属性的百分值就是相对于元素本身的font-size属性值。下面的代码中，p元素的line-height属性的计算值

是12px。
p{font-size:10px;line-height:120%;}
如果根元素的样式属性指定了百分比值，并且该百分比值又被定义为相对某个属性的继承值，那么结果值就是百分比乘以

那个属性的初始值。
1.3颜色
颜色可以用多种方式表示，可以是名称，也可以是RGB数字或HSL数字。

1.3.1颜色名称关键字
常见的有white、green、red等，当然用户也可以使用svg颜色名称关键字等。如:p{color:red;}

1.3.2RGB颜色模型（用在颜色的数字表示中）
如:em{color:#f00}（16进制表示法）
em{color:#fff000}
em{color:rgb(255,0,0)}函数表示法

1.3.3RGBA颜色模型
RGBA颜色模型是对RGB颜色模型的扩展，包括alpha通道(即透明度(范围：0到1))。
例子:将背景颜色设置为具有50%透明度的红色，可以在样式表中包含以下两个css声明中任何一个。
background-color:rgba(255,0,0,0.5);/background-color:rgba(100%,0,0,0.5);

1.3.4HSL颜色模型
HSL是Hue(色相)、Saturation(饱和度)、Lightness(亮度)的简称。HSL把颜色描述在双圆锥体内的点，这个双圆锥

的中心轴取值为自底部的黑色到顶部白色而在他们中间是灰色。
hsl颜色模型格式:hsl(h,s,l);
h是一个色盘中的颜色，色彩选择通过度数来确定，0度是红色，120度是绿色，240是蓝色。
s是该色彩使用了多少，用百分比表示。0%表示灰度，也就是没有使用该颜色，而100%表示该颜色饱满。
l是该色彩有多亮，也用百分比表示。较低较暗，较高较亮。0%与100%分别表示为黑与白。
如：定义红色背景:background-color:hsl(0,100%,50%);

1.3.5HSLA颜色模型
对HSL颜色模型的扩展。与HSL颜色模型相似，不过多了最后一个透明度而已。
如：定义透明度为50%的红色背景：background-color:hsl(0,100%,50%,0.5);

1.4其他数据类型
css定义的一些数据类型目前一般用得较少，很多数据类型一般用于语音介质
1.4.1角度(deg、grad、rad、turn)
1.4.2时间(s、ms)时间不能为负值
1.4.3频率(Hz、kHz)频率不能为负值

2.函数
2.1.1atrr()函数
该函数用于获取一个样式属性的值，语法如下:attr(ident,[,<type>[,<value>]]).第一个参数ident指定样式属性名，将获
取该元素的ident样式属性的值。还可以指定命名空间前缀，以限定属性。名称空间和属性之间用“|”分割。
第二个参数type是可选的，如果第三个参数出现，那么第二个参数就必须出现，该参数指示浏览器怎么解释属性值。第二个
参数可以是(string,url,color,integer,number,length等)。如果第二个参数缺失，那么默认是string。
如:width:attr(length,em);//默认值是0

2.1.2url()函数
格式是使用url()函数，括号中包括uri地址,地址可以是绝对地址，也可以是相对地址。如:background:url(yellow.jpg)

2.1.3calc()函数
该函数用来计算长度值，任何长度值都可以进行计算，包括相对长度与绝对长度。
如:width:calc(100%3-2*1em-2*1px);

2.1.4counter()函数
计数器使用标识符表示。要引用一个计数器的值，可以采用下面两种语法格式:
(1)counter(标识符) "符号1" "符号2" ... "符号n"
(2)counter（标识符,列表样式类型）"符号1" "符号2" ... "符号n"
要引用有名称相同的嵌套计数器序列，也有两种语法格式：
(1)counters(标识符,字符串) "符号1" "符号2" ... "符号n"
(2)counters（标识符,字符串,列表样式类型）"符号1" "符号2" ... "符号n"
css中，计数器只可以有content属性引用。

3.属性值的计算步骤
一个属性最终值的获得要经过4步计算：
（1）根据css规则中定义的值(称为"指定值")\(2)被转换成一个用于继承的值(称为"计算值")\(3)在需要的情况下转换成一
个绝对的值(称为"使用值")\(4)根据本地环境的限制条件最终转换成另一个值(称为"呈现值")
3.1指定值：属性的初始值
3.2计算值：指定值经过计算变成计算值
3.3使用值：将计算值和依赖关系综合考虑后获得的绝对值
3.4实际值：依据显示介质后的值

4.属性的继承

文档树种元素的某些样式属性的属性值可以被子元素继承，css规范为元素的每一个样式属性都规定了它是否被继承。当发生继承时，
继承的是父元素的计算值，而从父元素那里继承的计算值将变成子元素的指定值和计算值。
如:body{font-size:10pt;}h1{font-size:130%;}
4.1指定属性值为inherit
有些css属性可以被继承，但有些不能被继承。为了解决这部分属性继承问题，css规定每一个属性可以有一个为关键字inherit的
指定值，即对于任何给定的元素，该属性的值和它的父元素相同属性的计算值相同。但是，有一个例外，如果inherit被设置在根
元素上，没有父元素就不能继承了，那么该属性将被赋予初始值。定义属性值inherit可以继承父元素的值。
如:body{color:black;baockground:white;}  *{color:inherit!important;backgound:transparent!important;}color的值
将从body元素继承。