CSS学习笔记（五）文本样式

1、字体样式

• font-family 指定文本的字体类型或字体集；

字体集有：serif（有装饰），sans-serif（无装饰），monospace

/*设置多个字体，浏览器会依次查找*/
h1{font-family:"微软雅黑","宋体","黑体",sans-serif;}

• font-size 指定文本的字体大小，浏览器默认16px；

• color指定文本的颜色；

body{color:red;}
h1{color:#00ff00;}
p{color:rgb(0,0,255);}

• font-style 指定文本的字体样式
  normal 默认值。浏览器显示一个标准的字体样式。
  italic 浏览器会显示一个斜体的字体样式。
  oblique 浏览器会显示一个倾斜的字体样式。

• font-variant 以小型大写字体或者正常字体显示文本。
  normal 默认值。浏览器会显示一个标准的字体。
  small-caps 浏览器会显示小型大写字母的字体。

• font-weight 指定字体的粗细；
  normal 默认值。定义标准的字符。
  bold 定义粗体字符。
  bolder 定义更粗的字符。
  lighter 定义更细的字符。
  或具体值：100~900

2、文本样式

• text-align
  设置元素内文本的水平对齐方式。

left 把文本排列到左边。默认值：由浏览器决定。
right 把文本排列到右边。
center 把文本排列到中间。
justify 实现两端对齐文本效果。
*注：该属性只对块元素有效，如：

.text{text-align:center;}

<img class="text" src="logo.png"></img>/*设置无效*/
<div class="text"><img src="logo.png"></img></div>/*设置有效*/

• vertical-align
  设置元素内容的垂直方式。
  文字基线：
  
  
  baseline 默认。元素放置在父元素的基线上。
  sub 垂直对齐文本的下标。
  super 垂直对齐文本的上标
  top 把元素的顶端与行中最高元素的顶端对齐
  text-top 把元素的顶端与父元素字体的顶端对齐
  middle 把此元素放置在父元素的中部。
  bottom 把元素的底端与行中最低的元素的顶端对齐。
  text-bottom 把元素的底端与父元素字体的底端对齐。
  length 把元素上移或下移某个长度值，如15px，-15px。
  % 使用 “line-height” 属性的百分比值来排列此元素。允许使用负值。
  *注：该属性只对行内元素、单元格元素有效

*使文本水平、垂直居中：

1、单行文本：设置text-align为center，并让行高line-height为字体高度；

.content{
height:400px;
width:100%;
line-height:400px;
text-align:center;
}

2、多行文本：设置text-align为center，设置vertical-align为middle，但该元素必须是行内元素或单元格元素；

.content{
vertical-align:middle;
text-align:center;
}

• 其他文本样式