字体
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*
font-face 使用指定的字体(提供给页面使用)
font-family 指定字体的名字
src 字体的路径
注意：版权问题，加载速度问题
*/
@font-face {
font-family: 'myFont';
src: url('/font/xxx.ttf');
}
p {
/*
字体相关的样式：
color 设置字体颜色
font-size 设置字体大小
单位：
em: 相当于当前元素的一个font-size
rem: 相当于根元素的一个font-size
font-family 设置字体格式(字体族)
serif 衬线字体
sans-serif 非衬线字体
monospace 等宽字体
指定字体的类别，浏览器会自动使用该类别下的字体
可以同时指定多个字体，多个字体使用,号隔开，会优先使用第一个，如果没有则往后使用
font-weight 设置字重、字体的加粗
normal 默认值 不加粗
bold 加粗
100-900 九个级别
font-style 设置字体的风格
normal 正常
italic 斜体
字体的简写属性：
font 可以设置字体相关的所有属性
font: (字体风格) (字重) 字体大小/行高, 字体族,
行高可以省略不写，不写则使用默认值
*/
color: red;
font-size: 40px;
font-family: 'Courier New', Courier, monospace;
font-weight: bold;
}
/*
字体图标(iconfont)：
在网页中经常需要使用一些图标，可以通过图片的形式来引入，但是使用不灵活
因此在使用图标时，可以将图标直接设置为字体
然后通过font-face的形式来对字体进行引入，这样就可以通过使用字体的形式使用图标
*/
</style>
</head>
<body>
<p>
Hello BanQ
</p>
</body>
</html>
行高
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1 {
border: 1px solid black;
font-size: 50px;
line-height: 2;
/*
行高(line height):
指的是文字占有的实际高度
可以通过line-height来设置行高
可以指定大小(px em 一个整数)
如果是整数，行高是字体(font-size)指定的倍数
字体框：
就是字体存在的格子，设置font-size实际上就是在设置字体框的高度
行高会在字体框的上下平均分配
因此可以将行高设置成元素一样的高度，使单行文字在一个元素中垂直居中
行高还可以设置文字的行间距
行间距 = 行高 - 字体大小
*/
}
</style>
</head>
<body>
<div class="box1">
Hello BanQ
</div>
</body>
</html>
文本样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1 {
width: 500px;
border: 1px solid black;
text-align: justify;
/*
text-align 文本的水平对齐
left 左侧对齐
right 右侧对齐
center 居中对齐
justify 两端对齐
*/
}
.box2 {
width: 500px;
border: 1px solid black;
font-size: 50px;
}
span {
font-size: 20px;
border: 1px solid red;
vertical-align: auto;
/*
vertical-align 设置元素垂直对齐
baseline 默认值 基线对齐
top 顶部对齐
bottom 底部对齐
middle 居中对齐
*/
}
.box3 {
text-decoration: underline;
/*
text-decoration 设置文本修饰
none 什么都没有
underline 下划线
line-through 删除线
overline 上划线
*/
white-space: nowrap;
text-overflow: ellipsis;
/*
white-space 设置网页如何处理空白
normal 正常显示
nowrap 不换行
pre 保留
配合 overflow: hidden; text-overflow: ellipsis; 使用
*/
}
</style>
</head>
<body>
<div class="box1">
Hello BanQ,Hello BanQ,Hello BanQ,Hello BanQ,Hello BanQ,Hello BanQ,Hello BanQ,Hello BanQ,Hello BanQ,Hello BanQ,Hello BanQ,Hello BanQ,Hello BanQ,Hello BanQ,Hello BanQ
</div>
<div class="box2">
Hello <span>BanQ</span>
</div>
<div class="box3">
Hello BanQ
</div>
</body>
</html>
背景
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1 {
width: 500px;
height: 500px;
/*
background-color 设置背景颜色
*/
background-color: blue;
/*
background-image 设置背景图片
url 图片的路径
可以同时设置背景颜色和背景图片，背景颜色会成为图片的背景色
如果背景的图片小于元素，则背景图片会自动在元素中平铺且将元素铺满
如果背景图片大于元素，则将会部分背景无法完全显示
如果背景图片和元素一样大，则会正常显示
*/
background-image: url('./images/1.png');
/*
background-repeat 设置背景的重复方式
repeat 默认值 背景会沿着x轴 y轴双方向重复
repeat-x 沿着x轴方向重复
repeat-y 沿着y轴方向重复
no-repeat 不重复
*/
background-repeat: no-repeat;
/*
background-position 设置背景图片的位置
通过top left right bottom center来设置
使用方位词必须要同时指定两个值，如果只写一个，第二个则默认是center
通过偏移量来指定位置
水平方向偏移量
垂直方向偏移量
*/
background-position: center center;
}
.box2 {
width: 500px;
height: 500px;
background-color: blue;
background-image: url('./images/1.png');
background-repeat: no-repeat;
/*
background-clip 设置背景的范围
border-box 默认值 背景会出现在边框的下边
padding-box 背景出现在内容区
*/
background-clip: border-box;
border: 1px red double;
padding: 10px;
/*
background-origin 背景图片偏移量计算的原点
padding-box 默认值 background-position从内边距处开始计算
content-box 背景图片的偏移量从内容区处开始计算
border-box 背景图片的偏移量从边框处开始计算
*/
background-origin: 0 0;
/*
background-size 设置背景图片的大小
第一个值表示宽度
第二个值表示高度
如果只写一个 则第二个值默认是auto
cover 图片的比例不变 将元素铺满
contain 图片的比例不变 将图片在元素中完整展示
*/
background-size: auto 100%;
/*
background-attachment 设置背景图片是否跟随元素移动
srcoll 默认值 背景图片会跟随元素移动
fixed 背景会固定在页面中 不会随元素移动
*/
background-attachment: scroll;
/*
background 背景相关的简写属性 所有背景相关的样式都可以通过该样式来设置
background-size必须写在background-position的后边，并且使用/隔开
background-origin background-clip 两个样式 orgin要在clip的前边
*/
background: #bfa url(./images/1.png) center center no-repeat;
}
/*
雪碧图：
我们可以将多个小图片统一保存到一个大图片中
然后通过调整background-position来显示图片
这样图片会同时加载到网页中，就可以有效避免切换图片时出现闪烁的问题
而这个被称为 CSS-sprite 这图片就叫做雪碧图
雪碧图使用步骤：
先确定要使用的图标
测量图标的大小
根据测量的结果创建元素
将雪碧图设置为元素的背景图片
设置偏移量以显示对应的图标
特点：
减少图片的请求次数，加快网页的访问速度，提升用户体验
*/
</style>
</head>
<body>
<div class="box1">
</div>
<div class="box2">
</div>
</body>
</html>
