3. CSS property composition and function

3:CSS attribute composition and action learning goals

• 1. Definition of CSS properties and property values
• 2. CSS Text properties
• 3. CSS List Properties
• 4. CSS Background Properties
• 5. CSS Border Properties
• 6. CSS Floating Properties

I. Definition of CSS properties and property values

Property: Property is the property of the specified selector, it is the core of the CSS, CSS2 has more than 150 properties

Property values: Property values include legal attribute values and common values plus units, such as 25px, or color values.

Second, CSS Text properties

• 1, Text size: {font-size:value;}

  Description

  1) When the attribute value is numeric, the attribute value must be added to the unit, except for the property value of 0 o'clock.

  2) The unit can also be pt,9pt=12px;

  3) in order to reduce the font display differences between the system, IE Netscape Mozilla browser maker held a meeting in 1999 to jointly determine 16px/ppi as the standard font size default value, that is 1em. By default,1em=16px,0.75em =12px; Rem

  4) Use absolute size keywords

  Xx-small =9px
  X-small =11px
  Small =13px
  Medium =16px
  Large =19px
  X-large =23px
  Xx-large =27px
  
• 2. Text color: {color: color value;}

  Description

  Represents a color value in hexadecimal (a representation of the data in your computer):
  0 1 2 3 4 5 6 7 8 9
  0 1 2 3 4 5 6 7 8 9 A B C D E F
  Color mode: Light color mode
  R G B
  FF 00 00
  Abbreviations for color values:
  When the three-group number representing the primary color is simultaneous, it can be abbreviated to three digits;
  When you use hexadecimal to indicate a color value, you need to add "#" to the color value
  # FA 00 00
• 3. Text font: {font-family: Font 1, font 2, font 3;}

  Description

  The browser will first look for font 1, if it exists to use the font to display content, if the font 1 does not exist, it will look for font 2, such as Font 2 does not exist, by the font 3 display content, if the font 3 does not exist, the system default font display;
  When the font is in Chinese, double quotation marks are required;
  Double quotation marks are required when there are spaces in the English font ("Times New Roman")
  When the English font is composed of only one word, it is not enclosed in double quotes, such as: (Arial);
  under the Windows Chinese version of the operating system, the Chinese default font is Arial or the new song body, the English font default is.
• 4, the text bold Font-weight:bolder (thicker)/bold (bold)/normal (general)/100-900;

  Description

  In the CSS specification, the font thickness is divided into 9 levels, respectively, 100--900, of which 100 corresponds to the lightest font deformation, and 900 for the heaviest font distortion,
  100-400 General 500 general font 600-900 bold font
• 5, Font-style:italic/oblique/normal (Cancel tilt, general display);

  Description

  Italic and oblique are skewed to the right, but the difference is that italic refers to italic characters, while oblique is italic text, and for fonts without italic, you should use the Oblique attribute value to achieve italic text effects.
• 6. Horizontal alignment {Text-align:left/right/center/justify (both ends have no effect on Chi Zhongwen);}
• 7. Text line height {line-height:normal/value;}

  Description

  When the line height of a single line of text equals The height of the container, a single line of text can be aligned vertically in the container.
  When the line height of a single line of text is less than the height of the container, a single line of text can be vertically aligned above the container;
  When the line height of a single line of text is greater than the height of the container, single-line text is aligned vertically in the container (IE6 and the following versions have browser compatibility issues)
  
• * Text attribute shorthand: font:12px/24px "song Body";
  Shorthand for the Font property: Font size, line height, font
  font-size:12px; line-height:24px; font-family: "Song Body";
  Shorthand for the Font property:
  Description: The property values for the font should be written in the following order (spaces between the attributes)
  Order: Font-style font-weight font-size/line-height font-family
  

  Attention:

  (1) When abbreviated, Font-size and line-height can only be made by a slash/a value, and cannot be written separately.
  (2) The order cannot be changed, and this shorthand method only works if you specify both the Font-size and Font-family properties, and you do not set Font-weight, Font-style, they will use the default value (the default).
• 6. Horizontal alignment {Text-align:left/right/center/justify (both ends have no effect on Chi Zhongwen);}
• 7, Text decoration Text-decoration:none/underline/overline/line-through

  Description

  None: no decorations
  Underline: Add underline
  Overline: Add an underscore
  Line-through: Add Strikethrough
• 8, first line indent: {text-indent:value;}

  Description

  1) text-indent can take negative value;

  2) The Text-indent property only works on the first row.

• 9, Word spacing {letter-spacing:value;} Controls the kerning of English letters or Chinese characters.
• 10, Word spacing {word-spacing:value;} Control English word spacing.
• 11, Text flow control {layout-flow:horizontal/vertical-ideographic;}

  Description

  1) Horizontal: From left to right

  2) Vertical-ideographic: Top Down

Third, CSS list properties

