What is CSS? Introduction to CSS three styles and text attributes

This article introduces you to the content of what is CSS? CSS three style and text properties of the introduction, there is a certain reference value, the need for friends can refer to, I hope to help you.

What is CSS?

Cascading style Sheets, referred to as CSS, cascading style sheets.
Used to decorate HTML files, to make layout or size control of page elements.
That is, the HTML file fills the content of the Web page, while the CSS controls the content's performance.
Examples include attributes such as the size of an element, the position of an element in a Web page, the background of an element, and so on.

Where is the CSS code written?

1 inline style (inline): CSS code can be written in HTML tags, using style= "CSS style";

<p style= "color:red;" > This is a paragraph </p>

2 Internal style:

Write CSS code inside the style tag
The style tag is theoretically written at any point in the document, but we'll write the style in the head tag.

3 External styles:

The external style is to write the CSS code separately in a CSS file (CSS suffix file)
Then use the link tag to bring in the external style file.
External style files do not need a style tag, directly write CSS code can be


Three styles can be used in multiple ways

Text Properties: Font property

1 Font Size: font-size

Sets the size of the font, using values with units, such as PX,EM,PT, etc.

font-size:12px;
2 Font colors: color

color:red;

3 font style: font-family

Set fonts, such as Arial, YA-hei, etc.
can have multiple values
But only one font style is displayed
If the first font is available, use the first one, or use the second
If the second font is not available, use the third one, and so on
The font and the font are separated by commas, if the value of Chinese or more words, to enclose in English double quotation marks

font-family: "Song Body", Times, "New Century schoolbook";
4 Font Weight: font-weight


  
 
 
   
 
    
 
     
Optional Values
 
     
Description
 
    
 
   
 
 
   
 
    
 
     
Normal
 
     
Default value, not bold
 
    
 
    
 
     
Bold
 
     

 
    
 
    
 
     
Bolder
 
     
Bold, the effect is more obvious than bold
 
    
 
    
 
     
Value
 
     
100~900 without unit value, general 100~500 for normal effect, 600~900 is bold, the larger the value, the thicker the font
 
    
 
   
 

  
Font-weight:bold;
5 Case of text: Text-transform


  
 
 
   
 
    
 
     
Optional Values
 
     
Description
 
    
 
   
 
 
   
 
    
 
     
None
 
     
Default value, no effect
 
    
 
    
 
     
Capitalize
 
     
Capitalize first letter
 
    
 
    
 
     
Uppercase
 
     
All caps
 
    
 
    
 
     
lowercase
 
     
All lowercase
 
    
 
   
 

  
Text-transform:capitalize;
6 Text Horizontal alignment: Text-align


  
 
 
   
 
    
 
     
Optional Values
 
     
Description
 
    
 
   
 
 
   
 
    
 
     
Left
 
     
Default value, left justified
 
    
 
    
 
     
Right
 
     
Align Right
 
    
 
    
 
     
Center
 
     
Center Alignment
 
    
 
    
 
     
Justify
 
     
Justify on both sides
 
    
 
   
 

  
Text-align:left;
7 Text Vertical Alignment


  
 
 
   
 
    
 
     
Optional Values
 
     
Description
 
    
 
   
 
 
   
 
    
 
     
Baseline
 
     
Default. element is placed on the baseline of the parent element
 
    
 
    
 
     
Sub
 
     
Subscript for vertical alignment of the aligned
 
    
 
    
 
     
Super
 
     
Superscript of vertical aligned aligned
 
    
 
    
 
     
Top
 
     
Aligns the top of the element with the top of the highest element in the row
 
    
 
    
 
     
Text-top
 
     
Aligns the top of the element with the top of the parent element's font
 
    
 
    
 
     
Middle
 
     
Place this element in the middle of the parent element
 
    
 
    
 
     
Bottom
 
     
Aligns the top of the element to the top of the lowest element in the row
 
    
 
    
 
     
Text-bottom
 
     
Aligns the bottom of the element with the bottom of the parent element's font
 
    
 
    
 
     
Inherit
 
     
Specifies that the value of the Vertical-align property should be inherited from the parent element
 
    
 
   
 

  
The Vertical-align property only works if the element belongs to inline or inline-block.

Vertical-align:baseline;
8 Text dash: Text-decoration


  
 
 
   
 
    
 
     
Optional Values
 
     
Description
 
    
 
   
 
 
   
 
    
 
     
None
 
     
No underline
 
    
 
    
 
     
Underline
 
     
Underline
 
    
 
    
 
     
Overline
 
     
Dash up
 
    
 
    
 
     
Line-through
 
     
Middle Dash (Strikethrough)
 
    
 
   
 

  
Text-decoration:underline;
9 First Line indent: text-indent

This property accepts a value with a unit
Specifies how many units of space are indented in the first line of text
Indents only on the first line, and only for block elements

Text-indent:2em;
Text-indent property values generally use EM as the unit, because the general indentation is standard with the number of characters

10 Word spacing: letter-spacing

This property accepts a value with a unit
Specifies how many units of space are spaced between each character

Letter-spacing:1em;
11 Word spacing: word-spacing

 This property accepts a value with units 
 that specifies how many units of space are spaced between each word 
 This property is not valid for Chinese