css基础篇 07 精灵图 字体图标 css三角 css用户界面样式 vertical-align 文字溢出 常见布局技巧 css初始化_speak: never; css

09 精灵图 字体图标 css三角 css用户界面样式 vertical-align 文字溢出 常见布局技巧 css初始化

精灵图

意义

为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度，出现了 CSS 精灵技术（也称 CSS Sprites、CSS 雪碧）。

核心原理

将网页中的一些小背景图像整合到一张大图中 ，这样服务器只需要一次请求就可以了。

核心

1. 精灵技术主要针对于背景图片使用。就是把多个小背景图片整合到一张大图片中。
2. 这个大图片也称为 sprites 精灵图 或者 雪碧图
3. 移动背景图片位置， 此时可以使用 background-position 。
4. 移动的距离就是这个目标图片的 x 和 y 坐标。注意网页中的坐标有所不同
5. 因为一般情况下都是往上往左移动，所以数值是负值。
6. 使用精灵图的时候需要精确测量，每个小背景图片的大小和位置。

例子

<link rel="stylesheet" type="text/css" href="./精灵图.css"/>
<span class="sprites" id="B">B</span>
<span class="sprites" id="I">I</span>
<span class="sprites" id="A">A</span>
<span class="sprites" id="N">N</span>
<span class="sprites" id="G">G</span>
1
2
3
4
5
6

精灵图.css

.sprites {
	display: inline-block;
	width: 50px;
	height: 50px;
	background-image: url(./images/精灵图.png);
	
}
#B{
	width: 104px;
	height: 111px;
	background-position:  -120px -10px;
}
#I{
	width: 61px;
	height: 107px;
	background-position:  -325px -140px;
}
#A{
	width: 105px;
	height: 111px;
	background-position:  0px -7px;
}
#N{
	width: 114px;
	height: 114px;
	background-position:  -252px -273px;
}
#G{
	width: 105px;
	height: 110px;
	background-position:  -96px -139px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

总结

1. 精灵图主要针对于小的背景图片使用。
2. 主要借助于背景位置来实现—background-position 。
3. 一般情况下精灵图都是负值。（千万注意网页中的坐标： x轴右边走是正值，左边走是负值， y轴同理。）

字体图标

使用场景

主要用于显示网页中通用、常用的一些小图标。
精灵图是有诸多优点的，但是缺点很明显。
1.图片文件还是比较大的。
2.图片本身放大和缩小会失真。
3.一旦图片制作完毕想要更换非常复杂。
此时，有一种技术的出现很好的解决了以上问题，就是字体图标 iconfont。
字体图标可以为前端工程师提供一种方便高效的图标使用方式，展示的是图标，本质属于字体。

优点

轻量级：一个图标字体要比一系列的图像要小。一旦字体加载了，图标就会马上渲染出来，减少了服务器请求

• 灵活性：本质其实是文字，可以很随意的改变颜色、产生阴影、透明效果、旋转等
• 兼容性：几乎支持所有的浏览器，请放心使用
• 注意： 字体图标不能替代精灵技术，只是对工作中图标部分技术的提升和优化。

语法

这里我从https://icomoon.io/app/#/select中下载了一些字体图标，解压后有一下文件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hHdr9UVi-1611725198124)(D:\前端文件\HBuilderXFile\09 精灵图 字体图标 css三角 css用户界面样式 vertical-align 文字溢出 常见布局技巧 css初始化\images\icomoon解压.png)]

其中将fonts文件复制到需要使用的html所在的同级文件夹中，然后打开style.css将全部样式都复制到需要调用的css中，（或者再链接一个也行）

需要调用时就用以下方式即可，xxx是该字体图标的类名

<span class="xxx"></span>
1

例子

<link rel="stylesheet" type="text/css" href="./字体图标.css"/>
<span class="icon-play2"></span>
<span class="icon-pause"></span>
<span class="icon-stop"></span>
<span class="icon-previous"></span>
<span class="icon-next"></span>
<span class="icon-volume-mute2"></span>
<span class="icon-volume-increase"></span>
<span class="icon-volume-decrease"></span>		
1
2
3
4
5
6
7
8
9

字体图标.css

