All common data types for CSS

In this article, you are talking about the universal data types of CSS, and the values of the properties in CSS are in many different formats. In order for the user agent (that is, the browser) to recognize whether a value is valid, you need to confirm that the value conforms to one of the formats supported by the class value. The formats supported by these property values are called data types and are identified in the specification as <this>.

There are two types of data in CSS--specific data types and common data types. A particular data type is associated only with a single property or a class of attributes. For example, <transform-function> this data type can only be used as the value of the Transform property.

Conversely, a generic data type is not associated with any particular attribute. For example, the <length> data type has values such as 10px, which can be used for margin, font-size, and a range of other properties.

In this article, I'll take a holistic look at all the common data types.

Directory Name Type

Text value Keywords <ident>

Text value custom keyword <custom-ident>

Text value Reference string <string>

Text Value Resource Locator <url>

Basic numeric integers <integer>

Basic value Real number <number>

Base value ratio <ratio>

Percentage of basic values <percentage>

Metric Distance <length>

Measuring angle <angle>

Measure length <duration>

Metric Frequency <frequency>

Measurement resolution <resolution>

Other colors <color>

Other pictures <image>

Other Locations <position>

Text data type

Key words

Keyword data type <ident> refers to predefined keywords in CSS. This type includes not only values specific to certain properties, such as the block value of the display property, but also common initial, inherit, and unset in CSS.

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

These keywords are case insensitive and cannot be added with quotation marks. This has been able to avoid and string data types <string> confusion.

Custom keywords

Custom keyword data types <custom-ident> (also writing <user-ident>) are keywords that are defined by the style sheet author. Defining <custom-ident> has certain limitations, such as not being one of the CSS characters commonly used.

The most common example of a custom keyword is the value of the Animation-name property. This property can accept a custom animation as its value, and 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; }

Reference string

String data type <string> refers to any referenced string. This string is surrounded by quotes and is an arbitrary sequence of uniformly encoded characters.

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

Resource Locator

The resource Locator <url> is used to reference a resource file or fragment. This data type is usually expressed using a URL () function, but in some cases it can be presented in <string> form, such as @import rules.

There are three types of URLs (Uniform Resource Locator) for this data type.

Absolute URLs include protocols and domain names. This type of URL specifies a resource that does not need to be the same as the domain name that the style sheet belongs to.

A relative URL points to a file with a style sheet file location that is the base location.

A local URL (fragment URL) is used to point to the elements inside the main file itself. Referenced by the ID of the element, 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"); }

Base numeric type

Integer

Integer types <integer> integers that are defined in mathematics. It is a complete number, with no decimal parts. Integers include positive integers and negative integers. The symbol of an integer is specified by the first number before + or-if nothing is specified, then the default is +.

. foo {z-index:10;}. Foo {z-index: +10;}. Bar {z-index:-10;}

Real

The real type <number> is a "real number". It can be an integer <integer>, 0 or a decimal decimal. Similar to the integer type, the real number also has a positive negative value, which is also indicated by the symbol preceding the first digit.

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

Ratio

The ratio data type <ratio> indicates a relationship before two values, both of which are positive integer values <integer>. Although mathematical ratios are written in many ways, they are often written <integer>/<integer> in CSS.

A typical use of a ratio type is to indicate the resolution of a target device in a media query.

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

Percentage

The percent data type <percentage> consists of a real value <number> followed by a% symbol. It represents a portion of the other values. Therefore, for different value types, there are different percent data types

The length percent <length-percentage> is part of the length value <length>.

The value percent <number-percentage> is part of the value <number>.

The angle percentage <angle-percentage> is part of the angle value <angle>.

Percent of time <time-percentage> is part of the length value <time>.

The frequency percentage <frequency-percentage> is part of the length value <frequency>.

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

Dimension Data type

A dimension is one of the numeric data types and is a unit of measure. The first half of it consists of numeric values followed by a unit symbol. When the value part is 0 o'clock, the unit can be omitted.

Distance

Distance data type <length> units representing distances, in two units of length.

Absolute units, such as PX, CM, and Pt. The distance values for these units are fixed and are related to physical measurements. Once declared, their size does not change because of the change in the font size of the container element.

Relative units, such as EM, REM, and viewport units. These units do not have an objective measurement standard. Conversely, the actual values of such units are determined by their parent elements. This means that their size will change depending on the size of the dependent element.

. foo {
font-size:16px; /* Absolute */
WIDTH:50VW; /* Relative */}

Angle

The angle data type represents an angle of the circle. There are four units to define angular measures.

The DEG unit represents the degree of the angle. A complete circle is 360 degrees.

Grad represents the Gradians degree of the angle. A complete circle for the grad.

Rad represents the Radian of the angle. A complete circle is 2π (about 57.29rad).

Turn indicates a long circumference. A full circle is 1turn.

Each of these units has a positive negative value indicating a clockwise or counterclockwise direction. In the following example, it is shown how to represent a clockwise 90 degree in various units.

.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);
}

Duration

Length data type <time> is the time unit. There are two types of units that can be used to define time.

s represents one second.

Ms represents a millisecond. 1 seconds equals 1000 milliseconds.

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

Frequency

Frequency type <frequency> How often the sound is expressed. There are two units used to define the frequency.

KHz represents Hertz.

Hz represents Hertz. 1000Hz equals 1kHz.

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

Resolution

Resolution data type <resolution> represents the resolution of the user's current device. The resolution is the size of a single pixel (physical), defined by the number of pixels that can be filled by 1CSS inches, centimeters, or pixels. This calculation relies on the CSS units we use, and there are four ways to specify the resolution.

The DPI represents the number of physical pixel points per css inch.

DPCM represents the number of physical pixel points per css centimeter.

DPPX represents the number of physical pixel points per css pixel.

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

Other data types

Color

Color data type <color> used to define color values. There are two formats for this data type.

Keyword form: You can make one of the predefined colors (such as cornflowerblue), transparent, and CurrentColor key.

Numerical form: One of the color notation can be used, #rgb, RGB (), Rgba (), HSL (), Hsla ().

The following example is how we implement black color values in different forms.

. 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

Picture data type <image> represents a 2D image. It can be one of the following three forms.

URL reference: specified by the <url> data type.

Elements in the document: specified by the element () function. (Hint: This function has a limited degree of support.) ）

Gradient functions: Defined using the <gradient> data type.

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

Position

Location data type <position> indicates the position of an element within the container area or element. It can make one of the following three types:

Keywords: top, right, bottom, left, and center.

The length value.

Percent, percent of length.

The following example shows how to have a 100x100px background map positioned in the lower left corner of the container element (300x300px).

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

The above is the universal data type of CSS, we hope to be helpful.