background-size:
Value: it may be a pixel unit, or as a percentage
< Style > .box { width : 600px ; height : 600px ; border : 1px Solid Blue ; / * background-Image: URL (./ Images / l.jpg) * / background : URL (./ Images / l.jpg) REPEAT-NO ; / * background-size: 300px by; one time only one value representing the width of the set, but the height is always a scaling * / / * background-size: 300px by 500px; when the two values, the first a denotes the width, the second height represents * / / * background-size: 50%; image width of the box to follow to set the percentage of * / / *background-size: cover; covered the entire box is covered with scaled proportionally, if there is an overflow, the overflow will hide * / / * background-size: Contain; perform scaling, as long as the side reached zoom box frame stop * / } </ style >
The path is written in a plurality of pictures, in the middle, separated
background:url(image/aa.png) no-repeat,url(image/bb.png) no-repeat;
.box ul li {}
And set selector
.box,
span,
p {}
The tag specifies the intersection selector or selectors of formula
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>并集选择器</title> <style> h2.D1 Color* /intersection selector, also called a tag selector specified type/ *{ : OrangeRed } </ style > </ head > < body > < div class = "Box" > green water present worry </ div > < span class = "D1" > due to wind wrinkled surface </ span > < H2 class = "D1" > Castle not the original old </ H2 > < P > of the first white </ P > < H2 class = "D2" >Willing to years of quiet good </ h2> </body> </html>
Child element selector
.box > h3 {}
:: first-letter disposed in the first row or the first Chinese character alphabet
:: first-line setting the first line of text
:: selection the selected text contents of a corresponding style
Two common pseudo-element selector
::before
::after
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>两个常用的伪元素选择器</title> <style> div { font-size:50px; } :: the before div { Content : "Today" } div :: the After { Content : "is not raining" } </ style > </ head > < body > < div > Weather </ div > </ body > < / HTML >
Block-level elements features:
1. own separate line
2. The width may be provided, both inside and outside margins
3 can be nested inside the element row, the element row block, or even block elements
4. If the width is not set, the default is the parent container 100% of the width
Representative of the label: div p h1 - h6 ul li ol li dl dt dd header footer nav section aside main
Features inline elements:
1. Set the width and height is ineffective
2. line which can be set in multiple line labels, they are displayed side by side in a row
3. Set the left padding on the bottom right of all work
magin 4. Set up and down does not work, the left and right is active
The default width is the width of the element content
Representative of the label: span ab strong em del ins :: before :: after pseudo-elements
Row within the block element features:
1. Set the width and height is functional
2. You can display more than one line, are displayed side by side in a row
3. Margins are inside and outside work
4. The default content width is the width of the box
Representative of the label: input img button
Conversion between elements:
Inline elements or block elements transfer line within the block: display: block (block); display: inline-block (row within the block)
Blocks within the block-level elements or row switch elements: display: inline (inner line); display: inline-block (block inline); this is almost not used
Inline switch within a block or block-level elements can also be converted, but it does not make sense, do not.
8.color values
There are three color values:
English words, such as red green blue purple orange
Hex: # 0f123d # fa126b # 123 # f0f
rgb values: (0,100,200) between a digital color represented 0--255
Only when the line high and high value is set to the same as can be.
10. The text decoration
text-decoration: underline offline planning overline overline line-throght underlined
text-decoration: none underlined not only remove the underline removed, may also be removed in the scribe line, that is equivalent to remove the default text style
Text-decoration:
text-align: left right center to control the horizontal alignment of the text
text-indent: set the text of the first line indent can take em percentage px also may be negative
letter-spacing: the distance between the character pitch setting two characters, English can be
word-spacing: setting the word spacing, if Chinese, the phrase must be provided, according to distinguish spaces
11. The text shadow
text-shadow: horizontal displacement of the vertical displacement size of the shadow color blur.
background-color
background-image
background-repeat
background-position
background-attachment
background-size
Multi background
Composite selector
Descendant selectors .box ul li
Progeny selector .box> h3
And set the selector .box, p, span, .demo {}
The tag specifies the intersection selector or selectors formula: h2.demo h2 tag having this class demo
Attribute selectors
E[type]
E[type="val"]
E[type^="val"]
E[type$="val"]
E[type*="ea"]
Pseudo-element selector
::first-letter
::first-line
::selection
::before ::after
Display elements
Block-level elements
Row element
Inline block elements
display:block inline-block inline
Most used is a conversion to the line or the span or block
color values
English vocabulary
Hex
rgb value
CSS style appearance
Text-decoration:
Set the display text level text-align: left center right
text-indent: set the text indent em percentage px can also be negative
letter-spacing: Set character spacing
word-spacing: Set word spacing
Text shadow: text-shadow: Horizontal Vertical blurred color shading.