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

Global.css | reset.css (formatting style)

Common.css (Common component style)

Layout.css (current page style)

Clear the browser default style for all pages in the site to ensure that the initial style is consistent under all browsers.

Common.css (Common component style)

Generally speaking, the header and bottom styles of all pages of a website are the same, and there will be no major changes for a long time. What will probably change is that products and operators often need to add and remove certain entrances. To ensure that all page headers of the whole site are replaced at once, as long as the header file is sent, the corresponding style will take effect immediately, and there will be a quick response.

For example, page flipping, forms (input boxes, buttons) and other styles are also unified throughout the site, put these styles into the common.css, if one day all the button styles want to change, a replacement will be successful.

Layout.css (current page style)

All styles except common components are written in this style file, and ensure that a page has a separate style, and the page html and css writing should be modular to ensure a quick response to the frequent iterations of the project.

Why do you want to ensure that a page has an independent style, and it should be modular? there must be friends who have the same experience with me. If you modify a single line of style code, the whole page or even N pages will be affected. I don't know what went wrong for a long time. Return to the pre-modified version, and there will be no problem. Finally found the reason, but can not change the previous style, can not delete, can only increase, a long time, css style file is getting bigger and bigger, and finally is overburdened, the entire page code can only be rewritten.

In fact, global.css and common.css can also be merged into one file, after all, the format style is only a few dozen lines of code, and the format style, header, bottom style will be used on each page.

This leaves only two styles per page:

Common.css

Layout.css

If there are too many components in common.css, and many of them are not commonly used, you can also do this as follows:

Heads.css (format style, head, bottom)

Common.css (Common component style)

Layout.css (current page style)

In general, there are only two styles, and it won't be too much problem to link the component style when you need it.

Finally, don't stuff everything into the component style. if you write something, you'd rather copy each page repeatedly than stuff it into the component style. One day, you will find that the style of this component is frighteningly large, and many of them are useless.

/ * General basic class 1benchmark /

/ * formatting style * /

Body,div,dl,dt,dd,ul,ol,li,h2,h3,h4,h5,h6,h7,pre,form,fieldset,input,textarea,p,blockquote,th,td {margin:0;padding:0;}

Table {border-collapse:collapse;border-spacing:0;}

Fieldset,img {border:0}

Address,caption,cite,code,dfn,em,strong,th,var {font-style:normal;font-weight:normal}

Ol,ul {list-style:none}

Caption,th {text-align:left}

H2,h3,h4,h5,h6,h7 {font-size:100%;font-weight:normal}

Q:before,q:after {content:''}

Abbr,acronym {border:0}

/ * text typesetting, color * /

.f12 {font-size:12px}

.f13 {font-size:13px}

.f14 {font-size:14px}

.f16 {font-size:16px}

.f20 {font-size:20px}

.fb {font-weight:bold}

.fn {font-weight:normal}

.t2 {text-indent:2em}

