All common data types of css-CSS Tutorial-php.cn

In this article, we will talk about the common data types of CSS. There are many formats for attribute values in CSS. In order for the user agent (i.e. browser) to recognize whether a value is valid, it needs to confirm whether the value conforms to one of the formats supported by this type of value. The formats supported by these attribute values are called data types, which are identified in the specification in the form of .

There are two data types in CSS - specific data types and general data types. A specific data type is associated only with a single attribute or a class of attributes. For example, the data type can only be used as the value of the transform attribute.

In contrast, general data types are not associated with any specific properties. For example, the data type has a value of 10px, which can be used for margin, font-size, and a series of other properties.

In this article, I will give an overall introduction to all common data types.

Directory Name Type

Text value Keyword

Text value Custom keyword

Text value Quote String

Text value Resource locator

Basic numerical value Integer

Basic numerical value Real number

Basic value Ratio

Basic value Percentage

Measurement Distance

Measurement Angle

Measurement Duration

Measurement Frequency

Measurement Resolution

Others Color

Others Pictures

Others Position

Text data type

Keywords

Keyword data type

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

These keywords are case-insensitive, and quotation marks cannot be added when used. This avoids confusion with the string data type .

Custom Keywords

The custom keyword data type (also written as ) refers to the keywords defined by the style sheet author. The definition of has certain restrictions, such as it cannot be one of the common CSS words.

The most common example of a custom keyword is the value of the animation-name attribute. This property can accept a custom animation as its value. The custom animation name is defined by the author of the style sheet.

@keyframes hulkify {   from { 
    color: pink; 
    transform: scale(1);
  }   to { 
    color: green; 
    transform: scale(2);
  } 
}.bruce-banner { animation-name: hulkify; }

Copy after login

Quoted string

The string data type refers to any quoted string. This string is enclosed in quotation marks and is an arbitrary sequence of Unicode characters.

.foo::after {  content: "Hello, world!";
}.foo::before {  content: "We can add &#39;quotes&#39; within quotes \A And move to a separate line";
}

Copy after login

Resource locator

Resource locator is used to reference resource files or fragments. This data type is usually expressed using the url() function, but in some cases it can also be expressed in the form of , such as in an @import rule.

This data type has three URLs (Uniform Resource Locator).

Absolute URL includes protocol and domain name. The resource specified by this type of URL does not need to be the same as the domain name to which the style sheet belongs.

The file pointed to by the relative URL takes the location of the style sheet file as the base location.

Local URL (fragment URL) is used to point to elements within the main file itself. Referenced by the element's id, not the file path.

/* Absolute URL */@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:400"); /* Realtive URL */.foo { background-image: url("../img/bg.png"); }
@import "components/buttons.css"; /* Fragment URL */.bar { filter: url("#blurFilter"); }

Copy after login

Basic numerical types

Integer

Integer type is an integer defined in mathematics. It is a complete number with no decimal part. Integers include positive and negative integers. The sign of an integer is specified by + or - before the first digit, or defaults to + if nothing is specified.

.foo { z-index: 10; }.foo { z-index: +10; }.bar { z-index: -10; }

real number

The real number type is a "real number". It can be an integer , 0 or a decimal fraction. Like integer types, real numbers also have positive and negative values, also indicated by the sign before the first number.

.foo { line-height: 3; }.bar { line-height: -2.5; }.foo { line-height: +5.5; }

Copy after login

ratio

比率数据类型表明两个数值之前的关系，这两个数值均为正的整数值。尽管数学中比率有着多种书写方式，但是在CSS经常被写作 / 。

比率类型的典型用法是用来在媒体查询中指明目标设备的分辨率。

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

Copy after login

百分比

百分比数据类型由一个实数值后加一个 % 符号组成。它表示的是其他值的一部分。因此，针对不同的值类型，有不同的百分比数据类型

长度百分比是长度值的一部分。

数值百分比是数值的一部分。

角度百分比是角度值的一部分。

时间百分比是长度值的一部分。

频率百分比是长度值的一部分。

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

Copy after login

尺寸数据类型

尺寸是数值数据类型中的一种，是一种度量单位。它前半部分由数值组成，后面跟一个单位符号。当数值部分为 0 时，单位可以省略。

距离

距离数据类型表示距离的单位，有两种长度单位。

绝对单位，如 px ， cm 以及 pt 。这些单位的距离值都是固定的，与物理测量相关。一旦声明，它们的大小不会因为容器元素的字体大小变化而发生改变。

相对单位，如 em ， rem 以及视口单位。这些单位并没有一个客观的度量标准。相反的，这类单位的实际值由它们的父元素决定。这就意味着它们的大小会因为所依赖元素的大小改变而改变。

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

角度

角度数据类型表示圆的一个角度。存在四种单位来定义角度度量。

deg 单位表示角的度数。一个完整的圆为360度。

grad 表示角的Gradians度。一个完整的圆为400 grad 。

rad 表示角的弧度。一个完整的圆为2π（约为57.29rad）。

turn 表示圆周长。一个完整的圆为1turn.

这些单位都存在正负值之分，表明顺时针或者逆时针。下面的例子中，指出了如何用各种单位表示顺时针90度。

.foo { 
    /* Going clockwise */
    transform: rotate(90deg);    transform: rotate(100grad);    transform: rotate(0.25turn);    transform: rotate(1.57rad);    /* Going anti-clockwise */
    transform: rotate(-270deg);    transform: rotate(-300grad);    transform: rotate(-1.25turn);    transform: rotate(-55.72rad);
}

Copy after login

时长

时长数据类型是时间单位。有两种单位能够用来定义时间。

s 表示一秒钟。

ms 表示一毫秒。1秒等于1000毫秒。

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

Copy after login

频率

频率类型表示声音的频率。存在两个单位用来定义频率。

kHz 表示千赫兹。

Hz 表示赫兹。1000Hz等于1kHz.

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

Copy after login

分辨率

分辨率数据类型表示用户当前设备的分辨率。分辨率是单一像素点（物理）的大小，通过1CSS英寸、厘米或者像素需要多少像素点能填满来定义。这一计算方式依赖于我们所用的CSS单位，有四种方式可以指定分辨率。

dpi 表示每CSS英寸中物理像素点的个数。

dpcm 表示每CSS厘米中物理像素点的个数。

dppx 表示每CSS像素中物理像素点的个数。

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

Copy after login

其他数据类型

颜色

颜色数据类型用来定义颜色值。这一数据类型有两种格式。

关键字形式：可以使预定义颜色中的一种（如 cornflowerblue ）， transparent 以及 currentColor 等关键之。

数值形式：可以使用颜色表示法中的一种， #rgb ， rgb() ， 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);
}

Copy after login

图片

图片数据类型表示一个2D图像。它可以是以下三种形式中的一种。

URL引用：通过数据类型来指定。

文档中的元素：通过 element() 函数来指定。（提示：这一函数的支持度较为有限。）

渐变函数 :使用数据类型来定义。

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

Copy after login

位置

位置数据类型指出了一个元素在容器区域或元素中的位置。它可以使下列三种类型中的一种：

关键字 : top ， right ， bottom ， left 以及 center 。

长度值。

百分比，长度百分比。

下例给出了如何让一个大小为100x100px背景图定位在容器元素（300x300px）的左下角。

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

Copy after login

以上就是css的通用数据类型，希望对大家有帮助。