关于前端学习:CSS样式文本样式

36次阅读

共计 1197 个字符,预计需要花费 3 分钟才能阅读完成。

  • 设置文本字体大小

    font-size:16px;
  • 设置文本色彩

    color:#343434
    
    款式值:1. 色彩单词名:red
      2. 16 进制色彩值:#343434
      3. rgba 色彩值:rgba(255,255,255,1) ——a 示意透明度 
  • 设置字体类型

    font-family:'Times New Roman', Times, serif;
    
      1. 设置多个字体时,应用逗号宰割,后面写英文字体,前面写中文字体
      2. 字体名有多个单词组成时,应用引号包裹 
  • 设置文本加粗成果

    font-weight:normal;
    
      1. 更粗的:bolder
      2. 加粗的:bold
      3. 惯例的:normal
      4. 数值:100-900(600 以上显示加粗成果)
  • 设置文本斜体成果

    font-style:normal;
    
      1. 针对具备歪斜属性字体:italic
      2. 针对所有字体:oblique
      3. 失常字体:normal
  • 设置文本行高

    line-height:16px;
    
      1. 行高指两行文字基线到基线之间垂直距离
      2. 革除行高可设置为 1 或与字体大小一样
      3. 行高 < 容器高度时,文本在容器靠上地位
      4. 行高 = 容器高度时,文本在容器居中地位
      5. 行高 > 容器高度时,文本在容器靠下地位 
  • font 款式的复合语法

    font:size/line-height family style weight color;
  • 设置文本程度对齐形式

    text-align: 方向
    
    1. 靠右对齐:right
    2. 靠左对齐:left
    3. 居中对齐:center
    4. 两端对齐:justify
  • 设置文本垂直对齐形式

    vertical-align: 方向
    
    1. 顶部对齐:top
    2. 底部对齐:bottom
    3. 居中对齐:middle
    4. 基线对齐:baseline
  • 设置文本润饰线

    text-decoration:none
    
    1. 革除润饰:none
    2. 增加下划线润饰:underline
    3. 增加上划线润饰:overline
    4. 增加删除线润饰:line-through
  • 设置文本缩进

    text-indent=2em;
    
    1. em 单位是绝对单位,1em = 1 个字体大小
    2. 取正值时示意向内缩进
    3. 取负值时示意向外缩进 
  • 设置文本缩进

    text-indent=2em;
    
    1. em 单位是绝对单位,1em = 1 个字体大小
    2. 取正值时示意向内缩进
    3. 取负值时示意向外缩进 
  • 设置字间距与词间距

     字间距
    word-spacing=10px;
    
    词间距
    letter-spancing=10px;
  • 设置单词大小写

    text-transform:capitalize
    
      1. 设置为首字母大写:capitalize
      2. 设置为全副大写:uppercase
      3. 设置为全副小写:lowercase
  • 折行款式

     不强制折行
    word-wrap:break-word
    
    强制折行
    word-break:break-all
  • 设置英文文本为小型大写字体

    font-variant:small-caps
    
      1. 惯例的——normal
      2. 小型大写字体——small-caps

正文完
 0