第五节：文本样式、字体样式

第五节：文本样式、字体样式

1、文本样式

​ CSS 文本样式用于定义HTML元素中文本效果。

属性	描述
color	设置文本颜色
direction	设置文本方向。
letter-spacing	设置字符间距
line-height	设置行高
text-align	对齐元素中的文本
text-decoration	向文本添加修饰
text-indent	缩进元素中文本的首行
text-shadow	设置文本阴影
text-transform	控制元素中的字母
unicode-bidi	设置或返回文本是否被重写
vertical-align	设置元素的垂直对齐
white-space	设置元素中空白的处理方式
word-spacing	设置字间距

1.1、设置文本颜色

• color 属性设置文本颜色。

  /* 设置文本颜色 */
  p {
      /* 设置文本颜色 */
      color: red;
      /* CSS中，颜色值通常以以下方式定义:
          十六进制 - 如："#ff0000"(三元素组合) FF 00 00 红 绿 蓝
          RGB - 如："rgb(255,0,0)"
          颜色名称 - 如："red"
      */
  }
  
  /* 
      color 属性值
          color: red;
          color: rgb(255,0,0);
          color: #ff0000;
          color: rgba(255,0,0,0.1);
  */
  

1.2、设置文本方向

• direction 属性设置文本方向。

  /* 设置文本方向 */
  p {
      /* 设置文本颜色 */
      color: red;
      /* 设置文本方向 */
      direction: ltr;
  }
  
  /* 
      direction 属性值
          ltr	默认。文本方向从左到右。
          rtl	文本方向从右到左。
          inherit	规定应该从父元素继承 direction 属性的值。
  */
  

1.3、设置字符间距

• letter-spacing 属性设置字符间距

  /* 设置字符间距 */
  p {
      /* 设置文本颜色 */
      color: red;
      /* 设置文本方向 */
      direction: ltr;
      /* 设置字符间距 */
      letter-spacing: 20px;
  }
  
  /* 
      letter-spacing 属性值
          normal	默认。规定字符间没有额外的空间。
          length	定义字符间的固定空间（允许使用负值）。
          inherit	规定应该从父元素继承 letter-spacing 属性的值。
  */
  

1.4、设置行高

• line-height 属性设置行高

  /* 设置文本行高 */
  p {
      /* 设置文本颜色 */
      color: red;
      /* 设置文本方向 */
      direction: ltr;
      /* 设置字符间距 */
      letter-spacing: 20px;
      /* 设置文本行高 */
      line-height: 100px;
  }
  
  /* 
      line-height 属性值
          normal	默认。设置合理的行间距。
          number	设置数字，此数字会与当前的字体尺寸相乘来设置行间距。
          length	设置固定的行间距。
          %	基于当前字体尺寸的百分比行间距。
          inherit	规定应该从父元素继承 line-height 属性的值。
  */
  

1.5、对齐元素中文本

• text-align 属性设置对齐元素中的文本

  /* 对齐元素中的文本 */
  p {
      /* 设置文本颜色 */
      color: red;
      /* 设置文本方向 */
      direction: ltr;
      /* 设置字符间距 */
      letter-spacing: 20px;
      /* 设置文本行高 */
      line-height: 100px;
      /* 对齐元素中的文本 */
      text-align: center;
  }
  
  /* 
      text-align 属性值
          left	把文本排列到左边。默认值：由浏览器决定。
          right	把文本排列到右边。
          center	把文本排列到中间。
          justify	实现两端对齐文本效果。
          inherit	规定应该从父元素继承 text-align 属性的值。
  */
  

1.6、向文本添加修饰

