CSS writing format, detailed explanation of the basic structure of a mobile page

1. CSS writing format

1. Inline styles

You can write CSS code directly into the opening tag

<div style="color:red">I am div</div>

2. Inline styles

You can write a bunch of style tags in a pair of head tags, and then write CSS code in the style tags

<head>
    <style>
        div{
            color:red;
        }
</style>
</head>

3. External link style

Write a separate css file, write the CSS code in this file, and then associate this file with the HTML file through the link tag in the HTML file.

This is the HTML file

<head>
    <link rel="stylesheet" href="194_Css.css">
</head>
 This is the CSS file div {
            color:red;
}

4. Import styles

Similar to the third method, but the import method is different

<head>
    <style>
        @import "194_Css.css";
    </style>
</head>

Note: Most enterprise development uses external link styles, which separates structure and style from each other. So why not use import styles?

External link styles are associated through the link tag and imported styles are associated through @import . @import was introduced after CSS2.1, so there may be compatibility issues. When displaying the interface, the external link style will first load the CSS style and then load the structure. Therefore, when the user cannot see the interface, the style must have been set. When displaying the interface, the imported style will first load the structure and then load the style. Therefore, when the user sees the interface, he may not see the complete interface.

2. Build a website from 0 to 1

1. The first thing to do when writing a website

Create a site folder and create some subfolders and subfiles, such as: CSS folder, js folder, image folder, index.html

Note: You can use Chinese names when creating site folders, but Chinese characters cannot appear in subfolders and subfiles in the site folders.

2. Reset all default styles and set some global styles, and associate the CSS files that set the styles with the corresponding interfaces

3. Create a Nubia website

(1) Let’s take a look at the structure directory first

(2) Subject content code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="CSS/base.css">
    <link rel="stylesheet" href="CSS/index.css">
</head>
<body>
<!--Top area-->
<div class="top"></div>
<!--Advertising Area-->
<div class="banner"></div>
<!--Content area-->
<div class="content"></div>
<!--Bottom area-->
<div class="footer"></div>
</body>
</html>

(3) CSS style code

/*Top area*/
.top{
    height:60px;
    width:100%;/*It is the same width as the parent element. Here we use the percentage form so that the web page will not be deformed when it is enlarged or reduced*/
    background-color: red;

}
/*Advertising area*/
.banner{
    height: 800px;
    width: 100%;
    background-color: green;
}
/*Content area*/
.content{
    height: 1883px;
    width: 100%;
    background-color: blue;
}
/*Bottom area*/
.footer{
}

3. Source code:

D194_CSSWritingFormat.html

Project: Nubia

address:

https://github.com/ruigege66/HTML_learning/blob/master/D194_CSSWritingFormat.html

https://github.com/ruigege66/HTML_learning/tree/master/Nubia

Summarize

This concludes this article about CSS writing format and a detailed explanation of the basic structure of a mobile page. For more relevant CSS writing format content, 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!

<<: Use button trigger events to achieve background color flashing effect

>>: MySQL Series 7 MySQL Storage Engine

Vue uses the Element el-upload component to step on the pit

CSS writing format, detailed explanation of the basic structure of a mobile page

Vue uses the Element el-upload component to step on the pit

Detailed explanation of the deployment process of SEATA transaction service Docker

25 Tools to Improve Website Usability and Conversion Rates

Implementation of MySQL select in subquery optimization

Problems with configuring https server and reverse proxy with Nginx under Windows

Introduction to Docker containers

Solution to the problem that docker CMD/ENTRYPOINT executes the sh script: not found/run.sh:

How to use negative margin technology to achieve average layout in CSS

dl, dt, dd list label examples

Detailed explanation of the frame and rules attributes of the table in HTML

Recommend

Ubuntu 20.04 CUDA & cuDNN Installation Method (Graphical Tutorial)

Several methods to modify CSS style to achieve gray web pages (no color, only light black and white)

The principle and basic use of Vue.use() in Vue

How to add double quotes in HTML title

Tutorial on installing mysql5.7.23 on Ubuntu 18.04

ElementUI implements cascading selector

How to ensure that every page of WeChat Mini Program is logged in

How to handle the tcp_mark_head_lost error reported by the Linux system

Examples of implementing progress bars and order progress bars using CSS

An example of elegantly writing status labels in Vue background

Detailed explanation of docker command to backup linux system

Comparison of efficiency between single-table query and multi-table join query in MySql database

MySQL binlog opening steps

Is it easy to encapsulate a pop-up component using Vue3?

The implementation process of long pressing to identify QR code in WeChat applet