HTML/CSS from scratch - common attributes

1. CSS text attributes

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

Unit: pt:9pt=12px; browser default font size is 16px
em:1em=16px;
In CSS2.0 medium
xx-small:9px
x-small:11px
small:13px
medium:16px
large:19px
)Font color

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

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

Browser interprets by font

Note: The font name is In Chinese, add double quotes: "Microsoft Yahei"; single English words do not need to be added: Arial; if there are spaces in English, add quotes: "Times New Romen";

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

Properties Values: normal/500 (regular); bold/600-900 (bold); bolder (bolder);

(5) text slant

{font-style: itatic (italic)/oblique (slanted text) )/normal (cancel tilt)}

(6) Horizontal alignment

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

(7) Vertical alignment

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

(8) Text line height

{line-height:normal/value;}

Measure line height: from the top of this line of text to the top of the next line of text;

Single line of text : When line height = container height, vertically centered; when line height
Description: font abbreviation order: font-style font-weight font-size/line-height font-family; 16px "Microsoft Yahei";}
(9) Text decoration

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

Extension:

Add and delete The first line of line

(10) is indented{text-indent:value;}

Value is the number of words. The unit is: em;

Text-indent is a negative value and goes back

Only for the first line of text It works

(11) Word spacing

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

Extension: {word-break: break-all;}=
Line break

2. Border

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

3. CSS list properties

(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 equivalent to {list-style;none;}

(2) Picture 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) Background image Tile {background-repeat: no-repeat (non-tile)/repeat (tile)/repeat-x (horizontal tile)/repeat-y (vertical tile);}
(4) Background image fixed {background-attachment ：scroll(scroll)/fixed(fixed);}
(5) Background-position:x y(value: 50px 50px; direction: right bottom;)}
The direction positions are: horizontal (left/center/right ) Vertical (top/center/bottom)
(6) Abbreviation: {background:url() no-repeat center top fixed #f00;}
                                                                                                                                                5. Commonly used image formats on web pages

(1) jpg: lossy compression loses quality and is suitable for images with rich colors

(2) gif: lossy compression loses color and supports transparency, animation is suitable for images with fewer colors

(3) png : The loss of pictures has less color, does not support animation, supports transparency, and is fireworks;
Note: high requirements for png storage, higher requirements for gif storage, use gif when compatible;

6. Floating (let vertical elements be arranged horizontally)

{float:left/right/none}

(1) Clear float {clear:left/right/both;}

Explanation: The element after floating is out of the document flow and is suspended above. When you float the element in front When the element is an element in the standard flow (without floating)
The position of the element after floating depends on the browser, and the non-floating elements behind the floating element will squeeze into the original position of the floating element.
(2) Solve the height collapse
Height collapse: The resulting condition is that the parent element does not write the height, and the child element floats;
Solution: (1) Add an empty

at the end of the floating element, write a statement div{clear:both;}
​​​​​​​​​​​​​​​​​​​​​​​​​​​ (2) Add a statement to the parent element in css, div{overflow:hidden;}

7. Box model

1. Definition: Web page element How to display and relate to each other.
Border boundary Filler content area

2, padding (padding)
(1) Padding: padding is the distance between the content of an element in an element on the set page and the edge (border) of the element, padding;
(2 ) is used to adjust the positional relationship of the content in the container
(3) is used to adjust the position of the child element in the parent element
(4) the padding attribute is added to the parent element
Regarding the issue of whether the padding value should be reduced or not?
1. Subtraction: The parent element has width and height
2. No reduction: The parent element has no width and height;
(5) How to reduce?
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 is the blank area outside the element in the setting page;
(2) The margin attribute is added to the child Above the 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;}