Introduction to CSS style introduction methods and their advantages and disadvantages

Three ways to introduce CSS

1. Inline styles

Advantages: easy to write, high weight Disadvantages: no separation of structure and style

<div style="width: 100px" height:100px></div>

2. Internal Style

Advantages: Structural pattern phase separation Disadvantages: Incomplete separation

    <style>
        div {
            color: violet;
            font-size: 16px;
        }
    </style>

3. External Style

Advantages: Complete separation of structure and style Disadvantages: Need to introduce

    <!-- Import css initialization file-->
    <link rel="stylesheet" href="css/normalize.css" />
    <!-- Import public styles -->
    <link rel="stylesheet" href="css/baes.css">
    <!-- Import home page style-->
    <link rel="stylesheet" href="css/index.css">

Supplement: Four ways to introduce CSS styles

Prepare

1. First prepare an HTML file: test.html. It is not recommended to use Notepad to create files. It is recommended to use Notepad++ to create and edit files. Note that the encoding format is: UTF-8 without BOM format, otherwise Chinese garbled characters will appear. The content is as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
        <title>Four ways to introduce CSS styles</title>
        <style type="text/css">
        </style>
    </head>
    <body>
        hello
    </body>
</html>

2. Save the file to the desktop, right-click and select Google Chrome (or other browsers to open it), and you will find the English letters "hello" appear on the page.

Four ways to introduce

Inline

This is achieved through the HTML attribute style, as shown below

//Write in the body tag <span style="color:red;">Inline style</span>

Embedded

Write the CSS style in the style tag and reference it in the body

//css style written in the style tag p{
    color:blue;
}
-----------------------------------------------------------------
//Write in the body tag <p>Embedded</p>

Link

1. Generally, this method is used to create a new CSS file on the desktop: test.css, with a CSS style

//Write in the test.css filediv{
    color:yellow;
}

2. Import the test.css file into test.html

//Write in the head tag to introduce the css file, the href attribute is the absolute path, currently in the same directory <link href="test.css" type="text/css" rel="stylesheet" />
------------------------------------------------------------------------
//Write in the body tag <div> link style</div>

Import

@import(url(demo.css))

1. Basically not used, because the page will load HTML first, and then load CSS, which will cause a delay in page style.

2. Create a demo.css file and write a CSS style

//Write in the demo.css file h2{
    color:green;
}

3. Use @import to import the demo.css file

//After some testing, it needs to be written in a style separately.
<style>
  @import url(demo.css)
</style>
----------------------------------------------------------------------------
//Write in the body tag <h2>Important</h2>

HTML page code

Page renderings

Display priority of the first three styles

Proximity principle, i.e. in-line > embedded > embedded

Summarize

This is the end of this article about the introduction of CSS styles and its advantages and disadvantages. For more relevant content on the introduction of CSS styles and its advantages and disadvantages, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope that everyone will support 123WORDPRESS.COM in the future!

<<: A brief analysis of the difference between and and where in MySQL connection query

>>: Talk about how to identify HTML escape characters through code

Appreciation of the low-key and elegant web design in black, white and gray

Introduction to CSS style introduction methods and their advantages and disadvantages

Appreciation of the low-key and elegant web design in black, white and gray

Detailed explanation of the order of Mysql query results according to the order of ID in in()

How to center your HTML button

Example of how to configure cross-domain failure repair in nginx

Examples of two ways to implement a horizontal scroll bar

MySQL 5.0.96 for Windows x86 32-bit green simplified version installation tutorial

Vue3+el-table realizes row and column conversion

Create a movable stack widget function using flutter

How to implement vertical text alignment with CSS (Summary)

The ultimate solution for writing bash scripts with nodejs

Recommend

Detailed explanation of using javascript to handle common events

Vue opens a new window and implements a graphic example of parameter transfer

Detailed explanation of how to configure secondary domain name on Apache server under Linux environment

Reasons and solutions for MySQL sql_mode modification not taking effect

Detailed explanation of JavaScript Proxy object

jQuery achieves full screen scrolling effect

MySQL online DDL tool gh-ost principle analysis

CSS3 achieves cool sliced image carousel effect

How to fix the footer at the bottom of the page (multiple methods)

Detailed explanation of how to select all child elements using CSS

In-depth analysis of the role of HTML  comment tags

Practical record of vue using echarts word cloud chart

Architecture and component description of docker private library Harbor

Full analysis of web page elements

Data URI and MHTML complete solution for all browsers