2.CSS文本样式

一、二、字体样式：

1.使用CSS样式设置文字样式：

1.文字样式属性：

• 字体：font-family
• 文字大小：font-size
• 文字颜色：font-color
• 文字粗细：font-weight
• 文字样式：font-style

2.font-family字体样式

定义元素内以什么字体显示：
语法：

font-family：[字体1][,字体2][,...]

  p{font-family: "微软雅黑","宋体","黑体";}

说明：

• 含空格字体名和中文，用英文引号( " )括起
• 多个字体，用英文逗号( , )隔开
• 引号嵌套，外使用双引号，内使用单引号
• 设置多个字体的好处：浏览器依次查找，如果都没有，使用浏览器默认样式。

2.CSS文本样式

1.text-align：left | right | center | justify

设置元素内文本的水平对齐方式

<p style="text-align:right">超文本是一种组织信息的方式</p>

or
通过class或者id来设置不同段落的样式：

.biu{font-family: "方正舒体","宋体","黑体";}

<p class="biu">超文本是一种组织信息的方式</p>

2. 只对块状区域起作用。可以在图片外部嵌套块状元素< div >< /div >。

2.verical-align属性： baseline | sub | top | text-top | middle | bottom | text-bottom | 长度 | 百分比

1. 设置元素内容的垂直对齐方式

2. 只对行内元素span生效，对块状文本样式p、div不起作用。
   

.baseline{vertical-align: baseline;}

3. 长度和百分比：可以精确规定文字上下移动的距离

<span style="vertical-align:-15px">是一种组织信息的方式</span>

<span style="vertical-align:100%">是一种组织信息的方式</span>

4. 可应用于单元格元素。

3.垂直居中应用

1.单行文字垂直居中

.warp{text-align: center;}

<div>
	<p>hahaha</p>
</div>

2.多行文字垂直居中

4.line-height属性：长度值 | 百分比

设置元素中文本行高

line-height: 50px;

当行高<字体大小，会发生重叠现象。
px 像素
em 字体的几倍
% 字体的百分比

5.单词、字母之间间距

word-spacing	设置元素内单词之间间距(一般用空格作判断)
letter-spacing	设置元素内字母之间间距
text-transform	设置元素内文本的大小写（capitalize首字母大写、uppercase字母大写、lowercase字母小写、none无任何设置效果）
text-decoration	设置元素内文本的装饰（underline、overline、line-though、blink闪烁效果、none

6.块级元素、行内元素

7.块级元素和行内元素的区别

1. 行内元素与块级元素可以相互转换， 通过修改display属性值来切换块级元素和行内元素，行内元素display：inline，块级元素display：block。
2. 行内元素和其他行内元素都会在一条水平线上排列，都是在同一行的；块级元素却总是会在新的一行开始排列，各个块级元素独占一行，垂直向下排列，若想使其水平方向排序，可使用左右浮动（float：left/right）让其水平方向排列。
3. 行内元素不可以设置宽高，宽度高度随文本内容的变化而变化，但是可以设置行高（line-height），同时在设置外边距margin上下无效，左右有效，内填充padding上下无效，左右有效；块级元素可以设置宽高，并且宽度高度以及外边距，内填充都可随意控制。
4. 块级元素可以包含行内元素和块级元素，还可以容纳内联元素和其他元素；行内元素不能包含块级元素，只能容纳文本或者其他行内元素。

8.空元素

< br > < hr > < img > < input > < link > < meta >

四、样式应用

1.CSS文本样式应用

经验：

1. 网页制作由整体到局部
2. 借助网络查询