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

CSS3 realizes the graphic falling animation effect

Recommend

Detailed explanation of CSS margin overlap and solution exploration

I recently reviewed some CSS-related knowledge po...

arcgis.js controls the display range of the map body to automatically bounce back when it exceeds the area (implementation ideas)

Table of contents background Effect Ideas backgro...

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

CSS3 realizes the graphic falling animation effect

18 Amazing Connections Between Interaction Design and Psychology

CentOS 7 cannot access the Internet after modifying the network card

How to query whether the mysql table is locked

Implementing carousel effects with JavaScript

Implementation of Docker Compose multi-container deployment

Detailed explanation of front-end security: JavaScript anti-http hijacking and XSS

How to understand Vue's simple state management store mode

Teach you how to insert 1 million records into MySQL in 6 seconds

Discussion on CSS style priority and cascading order

Recommend

Detailed explanation of CSS margin overlap and solution exploration

arcgis.js controls the display range of the map body to automatically bounce back when it exceeds the area (implementation ideas)

How to change the root user's password in MySQL

Detailed explanation of new relational database features in MySQL 8.0

MySQL slow log online problems and optimization solutions

Graphical instructions for uploading and downloading files to a remote Linux host based on SecureCRT

Detailed explanation of the usage of grep command in Linux

How to set up ssh password-free login to Linux server

Vue defines private filters and basic usage

Public multi-type attachment image upload area in Vue page and applicable folding panel (sample code)

How to set background blur with CSS

Why not use UTF-8 encoding in MySQL?

JavaScript canvas to achieve raindrop effects

Complete steps to use samba to share folders in CentOS 7

Detailed process of installing nginx1.9.1 on centos8