HTML/CSS from scratch-common attributes (3 ),

HTML/CSS from scratch-common attributes (3 ),

 

I. css text attributes

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

Unit: pt: 9pt = 12px; default browser font size: 16px
Em: 1em = 16px;
In 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 3 ";}

Font-based browser Interpretation
Note: When the font name is Chinese, double quotation marks ("") are added. For a single English word, the quotation marks ("Times New Romen") are not added ";

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

Attribute Value: normal/500 (general); bold/600-900 (bold); bolder (coarse );

(5) text skew

{Font-style: itatic (italic)/oblique (skewed text)/normal (unskewed )}

(6) Horizontal Alignment

{Text-align: left/center/right/justify (both ends are aligned );}

(7) Vertical Alignment

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

(8) text line height

{Line-height: normal/value ;}

Measurement line height: Top of the line of text to top of the next line;
Single Line Text: Line Height = when the container is high, vertical center; line height <when the container is high, vertical to upper;

Note: The simplified font sequence is font-style font-weight font-size/line-height font-family;
{Normal 600 16px "";}

(9) text Modification

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

Extension: <del> Add strikethrough </del>

(10) first line indent

{Text-indent: value ;}
Value is the number of words in the unit of em;
Text-indent is a negative value, move forward
Takes effect only for 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 feed

2. Border

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

Iii. CSS list attributes (1) List symbol Style

{List-style-type: disc (solid circle)/circle (hollow circle)/squrare (hollow square width)/none (remove list symbol );}
{List-style-type: none} is the same as {list-style; none ;}

(2) image as a list symbol

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

(3) define the list symbol position

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

(4) Remove the list symbol.

{List-style: none ;}

Iv. Background attributes

(1) background color {background-color: value ;}
(2) background image {background-image: url (PATH );}
(3) Tiled background image {background-repeat: no-repeat (not tiled)/repeat (tiled)/repeat-x (horizontal tiled)/repeat-y (vertical tiled );}
(4) fixed background image {background-attachment: scroll/fixed (fixed );}
(5) background image position {background-position: x y (value: 50px 50px; direction: right bottom ;)}
Direction: horizontal (left/center/right) vertical (top/center/bottom)
(6) Abbreviation: {background: url () no-repeat center top fixed # f00 ;}
{Background: url () no-repeat center 100px # f00 scroll ;}

5. common image formats on webpages

(1) jpg: lossy compression loss quality applicable to color-rich Images
(2) gif: lossy compression loss color supports transparent images with less colors for animations
(3) png: Images with less color loss, animation not supported, transparent, fireworks;
Note: High-storage png is required, and higher-storage gif is required. gif is used for compatibility;

6. Floating (horizontal arrangement of erect elements)

{Float: left/right/none}
(1) clear floating {clear: left/right/both ;}
Note: The floating element is suspended from the document stream. When the element before the floating element is an element in the standard stream (not floating)
The position of the floating element depends on the browser. The unfloating element behind the floating element will be squeezed into the original position of the floating element.
(2) Solving High collapse
Height collapse: the parent element has no write height, and the child element floats;
Solution: (1) Add an empty <div> </div> at the end of the floating element, and write the declaration div {clear: both;} to the div ;}
(2) Add a declaration to the parent element in css, div {overflow: hidden ;}

VII. Box Model

1. Definition: how to display and interact with webpage elements.
Border padding content area

2. padding)
(1) Fill: Set the distance between an element content in an element on the page and the edge (Border) of the element to fill in;
(2) used to adjust the location relationship of content in the container
(3) used to adjust the position of a child element in the parent Element
(4) Add the padding attribute to the parent element.
What is the problem about reducing the padding value?
1. subtraction: the parent element has a width and height.
2. Do not subtract: the parent element has no width or height;
(5) How to reduce it?
Height (top + bottom); width (left + right );
3. Syntax:
Four values: {padding: top right bottom left ;}
One 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 outside the elements in the set page;
(2) Add the margin attribute to the child-level 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 ;}