• 1. Define the list symbol style

  List-style-type:disc (solid circle)/circle (Hollow Circle)/square (solid block)/none (remove list symbol); list-style-type:none===list-style:none;

• 2. Use the picture as a list symbol

  List-style-image:url (the path and full name of the image used);

• 3. Define the position of the list symbol

  List-style-position:outside (outside)/inside (inside);

  List-style:none; Remove list symbols

  Iv. properties and property values for borders

  border: Border width border style border color;

  Example: border:5px solid #ff0000

  Border: Border, many of the decorative lines in a Web page are implemented by borders.

  Border Width: border-width:

  Border color: border-color:

  Border Style:Border-style:solid (solid line)/dashed (dashed) dotted (dash) double (double line) to set one-way border individually.

  One-way border can be set individually,

  Border-bottom: Border width border style border color; bottom border

  Border-left: Border width border style border color; left box

  Border-right: Border width border style border color; right box

  Border-top: Border width border style border color; top frame

V. CSS Background Properties

• 1. Background color {background-color: color value;}
• 2, background picture setting Background-image:url (the path and full name of the background picture); The display principle of the background picture
  1) container size equals picture size, background image is displayed in container
  2) The container size is larger than the picture size, the background image will be tiled by default until the elements are covered;
  3) The container size is smaller than the picture size, showing only the background image within the range of elements.
  There are two kinds of picture on the webpage: Insert picture, background image;
  Insert Picture: belongs to the Web content, that is, the structure.
  background map: belong to the performance of the Web page, the background map can display text, insert pictures, tables and so on.
  
• 3. Background Picture tile Property {Background-repeat:no-repeat/repeat/repeat-x/repeat-y}
• 4, the background map of the fixed {{background-attachment:scroll (rolling)/fixed (fixed);} fixed, not with the content of a piece of scrolling;
  Scroll: Scrolls with content.
• 5, the position of the background map {background-position:left/center/right/value top/center/bottom/value;} Alignment (Left/center/right) or value in the horizontal direction
  Alignment (Top/center/bottom) or value in the vertical direction
  Background-position: value 1 value 2;
  Two values: The first value represents the horizontal position of the value, and the second value: represents the vertical position.
  When two values are center, write a value that can represent the horizontal and vertical positions
  Description: Left direction, negative upward direction
  Abbreviated syntax for background properties:
  Background: Attribute value 1 Property value 2 property value 3;
  Background abbreviation: Background:url (the path and full name of the background image) No-repeat Center top #f00;
  Commonly used picture formats on Web pages (Compress pictures)
  1) JPG: lossy compression format, by the loss of the quality of the picture itself to reduce the volume of the picture, suitable for color-rich images; (pixel dots, the more pixels will be more clear) if the page
  2) GIF: lossy compression format, by the loss of the color of the image to reduce the volume of the picture, support transparency, support animation, suitable for a small number of colors of the image;
  3) PNG: lossy compression format, loss of image color number to reduce the volume of the picture, support transparent, not support animation, is the source file format of fireworks, suitable for the image of a small number of colors;
  

Vi. CSS Floating Properties

Syntax: float:none/left/right;
Float: Defines how other text in a Web page wraps around the element display
The purpose of the float is to keep the vertical thing sideways.
There are three values:
Left: Element active floating on text
Right: element floats on
None: Default value, not floating.
Clear Floating Clear:left/right/both

The first thing to know is that Div is a block-level element, with a single line in the page, arranged from top to bottom, the legendary stream

Div1div2div3div4

No matter how complex the layout, the basic starting point is: "How to display multiple div elements on one line."

It is clear that the standard flow has not been able to meet the demand, it will use floating.

floating can be understood as leaving a DIV element out of the standard flow, floating above the standard stream, and not a hierarchy of standard flows.

Page floating multiple div rule:

If a DIV element A is floating, if the previous element of a element is also floating, then a element will follow the previous element (if the two elements are not placed in a row, the a element will be squeezed to the next line), and if the previous element of a element is an element in the standard flow, the relative vertical position of a will not change. Also

This means that the top of a is always aligned with the bottom of the previous element.

The order of the div is determined by the order of the div in the HTML code.

Near the edge of the page is the front, away from the edge of the page after the end.

Through the above study, it can be seen that: before the element floats, that is, in the standard flow, is vertical arrangement, and floating can be understood as a horizontal arrangement

Clear float can be understood as breaking the horizontal arrangement .

Clear the Floating keyword is clear, syntax:

Clear:none | Left | Right | Both

None: Default value. Allowed to have floating objects on both sides

Left: does not allow floating objects

Right: Do not allow floating objects

Both: Floating objects are not allowed

One thing to keep in mind is that

For CSS Clear floating (clear), be sure to keep in mind that this rule only affects the elements that use the purge itself, and cannot affect other elements

3. CSS property composition and function