CSS writing format, the basic structure of a mobile page

Time:2021-6-11

1、 CSS writing format

1. In line style

You can write CSS code directly to the start tag

<div style=” color:red “> I’m div < / div >

2. Embedded style

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


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

3. Outer chain style

Write a CSS file separately, write the CSS code into the file, and then associate the file with the HTML file through the link tag in the HTML file.

This is an HTML file

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

4. Import style

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


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

Note: most enterprises use the style of external chain in their development, which makes the structure and style separate from each other. So why not use import styles?

The outer chain style is imported through link label Association, while the import style is imported through link label Association@importThe @ import is launched after css2.1, so there may be compatibility problems; When the external chain style displays the interface, CSS style will be loaded first, and the structure will be loaded, so the style must have been set when the user can’t see the interface. When the import style displays the interface, the structure will be loaded first, and then the style will be loaded, so the user may not see the complete interface when he sees the interface.

2、 Build a website from 0 to 1

1. The first thing to do when writing a website

Create site folder, and create some subfolders and sub files, such as CSS folder, JS folder, image folder, index.html

Note: the site folder can be named in Chinese, but the subfolders and sub files in the site folder cannot appear in Chinese.

2. Reset all the default styles and set some global styles, and associate the CSS file with the corresponding interface

3. Make a website of Nubia

(1) Let’s look at the structure catalog 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%;/ * That is to say, it is as wide as the parent element. Here, the percentage is used to make the page larger and smaller without deformation*/
    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

summary

Here is the article about CSS writing format and the basic structure of a mobile page. For more related CSS writing format content, please search previous articles of developer or continue to browse the following related articles. I hope you can support developer more in the future!