Basic use css -03

CSS font style attributes

1.font font

1.1 font-size: size

• effect:

  font-size property is used to set the font size

  p {  
      font-size:20px; 
  }
  

• unit:

  • Relative length unit may be used, an absolute length units may also be used.
  • The relative length units commonly used, we recommend the pixel unit px, use less absolute length units.
    

• Note:

  • Common units of px
  • Google browser's default text size is 16px
  • Different browsers may display the default font size is inconsistent, try to give a clear value size, do not default size. General to the body designated the entire page text size

1.2 font-family: font

• effect:

  font-family property is used to set the font.

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

• Web page commonly used fonts are Arial, Microsoft elegant black, black body, etc.

• You can specify multiple fonts at the same time, in the middle separated by commas, said that if the browser does not support the first font, it tries the next one, until you find the right font, if not all, of our computer places the default font shall prevail.

  p{font-family: Arial,"Microsoft Yahei", "微软雅黑";}
  

  1. 各种字体之间必须使用英文状态下的逗号隔开。
  2. 中文字体需要加英文状态下的引号，英文字体一般不需要加引号。当需要设置英文字体时，英文字体名必须位于中文字体名之前。
  3. 如果字体名中包含空格、#、$等符号，则该字体必须加英文状态下的单引号或双引号，例如font-family: "Times New Roman";。
  4. 尽量使用系统默认字体，保证在任何用户的浏览器中都能正确显示。
  

1.2.1 CSS Unicode fonts

• Why use Unicode fonts

  • Set the font name in the CSS, the direct write Chinese is possible. However, in the encoding file (GB2312, UTF-8, etc.) will produce distortion mismatch errors.
  • xp system does not support similar to Microsoft elegant black Chinese.

• solve:

  • Option One: You can use English instead. For example font-family:"Microsoft Yahei".

  • Option Two: Use Unicode encoded directly in the CSS to write the name of the font to avoid these errors. Use Unicode font to write Chinese name, the browser can correct resolution.

    font-family: "\5FAE\8F6F\96C5\9ED1";   表示设置字体为“微软雅黑”。
    

    Body name	English name	Unicode encoding
    body	SimSun	\5B8B\4F53
    Times New Roman	NSimSun	\65B0\5B8B\4F53
    body	SimHei	\9ED1\4F53
    Soft elegant black	Microsoft YaHei	\ 5FAE \ 8F6F \ 96C5 \ 9ED1
    Body _GB2312	KaiTi_GB2312	\ 6977 \ 4F53_GB2312
    book	Lisa	\96B6\4E66
    garden	YouYuan	\ 5E7C \ 5706
    Wen thin black	STXihei	\ 534E \ 6587 \ 7EC6 \ 9ED1
    Ming	MingLiU	\ 7EC6 \ 660E \ 4F53
    Fine Ming	PMingLiU	\65B0\7EC6\660E\4F53

1.3 font-weight: The font weight

• And b using tags can make text bold strong.

• Font-weight property using

  Property Value	description
  normal	The default value (not bold)
  bold	Defines the bold (bold)
  100~900	400 is equivalent to the normal, bold and is equivalent to 700

1.4 font-style: font style

• I using italics and em tags may be implemented

• Use font-style property that defines the font style

  Attributes	effect
  normal	By default, the browser will display the standard font style, font-style: normal;
  italic	The browser displays italic font style.

1.5 font: Comprehensive Set font style

font attributes to the font style for a comprehensive set

• The basic syntax is as follows:

  选择器 { font: font-style  font-weight  font-size/line-height  font-family;}
  

• note:

  • When using the font attribute syntax must be above order in writing, you can not change the order of the respective property to space apart.
  • No need to provide these properties may be omitted (the default value), but must retain the font-size attribute and font-family, font property will not work otherwise.

1.6 font summary

Attributes	Show	Remark
font-size	Font size	Units are usually px pixels, must keep up units
font-family	Fonts
font-weight	Font weight	700 or bold bold bold is not normal or 400 numbers do not tell the unit
font-style	Font style	Italic slant is not inclined is normal
font	Font ligatures	1. Font ligatures are sequential and can not change the font size, and wherein the position 2 must occur simultaneously

2. CSS appearance properties

2.1 color: Text Color

• effect:

  color defines the color of text,

• Property values ​​are as follows:

  Express express	Property Value
  Predefined color value	red，green，blue
  Hex	# FF0000, # FF6600, # f00 can be abbreviated red representatives, common
  RGB codes	rgb (255,0,0) or rgb (100%, 0%, 0%)

2.2 text-align: horizontal alignment of text

• effect:

  Level text-align property is used to set the alignment of the text content, corresponding to align attribute html tag

• Property values ​​are as follows:

  Attributes	Explanation
  left	Left (default value)
  right	Align Right
  center	居中对齐

• 注意：

  是让盒子里面的内容水平居中， 而不是让盒子居中对齐

2.3 line-height:行间距

• 作用：

  line-height属性用于设置行间距，就是行与行之间的距离，即字符的垂直间距，一般称为行高。

• 单位：
  像素px，相对值em和百分比%，常用像素px

• 注：
  一般情况下，行距比字号大7.8像素左右就可以了。

2.4 text-indent:首行缩进

• 作用：

  text-indent属性用于设置首行文本的缩进

• 属性值

  • 其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%，允许使用负值

  • 建议使用em作为设置单位。

    p {
          /*行间距*/
          line-height: 25px;
          /*1em 就是一个字的宽度 如果是汉字的段落， 1em 就是一个汉字的宽度*/
          /*首行缩进2个字  em  1个em 就是1个字的大小*/
          text-indent: 2em;  
     }
    

2.5 text-decoration 文本的装饰

text-decoration 通常用于给链接修改装饰效果

值	描述
none	默认。定义标准的文本。 取消下划线（最常用）
underline	定义文本下的一条线。下划线 也是我们链接自带的（常用）
overline	定义文本上的一条线。（不用）
line-through	定义穿过文本下的一条线。（不常用）

2.6 CSS外观属性总结

属性	表示	注意点
color	颜色	我们通常用 十六进制 比如 而且是简写形式 #fff
line-height	行高	控制行与行之间的距离
text-align	水平对齐	可以设定文字水平的对齐方式
text-indent	首行缩进	通常我们用于段落首行缩进2个字的距离 text-indent: 2em;
text-decoration	文本修饰	记住 添加 下划线 underline 取消下划线 none