CSS基础（三）---文本类型

一、CSS文本样式

1、CSS文本样式

CSS文本样式包含以下内容

属性	名称	值
font-family	字体	中文字体需要嵌套在引号中，多字体使用英文逗号
font-size	字号	number，单位为px
font-weight	字体粗细	normal-不加粗，bold-加粗，100-900（100-500属于细字体，600-900属于粗字体）
font-variant	小型大写字母	normal-无变化，small-caps-将小写字母转化为大写字母，但是字体大小按照小写字母显示
line-height	行高	number，单位为px，也可以设置倍数，单位为em(前提是需要设置font-size)，一般情况下是用em
text-transform	大小写转换	lowercase-转小写，capitalize-首字母大写其余不变，uppercase-转大写
text-decoration	文本修饰	none-清除文本样式，underline-文本添加下划线，overline-文本添加上划线，line-through-删除线

1、font-family：font-family设置字体，若字体是中文，需要用引号括起，可以设置多种字体，浏览器根据font-family规定的字体顺序来匹配字体，直到匹配成功，后续设置的字体就无效了，多个字体设置以逗号隔开。同时font-family具有继承性，可以利用设定body的css属性来控制所有body文本

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

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

2、font-size：font-size可以精确设置字体大小，单位为px

h1{font-size: 30px;}

3、font-weight：font-weight可以控制字体的粗细，normal-不加粗，bold-加粗，100-900(以数字控制粗细)，100-900,数值越大越粗，100-500都是细体，600-900是粗体

h1{font-weight: normal;}
p{font-weight: bold;}
h2{font-weight: 100;}

4、font-variant：小型大写字母，会将小写字母转为大写但是大小依旧保持为小写字母大小

.aaa{font-variant: small-caps;}

5、line-height：行高，在文本控制时经常使用的，在设定行高时，可以使用px设定精确值，也可以设置倍数，单位为em(前提是需要设置font-size)，一般情况下是用em

.box{font-size: 40px; line-height: 1.5em}

6、text-transform：控制英文字体大小写，lowercase-全转小写，capitalize-首字母大写，uppercase-全转大写

.loweren{text-transform: lowercase;}
.capen{text-transform: capitalize;}
.upperen{text-transform: uppercase;}

7、text-decoration：文本修饰，none-清除文本样式，underline-文本下添加下划线，overline-文本上添加上划线，line-through-删除线

a:link{text-decoration: none;}
a:hover{text-decoration: underline;}
.overline{text-decoration: overline;}
.price{font-size: 20px; text-decoration:line-through;}

具体实例如下：

<!DOCTYPE html>
<html>
<head>
	<title>文本样式</title>
	<!-- 各种文本样式介绍 -->
	<!-- <style type="text/css">
		/*font-family设置字体，若字体是中文，需要用引号括起*/
		/*font-family可以设置多种字体，浏览器根据font-family规定的字体顺序来匹配字体，直到匹配成功，后续设置的字体就无效了，多个字体设置以逗号隔开*/
		h1{font-family: "微软雅黑","宋体","黑体";}
	</style> -->
	<style type="text/css">
		/*font-family具有继承性，可以利用设定body的css属性来控制所有body文本*/
		body{font-family: "微软雅黑","宋体","黑体";}
		/*font-size可以精确设置字体大小，单位为px*/
		h1{font-size: 30px;}
		/*font-weight可以控制字体的粗细，normal-不加粗，bold-加粗，100-900(以数字控制粗细)*/
		h1{font-weight: normal;}
		p{font-weight: bold;}
		/*100-900,数值越大越粗，100-500都是细体，600-900是粗体*/
		h2{font-weight: 100;}
		/*font-variant:小型大写字母，会将小写字母转为大写但是大小依旧保持为小写字母大小*/
		.aaa{font-variant: small-caps;}
		/*line-height:行高，在文本控制时经常使用的，在设定行高时，可以使用px设定精确值，也可以设置倍数，单位为em(前提是需要设置font-size)，一般情况下是用em*/
		/*1.5em就是40px的1.5倍*/
		.box{font-size: 40px; line-height: 1.5em}
		/*text-transform控制英文字体大小写，lowercase-全转小写，capitalize-首字母大写，uppercase-全转大写*/
		.loweren{text-transform: lowercase;}
		.capen{text-transform: capitalize;}
		.upperen{text-transform: uppercase;}
		/*text-decoration文本修饰，none-清除文本样式，underline-文本下添加下划线，overline-文本上添加上划线，line-through-删除线*/
		/*当鼠标未移入时a标签没有下划线，鼠标移入后有下划线*/
		a:link{text-decoration: none;}
		a:hover{text-decoration: underline;}
		.overline{text-decoration: overline;}
		.price{font-size: 20px; text-decoration:line-through;}
		.nowprice{font-size: 40px; color: red;}
	</style>
