CSS Basics

Posted by markl999 on Sun, 07 Nov 2021 07:23:38 +0100

1. Preliminary understanding of CSS

1. Definition: cascading style sheets are used to represent HTML(Standard universal markup language An application of) or XML (a subset of the standard common markup language) and other file style computer languages. CSS can not only modify the web page statically, but also format the elements of the web page dynamically with various scripting languages. CSS can accurately control the layout of elements in the web page at the pixel level, support almost all font and size styles, and have the ability to edit web page objects and model styles.

2. Function: it is mainly used to set the text content (font, size, alignment, etc.) in the HTML page, the shape of the picture (width, height, border style, margin, etc.) and the layout and appearance display style of the layout. Based on HTML, CSS provides rich functions, such as font, color, background control and overall layout, and can set different styles for different browsers.

2. Import style sheet

By understanding the role of CSS, we know that CSS is a language used to modify HTML. At this time, we need to consider how to introduce CSS language into HTML. There are three methods to introduce CSS language into HTML: chain style sheet, header style sheet and inline style sheet.

Inline style sheet:

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title></title>
 6 </head>
 7 <body>
 8     <div style="width: 100px; height: 100px; background: lightgreen;"></div>
 9 </body>
10 </html>

Header style sheet:

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title></title>
 6     <style type="text/css">
 7         div{
 8             width: 100px;
 9             height: 100px;
10             background: lightgreen;
11         }
12     </style>
13 </head>
14 <body>
15     <div></div>
16 </body>
17 </html>

External css Style:

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title></title>
 6     <link rel="stylesheet" type="text/css" href="css/main.css">
 7     <!-- use link Introduce external css -->
 8 </head>
 9 <body>
10     <div></div>
11 </body>
12 </html>

1 /*main.css*/
2 div{
3     width: 100px;
4     height: 100px;
5     background: lightgreen;
6 }

3. Selector:

Our common selectors are: id selector, class selector, label selector and wildcard selector.

1.id selector:

Use id for naming settings, and use # plus name for selection.

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title></title>
 6     <style type="text/css">
 7         #xiaoMing{
 8             width: 100px;
 9             height: 100px;
10             background: lightgreen;
11         }
12     </style>
13 </head>
14 <body>
15     <div id="xiaoMing"></div>
16 </body>
17 </html>

2. Label selector:

Add div or other labels directly on the head or outside, and set all div or other labels directly.

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title></title>
 6     <style type="text/css">
 7         div{
 8             width: 100px;
 9             height: 100px;
10             background: lightgreen;
11         }
12     </style>
13 </head>
14 <body>
15     <div></div>
16 </body>
17 </html>

3. Class selector:

Name with class Use. Plus name to select.

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title></title>
 6     <style type="text/css">
 7         .xiaoHong{
 8             width: 100px;
 9             height: 100px;
10             background: lightgreen;
11         }
12     </style>
13 </head>
14 <body>
15     <div class="xiaoHong"></div>
16 </body>
17 </html>

4. Wildcard selector:

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title></title>
 6     <style type="text/css">
 7         *{
 8             background: lightgreen;
 9         }
10     </style>
11 </head>
12 <body>
13     <div></div>
14     <span></span>
15     <p></p>
16 </body>
17 </html>

Programmer Think