1、字体样式
1）普遍样式
示例如下：
<!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、文本样式
示例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本</title>
<style>
a {
text-decoration-line: overline;
text-decoration-style: dotted;
text-decoration-color: red;
text-decoration: line-through double pink;
}
p {
text-indent: 2em;
text-shadow: 2px 2px 1px rgba(0,0,0,0.7)
}
</style>
</head>
<body>
<a href="http://www.baidu.com">百度一下</a>
<p>百度脑图,便捷的脑图编辑工具 - 控制创意,如此简单。让您在线上直接创建、保存并分享你的思路。免安装 云存储 易分享 体验舒适 功能丰富
</p>
</body>
</html>
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>
907
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
