Web/WEB기본

[CSS] CSS Values and Units Module Level 3 수치 단위

saltdoll 2013. 10. 24. 20:37
반응형

CSS Values and Units Module Level 3

http://www.w3.org/TR/2013/CR-css3-values-20130730/#viewport-relative-lengths


2.5. 
Property value examples

Below are some examples of properties with their corresponding value definition fields

PropertyValue definition fieldExample value
orphans<integer>3
text-alignleft | right | center | justifycenter
padding-top<length> | <percentage>5%
outline-color<color> | invert#fefefe
text-decorationnone | underline || overline || line-through || blinkoverline underline
font-family[ <family-name> | <generic-family> ]#"Gill Sans", Futura, sans-serif
border-width[ <length> | thick | medium | thin ]{1,4}2px medium 4px
text-shadow[ inset? && [ <length>{2,4} && <color>? ] ]# | none3px 3px rgba(50%, 50%, 50%, 50%), lemonchiffon 0 0 4px inset
voice-pitch
<frequency> && absolute |
[[x-low | low | medium | high | x-high] ||
 [<frequency> | <semitones> | <percentage>]]
-2st x-low



3.1. Pre-defined Keywords

In the value definition fields, keywords with a pre-defined meaning appear literally. Keywords are CSS identifiers and are interpreted case-insensitively within the ASCII range (i.e., [a-z] and [A-Z] are equivalent).

For example, here is the value definition for the ‘border-collapse’ property:

Value: collapse | separate

And here is an example of its use:

table { border-collapse: separate }

3.1.1. CSS-wide keywords: ‘initial’ and ‘inherit

As defined above, all properties accept the CSS-wide keywords, which represent value computations common to all CSS properties.

The inherit keyword is defined in [CSS21].

The initial keyword represents the specified value that is designated as the property's initial value. [CSS3CASCADE]

Other CSS specifications can define additional CSS-wide keywords. For example, [CSS3CASCADE] adds an ‘unset’ keyword to this set.



5.1. 
Relative lengths

Relative length units specify a length relative to another length. Style sheets that use relative units can more easily scale from one output environment to another.

The relative units are:

Informative Summary of Relative Units
unitrelative to
emfont size of the element
exx-height of the element's font
chwidth of the "0" (ZERO, U+0030) glyph in the element's font
remfont size of the root element
vw1% of viewport's width
vh1% viewport's height
vmin1% of viewport's smaller dimension
vmax1% of viewport's larger dimension


5.2. 
Absolute lengths: the ‘cm’, ‘mm’, ‘in’, ‘pt’, ‘pc’, ‘px’ units

The absolute length units are fixed in relation to each other and anchored to some physical measurement. They are mainly useful when the output environment is known. The absolute units consist of the physical units (in, cm, mm, pt, pc) and the px unit:

unit definition
cmcentimeters
mmmillimeters
ininches; 1in is equal to 2.54cm
pxpixels; 1px is equal to 1/96th of 1in
ptpoints; 1pt is equal to 1/72nd of 1in
pcpicas; 1pc is equal to 12pt
h1 { margin: 0.5in }      /* inches  */
h2 { line-height: 3cm }   /* centimeters */
h3 { word-spacing: 4mm }  /* millimeters */
h4 { font-size: 12pt }    /* points */
h4 { font-size: 1pc }     /* picas */
p  { font-size: 12px }    /* px */


반응형