Code formatting for CSS

Text Layout – Fonts

We can use CSS styles to set style attributes such as font, font size, color, and so on for text in a Web page. Let's take a look at an example where the following code is implemented: set the font for text in a Web page to Arial.

Body{font-family: "The song Body";} 1

Be careful not to set fonts that are not commonly used, because the default font is displayed if the font you set is not installed on the user's local computer. (because the user can see whether the font style you set depends on whether the font you set is installed on the user's local computer.) ）
Now General page likes to set "Microsoft Ya Black", the following code:

body{font-family: "Microsoft Yahei";} 1

Or

Body{font-family: "Microsoft Jas Black";} 1

Note: The first method is better compatible than the second method.

Because this font is beautiful and can be displayed in the client security (the user is generally installed by default).

Example

<! DOCTYPE html>

 

Text layout – Font size, color


 

You can use the following code to set the font size of the text in the Web page to 12 pixels and set the color to #666 (gray):

Body{font-size:12px;color: #666}1
Example

<! DOCTYPE html>

 

Text Layout – Bold


 

We can also use CSS style to change the style of the text: bold, italic, underline, strikethrough, you can use the following code to implement the formatting text in bold style display.

P Span{font-weight:bold;} 1
As you can see here, if you want to set the bold font for text to be implemented with a separate CSS style, you don't have to use the H1-H6 or strong tags to implement bold styles.

Example

<! DOCTYPE html>

 

Text Layout – Italic


 

The following code enables the text to be displayed in the browser in italic style:

P A{font-style:italic;} <p> Third grade <a> grade four </a> grade </p>12
Example

<! DOCTYPE html>

 

Text Layout – Underline


 

In some cases, you want to set the text to underline style, so that you can visually emphasize the text, you can use the following code to achieve:

P A{text-decoration:underline;} <p> Third grade <a> grade four </a> grade </p>12
Example

<! DOCTYPE html>

 

Text Layout – Strikethrough


 

If you want to set a strikethrough on a webpage, this style is often seen on the e-commerce website:

The deletion line in the original price can be implemented using the following code:

. Oldprice{text-decoration:line-through;} 1
Example

<! DOCTYPE html>

 

Paragraph layout – indent


 

In the Chinese text before the paragraph is used to empty two blank text, this special style can be implemented with the following code:

P{text-indent:2em;} In the spring of <p>1922, a writer who wanted to be named Nikkalavi (Toby McGuire Tobey Maguire), left the Midwestern United States and came to New York. It was a time of rising morality, popular jazz, smuggling as king, and soaring stocks. In pursuit of his American dream, he moved into a bay near New York to live. </p>12
Note:2em means twice times the size of the text.

Example

<! DOCTYPE html>

 

Paragraph layout – line spacing (row height)


 

In this section, let's learn about another line spacing (row height) attribute (line-height), which plays an important role in paragraph layout, and the following code implements setting the paragraph line spacing to 1.5 times times.

P{line-height:1.5em;} <p> Fitzgerald, one of the 20th century American literary giants. </p>12
Example

<! DOCTYPE html>

 

Paragraph layout – text spacing, letter spacing


 

medium text interval , alphabetic interval setting :

If you want to set the text interval or the letter spacing In the page layout can be implemented using letter-spacing, such as the following code:

h1{    letter-spacing:50px;} ...
Note: This style is used in English words to set the spacing between letters.

Word Spacing settings:

What if I want to set the spacing between English words? Can be implemented using word-spacing. The following code:

h1{    word-spacing:50px;} ... 
Example

<! DOCTYPE html>
Note
When you set the element to English, the letter-spacing setting is not an English word interval, but an interval between letters.


 

Paragraph Layout – alignment


 

Do you want to set the center style for text and pictures in a block element ? You can use the Text-align style code, which allows text to be centered in the following code.

h1{    Text-align:center/left/right;} 
Example

<! DOCTYPE html>