HTML+CSS Notes CSS Advanced

Text LayoutFontwe can use CSS styles to set style attributes such as font, font size, color, and so on for text in a Web page.
Syntax:

 
   

  
    
body{font-family:"宋体";}
 
   

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"
questions about fonts can refer to Nanyi's classic article: Http://www.ruanyifeng.com/blog/2014/07/chinese_fonts.htmlThere is also an article for the English liner body and the non-liner body:http://sixf.org/cn/2014/06/english-fonts/ Syntax:

 
    

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

OR:

 
    

  
     
body{font-family:"微软雅黑";}
 
    

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).
Font size, colorYou 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):
Syntax:

 
    

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

Bold body
we can also use CSS styles to change the style of text: bold, italic, underline, strikethrough
Syntax:

 
    

  
     
p span{font-weight:bold;}
 
    

If you want to set bold for text with a separate CSS style, you don't have to use H1-H6 or strong tags to implement bold styles.

Italic syntax:

 
    

  
     
p a{font-style:italic;}
  
     
<p>三年级时，我还是一个<a>胆小如鼠</a>的小女孩。</p>
 
    

UnderlineIn some cases, you want to set text as an underline style so that you can visually emphasize text
Grammar:

 
    

  
     
p a{text-decoration:underline;}
  
     
<p>三年级时，我还是一个<a>胆小如鼠</a>的小女孩。</p>
 
    

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


Grammar:

 
    

  
     
.oldPrice{text-decoration:line-through;}
 
    

paragraph layoutIndent inThe paragraph in Chinese text is used to empty two words in the space before
Syntax:

 
    

  
     
p{text-indent:2em;}
  
     
<p>1922年的春天，一个想要成名名叫尼克卡拉威（托比?马奎尔Tobey Maguire 饰）的作家，离开了美国中西部，来到了纽约。那是一个道德感渐失，爵士乐流行，走私为王，股票飞涨的时代。为了追寻他的美国梦，他搬入纽约附近一海湾居住。</p>
 
    

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

Line spacingAnother line spacing (row height) attribute (line-height) that plays an important role in paragraph layout

Grammar:

 
    

  
     
p{line-height:1.5em;}
  
     
<p>菲茨杰拉德，二十世纪美国文学巨擘之一，兼具作家和编剧双重身份。他以诗人的敏感和戏剧家的想象为"爵士乐时代"吟唱华丽挽歌，其诗人和梦想家的气质亦为那个奢靡年代的不二注解。</p>
 
    

It sets the line spacing to 1.5 times times
Chinese text spacing, letter spacingIf you want to set up in page layouttext IntervalorLetter SpacingYou can useletter-spacingto achieve
Syntax:

 
    

  
     
h1{
  
     
    letter-spacing:50px;
  
     
}
  
     
...
  
     
了不起的盖茨比
 
    

Note: This style is used in English words, is setLetters and Lettersthe spacing between them.

word spacing settings:Syntax:

 
    

  
     
h1{
  
     
    word-spacing:50px;
  
     
}
  
     
...
  
     
welcome to myHouse!
 
    

Snap Towant toblock Elementdo you want to set the center style for text and pictures in? You can use Text-align
block elements include Div, HX ...Syntax:

 
    

  
     
h1{
  
     
    text-align:center;
  
     
}
  
     
了不起的盖茨比
 
    

Of course, you can also set the left syntax:

 
    

  
     
h1{
  
     
    text-align:left;
  
     
}
  
     
了不起的盖茨比
 
    

You can also set the right-of-abode syntax:

 
    

  
     
h1{
  
     
    text-align:right;
  
     
}
  
     
了不起的盖茨比
 
    

From for notes (Wiz)

HTML+CSS Notes CSS Advanced