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