Basic knowledge of web front end-css articles

css：

• Cascading style sheets
• Render html to web page   
• css exists in the style sheet  
• External style sheets improve work efficiency  
• Multiple styles can be stacked into one

 HTML tags are divided into several types:

• According to whether the line breaks:

1. Row-level element  
2. Block-level element  

• According to whether it is closed or not:  

1. Fully closed  
2. Autism and

CSS writing style rules:  

• Attribute: value;

Color value in css:

• Word value, hexadecimal color value: # 000000, rgb: rgb (110,255,255), rgba (110,255,255,0.5) 0.5 is transparency.

Pixel units in the webpage:  

• px represents a fixed pixel value, the unit value of the resolution relative to the screen.  
• % Percentage pixel value  
• rem relative unit is only relative to the font size of the html root element of the web page.   
• em Relative unit Relative to the current element text font size, the font default browser default font size is not set.

 Set the width and height attributes in css:

• The current element must be a block-level element. If you want to set the width and height of a row-level element, you must convert it to a block-level element.

There are several types of CSS in the web page:   

1. Inline style   
2. Inline style   
3. External style

Basic style:  

•  color: red; controls the font color  
•  font-size: 20px;  
• The default attribute value larger x-larger small x-small usually use px    
• font-family: serif; set font    
• width: 200px; set width    
• height: 200px; set height  
•  border: 1px solid # 000; Set the border    

Style attributes:

1. Single attribute style 
2. Compound attribute style     

1. Inline style:

The code is as shown:

The effect of the web page is shown in the figure:

Second, CSS embedded style:

•   Embedded position: in the head tag or embedded in the body
•   Use style tags embedded in head or body
•   Match styles with css selector

  css selector:

•   * Represents all elements Match all elements in the web page
•   element represents the element
•   class represents the class name
•   id stands for id
•   Child-parent selector-space>
•   Compound selector is easy to use
• Do not use pure numbers when naming class id

code show as below:

The effect of the web page is shown in the figure:

3. External style:

Introduced in the external writing style sheet web page Introduced in the
external style using the link tag
can be introduced in the head or body, can also be introduced in the embedded style.

The code is as follows:

The effect of the web page is shown in the figure:

Four, CSS style priority:

•  If there is no conflict between the styles: then the priority of the style is the style superposition:

1.   Inline> Inline> External (the inline style is after the external style is loaded)
2.   Inline> External> Inline (Inline styles are loaded before external styles)

•   If there is a conflict between the styles, the style priority is the style nearest principle selection

1.   Inline> Inline> External (the inline style is after the external style is loaded)
2.   Inline> External> Inline (Inline styles are loaded before external styles)

 Priority of inline style selector:
        id selector> class selector> element selector> * selector

The code is as follows:

Priority comparison of inline styles, external styles, and embedded styles:

 

 

The code is as follows:

Webpage renderings:

 Priorities also exist for inline styles and external styles, referring to the priority between element selectors. The priority of selectors in external styles is the same as the priority of inline style selectors.

The code is as follows:

The effect of the web page is shown in the figure: