Css Div layout summary, _html/css_WEB-ITnose

1. Group selector.
Description: When several elements have the same style attributes, the same statement can be called. The elements are separated by commas.

p,td,li {
Font-size: 12px;
}

2. Derived selector.
Description: You can use derived selectors to define styles for child elements in an element, for example:

li strong {
font-style: italic;
font-weight: normal;
}

is to define an italic but not bold mode for the strong sub-element of li.
3. ID selector.
Explanation: CSS layout is mainly implemented using layer divs, and the div style is defined through the 'id selector'.
For example, we first define a layer.

< div id ="menubar" >

Then define it like this in the style sheet,

#menubar {
margin : 0px ;
background : #FFFFF ;
}

Where menubar is defined by yourself The name of the div, be sure to add a '#' sign in front of it.
id selector also supports derivation, for example:

#menubar p {
text-aglin: right;
margin-top: 10px;
}

This method is mainly used Definition layers, and those that are more complex and have multiple derived sub-elements,
4. Category selector.
Note: A dot is used in CSS to represent the definition of the category selector, for example:

.12px{
text-aglin:center;
font-family: 宋体;
font-size:12px;
}

In the page, use the class="category name" method to call:

12px size font< /span>

This method is more flexible and can be created and deleted at any time.
5. Define the link style (pseudo-class style).
Description: 4 pseudo-classes are used in CSS to define link styles, respectively. It is: a:link, a:visited, a:hover, a:active. For example:

a:link { font-weight : bold ; text-decoration : none ; color : #c30 }
a:visited { font-weight : bold ; text-decoration : none ; color : #c60 }
a:hover { font-weight : bold ; text-decoration : none ; color : #FFFFF }
a:active { font-weight : bold ; text-decoration : none ; color : #EEE }

                                                                                                                                                  > Shuffle the order, otherwise the style will be different from what you expected. Their principle is: the principle of love and hate.
That is the principle of love and hate. The order is that the "l" in love is link, "v" is visited, the "h" in hate is hover, and "a" is active.

6. Use selectors in combination to create exquisite design effects.

Use beautiful patterns to replace the dull black spots of ordinary unordered lists. First, use css rules to tell the unordered list of the category attribute inventory.

ul.inventory {

list-style : disc url(/images/common/lister2.gig) inside ;
}

His call tag:

Code

• Angelfish(67 items)
• Angels/Frogfish(35 items)


• Angelfish(5526 items)


• Angelfish(15 items)




7. The abbreviations are in clockwise order.
margin:25px 0 25px 0;
8. Line height.

Description :150% of normal line height.


line-height:150%;

Okay, in recent days, the layout of the project login and the main page and CSS are not professional artists. Doing it while studying and recording useful things to share with you. Put down your pen,