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

Summary of Creating and Using Array Methods in Bash Scripts

Introduction to CSS style introduction methods and their advantages and disadvantages

Summary of Creating and Using Array Methods in Bash Scripts

Details on how to write react in a vue project

Native JS implements a very good-looking counter

Implementation of building Kubernetes cluster with VirtualBox+Ubuntu16

Example of using store in vue3 to record scroll position

MySQL detailed explanation of isolation level operation process (cmd)

61 Things Every Web Developer Should Know

Vue realizes the percentage bar effect

Background gradient animation effect made by css3

About the configuration problem of MyBatis connecting to MySql8.0 version

Recommend

How to insert pictures into HTML pages and add map index examples

Two ways to use IIS to call X-Forwarded-For Header (XFF) to record the visitor's real IP

Implementation of Docker Compose multi-container deployment

Example code for implementing hexagonal borders with CSS3

How to connect to a remote docker server with a certificate

MySQL's method of dealing with duplicate data (preventing and deleting)

Sample code for configuring nginx to support https

MySQL 5.7.11 zip installation and configuration method graphic tutorial

About VUE's compilation scope and slot scope slot issues

MySQL startup error 1067 and invalid recovery after changing character set and restarting

Docker and portainer configuration methods under Linux

Example of downloading files with vue+django

Summary of common problems in downloading and installing MySQL 5.7 on Win7 64-bit

Getting started with JavaScript basics

Linux Domain Name Service DNS Configuration Method