字体文本样式相关

设置文字属性font-

• 设置文字的颜色

• • color:red;
• 文字斜体
  • font-style:italic;
    • 文字倾斜
  • font-style:normal;
    • 文字不倾斜(默认选项)
• 文字粗体设置
  • font-weight:bold;
    • 加粗字体
  • font-weight:border;
    • 比bold更粗
  • 文字的粗细有极限,达到极限就不会再变粗了
• 设置文字大小字号
  • font-size:17px;
• 设置文字字体
  • font-family:"微软雅黑", "宋体", "agency fb" ;
  • 当文字字体名称为汉字或两个单词以上的名称时,要加上引号
  • 文字字体可以设置多种,依次从左至右适配,前面的没找到用后面的,都没找到就用系统默认的字体
• 文字属性的简写
  • font:style weight size family;
  • 其中style和weight属性可以省略,位置也可以互相交换
  • 其中的size和family属性不能省略,位置也不能交换
  • size和family必须写在所有属性的最后

---

设置文本属性text-

• 设置文本文字或图片的左右对齐方式:
  • text-align:center;
    • 相对于文字的父元素居中
  • text-align:left;
    • 相对于文字的父元素左对齐
  • text-align:right;
    • 相对于文字的父元素右对齐
• 设置行高
  • line-height:40px

• 设置文本文字的上下对齐
  • line-height:40px;
  • 把文字的行高设置为文字父元素的行高,文字自动上下对齐
• 文字线的设置
  • text-decoration: line-through;
    • 在文字中间划横线
  • text-decoration:underline;
    • 给文字加下划线
  • text-decoration:overline;
    • 给文字加上划线
  • text-decoration:none;
    • 去除文字的线
    • 一般用于给a标签去除自带的下划线
• 字母大小写转换
  • text-transform:capitalize;
    • 单词的首字母大写
  • text-transform:lowercase;
    • 所有的字母都小写
  • text-transform:uppercase;
    • 所有的字母都大写
• 字符的间距
  • letter-spacing:10px;
• 字间距
  • wrod-spacing:20px;
• 文本缩进
  • text-indent:50px;
  • text-indent:2em;
    • em表示一个汉字的缩进,2em表示2个汉字的缩进
  • 只对第一行有效
• 文字阴影
  • text-shadow: 5px, 5px, 5px, red;
  • 第一个参数:水平方向相对设置,可以写负数
  • 第二个参数:垂直方向相对位置,可以写负数
  • 第三个参数:模糊指数,可模糊范围(可选参数)
  • 第四个参数:阴影文字的颜色

---