前端day3：	CSS(二)文本属性

文本属性

font-size(字体大小)
单位是px,浏览器默认是16px,设计图常用字号是12px。
font-family(字体)
当字体是中文字体，英文字体中有空格时，需要加双引号；多个字体中间用逗号连接，先解析第一个字体，如果没有解析第二个字体，以此类推。
color(颜色)
color:red; color:#ff0; color:rgb(255,0,0); (0-255)
font-weight(加粗)
font-weight:bolder(更粗的)/bold(加粗)/normal(常规);
font-weight:100-900;(100-500不加粗 600-900加粗)
font-style(倾斜)
font-style:italic(斜体字)/oblique(倾斜的文字)/normal(正常显示);
text-align(文本水平对齐)
text-align:left;    (水平靠左)
text-align:right;   (水平靠右)
text-align:center;  (水平居中)
text-align:justify; (水平两端对齐，但是只对多行起作用)
line-height(行高)
line-height的数据=height的数据，可以实现单行文本垂直居中
text-index(首行缩进)
text-index可以取负值；text-index属性只对第一行起作用。
letter-spacing(字间距)
text-decoration(文本修饰)
text-decoration:none(没有)/underline(下划线)/overline(上划线)/line-through(删除线)
font(文字简写)
font是font-style font-weight font-size/line-height font-family的简写。
font:italic 800 30px/80px "宋体";(顺序不能改变)，必须同时指定font-size和font-family属性时起作用。

例

宋体 SimSun
黑体 SimHei
微软雅黑 Microsoft YaHei
微软正黑体 Microsoft JhengHei
新宋体 NSimSun
新细明体 PMingLiU
细明体 MingLiU
标楷体 DFKai-SB
仿宋 FangSong
楷体 KaiTi
仿宋_GB2312 FangSong_GB2312
谐体_GB2312 KaiTi_GB2312

字体和大小

表现：

   .p1{font-size: 16px;}
   .p2{ font-family: 宋体;}
   .p3{font-family: 草书,宋体,微软雅黑;}

文字颜色

表现：

 .p1{color:BurlyWood;} 
 .p2{color:#14c145;}
 .p3{color:#00f}
 .p4{color:rgb(255,0,0)}

0-255 (0最弱, 255最强)
rgb(255,0,0,0.5)括号内第四个数表示透明度(最小0，最大1)

十进制 0-9
二进制 01
十六进制 0-9 A-F

加粗和倾斜

表现：

 .p1{font-weight: 700;} 
 .p3{font-weight: bolder;}

100  细体   ligter
400  正常   normal
700   加粗   bold
900   更粗体 bolder

.p1{ font-weight: normal; }  
.p2{ font-style: oblique; }

italic    倾斜
oblique   更倾斜
normal    正常

文本水平对齐和单行文本垂直居中

表现：

 .box1{
 text-align:center; 
 }

left,center,right

.box2{
text-align: justify;
}

两端对齐,多行文本用

 .box3{ 
 line-height: 100px;
 }

行高：line-height

间距和首行缩进

表现：文本间距: 词间距, 字符间距

 .p1{  letter-spacing: 10px;}字间距
 .p3{  word-spacing:   10px;}单词间距（设置负值为交叉）   
   p{  text-indent:     2em;}首行缩进

文本修饰线

表现：

  p{
  text-decoration: underline;下划线
  text-decoration: line-through;删除线
  text-decoration: overline;上划线
  text-decoration: none;
  }

大小写

表现:
text-transform 大小写

.p1{  text-transform: capitalize;}单词首字母大写
.p2{  text-transform: lowercase; }小写
.p3{  text-transform: uppercase; }所有字母大写
.p3{  text-transform: none }

font

表现：

.p1{font:italic bold 20px/1em } 
.p2{font:italic bold 20px/1em }
.p3{font:20px/1em }

前端day3：CSS（二）文本属性 | 青训营