css中的数据类型.docxVIP

CSS中的数据类型在CSS中的属性值有些是使用数字的。为了让用户客户端能够确定这个值有效，就需要确保它的值是符合规范类型中的一个。这些就被称为数据类型，规范中通常写成这样this。有两种数据类型：特定的和通用的。特定数据类型是一个属性或者一组属性。例如transform-function数据类型被用在transform属性的值上。另一方面，通用数据类型是可以用在任何特定的属性上。比如length数据类型，可以设置一个10px的值，它可以用在margin、font-fize或者其它可以用数字值的属性。文本(Textual)：关键词(Keywords):?ident自定义关键词：custom-ident引用字符串：?string资源定位器：url基本数字(Basic Numeric)整数(Integers)：integer实数：number比率：ratio百分比：percentage维度(Dimensions)距离(Distances)：length角度：angle延迟时间(Duration)：duration频率(Frequency)：frequency分辨率(Resolution)：resolution其它(Other)颜色：color图片：image位置：position文本数据类型关键词(Keywords)ident数据类型指的是在CSS中预定义的关键词。这包括一些独特的某些属性的值，比如display属性，以及CSS中的initial、inherit和unset.foo{border-color: red;position: inherit;}这些关键词都有大小写之分，而且必须不能带引号，如果带引号，其会被误解为string数据类型。自定义关键词custom-ident(也称为user-ident)数据类型，指的是作者在样式表中已定义的关键词。除了CSS预定义的关键词之外的都是一个有效的custom-ident。自定义关键词最常见的例子是animation-name属性的值。这个属性可以接受自定义动画的名字。@keyframeshulkify{?from{ color: pink;transform:scale(1);}?to{ color: green;transform:scale(2);}?}.bruce-banner{ animation-name:hulkify;}引用字符串string数据类型是指任何引用的字符串。引号内的文本可以是任何Unicode字符串。.foo::after{content:Hello, world!;}.foo::before{content:We can add quotes within quotes \A And move to a separate line;}资源定位器url数据类型用来引用一个资源文件或片段(fragment)。这个数据类型通常是使用url()函数，但在某些情况下也可以使用string，特别是在@import规则中。url数据类型有三种类型：绝对路径：是指定一个协议或域名。引用的资源不一定是在样式表的相同域名下相对路径：引用的文件是相对于引用样式表的位置片段中URL（Fragment URLs）：指元素在文档中的主机。引用带ID的元素，而不是一个文件路径比如下面的示例：/* 绝对路径 */@importurl(/css?family=Source+Sans+Pro:400);/* 相对路径 */.foo{ background-image:url(../img/bg.png);}@importcomponents/buttons.css;/* Fragment URL */.bar{ filter:url(#blurFilter);}基本数字类型整数integer数据类型定义和数学上的整数是一样的。它是一个整数，不是一个小数。可以是正值也可以是负值。第一位数前可以添加-或+前缀。规范中规定，不显式添加任何前缀符号，表示前面的是+。.foo{z-index:10;}.foo{z-index: +10;}.bar{z-index: -10;}实数number数据类型是一个实数。它可以是integer、0或者带小数的部分的小数。实数也像整数一样，可以是正值也可以是负值，如果没有显式设置，表示的是正数，其符号也是写在第一个数字前。.foo{line-height:3;}.bar{line-height: -2.5;}.foo{line-height: +5.5;}比率ratio数据类型指定了两个数字之间的关系，特别是两个正整数(integer)。虽然在数学中比率可以以不同的方式书写，但在CSS它们主要写成integer / integer。比率的数据类型通常用于媒体