CSS中的数据类型

特别声明:如果您喜欢小站的内容,可以点击申请会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!或添加QQ:874472854(^_^)

在CSS中的属性值有些是使用数字的。为了让用户客户端能够确定这个值有效,就需要确保它的值是符合规范类型中的一个。这些就被称为数据类型,规范中通常写成这样<this>

有两种数据类型:特定的通用的。特定数据类型是一个属性或者一组属性。例如<transform-function>数据类型被用在transform属性的值上。

另一方面,通用数据类型是可以用在任何特定的属性上。比如<length>数据类型,可以设置一个10px的值,它可以用在marginfont-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中的initialinheritunset(详细的可以阅读这篇文章)。

.foo {
    border-color: red;
    position: inherit;
}

这些关键词都有大小写之分,而且必须不能带引号,如果带引号,其会被误解为<string>数据类型。

自定义关键词

<custom-ident>(也称为<user-ident>)数据类型,指的是作者在样式表中已定义的关键词。除了CSS预定义的关键词之外的都是一个有效的<custom-ident>

自定义关键词最常见的例子是animation-name属性的值。这个属性可以接受自定义动画的名字。

@keyframes hulkify {

    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的元素,而不是一个文件路径

比如下面的示例:

/* 绝对路径 */
@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:400");

 /* 相对路径 */
.foo { background-image: url("../img/bg.png"); }
@import "components/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>

比率的数据类型通常用于媒体查询的设备比率中。

@media screen and (device-aspect-ratio: 16/9) {
    /* Wide screen displays, iPhone 5 */
}
@media screen and (device-aspect-ratio: 4/3) {
    …
}

百分比

<percentage>数据类型是由数字<number>紧跟一个单独的%号组成。它代表的是其它值的一部分值。根据数据类型的值是什么,可以将百分比数据类型分成:

  • <length-percentage>数据类型代表<length>值的一部分
  • <number-percentage>数据类型代表<number>值的一部分
  • <angle-percentage>数据类型代表<angle>值的一部分
  • <time-percentage>数据类型代表<time>值的一部分
  • <frequency-percentage>数据类型代表<frequency>值的一部分

如下面的示例:

.foo {
    width: 50%; /* <length-percentage> */
    line-height: 200% /* <number-percentage> */
    voice-pitch: 25% /* <frequency-percentage> */
}

维度数据类型

维度数据类型是<number>中特殊的一种,是一个计量单位。它们写成<number>,后面再跟单位标签符。当<number>0时,可以不带单位。

距离

<length>数据类型代表的是长度单位。其有两种类型的长度单位。

  • 绝对单位:固定的物理测量单位,比如pxcmpt。一旦确定了,它们的尺寸不能通过改变容器的font-size大小来改变
  • 相对单位:没有一个客观的测量,比如emremViewport单位。它的实际大小是由其一个父元素的大小决定。这意味着它们的大小可以通过改变依赖元素的大小来改变

例如

.foo { 
    font-size: 16px; /* absolute */
    width: 50vw; /* relative */
}

角度

<angle>数据类型代表的是一个圆的角度。它有四个单位,可以用来定义角度的度数。

  • deg单位表示的是角的度数。360deg是一个完整的圆
  • grad单位代表Gradians角度。400grad是一个完整的圆
  • rad单位代表的角的弧度。2πrad(约57.29rad)是一个完整的圆
  • turn单位代表圆周长。1turn是一个完整的圆

这些单位可以是正值也可以是负值,表示顺时针或逆时针转。下面是一个例子,表示的是按顺时针旋转90度:

.foo { 
    /* 顺时针方向 */
    transform: rotate(90deg);
    transform: rotate(100grad);
    transform: rotate(0.25turn);
    transform: rotate(1.57rad);

    /* 逆时针方向 */
    transform: rotate(-270deg);
    transform: rotate(-300grad);
    transform: rotate(-1.25turn);
    transform: rotate(-55.72rad);
}

延迟

<time>数据类型表示一个时间单位,可以使用两种单位定义持续时间。

  • s表示的是秒单位
  • ms表示的是毫秒单位。1s等于1000ms

例如

.foo {
    transition-duration: 1s;
}
.bar {
    transition-duration: 1000ms;
}

频率

<frequency>数据类型表示声音的频率。有两种单位来定义频率。

  • kHz单位代表的是KiloHertz
  • Hz单位代表的是Hertz。1Hz等于1000kHz

例如

.foo {
    voice-pitch: 250Hz;
}
.bar {
    voice-pitch: 1kHz; 
}

分辨率

<resolution>数据类型代表用户的当前设备的分辨率。其有四个单位。

  • dpi单位代表一英寸中有多少个点
  • dpcm单位代表是的一个Centemetre有多少个点
  • dppx单位代表是一个像素里有多少个点

例如

@media (min-resolution: 100ddpx) {
    ..
}
@media (min-resolution: 100dpcm) {
    ..
}
@media (min-resolution: 300dpi) {
    /* Retina display */
}

其它数据类型

颜色

<color>数据类型是用来定义一个颜色值。其有两种格式

  • 关键词,指预定义的颜色的关键词(如cornflowerblue)或者transparentcurrentColor关键词
  • 使用数值的颜色符,如#rgbrgb()rgba()hsl()或者hsla()

下面的例子演示了如何使用这些不同的格式来定义一个黑色颜色。

.foo {
   color: black;
   color: #000;
   color: rgb(0,0,0);
   color: rgba(0,0,0,1);
   color: hsl(0,0%,0%);
   color: hsla(0,0%,0%, 1);
}

图片

<image>数据类型代表的是一个2D图像,它有三种格式

  • 使用<url>数据类型引用的一个URL
  • 文档中的一个元素,比如使用element()函数
  • 一个渐变函数gradient,使用<gradient>数据类型

例如

.foo {
    background-image: url('path/to/bg.png');
}
.bar {
    background-image: element('#background');
}
.baz {
    background-image: linear-gradient(white, gray);
}

位置

<position>数据类型表示一个元素在容器或另一个元素间的位置。它有三种数据类型。

  • 关键词toprightbottomleftcenter
  • <length>
  • 百分比,特别是<length-percentage>

下面的示例学示了如何让图像(100 x 100)定位在容器(300px x 300px)的右下角

.foo {
    background-position: right bottom;
    background-position: 200px 200px;
    background-position: 100% 100%;
}

本文根据@Ire Aderinokun的《All the Generic CSS Data Types》所译,整个译文带有我们自己的理解与思想,如果译得不好或有不对之处还请同行朋友指点。如需转载此译文,需注明英文出处:https://bitsofco.de/generic-css-data-types/

大漠

常用昵称“大漠”,W3CPlus创始人,目前就职于手淘。中国Drupal社区核心成员之一。对HTML5、CSS3和Sass等前端脚本语言有非常深入的认识和丰富的实践经验,尤其专注对CSS3的研究,是国内最早研究和使用CSS3技术的一批人。CSS3、Sass和Drupal中国布道者。2014年出版《图解CSS3:核心技术与案例实战》。

如需转载,烦请注明出处:http://www.w3cplus.com/css/generic-css-data-types.htmlNike Paul George PG1

如需转载,烦请注明出处:https://www.w3cplus.com/css/generic-css-data-types.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部