.red, a.red {color:#cc0031}

.darkblue, a.darkblue {color:#039}

.gray, a.gray {color:#878787}

.lh250 {line-height:150%}

.lh280 {line-height:180%}

.lh300 {line-height:200%}

.unl {text-decoration:underline;}

.no _ unl {text-decoration:none;}

/ * location * /

.tl {text-align:left}

.tc {text-align:center}

.tr {text-align:right}

.fl {float:left;display:inline}

.fr {float:right;display:inline}

.cb {clear:both}

.cl {clear:left}

.cr {clear:right}

.vm {vertical-align:middle}

.pr {position:relative}

.pa {position:absolute}

. abs-right {position:absolute;right:0}

.zoom {zoom:1}

.hidden {visibility:hidden}

.none {display:none}

/ * length height * /

.w10 {width:10px}

.w20 {width:20px}

.w50 {width:50px}

.w90 {width:90px}

.w100 {width:100px}

.w200 {width:200px}

.w250 {width:250px}

.w500 {width:500px}

.w800 {width:800px}

.w {width:100%}

.h60 {height:50px}

.h80 {height:80px}

.h200 {height:100px}

.h300 {height:200px}

.h {height:100%}

/ * margin * /

.m10 {margin:10px}

.m15 {margin:15px}

.m30 {margin:30px}

.mt5 {margin-top:5px}

.mt10 {margin-top:10px}

.mt15 {margin-top:15px}

.mt50 {margin-top:50px}

.mt100 {margin-top:100px}

.mb5 {margin-bottom:5px}

.mb10 {margin-bottom:10px}

.mb15 {margin-bottom:15px}

.mb100 {margin-bottom:100px}

.ml5 {margin-left:5px}

.ml10 {margin-left:10px}

.ml15 {margin-left:15px}

.ml20 {margin-left:20px}

.ml30 {margin-left:30px}

.ml50 {margin-left:50px}

.ml100 {margin-left:100px}

.mr5 {margin-right:5px}

.mr10 {margin-right:10px}

.mr15 {margin-right:15px}

.mr50 {margin-right:50px}

.mr100 {margin-right:100px}

.p10 {padding:10px;}

.p15 {padding:15px;}

.p30 {padding:30px;}

.pt5 {padding-top:5px}

.pt10 {padding-top:10px}

.pt15 {padding-top:15px}

.pt20 {padding-top:20px}

.pt30 {padding-top:30px}

.pt50 {padding-top:50px}

.pb5 {padding-bottom:5px}

.pb100 {padding-bottom:100px}

.pl5 {padding-left:5px}

.pl10 {padding-left:10px}

.pl50 {padding-left:50px}

.pl100 {padding-left:100px}

.pr5 {padding-right:5px}

.pr10 {padding-right:10px}

.pr15 {padding-right:15px}

.pr100 {padding-right:100px}

/ * General basic class 2courses /

/ * Copyright 2008 TSXMLOVE. All Rights Reserved. , /

* {

Padding: 0px

Margin: 0px

Text-align: left

Font-family:Arial, Verdana, Tahoma, Song style, Helvetica, sans-serif

Line-height: 150%

}

Body {

Font-size: 14px

Text-align: center

Color: # 000000

Background-p_w_picpath: url. / Images/body_bg.jpg)

Background-repeat: repeat-x

}

Table {

Border-collapse: collapse

}

Td {

Padding: 3px

}

Img {

Border: none

}

Input {

Padding: 1px

Vertical-align: middle

Line-height: normal

}

. main-box {

Margin-right: auto

Margin-left: auto

Width: 960px

Clear: both

Zoom:1

Overflow:hidden

}

.text-overflow-hidden {

White-space: nowrap

Word-spacing: normal

Letter-spacing: normal

Overflow: hidden

}

.box-align-center {

Margin-right: auto

Margin-left: auto

}

/ * css defines the four states of hyperlinks in order. , /

A:link, a:visited {

Text-decoration: none

Color: # 1F376D

}

A:hover, a:active {

Text-decoration: underline

Color: # BD0A01

Border: none

}

/ * the above statements define the styles of "links, visited links, when the mouse is over and when the mouse is clicked".

Note that you must write in the above order, otherwise the display may not be what you expected. Remember that the order is "LVHA". , /

Ul {

Clear:both

Overflow:hidden

Width: 100%

}

Ul, li {

List-style:none

}

.valign {

Display:table-cell

* display: inline

Zoom:1

Vertical-align:middle

}

.text {word-wrap:break-word;overflow:hidden;word-break:break-all;}

/ * = CSS Vertical Center = = * /

.holder {

Width:740px

Height:300px

Border:1px solid # 777

Text-align:center

Display:table-cell

Vertical-align:middle

}

/ * the following styles are for IE*/

.edge {

Width:0

Height:100%

Display:inline-block

Vertical-align:middle

}

.container {

Vertical-align:middle

Display:inline-block

}

/ *

/ * CSS Hack*/

.class {

/ * all browsers * /

* background-color:#00FF00;/*IE*/

_ / * IE6*/

}

/ * = Universal Float closure = * /

.clear: after {

Content: ".

Display: block

Height: 0

Clear: both

Visibility: hidden

}

.clear {display: inline-block;} / * for IE/Mac * /

/ * /

.clear {

Zoom: 1; / * triggers hasLayout * /

Display: block; / * resets display for IE/Win * /

} / * Only IE can see inside the conditional comment

And read this CSS rule. Don't ever use a normal HTML

Comment inside the CC or it will close prematurely. , /

/ * = omnipotent Float closure 2cm /

.overflow-hidden {overflow:hidden;} / * Control background overflow * /

.equal-height {margin-bottom:-32800px;padding-bottom:32800px;} / * Control height is small enough * /

/ * = omnipotent Float closure 3mm /

.clear

{

Height:0px

Clear:both

Font-size:0px

Line-height:0px

Zoom: 1

}

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.