1、字体样式
1）普遍样式
-
字体
font-family : “微软雅黑” , “Microsoft YaHei” , “宋体” , serif ; -
字体大小
font-size : 12px ;
浏览器默认字体为16px -
字体粗细
font-weight : bold ;
normal
bolder
100~900 -
开启斜体
font-style : normal ;
italic -
行高
line-height : 2em ;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字体</title>
<style>
div.one{
font-family: "黑体1号","Microsoft YaHei";
font-size: 12px;
font-weight: bold;
font-style: normal;
line-height: 3em;
}
div.two{
font-family: "宋体";
}
div.three{
font-family: "tahoma";
}
div.four{
line-height: 2em;
}
</style>
</head>
<body>
<div class="one">
十六年前，天下五分，姑苏蓝氏，云梦江氏，清河聂氏，岐山温氏，兰陵金氏共治天下。温氏一家独大，其余四家均受其苦。众家青年中，江氏故人之子魏无羡性格开朗，和以雅正闻名的姑苏蓝氏弟子蓝忘机相识并引为知己。一次偶然的机会，二人发现了蓝氏一直以来守护的秘密，二人继承遗志，为苍生消除隐患。
</div>
<div class="two">
十六年后，消失已久的魏无羡在莫家庄出现，偶遇故人蓝忘机。莫家庄一桩桩诡异的凶案显得扑朔迷离。随着真相一步步揭开，身处幕后的金光瑶渐渐难以隐藏。最后金光瑶身死，蓝忘机承担起了匡扶天下的使命，而魏无羡不忘初心，最终潇洒世间。
</div>
<div class="three">
十六年后，消失已久的魏无羡在莫家庄出现，偶遇故人蓝忘机。莫家庄一桩桩诡异的凶案显得扑朔迷离。随着真相一步步揭开，身处幕后的金光瑶渐渐难以隐藏。最后金光瑶身死，蓝忘机承担起了匡扶天下的使命，而魏无羡不忘初心，最终潇洒世间。
</div>
<div class="four">
十六年后，消失已久的魏无羡在莫家庄出现，偶遇故人蓝忘机。莫家庄一桩桩诡异的凶案显得扑朔迷离。随着真相一步步揭开，身处幕后的金光瑶渐渐难以隐藏。最后金光瑶身死，蓝忘机承担起了匡扶天下的使命，而魏无羡不忘初心，最终潇洒世间。
</div>
</body>
</html>
- 速写
font : style weight size / line-height family;
例如：font : italic bold 12px/2em ‘Microsoft YaHei’,serif ;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字体</title>
<style>
html{
font: normal normal 12px/1.4em 'Microsoft YaHei','serif';
}
</style>
</head>
<body>
<div class="one">
十六年前，天下五分，姑苏蓝氏，云梦江氏，清河聂氏，岐山温氏，兰陵金氏共治天下。温氏一家独大，其余四家均受其苦。众家青年中，江氏故人之子魏无羡性格开朗，和以雅正闻名的姑苏蓝氏弟子蓝忘机相识并引为知己。一次偶然的机会，二人发现了蓝氏一直以来守护的秘密，二人继承遗志，为苍生消除隐患。
</div>
</body>
</html>
2）网络字体
主要用于字体图标库（iconfont / fontawesome）
使用步骤：
- 在 iconfont 网站中选择图标，加入项目，产生代码
- 将产生的代码在 html 中通过 link 引用 http://at.alicdn.com/t/font_1328534_f3dyyeuoew.css
- 应用 css 中定义好的类，来使用对应的图标
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>网络字体</title>
<link rel="stylesheet" href="http://at.alicdn.com/t/font_1329472_q5chxupwewg.css">
<style>
.iconfont{
font-size: 100px;
color: teal;
}
</style>
</head>
<body>
<i class="iconfont icon-heart"></i>
<span class="iconfont icon-fire"></span>
<img src="./图片/food-avocado.png" alt="">
<img src="./图片/food-popsicle.png" alt="">
<img src="./图片/food-strawberry.png" alt="">
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字体图标库</title>
<link rel="stylesheet" href="./font/iconfont.css">
</head>
<body>
<i class="iconfont icon-fire"></i>
</body>
</html>
2、文本样式
-
字体颜色
color : #333 ; -
文本水平居中
text-align : center ; -
下划线
text-decoration-line : underline ;
line-through
overline
none -
直线
text-desolid : tted ;
docoration-style
double
dashed
wavy -
text-decoration-color 颜色
-
text-decoration : none ; 字体装饰
-
text-indent : 2em ; 文本缩进
-
text-shadow : 12px 2px 3px #ccc; 阴影
3、列表样式
-
列表类型
list-style-type : circle
square -
列表图片
list-style-image : url(’’) -
列表位置
list-style-position : outside
inside -
list-style : none;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表</title>
<link rel="stylesheet" href="http://at.alicdn.com/t/font_1329472_q5chxupwewg.css">
<style>
ul{
/* 正方形列表样式*/
list-style-type: square;
/* list-style-image: url('./图片/food-avocado.png'); */
/*list-style-position: outside;*/
/*list-style: none;*/
font-size: 12px;
line-height: 2em;
color: pink;
}
ul .iconfont{
color: lightblue;
}
</style>
</head>
<body>
<ul>
<li>
<i class="iconfont icon-fire"></i>JavaEE
</li>
<li>
<i class="iconfont icon-heart"></i>WebUI
</li>
<li>
<i class="iconfont icon-sound"></i>IOS
</li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表</title>
<link rel="stylesheet" href="http://at.alicdn.com/t/font_1329472_q5chxupwewg.css">
<style>
ul{
/*list-style-type: square;*/
/*图片列表样式*/
list-style-image: url('./图片/food-avocado.png');
list-style-position: outside;
/*list-style: none;*/
font-size: 12px;
line-height: 2em;
color: pink;
}
ul .iconfont{
color: lightblue;
}
</style>
</head>
<body>
<ul>
<li>
<i class="iconfont icon-fire"></i>JavaEE
</li>
<li>
<i class="iconfont icon-heart"></i>WebUI
</li>
<li>
<i class="iconfont icon-sound"></i>IOS
</li>
</ul>
</body>
</html>
4、盒子样式
width
height
margin-top
margin-right
margin-bottom
margin-left
margin
margin:10px; 上右下左
margin:0 10px; 上下为0，左右10px
margin:0 5px 10px; 上0，左右5px，下10px
margin:0 5px 10px 15px; 上右下左
border-top-style 边框线类型
border-top-width 边框宽度
border-top-color 边框线颜色
border-top
border-right-style 边框线类型
border-right-width 边框宽度
border-right-color 边框线颜色
border-right
border-bottom-style 边框线类型
border-bottom-width 边框宽度
border-bottom-color 边框线颜色
border-bottom
border-left-style 边框线类型
border-left-width 边框宽度
border-left-color 边框线颜色
border-left
border-color
border-style
border-width
border:1px solid #ededed; 【*】
padding-top
padding-right
padding-bottom
padding-left
padding
box-shadow: 5px 5px 10px #ccc;
box-shadow:inset 0 0 3px lightblue;
border-radius 圆角半径
background-origin 背景铺设的起点
border-box 边框下
padding-box 内边距下
content-box 内容下
background-image 背景图片
url
background-repeat 背景重复方式
repeat-x
repeat-y
no-repeat
background-color 背景颜色
background-position 背景位置
center
top left
10px 20px
background-clip 背景裁切方式
border-box 边框下
padding-box 内边距下
content-box 内容下
background 速写
background:url('') no-repeat center;
background-size:cover;
=>
background:center/cover padding-box url('') no-repeat ;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒子模型</title>
<style>
.one{
box-sizing: content-box; /*内容盒子*/
width: 100px;
height: 100px;
margin: 10px;
border: 10px dotted lightblue;
padding: 10px;
background-color: pink;
}
.two{
box-sizing: border-box; /*边框盒子*/
width: 100px;
height: 100px;
margin: 10px;
border: 10px dotted lightblue;
padding: 10px;
background-color: pink;
}
.three{
width: 100px;
height: 100px;
border: 1px solid lightblue;
border-radius: 50%;
/*box-shadow: 0 0 5px lightblue;*/ /*发光效果*/
}
.three:hover{
box-shadow: inset 0 0 5px lightblue;
}
</style>
</head>
<body>
<div class="one">one</div>
<div class="two">two</div>
<div class="three">three</div>
</body>
</html>
来源：https://blog.csdn.net/qq_38830589/article/details/99670900