@font-face {
	font-family: 'icomoon';
    src:  url('fonts/icomoon.eot?op9o8h');
	src:  url('fonts/icomoon.eot?op9o8h#iefix') format('embedded-opentype'),
		url('fonts/icomoon.ttf?op9o8h') format('truetype'),
		url('fonts/icomoon.woff?op9o8h') format('woff'),
		url('fonts/icomoon.svg?op9o8h#icomoon') format('svg');
	font-weight: normal;
	font-style: normal;
	font-display: block;
}

[class^="icon-"], [class*=" icon-"] {
	/* use !important to prevent issues with browser extensions that change fonts */
	font-family: 'icomoon' !important;
	speak: never;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;

	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
.icon-play2:before {
  content: "\ea15";
  /**
   * 可以像字体一般操作他们
   */
  color: #449FDB;
  font-size: 20px;
}
.icon-pause:before {
  content: "\ea16";
}
.icon-stop:before {
  content: "\ea17";
}
.icon-previous:before {
  content: "\ea18";
}
.icon-next:before {
  content: "\ea19";
}
.icon-volume-mute2:before {
  content: "\ea2a";
}
.icon-volume-increase:before {
  content: "\ea2b";
}
.icon-volume-decrease:before {
  content: "\ea2c";
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

补充

字体图标的追加

如果工作中，原来的字体图标不够用了，我们需要添加新的字体图标到原来的字体文件中。
把压缩包里面的 selection.json 从新上传，然后选中自己想要新的图标，从新下载压缩包，并替换原来的文件即可。

总结

1.如果遇到一些结构和样式比较简单的小图标，就用字体图标。

2.如果遇到一些结构和样式复杂一点的小图片，就用精灵图。

css三角

三角形可以用css直接画出来的，不需要用到精灵图或者字体图标

例子

<link rel="stylesheet" type="text/css" href="css三角.css"/>
<div class="triangle left"></div>
<div class="triangle right"></div>
<div class="triangle top"></div>
<div class="triangle bottom"></div>
<div class="triangle example"></div>
1
2
3
4
5
6

css三角.css

.triangle{
	width: 0; 
	height: 0;
	border: 50px solid transparent;
	line-height:0;
	font-size: 0;
}

.left {
	border-left-color: red;
	border-right-width: 0px;
}
.right {
	border-right-color: red;
	border-left-width: 0px;
}
.top {
	border-top-color: red;
	border-bottom-width: 0px;
}
.bottom {
	border-bottom-color: red;
	border-top-width: 0px;
}
.example {
	/*以bottom为基准*/
	border-bottom-width: 60px;/*高*/
	border-left-width:0px;/*高左侧的底长*/
	border-right-width:80px;/*高右侧的底长*/
	border-top-width:0px;/*高+这个等于占的高度*/
	border-bottom-color: red;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

css用户界面样式

含义

所谓的界面样式，就是更改一些用户操作样式，以便提高更好的用户体验。

• 更改用户的鼠标样式
• 表单轮廓
• 防止表单域拖拽

cursor

通过改变cursor的属性改变鼠标放在当前盒子上的样式

例子

<link rel="stylesheet" type="text/css" href="css用户界面样式.css"/>
<div id="cursor">
    <div class="cursor-default">
        默认
    </div>
    <div class="cursor-pointer">
        小手
    </div>
    <div class="cursor-move">
        移动
    </div>
    <div class="cursor-text">
        文本
    </div>
    <div class="cursor-not-allowed">
        禁止
    </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

css用户界面样式.css

.cursor-default {
	cursor: default; 
}
.cursor-pointer {
	cursor: pointer; 
}
.cursor-move {
	cursor: move; 
}
.cursor-text {
	cursor: text; 
}
.cursor-not-allowed {
	cursor: not-allowed; 
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

outline

给input表单添加 outline: 0; 或者 outline: none; 样式之后，就可以去掉默认的蓝色边框

例子

<link rel="stylesheet" type="text/css" href="css用户界面样式.css"/>
<div id="outline">
    <input type="text" value="点击无轮廓线"/>
    <input type="text" value="点击有轮廓线" />
</div>
1
2
3
4
5

css用户界面样式.css

#outline>input:first-child{
	outline:none;
}
1
2
3

resize

给文本域textarea添加 resize:none； 就可以使其不可拖拽

例子

<link rel="stylesheet" type="text/css" href="css用户界面样式.css"/>
<div id="resize">
    <textarea rows="5" cols="50">
        不可拖拽
    </textarea>
    <textarea rows="5" cols="50">
        可拖拽
    </textarea>
</div>
1
2
3
4
5
6
7
8
9

css用户界面样式.css

#resize>textarea:first-child{
	resize:none;
}
1
2
3

vertical-align

使用场景

经常用于设置图片或者表单(行内块元素）和文字垂直对齐。

含义

用于设置一个元素的垂直对齐方式，但是它只针对于行内元素或者行内块元素有效。

例子

<link rel="stylesheet" type="text/css" href="vertical-align%20属性应用.css"/>
<div class="vertical-align-baseline">
    <img src="images/headImage.png" >
    vertical-align 属性应用 baseline
</div>
<br/><br/>
<div class="vertical-align-top">
    <img src="images/headImage.png" >
    vertical-align 属性应用 top
</div>
<br/><br/>
<div class="vertical-align-middle">
    <img src="images/headImage.png" >
    vertical-align 属性应用 middle
</div>
<br/><br/>
<div class="vertical-align-bottom">
    <img src="images/headImage.png" >
    vertical-align 属性应用 bottom
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

vertical-align 属性应用.css

.vertical-align-baseline>img{
	vertical-align:baseline;
}
.vertical-align-top>img{
	vertical-align:top;
}
.vertical-align-middle>img{
	vertical-align:middle;
}
.vertical-align-bottom>img{
	vertical-align:bottom;
}
1
2
3
4
5
6
7
8
9
10
11
12

例图

文字溢出

当文字太多溢出了我们的盒子，很多网站都使用了省略号来完成这项溢出的优化，在前端也有一些手段可以完成省略号来代替溢出文字这项操作

单行省略

例子

<link rel="stylesheet" type="text/css" href="溢出的文字省略号显示.css"/>
<div class="omit-single">
			单行省略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略
</div>
1
2
3
4

溢出的文字省略号显示.css

div{
	width: 100px;
}
.omit-single{
	/*1. 先强制一行内显示文本*/
	white-space: nowrap;  /* （ 默认 normal 自动换行） */
	/*2. 超出的部分隐藏*/
	overflow: hidden;
	/*3. 文字用省略号替代超出的部分*/
	text-overflow: ellipsis;
}
1
2
3
4
5
6
7
8
9
10
11

多行省略

多行省略需要用到webKit内核，所以兼容性不会很高，所以推荐由后台人员来完成这项工作

例子

<link rel="stylesheet" type="text/css" href="溢出的文字省略号显示.css"/>
<div class="omit-multiple">
			多行省略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略略
</div>
1
2
3
4

溢出的文字省略号显示.css

div{
	width: 100px;
}
.omit-multiple{
	/*1. 超出的部分隐藏 */
	overflow: hidden;
	/*2. 文字用省略号替代超出的部分 */
	text-overflow: ellipsis; 
	/*3. 弹性伸缩盒子模型显示 */
	display: -webkit-box;
	/*4. 限制在一个块元素显示的文本的行数 */
	-webkit-line-clamp:2;
	/*5. 设置或检索伸缩盒对象的子元素的排列方式 */
	-webkit-box-orient: vertical;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

常见布局技巧

通过margin负值的使用使相连盒子取消相邻边一条边框

例子

<link rel="stylesheet" type="text/css" href="./常见布局技巧.css"/>
<div class="margin-negative-value">
    <div class="margin-negative-value-li">
        li1
    </div>
    <div class="margin-negative-value-li">
        li2
    </div>
</div>
1
2
3
4
5
6
7
8
9

常见布局技巧.css

.margin-negative-value{
	overflow: hidden;
}
.margin-negative-value-li{
	float: left;
	width: 100px;
	height: 150px;
	/*外边距向一边取负值*/
	margin-right:-1px;
	border:  1px solid gray;
}
.margin-negative-value-li:hover{
	/*如果元素本身没有定位只需要添加相对定位*/
	position: relative;
	border-color: red;
	/*如果元素本身有定位则还增加层级*/
	/* z-index: 1; */
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

通过浮动完成文字浮动

例子

<link rel="stylesheet" type="text/css" href="./常见布局技巧.css"/>
<div class="the-text-around">
    <div class="the-text-around-image">
        <img src="images/headImage.png" >
    </div>
    逼逼赖赖逼逼赖赖
</div>
<div class="the-text-around">
    <img src="images/headImage.png" >
    逼逼赖赖逼逼赖赖
</div>
1
2
3
4
5
6
7
8
9
10
11

常见布局技巧.css

.the-text-around{
	width: 100px;
	height: 50px;
}
.the-text-around>.the-text-around-image{
	float: left;
}
.the-text-around>img{
	float: left;
}
1
2
3
4
5
6
7
8
9
10

通过转化为行内块使盒子水平居中

例子

<link rel="stylesheet" type="text/css" href="./常见布局技巧.css"/>
<div class="inline-block-using">
    <div class="inline-block-using-li">
        li1
    </div>
    <div class="inline-block-using-li">
        li2
    </div>
</div>
1
2
3
4
5
6
7
8
9

常见布局技巧.css

.inline-block-using{
	text-align: center;
	background-color: purple;
}
.inline-block-using-li{
	display: inline-block;
	width: 100px;
	height: 50px;
	border: 1px solid yellow;
	background-color: #449FDB;
}
1
2
3
4
5
6
7
8
9
10
11

css三角实际运用

例子

<link rel="stylesheet" type="text/css" href="./常见布局技巧.css"/>
<div class="triangle">
    <div class="triangle-text">
        ￥1650
    </div>
    <div class="triangle-triangle">

    </div>
    ￥5650
</div>
1
2
3
4
5
6
7
8
9
10

常见布局技巧.css

.triangle{
	height: 70px;
	width: 200px;
	line-height: 60px;
	text-decoration:line-through;
	background-color: #CCCCCC;
}
.triangle-text{
	float: left;
	height: 60px;
	width: 100px;
	text-align: center;
	line-height: 60px;
	background-color: red;
}
.triangle-triangle{
	float: left;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 60px 30px 0px 0px;
	border-color: transparent;
	border-top-color: red;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

例图

css初始化

不同浏览器对有些标签的默认值是不同的，为了消除不同浏览器对HTML文本呈现的差异，照顾浏览器的兼容，我们需要对CSS 初始化

简单理解： CSS初始化是指重设浏览器的样式。 (也称为CSS reset）

每个网页都必须首先进行 CSS初始化。

这里我们以 京东CSS初始化代码为例。

京东CSS初始化代码

/* 把我们所有标签的内外边距清零 */
* {
    margin: 0;
    padding: 0
}
/* em 和 i 斜体的文字不倾斜 */
em,
i {
    font-style: normal
}
/* 去掉li 的小圆点 */
li {
    list-style: none
}

img {
    /* border 0 照顾低版本浏览器 如果 图片外面包含了链接会有边框的问题 */
    border: 0;
    /* 取消图片底侧有空白缝隙的问题 */
    vertical-align: middle
}

button {
    /* 当我们鼠标经过button 按钮的时候，鼠标变成小手 */
    cursor: pointer
}

a {
    color: #666;
    text-decoration: none
}

a:hover {
    color: #c81623
}

button,
input {
    /* "\5B8B\4F53" 就是宋体的意思 这样浏览器兼容性比较好 */
    font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif
}

body {
    /* CSS3 抗锯齿形 让文字显示的更加清晰 */
    -webkit-font-smoothing: antialiased;
    background-color: #fff;
    font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
    color: #666
}

.hide,
.none {
    display: none
}
/* 清除浮动 */
.clearfix:after {
    visibility: hidden;
    clear: both;
    display: block;
    content: ".";
    height: 0
}

.clearfix {
    *zoom: 1
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66

Unicode编码字体

把中文字体的名称用相应的Unicode编码来代替，这样就可以有效的避免浏览器解释CSS代码时候出现乱码的问题。

比如：

黑体 \9ED1\4F53
宋体 \5B8B\4F53
微软雅黑 \5FAE\8F6F\96C5\9ED1

<link rel="stylesheet" type="text/css" href="css初始化.css"/>
<div class="weiruanyahei">
    微软雅黑
</div>
<div class="songti">
    宋体
</div>
<div class="heiti">
    黑体
</div>
1
2
3
4
5
6
7
8
9
10

css初始化.css

.weiruanyahei{
	font-family: "\5FAE\8F6F\96C5\9ED1";/*微软雅黑*/
}
.songti{
	font-family: "\5B8B\4F53";/*宋体*/
}
.heiti{
	font-family: "\9ED1\4F53";/*黑体*/
}
1
2
3
4
5
6
7
8
9