Shulou(Shulou.com)06/03 Report--

Editor to share with you the CSS stylesheet and format layout example analysis, I believe that most people do not know much about it, so share this article for your reference, I hope you will learn a lot after reading this article, let's go to know it!

Style sheet

CSS (Cascading Style Sheets cascading style sheet), which is used to beautify HTML web pages.

Inline style sheet: example: inline style sheet

Embedded style sheets: must be written in the head tag

Example:

P

{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:

*

{margin:0px; padding:0px;} / / Web page margins are 0 pixels, font spacing is 0 pixels

.mian / / class selector / / call class stylesheet

{

Height:40px

Width:100px

Text-align:center

Background-coloe:red

}

# mian//ID selector / / call ID selector

{

Height:40px

Width:100px

Text-align:center

Background-coloe:red

}

Compound selector: (1) pdagger span, separated to indicate that two tags are juxtaposed with the same style.

(2) mian P is separated by spaces to represent offspring.

(3) mian.p uses "." Separate the p tag in the mian tag

In the style attribute, for example, margin:20px 0px 20px 0px indicates that the width of the border is 20 pixels on the top, 0 pixels on the right, 20 pixels on the left and 0 pixels on the left, clockwise, up, right, down, and left.

Format layout

Lock position (relative to the browser, that is, no matter how the browser scrolls the window relative to the browser) position:fixed

Absolute position and relative position

(1) if there is no absolute (or relative) in the outer layer, then the div is located relative to the browser.

(2) if the outer layer has absolute (relative), then the div locates the position:absolut; (absolute position) position:relative; (relative position) relative to the outer frame.

Layering: if you want a tag on the page to always be displayed at the top, you need to set the value of z, such as: Z, index2; / / z, 2; if the value of / / z is 2, it will not be changed to 1 on the same layer by default

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

Status before a:link hyperlink is clicked

A:visited hyperlink status after click

When a:hover hovers over a hyperlink

When a:active clicks on the hyperlink

The above is all the content of the article "sample Analysis of CSS stylesheet and format layout". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.