笔记基于 尚硅谷
目录
目录
1.字体
字体相关的样式
1.1color
用来设置字体颜色的
1.2font-size
字体的大小,和font相关的单位
em
相当于当前元素的一个font-size
rem
相当于根元素的一个font-size
1.3font-family
serif 衬线字体
sans-serif 非衬线字体
monospace 等宽字体
我们经常使用的一些字体,如微软雅黑、黑体、楷体、宋体、Consolas等,才是具体的某种字体
也就是说,font-family 指定字体的类别,浏览器会自动使用该类别下的字体
font-family可以同时指定多个字体,多个字体间使用,隔开
字体生效时优先使用第一个,第一个无法使用则使用第二个,以此类推
1.4@font-face
我们除了可以使用系统自带的字体样式外,还可以在服务器端自定义字体位置
@font-face可以将服务器中的字体直接提供给用户去使用
示例
@font-face {
/* 指定字体名字 */
font-family: 'jxust';
/* 服务器中字体路径 */
src: url( ),
/* 指定字体格式,一般不写 */
format('truetype');
}
p {
font-size: 30px;
color: salmon;
font-family: jxust;
}
问题
- 加载速度:受网络速度影响,可能会出现字体闪烁一下变成最终的字体
- 版权:有些字体是商用收费的,需要注意使用
- 字体格式:字体格式也有很多种(woff、otf、ttf),未必兼容,可能需要指定多个
2 图标字体
简介
在网页中经常使用到一些图标可以通过图片引入图标但是图片本身比较大,但是非常不灵活
所以还可以将图标直接设定字体,然后通过fontface引入
这样就可以通过使用字体图标的形式来使用图标
2.1fontawsome
使用规范:
官网下载
解压
将css和webfonts移到目录
将all.css引入网页
使用图标字体
直接通过类名来使用图标字体
class="fas fa-bell"
class="fab fa-accessible-icon"
使用示例
<!1 伪类元素设置>
li::before{
content: "\f1b0"; 在content中设置字体的编码
font-family: 'Font Awesome 5 Free';
font-family: 'Font Awesome 5 brands';
font-weight: 700px; /*fab需要单独设置*/
color: red;
}
<! 2 通过实体设置 &#x图标编码;>
<span class="fas"></span>
<! 3 >
<i class="fas fa-cat"></i>
其中fas/fab是免费的,其他是收费的
2.2iconfont
iconfont是阿里的一个图标字体库,海量图标库,图标字体非常丰富
但是版权有点模横两可,如果需要商用,最好联系作者
不过一般情况下,公司企业都会有自己的UI设计团队,会自己去进行设计
这里使用方式大同小异,不过
iconfont需要添加购物车后再添加至项目然后下载,下载包中有demo.html,详细介绍了使用方式
iconfont也提供了一种在线方式,直接在我的项目中选择在线链接可以复制出一份@font-face的css代码
- iconfont需要添加购物车后再添加至项目然后下载,下载包中有demo.html,详细介绍了使用方式
- iconfont也提供了一种在线方式,直接在我的项目中选择在线链接可以复制出一份@font-face的css代码
/*link引入*/
<!-- <link rel="stylesheet" href="/css/iconfont.css"> -->
<style>
<!-- 1、通过字符实体设置 -->
i.iconfont {
font-size: 100px;
}
<!-- 2、通过伪元素设置 -->
p::before {
content: '\e811';
font-family: 'iconfont';
font-size: 50px;
}
/*通过在线连接:这里link和@font-face选择一个就可以 */
@font-face {
font-family: 'iconfont';
/* Project id 2580407 */
src: url('//at.alicdn.com/t/font_2580407_c0kpuhebb7r.woff2?t=1622373966454')
format('woff2'),
url('//at.alicdn.com/t/font_2580407_c0kpuhebb7r.woff?t=1622373966454')
format('woff'),
url('//at.alicdn.com/t/font_2580407_c0kpuhebb7r.ttf?t=1622373966454')
format('truetype');
}
</style>
<body>
<i class="iconfont"></i>
<i class="iconfont"></i>
<i class="iconfont"></i>
<i class="iconfont"></i>
<body>
3 行高
3.1 line height
文字占有的实际高度,可以通过line-height来设置行高
可以直接指定一个大小 px/em
也可以直接为行高设置一个整数(字体大小的倍数)
3.2字体框
字体框就是字体存在的格子,设置font-size
实际上就是在设置字体框的高度
行高会在字体框的上下平均分配
3.3 字体的简写属性
font 可以设置字体相关的所有属性:
font: font-style font-variant font-weight font-size/line-height font-family
其中某些值可以不写,会用默认值
font-weight: 字重
normal 不加粗
bold 加测
100-900 表示9个级别(没什么用)
font-style :字体风格
normal 正常的
italic 斜体
3.4文本样式
text-align 文本水平对齐
- left默认值
- right 右对齐
- center 居中对齐
- justify 两端对齐
vertical-align 垂直 对齐
- baseline 基线对齐 默认
- top 顶部对齐,父子顶部对齐
- bottom 底部对齐
- middle 居中对齐 一般不用
- 指定数值调整位置
text-decoration 设置文本修饰
- none 默认值 什么也没有
- underline 下划线
- overline 上划线
- linethrough 删除线
3.5图片的垂直对齐问题
默认情况下,图片底部有一定缝隙,我们可以稍作修改,给img元素添加vertical-align属性值
<style>
div {
border: 2px solid red;
}
img {
width: 300px;
height: 300px;
}
</style>
<div>
<img src="img/1.webp" alt="">
</div>
只要不是基线对齐就能消除底部缝隙
img {
vertical-align: top;
width: 300px;
height: 300px;
}
为什么会出现缝隙呢?
图片属于替换元素,特点与文本一致,也有自己的基线,默认也是基线对齐。而基线位置不在最底部,所以会出现缝隙
如果设置背景图片就没有这种问题
3.6 其他文本样式
white-space
设置网页如何处理空白
可选值:
- normal 正常
- nowrap 不换行
- pre保留空白
浏览器一般只能识别一个空格,除非使用实体
使用white-space:pre 则能让浏览器识别文本中的多个空白字符和换行符
<style>
p {
white-space: pre;
}
</style>
</head>
<body>
<p> fsrggwegw
vbsfbsfbs
wegwrgwr
</p>
</body>
4.背景
4.1background-color
设置背景颜色
4.2background-image
设置背景图片
可以同时设置背景图片的颜色,这样背景颜色将会成为图片的背景
如果背景图片小于元素,则背景图片会在元素中平铺将元素铺满
如果背景图片大于元素 将会有一部分图片无法显示
如果两者一样大则会正常显示
4.3background-repeat
- repeat 默认值,背景会沿着xy轴双方向重复
- repeat-x 沿着x轴方向重复
- repeat-y 沿着y轴方向重复
- no-repeat 不重复
4.4background-position
用来这只背景图片的位置
通过left…设置图片的位置 例如background-position: left center,使用方位词的时要写两个,如果写一个的话,默认第二个是center
通过偏移量指定图片的位置 水平和垂直
4.5background-clip
- border-box 默认值 背景会出现边框下面
- padding-box 背景不会出现在边框只出现在内容区和内边距
- content-box 背景只出现在内容区
4.6background-origin
背景图片偏移量计算原点
- padding-box 背景图片位置(background-position)从内边距开始计算
- content-box 背景图片位置从内容区开始计算
- border-box 背景图片位置从边框开始计算
4.7background-size
设置背景图片的大小
第一个值表示宽度
第二个值表示高度
如果指定一个值,另一个值就是auto,等比例缩放
cover 比例不变,将元素铺满
content 比例不变 图片完整显示
4.8background-attachment
背景图片是否跟随元素滚动
- scroll 背景图片跟随元素移动
- fixed 背景图片会固定在页面中
4.8简写
background 所有上述相关属性都可以设置 没顺序
但是origin在clip前面,background-size和background-positiom顺序为size/position
没有size不能写position