• text-decroation 属性设置文本添加修饰

  • text-decroation-line 属性规定文本修饰要使用的线条类型。

    text-decoration-line: none|underline|overline|line-through|initial|inherit;
        none	默认值。规定文本修饰没有线条。
        underline	规定文本的下方将显示一条线。	
        overline	规定文本的上方将显示一条线。
        line-through	规定文本的中间将显示一条线。	
        initial	设置该属性为它的默认值。
        inherit	从父元素继承该属性。
    

  • text-decoration-color text-decoration-color 属性规定文本修饰（下划线 underline、上划线 overline、中划线 line-through）的颜色。

    text-decoration-color: color|initial|inherit;
        color	规定文本修饰的颜色。	
        initial	设置该属性为它的默认值。
        inherit	从父元素继承该属性。
    

  • text-decoration-style text-decoration-style 属性规定线条如何显示。

    text-decoration-style: solid|double|dotted|dashed|wavy|initial|inherit;
        solid	默认值。线条将显示为单线。	
        double	线条将显示为双线。	
        dotted	线条将显示为点状线。
        dashed	线条将显示为虚线。	
        wavy	线条将显示为波浪线。	
        initial	设置该属性为它的默认值。
        inherit	从父元素继承该属性
    

  • text-decoration: 文字添加修饰简写属性

    /* 向文本添加修饰 */
    p {
        /* 设置文本颜色 */
        color: red;
        /* 设置文本方向 */
        direction: ltr;
        /* 设置字符间距 */
        letter-spacing: 20px;
        /* 设置文本行高 */
        line-height: 100px;
        /* 对齐元素中的文本 */
        text-align: center;
        /* 向文本添加修饰 */
        text-decoration: underline solid blue;
    }
    
    /* 
        text-decoration: 属性值
            text-decoration-line text-decoration-style text-decoration-color 
            第一个值线  第二个线值样式 第三个样式颜色
    */
    

1.7、缩进元素中文本的首行

• text-indent 属性规定文本块中首行文本的缩进。

  /* 缩进元素中文本的首行 */
  p {
      /* 缩进元素中文本的首行 */
      text-indent: 50px;
  }
  
  /* 
      text-indent: 属性值
          ength	定义固定的缩进。默认值：0。
          %	定义基于父元素宽度的百分比的缩进。
          inherit	规定应该从父元素继承 text-indent 属性的值。
  */
  

1.8、设置文本阴影

• text-shadow 属性应用于阴影文本。

  /* 设置文本阴影 */
  p {
      /* 设置文本阴影 */
      text-shadow: 2px 2px #ff0000;
  }
  
  /* 
      text-shadow: h-shadow v-shadow blur color;
      text-shadow: 属性值
          h-shadow	必需。水平阴影的位置。允许负值。
          v-shadow	必需。垂直阴影的位置。允许负值。
          blur	可选。模糊的距离。
          color	可选。阴影的颜色。
  */
  

1.9、控制元素中的字母

• text-transform 属性控制文本的大小写。

  /* 控制元素中的字母 */
  p {
      /* 控制元素中的字母 */
      text-transform: uppercase;
  }
  
  /* 
      text-transform: 属性值
          none	默认。定义带有小写字母和大写字母的标准的文本。
          capitalize	文本中的每个单词以大写字母开头。
          uppercase	定义仅有大写字母。
          lowercase	定义无大写字母，仅有小写字母。
          inherit	规定应该从父元素继承 text-transform 属性的值。
  */
  

1.10、设置或返回文本是否被重写

• unicode-bidi 设置或返回文本是否被重写

  /* 设置或返回文本是否被重写 */
  p {
      direction: rtl;
      /* 设置或返回文本是否被重写 */
      unicode-bidi: bidi-override;
  }
  
  /* 
      unicode-bidi: normal|embed|bidi-override|initial|inherit;
      unicode-bidi 属性值
          normal	默认。不使用附加的嵌入层面。	
          embed	创建一个附加的嵌入层面。	
          bidi-override	创建一个附加的嵌入层面。重新排序取决于 direction 属性。	
          initial	设置该属性为它的默认值。	
          inherit	从父元素继承该属性。
  */
  

