Component-based CSS manages the CSS files of your entire site_html/css_WEB-ITnose

Why split the style file?

Easier to find styles Rules. Simplify maintenance and facilitate management. You can also provide specific styles for a certain page.

Why add a bridge style?

You can add or remove styles at any time without modifying the HTML document.

Why define two media types?

NN4 does not support @import, so the bridge style cannot be recognized.

@import 'header.css';

@import 'content.css';

@import 'footer. css';

@imports How does it work?

It changes all CSS rules from One file is imported into another file. @import cannot be recognized by old

browsers. 🎜>

This is an ideal concept for

large sites

.

Hack-free CSS

Handling annoying browsers like IE is one of our biggest headaches.

Many friends use

CSS Hack to solve these problems.

The problem is that when the IE version is upgraded and its support for CSS is improved, the hacks used before will be

invalid !

What are you doing? What's the solution to this problem?

"We ask that you update your pages without using CSS hacks. If you want to target or avoid IE, you can use Conditional comments

.”

How do conditional comments work?

Step 1. Create an experience style file for IE

Step 2. Add conditional comments at the beginning of the HTML document

code

Only the specified IE browser version recognizes this heart style, other browsers will completely ignore

it.

Usual browser recognition: (non-IE browsers , such as Firefox, Chrome, etc.)

Specific IE version identification:

For example, most browsers will add padding to the width of the container, but IE5 will not. In this case, IE5 displays a smaller container.

main .css (recognized by all browsers including IE5):

#container{ width: 600px; padding: 100px;}

ie5.css (only IE5 recognition):

#container {width: 800px; }

Why are conditional comments a good solution?

1.

No hacks

Specific CSS rules only appear in new style sheets.

2.

File separationStyles defined for specific versions of IE are separated from the main style sheet, and these files can be easily removed when the IE browser is upgraded and updated to support attributes.

3. Targeted

can define relevant attributes in a targeted manner for different versions of IE browsers.