</head>
<body>
	<h1>百度一下你就知道</h1>
	<h2>百度一下你就知道</h2>
	<p>百度一下你就知道</p>
	<div class="aaa">abcDEF</div>
	<div class="box">百度一下你就知道百度一下你就知道百度一下你就知道百度一下你就知道百度一下你就知道百度一下你就知道百度一下你就知道百度一下你就知道百度一下你就知道百度一下你就知道百度一下你就知道百度一下你就知道百度一下你就知道百度一下你就知道百度一下你就知道百度一下你就知道百度一下你就知道百度一下你就知道百度一下你就知道百度一下你就知道百度一下你就知道百度一下你就知道百度一下你就知道百度一下你就知道百度一下你就知道百度一下你就知道</div>
	<div class="loweren">adC Def GHi Lisdfs SDFSdfs</div>
	<div class="capen">adC Def GHi Lisdfs SDFSdfs</div>
	<div class="upperen">adC Def GHi Lisdfs SDFSdfs</div>
	<a href="https://www.baidu.com" target="_blank">百度一下你就知道</a>
	<div class="overline">上划线</div>
	<div class="price">原价:998元</div>
	<div class="nowprice">现价:100元</div>
</body>
</html>

2、其他类型的文本样式

font- style定义字体的风格

normal 默认值，可以将倾斜文字改为标准文字
italic 向右倾斜的文字，将标准的文字变为倾斜字体
oblique 向右倾斜的文字，将标准的文字变为倾斜字体

注意：italic和oblique都是向右倾斜的文字, 但区别在于Italic是指斜体字，而oblique是倾斜的文字，对于没有斜体的字体应该使用oblique属性值来实现倾斜的文字效果。

二、文本区块

1、文本区块

文本区块包含以下内容：

属性	名称	值
letter-spacing	字母间距	number，字母间距，调整中文或英文之间的间距,精确调整单位为px
text-indent	文本的缩进	number，单位为px，
text-align	水平对齐	left-左对齐，center-居中对齐，right-右对齐
vertical-align	垂直对齐	baseline-基线对齐，sub-下标，super-上标，top-顶部对齐，middle-中线对齐，bottom-底部对齐
display	显示类型	none-不显示，block-转换为块级元素，inline-转换为行级元素，inline-block-转换为行块级元素

1、letter-spacing：字母间距，调整中文或英文之间的间距,精确调整单位为px

/*调整英文*/
.text{letter-spacing: 3px;}
/*调整中文*/
.text1{letter-spacing: 5px;}
/*鼠标移入时增大间距*/
.text2:hover{letter-spacing: 10px;}

2、text-indent：文本缩进，常用与文本首行缩进2字符,设定p标签文本的字体大小后，执行设置text-indent为2em(2倍)即可

p{text-indent: 2em; font-size: 14px;}

3、text-align:水平对齐，包含left左对齐，center居中对齐，right右对齐

h1{text-align: left;}
h2{text-align: center;}
h3{text-align: right;}

以下是具体实例：

<!DOCTYPE html>
<html>
<head>
	<title>文本区块1</title>
	<style type="text/css">
		/*letter-spacing:字母间距，调整中文或英文之间的间距,精确调整单位为px*/
		/*调整英文*/
		.text{letter-spacing: 3px;}
		/*调整中文*/
		.text1{letter-spacing: 5px;}
		/*鼠标移入时增大间距*/
		.text2:hover{letter-spacing: 10px;}
		/*text-indent:文本缩进，常用与文本首行缩进2字符,设定p标签文本的字体大小后，执行设置text-indent为2em(2倍)即可*/
		p{text-indent: 2em; font-size: 14px;}
		/*text-align:水平对齐，包含left左对齐，center居中对齐，right右对齐*/
		h1{text-align: left;}
		h2{text-align: center;}
		h3{text-align: right;}
	</style>
</head>
<body>
	<h1>标题左对齐</h1>
	<h2>标题居中对齐</h2>
	<h3>标题右对齐</h3>
	<hr>
	<div class="text">abdsdfs</div>
	<div class="text1">极客学院</div>
	<div class="text2">百度一下你就知道</div>
	<hr>
	<div>
		<p>WWW是环球信息网的缩写，（亦作“Web”、“WWW”、“'W3'”，英文全称为“World Wide Web”），中文名字为“万维网”，"环球网"等，常简称为Web。 分为Web客户端和Web服务器程序。</p>
		<p>WWW可以让Web客户端（常用浏览器）访问浏览Web服务器上的页面。 是一个由许多互相链接的超文本组成的系统，通过互联网访问。在这个系统中，每个有用的事物，称为一样“资源”；并且由一个全局“统一资源标识符”（URI）标识；这些资源通过超文本传输协议（Hypertext Transfer Protocol）传送给用户，而后者通过点击链接来获得资源。</p>
		<p>万维网联盟（英语：World Wide Web Consortium，简称W3C），又称W3C理事会。1994年10月在麻省理工学院（MIT）计算机科学实验室成立。万维网联盟的创建者是万维网的发明者蒂姆·伯纳斯-李。</p>
		<p>万维网并不等同互联网，万维网只是互联网所能提供的服务其中之一，是靠着互联网运行的一项服务。</p>
	</div>
