Four ways to combine CSS and HTML

Four ways to combine CSS and HTML

(1) Each HTML tag has an attribute style, which combines CSS and HTML together

<div style="background-color:red;color:blue;">I am a little bird</div>

(2) Use an HTML tag, <style> tag: write it in the head

    <style type="text/css">
      css code;
    </style>
<style type="text/css">
div {
background-color:red;
color:gray;
}
</style>

(3) Use statements in the style tag (does not work in some browsers)

@import url(css file path);

- Step 1: Create a css file

   <style type="text/css">
    @import url(div.css);
  </style>

(4) Use the header tag link to introduce external CSS files

- Step 1: Create a css file

 - <link rel="stylesheet" type="text/css" href="div.css"/>

*** Disadvantages of the third combination method: It does not work in some browsers, and the fourth method is generally used

*** Priority (general)

From top to bottom, from outside to inside, priority from low to high

*** The later loaded ones have higher priority

*** Format selector name {attribute name: attribute value; attribute name: attribute value; ......}

Full code:

<html>
    <head>
        <title>World</title>
        <style type="text/css">
            div {
                background-color:gray;
                color:white;
            }
        </style>
    </head>
    <body>
        <div style="background-color:red;color:blue;">I am a little bird</div>
        <div>May we have the years to look back on, and grow old together with deep affection! </div>
    </body>
</html>

<html>
    <head>
        <title>World</title>
        <style type="text/css">
            @import url(div.css);
        </style>
    </head>
    <body>
        <div>May we have the years to look back on, and grow old together with deep affection! </div>
    </body>
</html>

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>world</title>
<link rel="stylesheet" type="text/css" href="div.css"/>
</head>
<body>
    <div>May we have the years to look back on, and grow old together with deep affection! </div>
</body>
</html>

Summarize

The above are the four ways of combining CSS and HTML that I introduced to you. I hope it will be helpful to you. If you have any questions, please leave me a message and I will reply to you in time. I would also like to thank everyone for their support of the 123WORDPRESS.COM website!

<<:  Analysis of the difference between HTML relative path and absolute path

>>:  Specific usage instructions for mysql-joins

Recommend

Perfect solution to the problem of Windows Server 2012 or 2016 failing to install .NET Framework 3.5 without disk

Problem Description When using Windows Server 201...

Use Firebug tool to debug the page on iPad

How to debug a page on iPad? When using iOS 5, you...

How to install php7 + nginx environment under centos6.6

This article describes how to install php7 + ngin...

Linux command line quick tips: How to locate a file

We all have files stored on our computers -- dire...

Solution to the problem of MySQL thread in Opening tables

Problem Description Recently, there was a MySQL5....

Solution to Ubuntu not being able to connect to the Internet

Problem description: I used a desktop computer an...

How to create a simple column chart using Flex layout in css

The following is a bar chart using Flex layout: H...

Vue song progress bar sample code

Note that this is not a project created by vue-cl...

Steps to install MySQL 8.0.23 under Centos7 (beginner level)

First, let me briefly introduce what MySQL is; In...

HTML table tag tutorial (23): row border color attribute BORDERCOLORDARK

In rows, dark border colors can be defined indivi...

Query the data of the day before the current time interval in MySQL

1. Background In actual projects, we will encount...

Detailed explanation of Docker container cross-host multi-network segment communication solution

1. MacVlan There are many solutions to achieve cr...

Detailed process of drawing three-dimensional arrow lines using three.js

Demand: This demand is an urgent need! In a subwa...

JavaScript implements random generation of verification code and verification

This article shares the specific code of JavaScri...

The shortest JS to determine whether it is IE6 (IE writing method)

Commonly used JavaScript code to detect which ver...