1.11、设置元素的垂直对齐

• vertical-align 属性设置一个元素的垂直对齐方式。

  /* 设置元素的垂直对齐 */
  p {
      vertical-align:text-top;
  }
  
  /* 
      vertical-align 属性值
          baseline	默认。元素放置在父元素的基线上。
          sub	垂直对齐文本的下标。
          super	垂直对齐文本的上标
          top	把元素的顶端与行中最高元素的顶端对齐
          text-top	把元素的顶端与父元素字体的顶端对齐
          middle	把此元素放置在父元素的中部。
          bottom	使元素及其后代元素的底部与整行的底部对齐。
          text-bottom	把元素的底端与父元素字体的底端对齐。
          length	将元素升高或降低指定的高度，可以是负数。
          %	使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。
          inherit	规定应该从父元素继承 vertical-align 属性的值。
  */
  

1.12、设置元素空白处理方式

• white-space 属性指定元素内的空白怎样处理。

  /* 	设置元素中空白的处理方式 */
  p {
      white-space: nowrap;
  }
  
  /* 
      white-space 属性值
          normal	默认。空白会被浏览器忽略。
          pre	空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
          nowrap	文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。
          pre-wrap	保留空白符序列，但是正常地进行换行。
          pre-line	合并空白符序列，但是保留换行符。
          inherit	规定应该从父元素继承 white-space 属性的值。
  */
  

1.13、设置字间距

• word-spacing 属性增加或减少字与字之间的空白。

  /* 设置字间距	 */
  p {
      word-spacing: 30px;
  }
  
  /* 
      word-spacing 属性值
          normal	默认。定义单词间的标准空间。
          length	定义单词间的固定空间。
          inherit	规定应该从父元素继承 word-spacing 属性的值。
  */
  

2、字体样式

Property	描述
font	在一个声明中设置所有的字体属性
font-family	指定文本的字体系列
font-size	指定文本的字体大小
font-style	指定文本的字体样式
font-variant	以小型大写字体或者正常字体显示文本。
font-weight	指定字体的粗细。

2.1、设置元素的字体

• font-family 属性设置元素的字体。

  /* 设置元素的字体 */
  p {
      font-family: "华文行楷";
  }
  
  /* 
      font-family 属性值
          family-name - 指定的系列名称：具体字体的名称，比如："times"、"courier"、"arial"。
          generic-family - 通常字体系列名称：比如："serif"、"sans-serif"、"cursive"、"fantasy"、"monospace"。
          "华文行楷"
          ...
  */
  

2.2、设置字体大小

• font-size 属性设置文本字体大小。

  /* 设置元素的字体大小 */
  p {
      /* 设置元素的字体大小 */
      font-family: "times";
      /* 设置字体大小 */
      font-size: 120px;
  }
  
  /* 
      font-size 属性值
          xx-small、x-small、small、medium、large、x-large、xx-large 把字体的尺寸设置为不同的尺寸，从 xx-small 到 xx-large。默认值：medium。
          smaller	把 font-size 设置为比父元素更小的尺寸。
          larger	把 font-size 设置为比父元素更大的尺寸。
          length	把 font-size 设置为一个固定的值。eg: 12px;
          %	把 font-size 设置为基于父元素的一个百分比值。eg:100%;
          inherit	规定应该从父元素继承字体尺寸。
  
  */
  

2.3、设置字体样式

• font-style 属性指定文本的字体样式。

  /* 设置字体样式 */
  p {
      /* 设置元素的字体大小 */
      font-family: "times";
      /* 设置字体大小 */
      font-size: 120px;
      /* 设置字体样式 */
      font-style: italic;
  }
  
  /* 
      font-style 属性值
          normal	默认值。浏览器显示一个标准的字体样式。
          italic	浏览器会显示一个斜体的字体样式。
          oblique	浏览器会显示一个倾斜的字体样式。
          inherit	规定应该从父元素继承字体样式。
  */
  