</body>
</html>

4、vertical-align:垂直对齐方式，包含baseline-基线对齐，sub-下标，super-上标，top-顶端对齐，middle-居中对齐，bottom-底部对齐

/*基线对齐*/
h1 .text1{font-size: 20px; vertical-align: baseline;}
/*顶部对齐*/
h1 .text2{font-size: 20px; vertical-align: top;}
/*居中对齐*/
h1 .text3{font-size: 20px; vertical-align: middle;}
/*下标:可以用来表示化学字符*/
.text4{font-size: 30px;}
.text4 span{font-size: 20px; vertical-align: sub;}
/*上标:可以用来表示化学字符*/
.text5{font-size: 30px;}
.text5 span{font-size: 10px;vertical-align: super;}
/*底部对齐*/
h2{font-size: 50px;}
h2 .text6{font-size: 20px; vertical-align: bottom;}

5、display显示类型，控制标签显示，包含none-不显示，block-转换块级元素，inline-转换行级元素，inline-block-行级块元素

5.1、none：不显示:隐藏元素，在后面做特效的时候可以用到

h1{display: none;}

注意：行级元素与块集元素区别：

1、行级元素范围是文字部分，块级元素范围是整行
2、行级元素不会自动换行，块级元素会自动换行
3、行级元素不能定义宽高，块级元素可以定义宽高

5.2、block：转换为块级元素,就可以自动换行、定义宽高

.text{display: block; background: red; width: 500px; height: 500px;}

5.3、inline：转换为行级元素,就不能自动换行、定义宽高

h2{display: inline;background: blue;}

5.4、inline-block：行级块元素:同时具有行级元素不自动换行以及块级元素可以定义宽高的属性，img、input标签就是行级块元素

/*行级元素转行级块元素*/
.text1{display: inline-block; width: 50px; height: 50px;}
/*块级元素转行级块元素*/
h3{display: inline-block; width: 100px;height: 80px;}

具体实例如下：

<!DOCTYPE html>
<html>
<head>
	<title>文本区块3</title>
	<style type="text/css">
	/*display显示类型，控制标签显示，包含none-不显示，block-转换块级元素，inline-转换行级元素，inline-block-行级块元素*/
	/*none-不显示:隐藏元素，在后面做特效的时候可以用到*/
		h1{display: none;}
	/*行级元素与块集元素区别：
	1、行级元素范围是文字部分，块级元素范围是整行
	2、行级元素不会自动换行，块级元素会自动换行
	3、行级元素不能定义宽高，块级元素可以定义宽高*/
	/*block-转换为块级元素,就可以自动换行、定义宽高*/
		.text{display: block; background: red; width: 500px; height: 500px;}
	/*inline-转换为行级元素,就不能自动换行、定义宽高*/
		h2{display: inline;background: blue;}
	/*行级块元素:同时具有行级元素不自动换行以及块级元素可以定义宽高的属性，img、input标签就是行级块元素*/
		/*行级元素转行级块元素*/
		.text1{display: inline-block; width: 50px; height: 50px;}
		/*块级元素转行级块元素*/
		h3{display: inline-block; width: 100px;height: 80px;}
	</style>
</head>
<body>
	<h1>极客学院</h1>
	<a class="text" href="https://www.baidu.com">百度一下你就知道</a>
	<a class="text" href="http://www.jd.com">京东商城</a>
	<hr>
	<h2>腾讯视频</h2>
	<h2>脑白金</h2>
	<hr>
	<a class="text1" href="http://www.jd.com">行级元素转行级块元素</a>
	<hr>
	<h3>腾讯体育</h3>
	<h3>NBA篮球</h3>
</body>
</html>

2、常见显示类型的区别

（1）块级元素

常见标签：h1-h6、p、div、ui、ol、li、dl、dt、dd等。
特性：能够独立显示在一行，在没有设置宽度的情况下，默认宽度等于父级宽度，并且可以自定义块元素的宽高。
转换：任何元素都可以通过display:block转换为块级元素，转换完成之后，将具备块级元素的所有特性。

（2）行级元素

常见标签：a、span、strong、b、em、i、del、s、font等。
特性：行级元素可以显示在一行，在没有设置宽度的情况下，默认的宽度等于内部元素的宽度，行级元素不能自定义宽高。
转换：任何元素都可以通过display:inline转换为行级元素，转换之后同样具备以上行级元素的特性。

（3）行级块元素

常见标签：img、input等。
特性：行级元素能够在一行显示，并且可以自定义元素的宽高。
转换：任何元素都可以通过display:inline-block转换为行级块元素，转换完成之后具备行级块元素的所有特性。