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.

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 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>

Continuing Learning

new file

<!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>

submit Reset Code

Automatic operation

CSS basic tutorial: How to introduce CSS

ElementaryImperial CMS enterprise imitation website tutorial

ElementaryNewbies with zero foundation in WordPress build personal blogs and corporate websites

ElementaryUltimate CMS zero-based website building instruction video

ElementaryFront-end project-Shangyou [HTML/CSS/JS technology comprehensive practice]

IntermediateVue3.0 from 0 to build a universal backend management system project practice

ElementaryZero-based front-end course [Vue advanced learning and practical application]

ElementaryWEB front-end tutorial [HTML5+CSS3+JS]

ElementaryQuick introduction to apipost

IntermediateVue3+TypeScript practical tutorial-enterprise-level project practice

ElementaryLet's briefly talk about starting a business in PHP

IntermediateVUE e-commerce project (front-end & back-end dual project actual combat)

ElementaryApipost practical application [api, interface, automated testing, mock]