لطفا منتظر باشید ...
HTML and CSS
By
Molly E. Holzschlag...............................................
Publisher: Addison Wesley ProfessionalPub Date: April 22, 2005ISBN: 0-13-185586-7
Pages: 336
Index
Importing Style Sheets
Imported style sheets are a lot like linked style sheets, in that you create a separate file for the styles you want to import. Then you can either import those sheets into a primary style sheet that is then linked to the document, or import directly into the document.
Importing Directly into a Document
Importing into a document actually involves two types of style sheets: the separate style sheet that's to be imported (I'll call that import.css) and an embedded style sheet in the document. This is because importing isn't done with an element such as link; instead, the CSS directive @import is used (see Example 7-4).
Example 7-4. Importing style with an embedded sheet
The style sheet @import.css will be imported directly into the document. Imagine the style element being filled with all the style rules within the import.css filethat's exactly what happens. So now the style is actually embedded in this file.You can use this technique for as many documents as you want, but typically this technique is used primarily in workarounds. A number of browsers, particularly Netscape 4 versions, do not support the @import directive, yet they do support the link element. Because Netscape 4.x has limited support for CSS and you have to take care to send styles to it, separating out those styles that you don't want it to misinterpret and those styles you know it can support into linked and imported allows Netscape users to see some, but not all, styles. This is very effective as a workaround when you must support Netscape 4 versions. Another workaround using the @import directive is to simply place all styles into the imported sheet. Then any browser that doesn't support the @import simply won't read the styles, and a plain, unstyled document gets sent to the browser instead.QUANTUM LEAP: FLASH OF UNSTYLED CONTENT (FOUC)If you are using the @import technique and have no link or script element in the head of your document, Internet Explorer will often display the unstyled content first and then redraw the page with the style. It's an annoying bug but is easily avoided by adding a link or script element to the head of the document. For more about FOUC, see http://www.bluerobot.com/web/css/fouc.asp.Most of the time, you won't be using the @import in an embedded sheet unless you have a very specific reason to do so.
<head>
<head>
<title>working with style</title>
<style type="text/css">
@import url(import.css);
</style>
</head>
Importing Style into a Linked Style Sheet
Another use for the @import directive, and the real reason @import exists, is to be able to modularize your styles and then import them into the primary style sheet. Consider Figure 7-5.
Figure 7-5. Importing styles into a main sheet.
