Detailed explanation of CSS style sheets and format layout

Style Sheets

CSS (Cascading Style Sheets) is used to beautify HTML web pages.

Inline style sheet: Example: <p style="font-size:10px;">Inline style sheet<p>

Inline style sheet: must be written in the head tag

Example: <style type="text/css">

p

{ style;}

</style>hei

External style sheet: Create a new CSS file to place the style sheet. Right-click in HTML--CSS style--Attach style sheet

Example: <style type="text/css">

*

{ margin:0px; padding:0px;} //The webpage margin is 0 pixels and the font spacing is 0 pixels

.mian //class selector <div class="mian"></div>// Call class style sheet

{

height:40px;

width:100px;

text-align:center;

background-color:red;

}

#mian//ID selector <div id="mian"></div> //Call ID selector

{

height:40px;

width:100px;

text-align:center;

background-color:red;

}

</style>

Compound selector: (1) P, span, used to separate two tags with the same style.

(2) Mian P separated by a space indicates descendants

(3) mian.p is separated by "." to indicate the p tag in the mian tag

In the style attribute, for example: margin: 20px 0px 20px 0px means the width of the border is 20 pixels on the top, 0 pixels on the right, 20 pixels on the bottom, and 0 pixels on the left. The order is clockwise: top-right-bottom-left.

Format layout

Lock position (position relative to the browser, i.e. the position relative to the browser remains unchanged no matter how the browser scrolls) position:fixed;

Absolute and relative positioning (1) If the outer layer does not have absolute (or relative), then the div is positioned relative to the browser

(2) If the outer layer has absolute(relative), then the div is positioned relative to the outer border using position:absolut; (absolute position) position:rel; (relative position)

Layering: If you want a label on the page to always be displayed on the top, you need to set the z value, such as: z-index:2; //If the z value is 2, it will be displayed on the upper layer. If it is not changed, the default value is 1, and they are all on the same layer.

The order of common hyperlink style definitions is L --v--h--a

a:link The state of a hyperlink before it is clicked

a:visited The state after a hyperlink is clicked

a:hover When the mouse hovers over a hyperlink

a:active When clicking a hyperlink

The above is all the content of the detailed explanation of CSS style sheets and format layout brought to you by the editor. I hope you will support 123WORDPRESS.COM~

Original URL: http://www.cnblogs.com/ouyangtangfeng99/p/5377983.html