5.29
review the CSS
css
Cascading Style Sheets modified page
css syntax
The syntax of the style line 1.
2. Internal and external style sheet syntax style
use of css
1. inline style
2. Internal stylesheet
3. Waibuyangshibiao
4. introducing external style
css selector
ID selector
class selector
tag selector
compositions selector
progeny selector
descendant selectors
universal selector
pseudo class selector: hover up style mouse suspended
priority css pattern
1 is determined according to the weight
2. If the weights are the same, the principle of proximity (the definition of the principle)
weight: just a reference value, and no real meaning
inline 1000
ID 100
class 10
pseudo class 10
label 1
General 0
Important long as there on to the main!
Note: calculate the weight when the pipe does not need to go on behalf of future generations. OK directly add up to
three methods of color
1. Color English words
2.16 hex
3.rgb extension rgba
Text style class
Color
Line-height is determined there are too few lines of
text-align Font aligned
text-decoration underlined
font-style italic
font-family font style such as Arial, Times New Roman
font-weight font bold
font-size font size
/ browsing device, the default font size 16px
Google browser's default font size 12px
Firefox is no limit
display elements of
display
elements in inline line
blocks within inline-block row
block block-level
none hide / no
element of hidden
visibility: hidden
profile
is mainly used in the input tag only you need to empty the
list of
list-style: none to
mouse style
cursor
transparency
opacity: 0.1; value: 0-1 can be expressed through the whole between 0 and 10, 1 represents the full-impermeable
rgba (255, 0,0,0.1)
face questions
visibility: none of the difference: hidden and display?
1.visibility to occupy the space domain, and the display is not occupied
2.visibility: to retain an element of change when hidden hide certain elements on the page space
display: none to hide certain elements while giving other content to fill gaps
3.display: none is completely disappeared, not in the flow of the document placeholder, the browser does not understand that element;
visibility: hidden is gone visually, can be understood as transparency effects 0 placeholder in the flow of the document,
the browser will parse the element;
The difference between opacity and rgba?
opacity color will be affected child elements that are inherited in disguise. It is to use the opacity of the background when the hiding place
will be hidden have some impact, represents the entire element. And rgba not, it will all be covered live, only represents the background color
BACKGROUND 1.CSS class style
background-color background color of the
background-image background image
background-repeat repeat background image
repeat-y in the y-axis only repeat
repeat-x in the x-axis only repeat
no-repeat will not be repeated, only appears once
positioning background-position background image
values: two, respectively, represent the x and y directions. If only a write, then the two values are equal
, for example: Jingdong, Taobao star Good
Sprite FIG: each set of icons, the purpose is to reduce the http request
background is put together all of all of the above
background: color image repeat position
background-size background image size
One way css layout
positioning top, left, right, bottom element only in the case will be used to increase the positioning of
the relative positioning of the boss usually do not go with the top, left, right, bottom
absolute positioning second child
elements from the document flow will
generally not go with margin, with the top, left, right, bottom
although it can be effective, but in order to facilitate the development of simple code.
Fixed positioning is certainly not the same father
elements from the document flow will
be used: Top
ad sidebar
Wild Child purebred. The tube can only live browser window
under normal conditions: relative and absolute positioning are occurring simultaneously
in general all the drop-down box is combined with the absolute relative positioning completion
display: inline-block; inline- block rows conversion block level the element
pattern
width: 160px;
height: 30px;
text-align = left: Center; text alignment
line-height: 30px; high line
border: 1px solid #ccc; solid line represents a solid border
cursor: pointer; transformed mouse
position: relative; relative positioning