CSS basic tutor...LOGIN
简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）

CSS basic tutorial: How to introduce CSS

Embedded

Introduce CSS styles through the <style> tag.

Grammar format: <style type = “text/css”></style>

Tips: The CSS style in <style> can only be used for the current web page .

In the same web page, the <style> tag can appear multiple times. 

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>php.cn</title>
    <style type="text/css">
    h1{
         color:red;
     }
    </style>
    </head>
    <body>
        <h1>习近平心中的互联网</h1>
        <p>互联网是20世纪最伟大的发明，它正在将人类“一网打尽”，人们在不知不觉中已经融入了互联网生态，互联网让世界变成了“鸡犬之声相闻”的地球村。</p>
    </body>
        <style type="text/css">
   p{
         color:blue;
     }
    </style>
</html>

External link

##Introduce an external CSS file through the <link> tag ( .css), in this case, the common CSS code can be shared by multiple web pages.

<link rel = “stylesheet” type = “text/css” href = “css/public.css” />

<link> Common attributes of tags

  • rel: That is, what type of file is imported. Value: stylesheet

  • type: content type.

  • href: The imported CSS file address.

Note:

  • ##<link> tag is placed in the <head> tag.

  • The same web page can use multiple <link> to link to multiple external style files.


##Inline style (mainly used For the style of JS control elements)

Every HTML tag has some common attributes: class, id, title, style.

The value of the style attribute in the HTML tag is exactly the same as the style in CSS.

Note:

    In inline styles, CSS code cannot be written too much;

    • In inline style, multiple CSS properties cannot be wrapped, that is, they can be written in one line.

    • Inline styles have the highest priority, even higher than ID selectors.

  • In the previous example of priority, we used this introduction method
    • <!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>php.cn</title>
    <style type="text/css">
     h1{
         color:green;
     }
    .hclass{
        color:bule;
    }
    #hid{
        color:black;
    }
    </style>
    </head>
    <body>
        <div>
        <h1 class="hclass" id="hid"  style="color:red">习近平心中的互联网</h1>
        </div>
    </body>
</html>


Next Section
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>php.cn</title> <style type="text/css"> h1{ color:red; } </style> </head> <body> <h1>习近平心中的互联网</h1> <p>互联网是20世纪最伟大的发明，它正在将人类“一网打尽”，人们在不知不觉中已经融入了互联网生态，互联网让世界变成了“鸡犬之声相闻”的地球村。</p> </body> <style type="text/css"> p{ color:blue; } </style> </html>
submitReset Code
ChapterCourseware