1. Basic concepts of CSS

　　Cascading Style Sheets (English full name: Cascading Style Sheets) is a computer language used to represent document styles such as HTML (an application of the Standard Universal Markup Language) or XML (a subset of the Standard Universal Markup Language).

Write CSS styles:

Write with style in the tag (inline style);
Write with style in head (internal style sheet);

　　When the same HTML element is defined by more than one style, the inline style (inside the HTML element) has the highest priority, followed by the style declaration in the <head> tag, then the style declaration in the external style sheet, and finally style declaration in the compiler (the default).

2. CSS selectors

　　2.1 Derived selectors

　　　　Derived selectors allow you to style a tag based on the context of the document for the purpose of making markup more concise.

 1 <head>
 2     <meta charset="UTF-8">
 3     <title>Title</title>
 4     <style>
 5         li strong {
 6                     font-style: italic;
 7                     font-weight: normal;
 8                     }
 9     </style>
10 </head>
11 <body>
12     < p > 
13          < strong > 
14              I am in bold, not italic because I am not on the list so this rule doesn't work for me
 15          </ strong > 
16      </ p > 
17      < ol > 
18          < li > 
19              < strong > 
20                  I am in italics. This is because the strong element is inside the li element.
21              </ strong > 
22          </ li > 
23      < li > I am normal font. </ li > 
24      <
25 </body>

　　2.2 ID selector

The id selector can specify a specific style for HTML elements marked with a specific id. id selectors are defined with "#".

 1 <head>
 2     <meta charset="UTF-8">
 3     <title>Title</title>
 4     <style>
 5         #i1{
 6             background-color: indianred;
 7             height: 40px;
 8         }
 9         #d2{
10             background-color: aquamarine;
11             height: 40px;
12         }
13         #i3{
14             background-color: bisque;
15             height: 40px;
16         }
17     </style>
18 </head>
19 <body>
20     <div id="i1">1</div>
21     <span id="d2">2</span>
22     <div id="i3">3</div>
23 </body>

　　2.3 Class selectors

　　　　In CSS, class selectors are displayed with a dot:

 1 <head>
 2     <meta charset="UTF-8">
 3     <title>Title</title>
 4     <style>
 5         .c1{
 6             background-color: indianred;
 7             height: 40px;
 8         }
 9         .c2{
10             background-color: aquamarine;
11             height: 40px;
12         }
13         .c3{
14             background-color: bisque;
15             height: 40px;
16         }
17     </style>
18 </head>
19 <body>
20     <div class="c1">1</div>
21     <span class="c2">2</span>
22     <div class="c3">3</div>
23 </body>

　　　　The first character of a class name cannot use a number!

51 - Web Basics - CSS

1. Basic concepts of CSS

2. CSS selectors

2.1 Derived selectors

2.2 ID selector

2.3 Class selectors

2.4 Tag selector

Guess you like