文本样式
<!DOCTYPE html>
<html>
<head>
<meta charset="{CHARSET}">
<title></title>
<style>
div{
font-weight:bold;
font-style:italic;
font-size:50px;/*默认是16px*/
font-family:arial,"微软雅黑";/*有英文字体，的两边，左边是英文，右边是中文*/
/*font-family:"微软雅黑";*/
/*字体必须是电脑中有的*/
}
</style>
</head>
<body>
<!--
font-weight 文字加粗
weight 加粗
normal 正常
font-style 文字倾斜
italic 倾斜
normal 正常
font-size 文字大小
50px 数字加单位
font-family 文字字体
“主要字体”，“备选字体1”，“备选字体2” 表示如果电脑上有“主要字体”，就显示主要字体
如果用户电脑上没有主要字体，那就显示“备选字体1”，如果用户电脑上没有备选字体1，就显示“备选字体2”；
英文字体，“中文字体”； 英文字体，使用英文字体，中文字体，使用“中文字体”；
英文字体没有“”，一般情况下不要设置一些特殊的字体
-->
<div>欢迎大家来到海棠Lloyd</div>
</body>
</html>
行高
<!DOCTYPE html>
<html>
<head>
<meta charset="{CHARSET}">
<title></title>
<style>
div{
border:1px solid red;
/*height:30px;给了30px给文字，是文字加上空白一共30px
line-height:30px;
height:21px;
line-height:21px;*/
font:bold italic 26px/50px "微软雅黑";/*bold italic 可以删掉，但是其他的一定不能调换*/
}
</style>
</head>
<body>
<!--
行高代表一行文字在容器之中所占的高度
line-height 行高
16px 值是数字加单位
如果行高的值与容器的高度相等，那么文字就会垂直居中
测量多行文字行高的方法
1、首先要知道文字的大小，使用ps测量截屏的文字的大小
2、量一下两行文字之间的距离，也是使用ps去量，如果是13，因为不能使用奇数，因此要么少了一像素要么多了一像素
3、拿上面量出来的距离除2
如果行高为奇数的话，在自己测试之后会发现上面比下面少一个像素，上边距比下边距少一个像素
12 13/2=7.5 6 7，所以若是行高为13px，则上面距离是6px，下面的距离将是7px
-->
<!--
font：font-weight font-style font-size（必须）/line-height font-family（必须）
-->
<div>欢迎光临</div>
</body>
</html>
文本修饰等
<!DOCTYPE html>
<html>
<head>
<meta charset="{CHARSET}">
<title></title>
</head>
<body>
<!--
文本
color 颜色
text-algin 文本的对齐方式
text-indent 首行缩进（em缩进字符）
text-decoration 文本修饰，给文本添上下划线中划线等等
letter-spacing 字母的间距
word-spcing 单词间距（以空格解析）
white-space 强制不换行
-->
</body>
</html>
文本设置1
<!DOCTYPE html>
<html>
<head>
<meta charset="{CHARSET}">
<title></title>
<style type="text/css">
div{
color:red;
text-align: left;
width:100px;
border:1px solid black;
text-indent:32px;
font-size:12px;
}
</style>
</head>
<body>
<!--
color表示颜色，color：red；
值为颜色的几种表示方法
text-algin 表示文本的对其方式
left 代表左对齐（默认）
center 居中对其
right 右对其
text-indent 首行缩进
32px 值是数字加上单位
-->
<div>
huanyigndajia
</div>
</body>
</html>
文本设置2
<!DOCTYPE html>
<html>
<head>
<meta charset="{CHARSET}">
<title></title>
<style>
div{
color:red;
text-align: left;
width:100px;
border:1px solid #000;
text-indent:2em;
font-size:20px;
text-decoration: underline;
letter-spacing:10px;
}
</style>
</head>
<body>
<!--
color表示颜色，color：red；
值为颜色的几种表示方法
text-algin 表示文本的对其方式
left 代表左对齐（默认）
center 居中对其
right 右对其
text-indent 首行缩进
32px 值是数字加上单位
text-decoration 文本修饰
underline 下划线
overline 上划线
line-through 中划线
none 没有下划线
letter-spacing 字母间距
10px 值为数字加单位
word-spacing 单词间距
-->
<div>
huanyigndajiad
</div>
</body>
</html>
单词间距
<!DOCTYPE html>
<html>
<head>
<meta charset="{CHARSET}">
<title></title>
<style>
div{
color:red;
text-align: left;
border:1px solid #000;
text-indent:2em;
font-size:20px;
text-decoration: underline;
letter-spacing:10px;
word-spacing: 50px;
}
</style>
</head>
<body>
<!--
color表示颜色，color：red；
值为颜色的几种表示方法
text-algin 表示文本的对其方式
left 代表左对齐（默认）
center 居中对其
right 右对其
text-indent 首行缩进
32px 值是数字加上单位
text-decoration 文本修饰
underline 下划线
overline 上划线
line-through 中划线
none 没有下划线
letter-spacing 字母间距
10px 值为数字加单位
word-spacing 单词间距，使用空格识别
-->
<div>
欢迎 大家 来到 我的 世界 i just want you
</div>
</body>
</html>
文字缩进em
<!DOCTYPE html>
<html>
<head>
<meta charset="{CHARSET}">
<title></title>
<style type="text/css">
div{
color:red;
text-align: left;
width:130px;
border:1px solid black;
text-indent:1em;/*em和一个字体的大小是一样的*/
font-size:24px;
}
</style>
</head>
<body>
<!--
em是根据字体的大小来计算的，不管字体怎么变，一个em始终是一个字体的大小
-->
<div>
huanyigndajia
</div>
</body>
</html>
强制不换行
<!DOCTYPE html>
<html>
<head>
<meta charset="{CHARSET}">
<title></title>
<style type="text/css">
div{
color:red;
text-align: left;
width:130px;
border:1px solid black;
text-indent:1em;/*em和一个字体的大小是一样的*/
font-size:24px;
}
</style>
</head>
<body>
<!--
em是根据字体的大小来计算的，不管字体怎么变，一个em始终是一个字体的大小
-->
<div>
huanyigndajia
</div>
</body>
</html>
英文与数字的换行
<!DOCTYPE html>
<html>
<head>
<meta charset="{CHARSET}">
<title></title>
<style type="text/css">
div{
width: 200px;
border:1px solid red;
color: black;
word-break: normal;
}
</style>
</head>
<body>
<!--
英文与数字如果没有结束的话是不会换行的
word-bread 词内换行
break-word 让单词换行
break-all 所有的都不换行
normal 正常
-->
<div>
11111111111111111111111111111111111111111111111111 sfassssssss
asfffffffffffffweffwefwfwfw 234444444444444444444 fasddddddddddddddddffasdfffffffffffffffffffffffff
sadffasfdfsa
</div>
</body>
</html>
空格的大小
<!DOCTYPE html>
<html>
<head>
<meta charset="{CHARSET}">
<title></title>
<style type="text/css">
div{
width: 200px;
border:1px solid red;
color: black;
word-break: normal;
}
</style>
</head>
<body>
<!--
英文与数字如果没有结束的话是不会换行的
word-bread 词内换行
break-word 让单词换行
break-all 所有的都不换行
normal 正常
-->
<div>
11111111111111111111111111111111111111111111111111 sfassssssss
asfffffffffffffweffwefwfwfw 234444444444444444444 fasddddddddddddddddffasdfffffffffffffffffffffffff
sadffasfdfsa
</div>
</body>
</html>
文字的设置
<!DOCTYPE html>
<html>
<head>
<meta charset="{CHARSET}">
<title></title>
</head>
<body>
<!--
font 文字
font-weight 文字着重
font-size 文字大小（一般情况下都是偶数）
line-height 文字行高
font-family 字体（中文默认宋体）
-->
</body>
</html>