CSS文字控制属性

文字控制属性

字体大小

	
	字体大小
    属性名 font-size
    属性值 文字尺寸，PC端网页最常用的单位px
    谷歌浏览器文字有默认大小 16px 
    
    p {
      /* font-size 属性必须有单位，否则属性不生效 */
      font-size: 30px;
    }

字体粗细

	
    文字粗细
    属性名 font-weight
    属性值          效果
    数字（开发使用） 正常 400    加粗 700
    关键字          正常 normal 加粗 bold
    
    p {
      /* 加粗 */
      font-weight: 700;
    }

字体倾斜

	
    字体倾斜
    属性名 font-style
    属性值  说明
    normal	正常（默认）
    italic	倾斜
    
    p {
      /* 加粗 */
      font-style: italic;
    }

行高

    
    行高 设置多行文本的间距
    属性名 line-height
    属性值 
    数字 + px
    数字（当前标签font-size属性值的倍数）
    
    行高的测量方法 从一行文字的最顶端（最底端）量到下一行文字的最顶端（最底端）

    单行文字垂直居中 行高属性值等于盒子高度属性值
    
    p {
      line-height: 30px;
      /* 是font-size值的2倍 */
      line-height: 2;

      /* 单行文字垂直居中 */
      height: 100px;/*盒子的高度*/
      line-height: 100px;
    }

字体族

    字体族 
    属性名 font-family
    属性值 字体名
    可以书写多个字体名，各个字体名用逗号隔开，执行顺序是从左向右一次查找
    
    p{
      font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
    }

font复合属性

      font复合属性
      使用场景：设置网页公共样式
      font：是否倾斜 是否加粗 字号/行号 字体
      字号和字体值必须书写，否则font属性不生效
    
    p{
      font: italic 700 30px/2 楷体;
      /*font: 30px 楷体; （必须）*/
    }

文本缩进

    文本缩进
    属性名 text-indent
    属性值 
    数字 + px
    数字 + em（推荐：1em = 当前标签字号的大小）

    p {
      text-size: 30px;
      text-indent: 2em;/*缩进两个字，不论字体大小*/
    }

文本对齐方式

    文本对齐方式 控制内容水平对齐方式
    属性名 text-align
    属性值   效果
    left    左对齐（默认）
    center  居中对齐
    right   右对齐

    text-align本质是控制内容的对齐方式，属性要设置给内容的父级，居中的是文字内容，不是标签

    p{
      text-align: center;
    }

文本修饰线

    文本修饰线
    属性名 text-decoration
    属性值        效果
    none          无
    underline     下划线
    line-through  删除线
    overline      上划线

    a {
      /* 无，去掉修饰线，去掉超链接默认的下划线 */
      text-decoration: none;
    }

    div {
      /* 下划线 */
      text-decoration: underline;
    }

    p {
      /* 删除线，知道即可 */
      text-decoration: line-through;
    }

    span {
      /* 上划线，知道即可 */
      text-decoration: overline;
    }

文字颜色

    文字颜色
    属性名 color
    颜色表达方式  属性值            
    颜色关键字    颜色英文单词
    rgb表示法     rgb（r,g,b）
    rgba表示法    rgba（r,g,b,a）
    十六进制表示法 #RRGGBB
    只要属性值为颜色，都可以使用上述四种颜色表示方式，例如：背景色

    p {
      /* color: red; */
      /* color: rgb(0,255,0); */
      /* color: rgba(0,0,0,0.8); */
      /* color: #0000ff; */
      color: #00f;
    }