2.4、设置小型大写字母文本

• font-variant 属性设置小型大写字母的字体显示文本，这意味着所有的小写字母均会被转换为大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小,主要用于定义小型大写字母文本。

  /* 小型大写字母字体 */
  p {
      /* 设置元素的字体大小 */
      font-family: "times";
      /* 设置字体大小 */
      font-size: 120px;
      /* 设置字体样式 */
      font-style: oblique;
      /* 小型大写字母字体 */
      font-variant: small-caps;
  }
  
  /* 
      font-variant 属性值
          normal	默认值。浏览器会显示一个标准的字体。
          small-caps	浏览器会显示小型大写字母的字体。
          inherit	规定应该从父元素继承 font-variant 属性的值。
  */
  

2.5、设置字体的粗细

• font-weight 属性设置文本的粗细

  /* 设置字体粗细 */
  p {
      /* 设置元素的字体大小 */
      font-family: "times";
      /* 设置字体大小 */
      font-size: 120px;
      /* 设置字体样式 */
      font-style: oblique;
      /* 小型大写字母字体 */
      font-variant: small-caps;
      /* 设置字体粗细 */
      font-weight: 600;
  }
  
  /* 
      font-weight 属性值
          normal	默认值。定义标准的字符。
          bold	定义粗体字符。
          bolder	定义更粗的字符。
          lighter	定义更细的字符。
          100、200、300、400、500、600、700、800、900 定义由细到粗的字符。400 等同于 normal，而 700 等同于 bold。
          inherit	规定应该从父元素继承字体的粗细。
  */
  

2.6、设置字体简写

• font 简写属性在一个声明中设置所有字体属性。

  /* 设置字体粗细 */
  p {
      /* 字体样式简写 */
      font: italic bold 100px/200px Georgia, serif;
  }
  
  /* 
      font 属性值
          font-style	规定字体样式。参阅：font-style 中可能的值。
          font-variant	规定字体异体。参阅：font-variant 中可能的值。
          font-weight	规定字体粗细。参阅：font-weight 中可能的值。
          font-size/line-height	规定字体尺寸和行高。参阅：font-size 和 line-height 中可能的值。
          font-family	规定字体系列。参阅：font-family 中可能的值。
          caption	定义被标题控件（比如按钮、下拉列表等）使用的字体。
          icon	定义被图标标记使用的字体。
          menu	定义被下拉列表使用的字体。
          message-box	定义被对话框使用的字体。
          small-caption	caption 字体的小型版本。
          status-bar	定义被窗口状态栏使用的字体。
  */
  

总结

文字的样式 是在标签上的.
图片理解为文字.
字体样式:
	font-size 字体大小 大众浏览器 默认字体大小16px
	浏览器做了限制情况 字体大小最小12px
font-family 字体类型
	浏览器识别安装的字体样式 可以直接用
	字体类型 中文必须用引号
	英文字体样式 中间有非字母的特殊符号 需要引号包裹
	自己设置的字体样式 可以引入
	引用自定义字体
	@font-face{
		font-family:"huaweixingkai
		src:url("font/huaweixingkai.ttf");/*字体路径写法*/
	}
行高在块级元素中 背景会跟着变大 字体行高样式 为文本容器高度时 文字能居中
文本默认垂直对齐方式(内联元素 和 行内块元素):
	小写x最下端 为基点 横着的位置叫基线  是文本垂直对齐默认方式
vertical-align 垂直对齐方式
	baseline 基线
	top 文本顶部对齐
	bottom 文本底部对齐
	middle 父元素的中线对齐
	注意:多个元素垂直对齐居中的时候 都要加上
		 vertical-align:middle;
		 文字标签元素不能限定高度
文本装饰:
	text-decoration
		none 清除下划线
		underline 添加下划线
		line-through 删除线
a标签字体颜色 只能写在a标签上
text-indent 文本缩进