I. Background Properties
1. Background Color
background-color: red;
2. Background Pictures
1) setting a background image: background-image: url ( "path");
Set the background image, specify the image path, if the Chinese or spaces are path requires quotes
2) set the background image repeat mode
The default background image from the upper left corner of the display element, if the picture does not match the size of the element size, the following occurs:
1. If the element size is larger than the picture size, the tile will automatically repeated until the entire element is covered
2. If the element size is smaller than the size of the picture, the default picture displayed from the top left corner of the element, the excess is not visible
Value:
Default repeat, repeated along the horizontal and vertical directions tiled
repeat-x along the X axis repeated tiling
repeat-y along the Y axis repeated tiling
no-repeat no repeat tile
background-repeat:repeat/repeat-x/repeat-y/no-repeat
3) the set background image display position: in the upper left corner element default display background-position: xy;
Value ways:
1. pixel values: set the background image coordinates of the starting point in the element coordinate system
2. azimuth values
-
- Horizontal: left / center / right
- Vertical: top / center / bottom
NOTE: If only one value of the azimuth direction, the other direction is the default center
3. Percentage: similar position value, display coordinates calculated based on a percentage of the background image.
Calculation:
Abscissa = (element width - background image width) * x%
Ordinate = (element height - background image height) * y%
Special value:
0% 0% upper left corner
100% 100% lower right
50% 50% centered
Sprite art: To reduce the network request, the icon may be spliced all over an image, a network request to obtain all; background-position by means of adjusting the position of the background image, for implementing different display icons
4) Set background image size: background-size: width height;
Value ways:
1. The pixel value
- 500px 500px; specify the width and height
- 500px; specify the width, height adaptation
2. Percentage: The percentage is calculated with reference to the size of the elements
- 50% 50%; the elemental width and height, the image width and height are calculated
- 50%; calculated on an elemental image width and height width, picture height scaling
3. Background shorthand properties: background: Color URL ( "") REPEAT position;
note:
1. If you need to set the attribute values above, in accordance with the writing order of the corresponding
2. background-size separately provided
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div, h1 { width: 100px; height: 100px; margin: 200px auto; background-color: pink; background-image: url(northStar.jpg); /*y轴重复*/ background-repeat: repeat-y; /*x轴重复*/ background-repeat: repeat-x; /*不重复*/ background-repeat: no-repeat; /*background-position:-100px -100px;*/ background-position: 100% 100%; } div:hover { background-position: -160px -40px; } h1 { width : 500px ; height : 500px ; margin : 0 Auto ; / * background-size special value: Cover: geometric stretched to cover the image is large enough to completely cover the element portion is not visible beyond the (minimum margins and elements block as large) contain: geometric image comprises receiving element is stretched just to (margin does not exceed the maximum element blocks) * / background-size : Cover ; } H2 { width : 500px ; height : 500px ; background : Cyan url (photo .jpg) no-repeat center; Font : 400 36px "Times New Roman" ; } </ style > </ head > < body > < H2 > Font Style Gallery </ H2 > < h1 of > </ h1 of > < div > </ div > </ body > < / HTML >
Second, text attributes
1. font-related
1) Set Font Size: font-size: 20px;
2) Set the font weight degree
Value:
- normal (default value) is equivalent to 400
- Bold (bold) is equivalent to 700
3) Set italics: font-style: italic;
4) Set Font Name: font-family: Arial, "black body";
Value:
- You can specify multiple font names as alternative font, use a comma
- If the font name for the Chinese, or the name appeared in a space, you must use quotation marks
例 : font-family:Arial;
font-family:"黑体","Microsoft YaHei",Arial;
5) shorthand font attributes: font: style weight size family;
Note:
1. If the values of four properties must be set, in strict accordance with the order of writing
2. size family is required
2. Text Styles
1) Text color: color: red;
2) decorative thread text: text-decoration: none;
Value:
- underline underline
- overline overline
- line-through strikethrough
- none cancel decorative lines
3 the horizontal alignment) of the text: text-align: center;
Value:
- left (default value) Align Left
- Align center
- right right alignment
- Align ends justify
4) High-line: line-height: 30px;
Use: in the current line of text is always vertically centered, can be adjusted by means of the line height in the vertical display position of the text elements
- line-height = height in the vertical center line of text setting element
- line-height> height down display text
- line-height <height against the text on a display
Special: line-height may be employed unitless value, represented as a multiple of the current font size, line height, this calculation
5) font attributes shorthand 2: font: size / line-height family;
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 p{ 8 font-size:32px; 9 font-weight:bold; 10 /*font-style:italic;*/ 11 font-Family : "Arial", "bold" ; 12 is Color : Blue ; 13 is text-Decoration : none ; 14 width : 200px ; 15 background : Orange ; 16 height : 200px ; . 17 / * centering * / 18 is text-align = left : The justify ; . 19 / * and height as text (centering effect) * / 20 / * The high font size calculation line * / 21 line-height:2; 22 } 23 span{ 24 /*行高*/ 25 font:italic 700 32px/2 "黑体"; 26 background:red; 27 28 } 29 </style> 30 </head> 31 <body> 32 <h1>python</h1> 33 <p>hello python hello python hello python hello python hello python hello python</p> 34 <span>人生苦短</span> 35 </body> 36 </html>