<!DOCTYPE html>
<html lang="en">
<STYLE>
.content {
/*<!--字体样式-->
<!--css使用font-family来定义字体类型 使用font属性也可以定义字体类型-->*/
font-family: name;
/*name 表示字体名称，多个字体将按照优先序列排列，以逗号隔开，如果字体包含空格，当以引号括起来*/
/*font是一个符合实行 属性之间以空格隔开，font属性至少应设置字体的大小和类型，且必须放在后面，否则无效，前面
可以自由定义字体的要是，粗细，大小写和行高
css提供了5中通用的字体
serif 衬线字体 san-serif 无衬线字体 cursive 草体表现为斜体 fantasy 奇异字体 monospace等宽字体
*/
/*定义字体的大小 font-size
font-size:xx-small,x-small small medium large x-large xx-large larger smaller length
最小 较小 小 正常 大 较大 最大
smaller和larger这两个是根据父对象中字体的尺寸进行相对增大或者缩小处理 使用成比例的em进行计算
length 可以是百分比浮点 不可以为负数 百分比的取值是基于父对象中字体的尺寸来计算的 与em相同 这两个可以理解为相对单位
px这种可以理解为绝对单位
em如果父级元素 的字体大小是12px font-size：2em 表示了24px
浏览器默认的字体像素是16像素 最好不要嵌套的用em表示字体大小 这样会算出来很多位数
*/
/*字体颜色字体的颜色 color
比如color：red 这是一中些发
1.但是在c3中有rgba设置透明的颜色 color：rgba（250,0,0,0.5）
2.还有HSL颜色表示：这是使用色相 color：hsl（0,100%，100%）
3.hsla 在hsl的基础上增加了通道 就是透明度
*/
/*字体的粗细*
font-weight 这个比较特殊，默认的值是normal 相当于取值400 bold这个是粗体 相当于700或者用<b>
bolder（较粗）lighter（较细） 也可以用100,200,300,400表示字体粗细
*/
/*定义斜体字体 font-style
font-style:normal | italic | oblique
其中normal表示正常的默认值 italic表示斜体 oblique表示倾斜的字体
*/
/*定义下划线
text-decoration:normal | underline | blink | overline | line-through
正常 下划线 闪烁效果 上划线 贯穿线
下面测试下blink
*/
/*定义字体的大小写
font-variant :normal | samll-caps
small-caps 表示小型的大写字母字体
text-transform: none | capitalize | uppercase | lowercase
capitalize 表示将每个单词的第一个字母转换成大写
*/
/*文本 text-align
1.left 默认值
2.right 右边对其
3.center 表示居中对其
4.justify 表示两端对齐
*/
/*行高 line-height
line-height : normal | length
nomal一般为1.2em lenth表示百分比，浮点 可以为负值
当设置为一个数值的时候，浏览器会默认转换为em或者百分比
行高默认从父级元素继承
*/
/*定义缩进 text-indent:length
length 表示百分比
text-indent：2em 表示缩进2个字据 可以为负值
*/
/*定义溢出文本 text-overflow
1. clip 不显示省略标记{....}
2.ellipsis 显示省略标记
3.ellipsis-word 当对象溢出时显示省略标记
*/
/*文本换行方式 需要多加练习
常见三种
1.word-wrap 可以控制换行 normal 为连续文本换行 break-word 表示内容将在边界内换行
2.word-break 当却只是break-all 允许非亚洲语言文本的任意字符断开 keep-all不允许断开
3.white-space 格式化作用 取值是nowarp 表示强制在同一行显示所有文本 pre为预定义显示
*/
/*添加动态内容content 属于生成或者替换模块
content : normal string attr() url(这里面不需要引号) counter()设计递增函数 none */
/*恢复默认样式 initial 他的作用是让各种属性使用默认值*/
/*允许自定义类型@font-face 可以通过服务器加载字体文件，是浏览器显示客户端没有的字体
font-size font-variant font-style font-weight
src 设置自定义字体的相对或者绝对路径
*/
/*引入外部的字体*/
}
@font-face {
font-family: Arial;
/*兼容ie*/
src: url("http://randsco/fonts/lexograh.eot");
/*兼容非id*/
src:local("lexographer"),url("http://randsco/fonts/lexograh.eot") format("truetype");
}
h1{
/*引入字体文件*/
font-family: lexograph,Verdana,sans-serif;
}
</STYLE>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="content">字体样式</div>
<div style="font-family: Serif; font-size: x-small ;font-style: normal;text-decoration: blink">你好：我是serif字体</div>
<div style="font-family: sans-serif;font-style: italic;font-variant: small-caps">你好：我是sans-serif字体</div>
<div style="font-family:cursive;font-style: oblique">你好：我是cursive字体</div>
<div style="font-family: fantasy">你好：我是fantasy字体</div>
<div style="font-family: Monospace">你好：我是Monospace字体</div>
<div style="font-style: oblique">nihao</div>
<!--text-align-->
<p align="right">传统的居中方式</p>
<p style="text-align: center">传统的居中方式</p>
<p style="text-align: justify;text-justify: distribute-all-lines">传统的居中方式传统的居中方式传统的居中方式</p>
<p style="line-height: 1em;display: block ;background: #555555">你们好</p>
<p style="line-height: 5em;display: block ;background: #555555">你们好</p>
<p style="line-height: -50em;display: block ;background: #555555">你们好</p>
<!--text-overflow-->
<div class="text" style="width: 200px; text-overflow: ellipsis;overflow: hidden;white-space: nowrap">用来测试text-overflow这个属性的用来测试text-overflow
这个属性的用来测试text-overflow这个属性的用来测试text-overflow这个属性的
</div>
<div style="content: url(image/00-go.png)">
</div>
</body>
</html>
