Four ways to combine CSS with CSS and HTML

Source: Internet
Author: User

Original address

Use the Style property of the HTML tag

Each HTML tag has a property on it: Style, which combines CSS and HTML

Example: Set the font background color to red and the font color to yellow.

<!DOCTYPE html>            <meta charset="utf-8"/>        <title>结合方式一</title>        <body>        <div style="background-color: red;color: yellow;">hjwblog.com</div>    </body>
Use the HTML style label

This label is written in the label.

Example:

<! DOCTYPEHtml>  <metacharset="Utf-8" /> <title>Combination Mode Two</title> <styletype="Text/css">Div{ Background-color: Blue; Color: Yellow; } </style>  <body> <div>Hjwblog.com</div> </body>
Inside the style tag @import

First create a CSS file, here is mycss.css , under the CSS folder.

/* * 这是注释 */div{    background-color: yellow;    color: blue;}

And then HTML writes like this

<! DOCTYPE  html>  <HTML>   <meta   charset=   "Utf-8"         span class= "kw" >/>  <TITLE>  combined mode three </TITLE>  <style   type=   "TEXT/CSS"             >          @import  url ( "CSS/MYCSS.CSS" )     </STYLE>     </HEAD>         <BODY>  <DIV>  hjwblog.com</DIV>  </body  </HTML>   
Using the header Tag link

Using <link> Labels

<!DOCTYPE html>"utf-8" />        <title>结合方式四</title>        <link rel="stylesheet" type="text/css" href="css/mycss.css"/>    
Attention

The third way in some browsers does not display normally, generally in the fourth way.

Four ways to combine CSS with CSS and HTML

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.