Initial use of Div + Css and DivCss

Initial use of Div + Css and DivCss

Websites using DIV + CSS have the following advantages: 1. Separation of performance and content 2. concise code, improve page browsing speed 3. ease of maintenance and Revision 4. Improve the indexing efficiency of search engines on webpages.

There are three types of CSS in html files: inline, embedded, and external.

It seems that Css must be clear about its selection character in the "six" section: 1. HTML selector 2, class selector 3, ID selector 4, pseudo element selector 5, Association selector 6, and combination Selector.

There are also six attributes in Css: 1. Font attributes 2. Text attributes 3. Background attributes 4. Border attributes 5. Mouse attributes 6. List attributes.

Example:

-------------- Html ----------------------

<! Doctype html> 
-------------- Css --------------------
Body {text-align: center;/* This is specially designed to center the display of internal blocks in IE. It is compatible with the design and cannot be forced. After this setting, all internal texts are centered */font: 12px Arial, Al ;}# wrapper {margin: 0 auto;/* here is the Firefox center design, where the upper and lower values are 0 and the left and right sides are automatic, the block will be centered and aligned */padding: 0px; width: 300px; text-align: left;/* this is for IE center design, A remedy for the center display of all generated text so that the text is normally displayed on the left */}. title {font: left; width: 100%; height: 24px; background: url (. /images/titbg.gif );}. title h3 {margin: 0px; padding: 0px; line-heigh T: 24px;/* enables the content in the row to be vertically centered. If the Row Height and the external block are the same, the content will be centered in the external block */font-size: 12px; text-indent: 30px; background: url (. /images/tittb.gif) no-repeat 3% 50% ;}. list {width: 298px! Important;/* The width in the non-IE browser, which is not recognized by IE! Important label */width: 300px;/* The width in IE browser refers to the kernel of IE: trident, webkit: Apple, FireFox */float: left; border: 1px solid # d8d8d8; border-top: 0px ;}. list ul {float: left; list-style-type: none; margin: 0px; padding: 0px ;}. list ul li {float: left; line-height: 20px; margin: 0px 5px; width: 45%; background: url (. /images/sidebottom.gif) repeat-x 50% bottom ;}. list ul li a {padding-left: 12px; background: url (. /images/bullet.gif) no-repeat 0 50% }. one {height: 5px; width: 100%; float: left; overflow: hidden} a: link, a: visited {text-decoration: none; color: green;}: hover {position: relative; top: 1px; left: 1px; text-decoration: underline; color: black ;}
----------------------------

Some precautions include:
1. in IE6, the minimum height cannot be less than 18px, and the excess part is hidden.
2. The content is king, and the content cannot be blocked. the browser will automatically display the space for the content.
3. the browser will give up the default setting if there is something different.
I am doing some basic things. You may have some valuable comments! Thank you!