Web (vi) Basic syntax, values and units of CSS

The CSS syntax contains the following sections:

• Selector: Lets you select the element that you want to add a style to.
• Property: The property name of the style, for example, color, which represents colors.
• Values and units: the value and unit of the property.
• Syntax rules: Some fixed syntax for CSS.
• Note: The user's description of the CSS program is not performed.

Basic syntax rules for CSS

• Case is ignored (but is case-sensitive when defining class selectors), lowercase is recommended.
• Multi-declaration: Renders a set of labels at the same time using multiple attributes and values.

  1 p {2text-align:center; 3 Color:black; 4 font-family:arial; 5 }6<!--7 Note the position of the opening bracket with the closing parenthesis 8 property value to have a tab indent  9 --

CSS values and units:CSS through the values and units to describe the attributes, can be divided into the following three categories

1. Length class value unit: Used for decoration length, such as height width, etc.
   2. Absolute length units include: cm (cm), mm (mm), in (inches), pt (Point 1pt = 1/72in), PC (picas 1pc = 12pt), px (pixels).

      1 <  style= "Width:100px;background-color:yellow;" > 2         width is 100px, background color is yellow 3</div>4<!--  commonly used units are measured in PX--and

   3. Relative length unit: Calculate length according to a certain proportion, em,rem,% are relative length single

       <!--  Common unit values are REM (CSS3 standard),%  -->  

      • em (relative to the font size of the text in the current label)

         <  div  Span style= "COLOR: #ff0000" >style  = "Width:10em><div style="  WIDTH:8EM; font-size:12px; " >  </ div  >  </ div  >  <!--  The browser's default font size is 16px, and the Font property has an inheritance attribute that inherits the parent container's Font property value  -->  <!--  The browser has a minimum font qualification, such as the chrome minimum font of 12px, with special properties to adjust the  -->  

         

      • REM (relative to the font size of the text within the HTML tag)

         html {font-size:30px;}  <  div  style  = "WIDTH:10REM; " >  </ div  >  <!-- rem is a CSS3 standard unit and therefore cannot be compatible with  in a low-version PC browser. -->  <!-- rem commonly used in mobile phone development, according to different screens to the HTML set different fonts in other tags using rem as a unit of length, thus completing the responsive layout  -->  

         

      • Percent (scale relative to the same property as the parent container)

        <style= "width:50%; ">        <style=" width:50%; ">        </div></ Div  ><!-- percentage is the unit of value for CSS2, which can be completed on the PC with a responsive layout-- 

        　　

2. Color class value units: Used to modify attributes such as font, background, etc.
   • HEX: #ffffff: Color is represented in 16, but not transparent (most commonly used).

   • Rgba:rgba (0,0,0,0.5), composed of three primary colors red (R), Green (G), Blue (B), and transparent. The advantage is that transparency is supported. (CSS3 Standard)

   • HSL:HSL (30%,50%,50%), composed of three color channels of Hue (H), saturation (S), and Luminance (L), combined by a percentage.

   • Rgb:rgb (128,128,128), by the three primary colors of light red (R), Green (G), Blue (B), a proportional combination of.

   • Keywords: color:red, which represent colors in the English name of a color, but can only represent a small number of colors

     1 <styletype= "Text/css"><!--with style label --2 . Container{/*Pre-Select device*/3 Background-color:Red;/*Key Words*/4 Color:HSL (30%,50%,50%);/*HSL*/5 Color:RGB (128,128,128);/*RGB*/6 Color:Rgba (0,0,0,0.5);/*RGBA*/7 Color:#00FFFF;/*HEX*/8     }9 </style>

3. Special values for text classes: Special values for modifying text.
   • Inherit: Declares the property of the current element to inherit the parent container property, and the default value of the Text Class property.

   • Initial: Declares that the property of the current element is the default value of the browser. (CSS3, not compatible in IE)

     <Divstyle= "font: ' Microsoft ya Black ' bold 30px;">    <Divstyle= "Font:inherit;">Microsoft Ya-Black</Div>    <Divstyle= "font:initial;">Default Font</Div></Div>

Web (vi) Basic syntax, values and units of CSS