Html/css from scratch-common attributes (iii)

First, CSS text properties

(1) text size {font-size:value;}

Unit: pt:9pt=12px; browser default font size is 16px
em:1em=16px;
In the CSS2.0
Xx-small:9px
x-small:11px
small:13px
Medium:16px
Large:19px
x-large:23px
Xx-large:27px

(2) Font Color

{color:rbg250,250,250/#000000/red;}

(3) text font {font-family: "Font 1", "Font 2", "Font three";}

Browser read by font
Note: The font name is in Chinese with double quotation marks: "Microsoft Jas Black"; single English words can not add: Arial, English with a space quoted: "Times New romen";

(4) font bold {font-weight:;}

Attribute value: normal/500 (normal); bold/600-900 (bold); bolder (thicker);

(5) Text Tilt

{font-style:itatic (italic)/oblique (italic text)/normal (de-skew)}

(6) Horizontal alignment

{text-align:left/center/right/justify (justify);}

(7) Vertical alignment

{Vertical-align:top/bottom/middle;}

(8) Text line height

{Line-height:normal/value;}

Measure row Height: The top of the text of the bank to the top of the next line of text;
Single line of text: Row height = container height, vertical center, Row height < container height vertical bias;

Description: Font Shorthand order: Font-style font-weight font-size/line-height font-family;
{normal 16px "Microsoft Ya Black";}

(9) Text decoration

{Text-decoration:none/underline (underscore)/overline (underline)/line-through (add Strikethrough)}

Extension:<del> add strikethrough </del>

(10) indent in first line

{Text-indent:value;}
Value is the number of words in the unit: EM;
Text-indent negative, Forward backward
Works only on the first line of text

(11) Word spacing

{Letter-spacing:value;}
Control the distance between English letters and Chinese characters

Extension: {word-break:break-all;} =<br/> line break

second, the border

{border-top/bottom/right/left:1px solid/dotted/dashed/double;}

Third, CSS list properties(1) List symbol style

{List-style-type:disc (solid circle)/circle (Hollow Circle)/squrare (Hollow Fancoin)/none (remove list symbol);}
{List-style-type:none} equals {list-style;none;}

(2) picture as a list symbol

{List-style-image:url ();}

(3) Defining the list symbol location

{list-style-position:ouside/inside;}

(4) Remove list symbols

{List-style:none;}

Four, background properties

(1) Background color {background-color:value;}
(2) Background picture {Background-image:url (path);}
(3) Background tiling Shop {background-repeat:no-repeat (uneven paving)/repeat (tiled)/repeat-x (horizontal)/repeat-y (vertical tiling);}
(4) Background map fixed {background-attachment:scroll (rolling)/fixed (fixed);}
(5) Background map position {background-position:x y (value: 50px 50px; direction: Right bottom;)}
Direction Position: Horizontal (left/center/right) Vertical (Top/center/bottom)
(6) Shorthand: {background:url () no-repeat Center top fixed #f00;}
{background:url () no-repeat Center 100px #f00 Scroll;}

Five, the Web page commonly used picture format

(1) JPG: lossy compression loss quality suitable for color-rich images
(2) GIF: lossy compression loss color support transparent, animation for less color images
(3) PNG: Loss of Image color less, not support animation, support transparency, is fireworks;
Description: Request survivable PNG, require a higher GIF, use GIF when compatible;

Six, floating (let erect elements across the row)

{Float:left/right/none}
(1) Clear floating {clear:left/right/both;}
Description: A floating element is a detached document stream that is suspended above the element when you float the element in front of it that is the element in the standard flow (no float)
The position of the element after the float is the browser, and the non-floating element behind the floating element will squeeze into the original position of the floating element.
(2) Resolving height collapse
Height collapse: The resulting condition the parent element has no write height, and the child element floats;
Workaround: (1) Add an empty <div></div> at the end of the floating element; Write a statement to the Div Div{clear:both;}
(2) Add a declaration to the parent element in the CSS, Div{overflow:hidden;}

Seven, Box model

1, definition: How the page elements are displayed and how they relate to each other.
Border Boundary filler content area

2, padding (filler)
(1) padding: padding the distance, padding, between one element of an element in a set page and the Edge (border) of an element, and
(2) is used to adjust the position of the content in the container
(3) Used to adjust the position of the child element in the parent element
(4) The padding attribute is added to the parent element
about the padding value reduction problem?
1, minus: The parent element has a width of height
2, does not decrease: The parent element is not wide-height;
(5) How to reduce?
High-(top+bottom); width-(left+right);       
3, Syntax:
Four values: {padding:top Right Bottom Left;}
A value: {padding:20px}={padding:20px 20px 20px 20px;}
Two values: {padding:20px 30px;}={padding:20px 30px 20px 30px;}
Two values: {padding:20px 30px 40px;}={padding:20px 30px 40px 30px;}
Split: {padding-top/right/bottom/left:value;}

2. Margin
(1) margin: Margin in the set page outside the element of the blank area;
(2) The margin attribute is added above the child element
(3) Syntax:
Four values: {margin:top right bottom left;}
One value: {margin:20px}={padding:20px 20px 20px 20px;}
Two values: {margin:20px 30px;}={padding:20px 30px 20px 30px;}
Two values: {margin:20px 30px 40px;}={padding:20px 30px 40px 30px;}
Split: {margin-top/right/bottom/left:value;}

Html/css from scratch-common attributes (iii)