Use External CSS

來源:互聯網
上載者:User
文章目錄
  • What's external CSS
  • Example
  • Why use external CSS file?
Quoted from http://www.tizag.com/cssT/external.php
What's external CSS

When using CSS it is preferable to keep the CSS separate from your HTML. Placing CSS in a separate file allows the web designer to completely differentiate between content (HTML) and design (CSS). External CSS is a file that contains only CSS code and is saved with a ".css" file extension. This CSS file is then referenced in your HTML using the <link> instead of <style>. If you're confused, don't worry. We are going to walk you through the whole process.
Example

This is a html file named index.html: 1 <html>
 2 <head>
 3 <link rel="stylesheet" type="text/css" href="test.css" />
 4 </head>
 5 <body>
 6 <h3> A White Header </h3>
 7 <p> This paragraph has a blue font.  
 8 The background color of this page is gray because
 9 we changed it with CSS! </p>
10 </body>
11 </html>

Make sure save this file as "index.html" (without the quotes) in the same directory as your CSS file.

Why use external CSS file?
  1. It keeps your website design and content separate.
  2. It's much easier to reuse your CSS code if you have it in a separate file. Instead of typing the same CSS code on every web page you have, simply have many pages refer to a single CSS file with the "link" tag.
  3. You can make drastic changes to your web pages with just a few changes in a single CSS file.

相關文章

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.