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

  1 1.属性值的数据类型和数据单位
  2 
  3     1.1长度：有两种长度单位，一种是相对长度单位，一种是绝对长度单位
  4         1.1.1：相对长度单位：em、ex、px、gd、rem、vw、vh、ch
  5 
  6             以下是几个常用的相对长度单位:
  7             （1）em单位：em单位等于该元素font-size属性的计算值，一个例外情况是font-size属性值本身出现了em单位，这    
  8 
  9                   时它参造其父元素的font-size属性值。
 10             （2)ex单位：ex单位也被称为x-height。之所以叫x-height,是因为它通常等于小写字母x的高度，即使字体中没有x    
 11 
 12                      字母，ex单位还是会有定义的。该单位取决于每个字体的规定。
 13             （3）px单位：px也就是像素单位，它是相对于用户浏览器设备的分辨率，最常见的就是指计算机的显示器。
 14                 
 15         1.1.2：绝对长度单位:绝对长度单位只有在其输出介质的物理特性已知的情况下才有用。in(英寸)\cm\mm\pt(点)\pc(12pt)
 16 
 17     1.2百分比值
 18         百分比的值总是相对于另外一个值而言，如相对一个长度。如果一个属性允许使用百分比作为属性值，那么该属性也肯定定    
 19 
 20         义了百分比所相对的绝对值。这个绝对值可以是同一元素的另外一个样式属性的值，也可以是其父元素的样式属性值，或是        
 21 
 22         格式化环境的值。
 23           如:line-height属性的百分值就是相对于元素本身的font-size属性值。下面的代码中，p元素的line-height属性的计算值    
 24 
 25             是12px。
 26             p{font-size:10px;line-height:120%;}
 27           如果根元素的样式属性指定了百分比值，并且该百分比值又被定义为相对某个属性的继承值，那么结果值就是百分比乘以    
 28 
 29           那个属性的初始值。
 30     1.3颜色
 31         颜色可以用多种方式表示，可以是名称，也可以是RGB数字或HSL数字。
 32 
 33         1.3.1颜色名称关键字
 34             常见的有white、green、red等，当然用户也可以使用svg颜色名称关键字等。如:p{color:red;}
 35 
 36         1.3.2RGB颜色模型（用在颜色的数字表示中）
 37             如:em{color:#f00}（16进制表示法）
 38                em{color:#fff000}
 39                em{color:rgb(255,0,0)}函数表示法
 40 
 41         1.3.3RGBA颜色模型
 42             RGBA颜色模型是对RGB颜色模型的扩展，包括alpha通道(即透明度(范围：0到1))。
 43             例子:将背景颜色设置为具有50%透明度的红色，可以在样式表中包含以下两个css声明中任何一个。
 44                 background-color:rgba(255,0,0,0.5);/background-color:rgba(100%,0,0,0.5);
 45 
 46         1.3.4HSL颜色模型
 47             HSL是Hue(色相)、Saturation(饱和度)、Lightness(亮度)的简称。HSL把颜色描述在双圆锥体内的点，这个双圆锥    
 48 
 49             的中心轴取值为自底部的黑色到顶部白色而在他们中间是灰色。
 50             hsl颜色模型格式:hsl(h,s,l);
 51                 h是一个色盘中的颜色，色彩选择通过度数来确定，0度是红色，120度是绿色，240是蓝色。
 52                 s是该色彩使用了多少，用百分比表示。0%表示灰度，也就是没有使用该颜色，而100%表示该颜色饱满。
 53                 l是该色彩有多亮，也用百分比表示。较低较暗，较高较亮。0%与100%分别表示为黑与白。
 54             如：定义红色背景:background-color:hsl(0,100%,50%);
 55 
 56         1.3.5HSLA颜色模型
 57             对HSL颜色模型的扩展。与HSL颜色模型相似，不过多了最后一个透明度而已。
 58                 如：定义透明度为50%的红色背景：background-color:hsl(0,100%,50%,0.5);
 59                 
 60     1.4其他数据类型
 61         css定义的一些数据类型目前一般用得较少，很多数据类型一般用于语音介质
 62         1.4.1角度(deg、grad、rad、turn)
 63         1.4.2时间(s、ms)时间不能为负值
 64         1.4.3频率(Hz、kHz)频率不能为负值    
 65 
 66 2.函数
 67     2.1.1atrr()函数
 68         该函数用于获取一个样式属性的值，语法如下:attr(ident,[,<type>[,<value>]]).第一个参数ident指定样式属性名，将获 
 69                 取该元素的ident样式属性的值。还可以指定命名空间前缀，以限定属性。名称空间和属性之间用“|”分割。
 70         第二个参数type是可选的，如果第三个参数出现，那么第二个参数就必须出现，该参数指示浏览器怎么解释属性值。第二个
 71         参数可以是(string,url,color,integer,number,length等)。如果第二个参数缺失，那么默认是string。
 72         如:width:attr(length,em);//默认值是0
 73 
 74     2.1.2url()函数
 75         格式是使用url()函数，括号中包括uri地址,地址可以是绝对地址，也可以是相对地址。如:background:url(yellow.jpg)
 76 
 77     2.1.3calc()函数
 78         该函数用来计算长度值，任何长度值都可以进行计算，包括相对长度与绝对长度。
 79         如:width:calc(100%3-2*1em-2*1px);
 80 
 81     2.1.4counter()函数
 82         计数器使用标识符表示。要引用一个计数器的值，可以采用下面两种语法格式:
 83             (1)counter(标识符) "符号1" "符号2" ... "符号n"
 84             (2)counter（标识符,列表样式类型）"符号1" "符号2" ... "符号n"
 85         要引用有名称相同的嵌套计数器序列，也有两种语法格式：
 86             (1)counters(标识符,字符串) "符号1" "符号2" ... "符号n"
 87             (2)counters（标识符,字符串,列表样式类型）"符号1" "符号2" ... "符号n"
 88                css中，计数器只可以有content属性引用。
 89 
 90 3.属性值的计算步骤
 91     一个属性最终值的获得要经过4步计算：
 92         （1）根据css规则中定义的值(称为"指定值")\(2)被转换成一个用于继承的值(称为"计算值")\(3)在需要的情况下转换成一
 93              个绝对的值(称为"使用值")\(4)根据本地环境的限制条件最终转换成另一个值(称为"呈现值")
 94     3.1指定值：属性的初始值
 95     3.2计算值：指定值经过计算变成计算值
 96     3.3使用值：将计算值和依赖关系综合考虑后获得的绝对值
 97     3.4实际值：依据显示介质后的值
 98 
 99 4.属性的继承
100 
101     文档树种元素的某些样式属性的属性值可以被子元素继承，css规范为元素的每一个样式属性都规定了它是否被继承。当发生继承时，
102     继承的是父元素的计算值，而从父元素那里继承的计算值将变成子元素的指定值和计算值。
103         如:body{font-size:10pt;}h1{font-size:130%;}
104     4.1指定属性值为inherit
105        有些css属性可以被继承，但有些不能被继承。为了解决这部分属性继承问题，css规定每一个属性可以有一个为关键字inherit的
106        指定值，即对于任何给定的元素，该属性的值和它的父元素相同属性的计算值相同。但是，有一个例外，如果inherit被设置在根
107            元素上，没有父元素就不能继承了，那么该属性将被赋予初始值。定义属性值inherit可以继承父元素的值。
108         如:body{color:black;baockground:white;}  *{color:inherit!important;backgound:transparent!important;}color的值 
109                   将从body元素继承。