Correct syntax for include css file?

Depending on where I 开发者_如何学运维look, I see different way to include css.

Examples

<link rel="stylesheet" type="text/css" media="screen, projection" href=""/>
<link rel="stylesheet" type="text/css" media="all"                href=""/>
<link rel="stylesheet" type="text/css" media="screen"             href=""/>
<link rel="stylesheet"                                            href=""/>

Do they all do the same?

Is one of them the correct way?

---

All are correct. The type attribute is not required - it is just a hint for browsers but can be omitted. The media attribute tells the browser when the CSS file should be used. For example, if you specify media="print" the CSS file will only get used when printing the page (try to print a Wikipedia page, for example).

Generally this variant is fine in most situations:

<link rel="stylesheet" type="text/css" href="..."/>

---

At minimum you need the rel and href attributes. The type attribute is often used, but not required.

The media attribute is used to target specific devices.

For Example:

<link href="print.css" rel="stylesheet" type="text/css" media="print" /> 

tells the browser to apply the print.css file only if the user is trying to print the webpage.

---

They are all correct syntax.

Maybe this will help you : css media

The css will be picked depending on the media tag

• all

  Suitable for all devices.

• braille

  Intended for braille tactile feedback devices.

• embossed

  Intended for paged braille printers.

• handheld

  Intended for handheld devices (typically small screen, limited bandwidth).

• print

  Intended for paged material and for documents viewed on screen in print preview mode. Please consult the section on paged media for information about formatting issues that are specific to paged media.

• projection

  Intended for projected presentations, for example projectors. Please consult the section on paged media for information about formatting issues that are specific to paged media.

• screen

  Intended primarily for color computer screens.

• speech

  Intended for speech synthesizers. Note: CSS2 had a similar media type called 'aural' for this purpose. See the appendix on aural style sheets for details.

• tty

  Intended for media using a fixed-pitch character grid (such as teletypes, terminals, or portable devices with limited display capabilities). Authors should not use pixel units with the "tty" media type.

• tv

  Intended for television-type devices (low resolution, color, limited-scrollability screens, sound available).

---

IMHO the 4th is the least good as it does not declare the stylesheet file type, although it is optionally.

<link rel="stylesheet" type="text/css" media="screen, projection" href=""/>
<link rel="stylesheet" type="text/css" media="all"                href=""/>
<link rel="stylesheet" type="text/css" media="screen"             href=""/>

These three differ in the media, as you probably noticed. The media tells to which media the stylesheet should be applied to. See Section 7 (Media Types) of the CSS 2 standard.

I personally prefer this way:

<style type="text/css">
  @import url("import1.css");
  @import url "import2.css";
</style>

For more information on @import have a look at this article by about.com .

---

Media attribuute specifies when the css file should be loaded

it should be working in all major browsers

Valid values: for media attribute

• screen - Computer screens (this is default)
• tty - Teletypes and similar media using a fixed-pitch character grid
• tv - Television type devices (low resolution, limited scroll ability)
• projection - Projectors
• handheld - Handheld devices (small screen, limited bandwidth)
• print - Print preview mode/printed pages
• braille - Braille feedback devices
• aural - Speech synthesizers
• all - Suitable for all devices

reference w3 schools

---

<LINK href="special.css" rel="stylesheet" type="text/css">

Reference: http://www.w3.org/TR/html40/present/styles.html