十一、字体和文本
1.字体(font)
1.1字体相关的样式
1.1.1 font-color
用来设置字体的颜色。也可以是用来设置前景色。
1.1.2 font-size
用来设置字体的大小。
和font-size相关的单位:
(1)em 相当于一个font-size。
(2)rem 相当于根元素的一个font-size
(3)px 像素
可选值:
具体数值 200px 20px
xx-large x-large large
xx-small x-small small
1.1.3font-family
字体族(字体格式),如:宋体,楷体,微软雅黑
font-family:'微软雅黑'
默认字体族为微软雅黑。
可选值:
serif 衬线字体
sans-serif 非衬线字体
monospace 等宽字体 代码常用
cursive 草书字体
fantasy 虚幻字体
指定字体的类别,浏览器会自动使用该类别下的字体。
font-family可以同时指定多个字体,多个字体间使用,隔开
字体生效时优先使用第一个,第一个无法使用则使用第二个,以此类推。
Microsoft YaHei 微软雅黑
Heiti SC 黑体-间
@font-face{
/* 指定字体名字 */
font-family: ;
/* 服务器字体的路径 */
src:url(‘./font/Microsoft YaHei’) format("truetype");
}
font-face 可以将服务器中的字体直接提供给用户使用
<注意问题>:
1.加载速度
2.版权问题
微软雅黑不是开源字体。
font-family使用不会涉及版权问题,font-family只是建议,具体使用看用户的浏览器
@font-face涉及版权问题。
3.字体格式问题
format设置字体初态 很少使用
1.1.4 font - weight
font-weight属性用来指定字体的粗细
可选值:
normal: 默认值 正常字符
bold: 粗体字符
bolder 更粗的字符
lighter 更细的字符
100/200/300······900 9个级别(没太大用处)
400相当于normal 700相当于blod
inherit:规定应该从父元素继承字体的粗细。
1.1.5 font-style
字体的样式,风格
可选值:
normal:默认值,正常的
italic:字体的斜体
oblique: 字体倾斜
1.1.6 font-variant
属性指定是否以 small-caps 字体(小型大写字母)显示文本
可选值:
small-caps 所有小写字母都将转换为大写字母。
但是,转换后的大写字母的字体大小小于文本中原始大写字母的字体大小
font-variant:small-caps;
1.2图标字体(iconfont)font awesome
在网页中经常需要使用一些小型的图标,可以通过图片来引入图标。但是图片大小本身比较大,并且非常的不灵活。
所以在使用图标时,还可以将图标直接设置为字体,然后通过@font-face的形式来对字体进行引入。
这样我们就可以通过使用字体的方式来使用图标了。
1.2.1字体相对图片的优点
(1)字体不会产生失真问题,字体属于矢量图。
(2)字体可以随意改变字体颜色。
(3)字体文件相对图片较小。
1.2.2 font awesome使用步骤
(1)下载
(2)解压
(3)将css和webfonts移动到项目中
css和webfonts两个文件夹必须在同一个目录下
(4)将all.css文件引入到网页中。
引用一:
<link rel="stylesheet" href="./fontawesome/css/all.css">
引用二:
<link rel="stylesheet" href="./fontawesome/css/all.min.css">
两个均可
(5)使用图标字体
直接通过类名来使用图标字体
<i class="fas fa-bell"></i>
1.2.3图标字体的其他使用方式
1.2.3.1通过伪元素来设置图标字体
步骤:
①找到要设置图标的元素 通过before或after选中
②在content中设置字体的编码
③设置字体的样式
fab:
font-family=' ';
fas:
font-family=' '; font-weight: ;
1.2.3.2通过实体的方式来设置图标字体
方式:&#x + 图标的编码
<span><span/>
1.3阿里巴巴矢量图标库(iconfont)
iconfont是国内最大的矢量图标库
使用方法:
(1)在图标库下载图标
(2)将文件导入到项目中(除html文件)
使用方法:
1.4行高(line-height)
行高指的是文字占有的实际高度。
可以通过line-height来设置行高
行高可以直接指定一个大小(px em)
也可以直接为行高设置一个整数
如果是一个整数的话,行高将会是字体的指定倍数。默认行高:1.333333···
行高会在字体框的上下平均分配
可以将行高设置为和高度一样的值,使单行文字在一个元素中垂直居中。
行高经常用来设置文字的行间距。
行间距 = 行高 - 字体的大小
1.5字体框
字体框就是字体存在的格子,设置font-size实际上就是在设置字体框的高度。
1.6字体的简写属性
可以设置字体相关的所有属性
语法:
font:字体大小/行高 字体族
字体大小和字体族必须写,并且字体大小和字体族必须在倒数第二个和倒数第一个
行高可以省略不写,如果不写就会使用默认值。
其他的属性放在前面,而且没有顺序要求。
font:50px/2 'Time New Roman';
2.文本
2.1文本的水平对齐(text-align)
text-align属性用于设置文本的水平对齐
可选值:
left: 左侧对齐
right: 右对齐
center 居中对齐
justify 两端对齐
2.2文本的垂直对齐(vertical-align)
vertical-align属性用于设置元素的垂直对齐的方式。
可选值:
baseline:基线对齐
top: 顶部对齐
middle: 居中对齐
bottom: 底部对齐
图片默认的对齐方式为基线对齐
2.3文本修饰(text-decoration)
text-decoration属性用来设置文本修饰
可选值:
none:默认值 什么都没有
underline:下划线
line-through:删除线
overline:上划线
在进行文本修饰的时候也可以设置下划线的颜色,样式;(IE浏览器不行)
text-decoration:underline red dotted;
2.4空白区域
white-space属性用于设置网页如何设置空白。
可选值:
normal:正常
nowrap:不换行
pre:保留空白
文本末尾省略产生省略号:
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
十二、背景
1.背景颜色(background-color)
设置背景颜色 background-color
background-color:red;
2.背景图片(background-image)
设置背景图片 background-image
方式1:
background-image:url(./img/1.png)
方式2:
background-image:url("./img/1.png")
可以同时设置背景图片和背景颜色,这样背景颜色会成为图片的背景色。
如果背景图片小于元素,则背景图片会自动在元素中平铺,将元素铺满
如果背景图片大于元素,将会有一部分背景图片无法完全显示。
如果背景图片和元素大小相同,则会正常显示。
3.背景图片重复方式(background-repeat)
background-repeat:
用来设置背景的重复方式
可选值:
repeat:默认值 背景会延着x轴和y轴双方向重复。
repeat-x:沿着x轴方向重复
repeat-y:沿着y轴方向重复
no-repeat:背景图片不重复
4.背景图片的位置(background-position)
background-position用来设置背景图片的位置
通过 top left bottom right center几个表示方位的词来设置背景图片的位置
设置方式:
①使用方位词的时候必须要同时指定两个值,如果只写一个,则第二个值默认就是center;
background-position:top left;
②通过偏移量来指定背景图片的位置
background-position:100px 100px;
5.背景的范围(background-clip)
background-clip用于设置边框的范围
可选值:
border-box:默认值 背景会出现在边框的下边 背景会出现在可见框的所有区域内。
padding-box: 背景不会出现在边框,只出现在内容区和内边距。
content-box: 背景只会出现在内容区。
6.背景图片的偏移量计算的原点(background-origin)
background-origin用于设置背景图片的偏移量计算的原点。
background-origin:padding-box;
可选值:
padding-box:默认值 background-position从内边距开始计算
content-box: 背景图片的偏移量从内容区处计算(内容区的左上角是原点)
border-box: 背景图片的偏移量从边框处开始计算,原点为边框的左上角。
7.背景图片的尺寸(background-size)
background-size用于设置背景图片的大小
background-size:100px 100px;
第一个值用于表示宽度
第二个值用于表示高度
background-size:200px auto;
如果只写一个值,第二个值默认为auto。
background-size:cover;
cover: 图片的比例不变,将元素铺满。
background-size:contain;
contain:图片比例不变,将图片在元素中完整显示。
8. background-attachment
background-attachment用于设置背景图片是否跟随元素移动
可选值:
scroll:默认值: 背景图片会跟随元素移动
fixed: 背景图片会固定在元素上,不会随着元素移动
9.简写属性
该样式没有顺序要求,也没有哪个属性是必须写的
background:color url position(center center)/size repeat ;
<注意>
background-size必须写在background-position后边。用/隔开
background-origin必须写在background-clip前面
十三、不透明度(opacity)
1.简介
opacity 属性指定了一个元素的不透明度。换言之,opacity 属性指定了一个元素后面的背景的被覆盖程度。
使用 opacity 属性,当属性值不为 1 时,会把元素放置在一个新的层叠上下文中。
2.属性值:
opacity的取值范围为01,当取值为0的时候,为完全透明,取值为1的时候为完全不透明。当为半透明的时候为01之间的值。
十四、精灵图【雪碧图】
1.简介
图片属于网页中的外部资源,外部资源都需要浏览器单独发送请求加载。
浏览器加载外部资源的时候是需要按需加载的,用则加载,不用则不加载。
当多个想突破统一保存到一个大图片中,然后通过调整background-position来显示相应的图片。
这样所有的小图片都会加载到网页中,就可以有效地避免出现闪烁的问题。
这个技术在网页中应用十分广泛,被称为CSS-Sprite,这种图我们称为精灵图,又叫雪碧图。
2.使用步骤
①先确定要使用的图标
②测量图标的大小
width:;
height:;
③根据测量结果创建一个元素
④将雪碧图设置为元素的背景图片
background-image:url('');
⑤设置一个偏移量,以显示正确的图片
background-position:width height; //初始点(0,0)
3.特点
一次性将多个图片加载进页面,降低请求的次数,加快访问速度,提升用户的体验。
十五、渐变
通过渐变可以设置一些复杂的背景颜色,可以从一个颜色向其他颜色过渡的效果
渐变是图片,需要通过background-image来进行设置。
1.线性渐变(linear-gradient)
颜色沿着一条直线发生变化
background-image:linear-gradient(red,yellow); //从上往下变
background-image:linear-gradient( to right,red,yellow); //从左往右变
渐变的方向:
to left
to right
to top
to bottom
deg //表示度数
turn //表示圈
渐变可以同时指定多个颜色,多个颜色默认情况下平均分布
也可以手动指定渐变的分布情况
background-image:linear-gradient(red 50px,yellow);
设置的像素值为 从多少像素开始
background-image:repeating-linear-gradient()
repeating-linear-gradient() 可以平铺的线性渐变。
<注意>
当我们设置repeating-linear-gradient后再设置no-repeat无效
2.径向渐变(radial-gradient)
径向渐变(放射性效果)从中间向四周渐变。
默认情况下,径向渐变的形状是根据元素的形状来计算的
也可以手动指定径向渐变的大小
background-image:radial-gradient(100px 100px ,red yellow);
也可以指定渐变的位置:
background-image:radial-gradient(100px 100px at 100px 100px,yellow,red);
background-image:radial-gradient(at 100px 100px,yellow,red);
<语法>
radial-gradient(大小 at 位置 , 颜色 位置 ,颜色 位置);
大小:
circle:正圆
ellipse:椭圆
closest-side: 渐变到最近的边
closest-corner: 渐变到最近的角
farther-side: 渐变到最远的边
farther-corner: 渐变到最远的角
位置:
top
right
left
bottom
center
十六、表格的样式
1.border-spacing
用于指定边框之间的距离
border-spacing: 0px ;
2.border-collapse
用于设置边框的合并
border-collapse:collapse;
3.样式问题
如果表格中没有使用tbody,而是直接使用tr,那么浏览器会自动创建一个tbody,并且将所有的tr放入到tbody中,tr不是table的子元素,tr是tbody的子元素。
4. vertical-align
默认情况下, 元素在td中是垂直居中的,可以通过vertical-align来修改
可选值:
top
bottom
center(默认)
5. text-align
默认情况下,元素靠左对齐,通过vertical-align来设置元素在td中的位置
可选值:
left(默认)
right
center