Home > Developer > Web Develop
Writing efficient CSS
1. Use an outer style to replace the line style or inline style.
Inline styles are not recommended:
<!DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01//en" "HTTP://WWW.W3.ORG/TR/HTML4/STRICT.DTD"><HTMLLang= "en"><Head><Metahttp-equiv= "Content-type"content= "Text<title>page title</title>color:red ">...</P></Body></HTML>
Inline styles are not recommended:
<!DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01//en" "HTTP://WWW.W3.ORG/TR/HTML4/STRICT.DTD"><HTMLLang= "en"><Head><Metahttp-equiv= "Content-type"content= "Text<title>page title</title><style type="text/css "Media= "Screen">p {color:red;}</style></Head><Body>...</Body></HTML>
It is recommended to use the outer style:
<!DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01//en" "HTTP://WWW.W3.ORG/TR/HTML4/STRICT.DTD"><HTMLLang= "en"><Head><Metahttp-equiv= "Content-type"content= "Text<title>page title</title><link rel="stylesheet "href= "Name.css"type= "Text/css"Media= "Screen" /></head><Body>...</Body></HTML>
2, in order to be compatible with the old version of the browser, we recommend using link to introduce the external style sheet to replace the way @import imported style.
@import Import method is not recommended:
<!DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01//en" "HTTP://WWW.W3.ORG/TR/HTML4/STRICT.DTD"><HTMLLang= "en"><Head><Metahttp-equiv= "Content-type"content= "Text<title>page title</title><style type="text/css "Media= "Screen">@import url ("Styles.css");</style></Head><Body>...</Body></HTML>
It is recommended to introduce an external style sheet:
<!DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01//en" "HTTP://WWW.W3.ORG/TR/HTML4/STRICT.DTD"><HTMLLang= "en"><Head><Metahttp-equiv= "Content-type"content= "Text<title>page title</title><link rel="stylesheet "href= "Name.css"type= "Text/css"Media= "Screen" /></Head><Body>...</Body></HTML>
3. Using inheritance
Low-efficiency:
p {font-family:arial, Helvetica, Sans-serif;} #container {font-family:arial, Helvetica, Sans-serif;} #navigation {font-family:arial, Helvetica, Sans-serif;} #content {font-family:arial, Helvetica, Sans-serif;} #sidebar {font-family:arial, Helvetica, Sans-serif;} H1 {Font-family:georgia, times, serif;}Efficient:
Body {font-family:arial, Helvetica, Sans-serif;} H1 {Font-family:georgia, times, serif;}4. Using multiple selectors
Low-efficiency:
h1 {color: #236799;} H2 {color: #236799;} h3 {color: #236799;} h4 {color: #236799;}Efficient:
H1, H2, H3, H4 {color: #236799;}5. Use multiple declarations
Low-efficiency:
P {margin:0 0 1em;} p {background: #ddd;} p {color: #666;}Efficient:
p{margin:0 0 1em;background: #ddd; color: #666;}6. Using the Précis-writers property
Low-efficiency:
Body{font-size:85%;font-family:arial, Helvetica, Sans-serif;background-image:url (image.gif); Background-repeat: No-repeat;background-position:0 100%;margin-top:1em;margin-right:1em;margin-bottom:0;margin-left:1em; padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px;border-style:solid;border-width:1px; Border-color:red;color: #222222;}Efficient:
body{font:85% Arial, Helvetica, Sans-serif;background:url (image.gif) no-repeat 0 100%;margin:1em 1em 0;padding:10px;bo rder:1px solid red;color: #222;}7. Avoid using!important
Be careful with the wording:
#news {background: #ddd!important;}You can use the following methods to increase the weight level in specific situations:
#container #news {background: #ddd;} Body #container #news {background: #ddd;}Write a maintainable CSS style
1. Add a comment at the beginning of the style sheet to describe the creation date, creator, tag, and other notes of the style sheet.
/*---------------------------------Site:site NameAuthor:NameUpdated:Date and timeupdated by: Name---------------------------------*/
2, including common color tags.
/*---------------------------------colorsbody background: #def455Container background: #fffMain Text: #333Links: #00600fVisited Links: #098761Hover Links: #aaf433H1, H2, H3: #960H4, H5, H6: #000------------------- --------------*/
3. Give the ID and Class A meaningful name.
4. Integrate the associated style rules.
#header {...} #header H1 {...} #header h1 img {...} #header form {...} #header A#skip {...} #navigation {...} #navigation ul {...} #navigation ul li {...} #navigation ul li a {...} #navigation ul li a:hover {...} #content {...} #content H2 {...} #content p {...} #content ul {...} #content ul li {...}5. Add a clear comment to the style.
/*---------------------------------Header Styles---------------------------------*/#header {...} #header H1 {...} #header h1 img {...} #header form {...} /*---------------------------------Navigation styles---------------------------------*/#navigation {...}How do I manage my entire site's CSS files?
Modular CSS
1. Split the main style sheet into separate style files.
Why would you want to split the style file?
Easier to find style rules. Simplifies maintenance and facilitates management. You can also provide a specific style for a page.
2. Add a bridging style file.
Why would you like to add a bridging style?
You can add or remove styles at any time without having to modify the HTML document.
3, the introduction of bridging style files.
<!DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01//en" "HTTP://WWW.W3.ORG/TR/HTML4/STRICT.DTD"><HTMLLang= "en"><Head><Metahttp-equiv= "Content-type"content= "Text<title>page title</title><link rel="stylesheet "href= "Bridging.css"type= "Text/css" media= "Screen , projection "></Head><Body>...</Body></HTML>
Why define two types of media?
NN4 does not support @import, so bridging styles are not recognized.
4. Import the (detached) CSS file into the bridging style.
@import ' header.css '; @import ' content.css '; @import ' footer.css ';
How does @imports work?
It imports all CSS rules from one file to another. @import cannot be recognized by the old browser.
Hack-free CSS
Dealing with the compatibility of annoying browsers such as IE is one of our biggest headaches.
A lot of friends use Csshack to solve these problems, the problem is that when the IE version of the upgrade replacement, improved support for CSS, the previous use of the hacks will be invalid!
How did you solve the problem?
How to update your page without using Csshacks. If you want to target IE or avoid IE, you can use conditional annotations. "
How do conditional annotations work?
1, for IE, create a new style file.
2. Add the conditional comment code at the beginning of the HTML document.
<!DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01//en" "HTTP://WWW.W3.ORG/TR/HTML4/STRICT.DTD"><HTMLLang= "en"><Head><Metahttp-equiv= "Content-type"content= "Text<title>page title</title><link href="css/import1.css "rel= "stylesheet"<!--[if IE 5]><Linkrel= "stylesheet"href= "Ie5.css"type= "Text/css"Media= "Screen"><![endif]--></Head><Body>...</Body></HTML>
Only the specified version of IE browser recognizes the style of the heart, and the other browsers will completely ignore it.
Why is a conditional comment a good solution?
1, No hacks
A specific CSS rule appears only in the new style table.
2. File separation
The styles defined for a particular version of IE are detached from the main stylesheet, which can be easily removed when the Internet Explorer updates the property support.
3. Targeted
It is possible to define the relevant properties for different versions of IE browser.
<!-- [If ie]><!--[if IE 5]><!--[if IE 6]><!--[if LT ie 6]><!--[if LTE IE 6]><!--[if GT ie 6]& gt;<!--[if GTE IE 6]>
Note One: efficient, maintainable, and modular CSS
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
