CSS Cascading style learning [1]

Source: Internet
Author: User
Tags connect
Css

1. Connect to an external style sheet

Add an external style sheet to an HTML Web page using the following format:

<link ref= href= type= media=>

<LINK> tags are placed in the head section of the document.

Where the ref attribute is used to define the link between the connection file and the HTML document. REL=STYLESHEET specifies a fixed preferred style. Fixed styles are always applied when a style sheet is activated. Web page makers cannot specify more than one preferred style.

The interaction style is indicated by rel= "Alternate StyleSheet". The third <LINK> tag in the example defines an interaction style that the user can choose to substitute for the preferred style sheet.

Note that browsers today generally lack the ability to choose an interactive style.

A single style can also be given through multiple style sheets

<link rel=stylesheet href= "Basics.css" title= "contemporary" >
<link rel=stylesheet href= "Tables.css" title= "contemporary" >
<link rel=stylesheet href= "Forms.css" title= "contemporary" >

In this example, three style sheets are grouped together into a "contemporary" style, which is applied as a preferred style sheet. To combine multiple style sheets into a single style, you must use the same title in each style sheet.

The optional Type property is used to specify the media type--text/css is a cascading style sheet--allowing browsers to ignore style sheet types that they do not support

The <LINK> tag also has an optional media property that specifies the media or media to which the stylesheet is accepted. The allowable values are

Screen (default), submitted to computer screens;
Print, output to printer;
Projection, submitted to the projector;
Aural, loudspeaker;
Braille, submitted to Braille tactile sensing device;
TTY, telex (using fixed fonts);
TV, TV;
All, output devices.
An external style sheet is ideal when a style is applied to many pages. Web makers use an external style sheet to change the look of the entire site and simply change a file. Similarly, most browsers save an external style sheet in a buffer, so that if the stylesheet is in a buffer, it avoids the delay in displaying the page.

2. Embed a style sheet a style sheet can be embedded in a document using the STYLE element:

A style sheet can be embedded in a document using the STYLE element:
<style type= "Text/css" media=screen><!--body {background:url (foo.gif) red; Color:black} P EM {Backgroun D:yellow; Color:black}. Note {margin-left:5em; Margin-right:5em}--></style>style element is placed in the head section of the document. The required Type property is used to specify the media type, as is the link element. Similarly, the title and media properties can also be specified with the style.
Older browsers, which do not recognize the style element, will present its contents as part of the body so that they are visible to the user. To prevent this, the content of the style element contains an SGML annotation (<!--comment-->) inside, as in the example above.
Embedded style sheets can be used when a document has a unique style (that is, when only a few pages require such a style). If multiple documents use the same style sheet, the external style sheet is more applicable. (When a Web site requires a unified style, it is more convenient to connect an external style sheet (method one), to optimize the speed and maintenance of the site)



Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.