字体样式
字号
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box{font-size:14px;}
.box h1{font-size:100%;}
.box p{font-size:100%;}
</style>
</head>
<body>
<!--
font-size 字号
chrome 最小字号12
默认字号 16px
继承性(元素向后代元素传递属性的机制)
px/百分比(相对于父元素的字号)
/ em (相对单位,相对于字号,计算font-size相对于父元素的字号)
-->
<div class="box">
<h1>标题</h1>
直辖市: 北京 | 上海 | 天津 | 重庆
<p>这是一个P<span>元素</span></p>
直辖市: <span>北京</span> | 上海 | 天津 | 重庆
直辖市: 北京 | 上海 | 天津 | 重庆</div>
</body>
</html>
字体系列
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box{font-family: "幼圆","微软雅黑";}
</style>
</head>
<body>
<!--
font-family 字体,字体系列
宋体 simsun IE默认
微软雅黑 Microsoft YaHei chrome,firefox(默认)
字体名称,是汉字,带有空格、特殊字符 加 引号包含
多个字体逗号隔开(后备机制)
-->
<div class="box">
直辖市: 北京 | 上海 | 天津 | 重庆
<p>这是一个P<span>元素</span></p>
直辖市: <span>北京</span> | 上海 | 天津 | 重庆
直辖市: 北京 | 上海 | 天津 | 重庆</div>
</body>
</html>
字体加粗
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box strong{font-weight: normal;}
.box span{font-weight: bold;}
</style>
</head>
<body>
<!--
font-weight: 是否加粗
normal正常(不加粗)
bold 加粗
-->
<div class="box">
<strong>直辖市</strong>
: 北京 | 上海 | 天津 | 重庆
<p>这是一个P<span>元素</span></p>
直辖市: <span>北京</span> | 上海 | 天津 | 重庆
直辖市: 北京 | 上海 | 天津 | 重庆</div>
</body>
</html>
字体风格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box em,.box i{font-style: normal;}
.box span{font-style: italic;}
</style>
</head>
<body>
<!--
font-style:字体风格( 是否以斜体显示)
normal正常(不倾斜)
italic (倾斜)
-->
<div class="box">
<em>直辖市</em>
: 北京 <i>|</i> 上海 | 天津 | 重庆
<p>这是一个P<span>元素</span></p>
直辖市: <span>北京</span> | 上海 | 天津 | 重庆
直辖市: 北京 | 上海 | 天津 | 重庆</div>
</body>
</html>
文本样式
行高
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box{background:red;font-size: 20px; line-height:2;}
</style>
</head>
<body>
<!--
line-height:行高
概念:
两行文本【基线】之间距离
小写x的下边缘
特性:
实现单行文本垂直居中 占位
测量:
文字高+行间距
px / 数值(字号的倍数)
-->
<div class="box">直辖市直<br/>辖市直辖市直辖市</div>
</body>
</html>
文本装饰
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box{ letter-spacing: 20px;}
.box2{ word-spacing: 20px;}
</style>
</head>
<body>
<!--
text-decoration: 文本装饰
none 无
underline 下划线
line-through 中划线
overline 上划线
没有继承性
text-align: 内容水平方向的对齐方式
left 左对齐
center居中
right 右
justify 两端对齐
text-indent:首行缩进
em相对单位
允许负值
color: 文字颜色
颜色表示方法:
red 颜色名称关键字
#ff0000 16进制表示法
#RRGGBB
red 00-ff
green
blue
#000000 黑色
#ff0000 红色
#00ff00 绿色
#0000ff 蓝色
#ffffff 白色
简写:
#000000 #000
#ff3366 #f36
rgb(r,g,b)
取值 0-255
rgb(0,0,0) 黑色
rgb(0,255,0) 绿色
rgb(0,0,255) 蓝色
letter-spacing:字符间距
word-spacing:词间距
hello world
以【空格】为解析依据
-->
<p class="box">abc123直辖市直直辖市直直辖市直直辖市直直直辖市直直辖市直直辖市直直辖市直直辖市直直辖市直直辖市直直辖市直直辖市直直辖市直直辖市直直辖市直直辖市直直辖市直直辖市直直辖市直直辖市直直辖市直直辖市直直辖市直直辖市直直辖市直直辖市直直辖市直直辖市直直辖市直直辖市直直辖市直直辖市直直辖市直直辖市直直辖市直直辖市直直辖市直直辖市直辖市直直辖市直直辖市直</p>
<p class="box2">hello world 直辖 市直直辖市直直辖市直直辖市直直直辖市直直辖市直直辖市直直辖市直直辖市直直辖市直直辖市直直辖市直直辖市直直辖市直直辖市直直辖市直直辖市直直辖市直直辖市直直辖市直直辖市直直辖市直直辖市直直辖市直直辖市直直辖市直直辖市直直辖市直直辖市直直辖市直直辖市直直辖市直直辖市直直辖市直直辖市直直辖市直直辖市直直辖市直直辖市直辖市直直辖市直直辖市直</p>
</body>
</html>