We have learned the CSS syntax before, but to display the effect in the browser, we need the browser to identify and call it. When the browser reads a style sheet, it must read it in text format. Here we introduce four ways to insert a style sheet into the page: [u] links external style sheets [/u], [u] internal style sheets [/u], and [u] import external style sheets [/u] and [u] Embedded style [/u].
1. Link the external style sheet
To link an external style sheet, save the style sheet as a style sheet file, and then mark it with <link>, the <link> mark must be placed in the <Head>
......
<Link href = "mystyle.css" rel = "stylesheet" type = "text/css" media = "all">
......
</Head>
In this example, the browser reads the defined style sheet in document format from the mystyle.css file. Rel = "stylesheet" refers to the external style sheet used in the page. Type = "text/css" indicates that the file type is style sheet text. Href=”mystyle.css "is the file location. Media is a media type. These media types include screen, paper, speech synthesis devices, and braille reading devices.
An external style sheet file can be applied to multiple pages. When you change the style sheet file, the style of all pages changes accordingly. It is very useful when creating a large number of websites with the same style pages, which not only reduces the repetitive workload, but also facilitates later modification and editing, and reduces repeated download code during browsing.
You can use any text editor to edit a style sheet File (for example, the extension name of the general style table file is. Css. The content of mystyle.css is as follows:
Hr {color: sienna}
P {margin-left: 20px}
Body {background-image: url ("images/back40.gif ")}
/* Upload File */
2. Internal style sheets
The internal style sheets place the style sheets in the <Head>
......
<Style type = "text/css">
Hr {color: sienna}
P {margin-left: 20px}
Body {background-image: url ("images/back40.gif ")}
</Style>
......
</Head>
Note: some earlier browsers do not recognize the style tag, which means that earlier browsers ignore the content in the style tag, and the content in the style tag is directly displayed on the page as text. To avoid this situation, we add HTML annotations (<! -- Comment -->) hide the content without displaying it.
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
