[Original] CSS summary !! The second article about HTML !!, Css Article 2

[Original] CSS summary !! The second article about HTML !!, Css Article 2

Similarly, I used xMind to upload CSS and DIV tomorrow. Today, only CSS is available.

But first, it involves the browser principle: there are still many modules that you don't know, but the core modules of the page are like this: (Please take care of them if you need some additional information)

// ============================== The following is a summary of CSS. the language is very powerful and simple, and the parsing speed is also very fast ================

/// ====== The following list of combined div and css charts has not been sorted out ====================== =

// --------------------------------------- Html_Css.html -------------------------- <! Doctype html> 
　　
// -------------------------- Style.css --- z write comments forgive me -------------------------------- body {border: 10px solid red; text-align: center;/*/here is to center IE, the internal block is centered and the compatibility design is specially designed so that all internal texts are centered */font: 12px Arial and; /* set the font to Arial. If the computer does not have this font, use instead */} # wrapper {margin: 0 auto; /* indicates that the padding between the wrapper framework and its parent framework is 0 pixels apart from each other and automatically matches pixels. In this way, FF will be aligned in the play */border: 5px double green; width: 300px; /* the wrapper frame width is 300 pixels */margin: 0 auto;/* indicates that the padding between the wrapper framework and its parent framework is between the upper and lower distances. About 0 pixels are automatically matched. In this way, FF will align in the play */padding: 0px; /* the distance between the font and the wrapper frame is 0px */text-align: left;/* here is a remedy to show the center of all text generated in the IE center setting, make the text display on the left as normal. The contents of the "/}/*" text will not be blocked. the browser will automatically display the content if you set it. the size may have different effects */. tit {float: left; width: 100%; height: 24px; background: url (. /images/titbg.gif );}. tit h3 {margin: 0px; padding: 0px; line-height: 24px;/* allows The content value inside the row is displayed in the center. If the row height is the same as that of the external block, the content is displayed in the vertical center of the external block */font-size: 12px; /* font size */text-indent: 30px;/* indent 30 pixels */background: url (. /images/tittb.gif) no-repeat 3% 46%; /* no-repeat. If you do not repeat the image, draw the image only once. If you do not repeat the image, draw the image only once. If you do not draw the image horizontally within the parent frame, 3% is the horizontal distance from top to bottom */}/* ====================================== header design complete ================== ================================= * // * ============================ ========= design the next div ================================ = */. list {width: 298px! Important /*! Important Meaning L in non-IE kernel browser width Ie does not recognize this label */width: 300px;/* in IE browser width refers to Ie kernel: trident webkit: apple Firefox */float: left;/* float to the left */border: 2px solid # d7d7d0; border-top: 0px;/* the upper border disappears */}. list ul {/* Association selector */float: left; list-style-type: none; margin: 0px; padding: 0px ;}. list ul li {float: left ;/*!!!!!! Div floating has an inheritance relationship, while other element labels do not !!!!!! */Line-height: 20px; width: 40%; margin: 0px 5px;/* the left and right sides of 0 PX are five pixels up and down */background: url (. /images/sidebottom.gif) repeat-x 0 bottom;/* repeat painting along the x axis and start at 0 points at the bottom */}. list ul li a {padding-left: 12px; background: url (. /images/bullet.gif) no-repeat 0 50% ;}. nav {border: 2px solid # 99f; height: 5px; width: 99%; float: left; overflow: hidden; /* in ie, it is specified that the minimum height of the div cannot be less than 18px. Den den hides the excess part. */}. link,. visited {text-decoration: none; // text decoration color: #888;} a: hover {position: relative; top: 1px; left: 1px; text-decoration: underline; color: red ;}
:

Some of them are conventions:
<1> for example, there is a div layer id = wrapper immediately in the body layer, and then set the body label attribute to text-align = "center" in css, and wrapper is set to margin: 0 auto;
This ensures compatibility in all types of browsers.
<2> generally, wrapper indicates that the width of the first div layer is 966px, And the div floating will be sorted out tomorrow.