Web Front end--html Basic Note No.10

CSS formatting-typography-fonts

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

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

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"

Text layout--font size, color

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

Text layout--Bold

P Span{font-weight:bold;}

Text Layout-Italic

P A{font-style:italic;}

Text layout-Underline

P A{text-decoration:underline;}

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;}

Paragraph Layout--indentation

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;} < P >in the Spring of 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 >

Note: 2em means twice times the size of the text.

Paragraph layout-line spacing (row height)

Line spacing (row height) property (line-height), the following code implementation sets the paragraph line spacing to 1.5 times times

p{line-height:1.5em;} < P > Fitzgerald, one of the American literary giants of the 20th century, has both writer and screenwriter status. He sings the ornate elegy of the "Jazz Age" with the poet's sensibility and the imagination of the dramatist, and the temperament of his poet and Dreamer is also the perfect note for that extravagant age. </ P >

Paragraph layout--word spacing, letter spacing

Text interval, Letter spacing settings:

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;} ... < H1 > Great Gatsby </H1>

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;} ... < H1 >Welcome to imooc! </ H1 >

Paragraph layout--alignment

To use the Text-align style code, the following code enables the text to be centered

h1{    text-align:center;} < H1 > Great Gatsby </H1>

You can also set the left:

h1{    text-align:left;} < H1 > Great Gatsby </H1>

You can also set the right:

h1{    text-align:right;} < H1 > Great Gatsby </H1>

Web Front end--html Basic Note No.10