CSS learning: Text layout, color, background, border, margin

Fine text layout:
Adjust the Character Spacing: letter-Spacing: normal | length
Adjust the word Spacing: Word-Spacing: normal | length
Add text modifier: Text-Decoration: underline | overline | Line-through | blink | none
Set text arrangement: Text-align: Left | right | center | justify (two-segment alignment)
Set paragraph indent: Text-indent: length | percentage
Adjust line height: Line-Height: normal | Number | length | percentage
English case: Text-transform: uppercase | lowercase | capitalize (uppercase) | none

Color and background:
Each element in the webpage has a foreground and a background view, and it is best to set the foreground and the background view at the same time to avoid duplication or conflict.
Set color: Color
The color attribute is not only used to set the font color. You can use the color attribute to set the color of each element on the webpage. The color attribute is generally set to the foreground color of the marked content.
Set background color: Background-color: color | transparent (transparent value)
You can use the background-color attribute in CSS to set the background color of a webpage and the background color of text.
Insert background image: Background-image: URL | none Background-Image
< Html >
< Head >
< Title > Application background image attributes </ Title >
< Style Type = "Text/CSS" >
<! --
Body { Background-Image : Url(14-3-1.jpg) }
H2 { Font-family : Simhei ; Font-size : 20pt ; Color : Red }
. P1 { Font-size : 18px ; Color : Black ; Background-Image : Url(14-3-2.jpg) }
-->
</ Style >
</ Head >
< Body >
< Center >
< H2 > Insert background image </ H2 >
</ Center >
< HR >
< P Class = P1 > The text color is black, and the text background and webpage background are different. </ P >
</ Body >
</ Html >

Insert background attachment: back-ground-Attachment: Scroll | fixed
Sets whether the background image is moved along with the scroll bar.
Set duplicate background image: Background-repeat: Repeat (horizontal and vertical tile) | repeat-X (horizontal tile) | repeat-y (vertical tile) | no-repeat (not tiled)
When you use the background-image attribute to set the background image of a webpage, the background image is always displayed horizontally and vertically and tiled throughout the window.
By combining the backgrond-image and background-repeat attributes, you can easily control the tile mode of the background image.
Set the background image position: Background-position: Percentage | length | keyword
Instance: Code
< Html >
< Head >
< Title > Set color and background </ Title >
< Style Type = Text/CSS >
<! --
Body { Background-Image : Url(14-7-1.jpg) ; Background-repeat : No-repeat ;
Background-Position : Bottom right }
H2 { Font-family : Simhei ; Color : White ; Font-size : 20px ; Background-Image : Url(14-7-2.jpg) ;
Background-repeat : Repeat-x }
. P1 { Font-size : 18px ; Color : Blue ; Background-color : Yellow ; }
-->
</ Style >
</ Head >
< Body >
< Center >
< H2 > Yellow Crane Tower </ H2 >
< HR >
< P Class = P1 > The old man has gone by the yellow crane. </ P >  
< P Class = P1 > The Yellow Crane will never go forever. </ P >  
< P Class = P1 > The Hanyang tree in the Qingchuan River is located in the Parrot continent. </ P >
< P Class = P1 > Where is Sun muxiang. </ P >
</ Center >
</ Body >
</ Html >

Border and margin:
Border attributes include border style, border color, and Border width. They are mainly used to set borders of each element in a webpage, such as paragraphs, images, and tables.

Border style: boder-style
Border-style: style Value
Border-top-style: style Value
Border-bottom-style: style Value
Border-left-style: style Value
Border-right-style: style Value
Adjust Border Width: border-Width
Border-width: keyword | length
Border-top-width: keyword | length
Border-bottom-width: keyword | length
Border-right-width: keyword | length
Border-left-width: keyword | length
Set border color border-color
Set border attributes: border simultaneously sets the Border width, style, and color.
Border: Border Width | border style | border color
Border-top:
Border-bottom:
Border-right:
Border-left:

Margin: margin-top/margin-bottom/margin-Right/margin-left/margin
It is used to set the gap between the four sides of an element in a webpage and other elements in the webpage.
Fill: padding-top/padding-bottom/padding-Right/padding-left/padding
It is used to control the gap between the border and other elements, which is similar to the margin attribute.