CSS简介:
你需要具备的知识
HTML / XHTML
什么是CSS?
CSS 指层叠样式表 (Cascading Style Sheets)
样式定义如何显示控制 HTML 元素,从⽽实现美化HTML⽹⻚。
样式通常存储在样式表中,⽬的也是为了解决内容与表现分离的问题
外部样式表(CSS⽂件)可以极⼤提⾼⼯作效率
样式层叠次序
当同⼀个 HTML 元素定义了多个样式时,应该使⽤哪个样式?
⼀般⽽⾔,所有的样式会根据下⾯的规则层叠于⼀个新的虚拟样式表中,其中数字 4 拥有最⾼的
优先权。
1. 浏览器缺省设置
2. 外部样式表
3. 内部样式表(位于 <head> 标签内部)
4. 内联样式(在 HTML 元素内部)
因此,内联样式(在 HTML 元素内部)拥有最⾼的优先权,这意味着它将优先于以下的样式声
明: <head> åå标签中的样式声明,外部样式表中的样式声明,或者浏览器中的样式声明(缺省
CSS基础语法
格式: 选择器{属性:值;属性:值;属性:值;....}
案例如下:其中选择器也叫选择符
p{
color:red;
text-align:center;
}
CSS中的注释:
格式: /* ... */
CSS使用方式
如何插⼊样式表
CSS是负责美化⽹⻚的,在HTML中如何使⽤css样式(HTML中引⼊CSS的⽅式):
插⼊样式表的⽅法有三种:
外部样式表(External style sheet)
内部样式表(Internal style sheet)
内联样式(Inline style)
(1). 内联⽅式(⾏内样式)
就是在HTML的标签中使⽤style属性来设置css样式
格式: <html标签 style="属性:值;属性:值;....">被修饰的内容</html标签>
示例:
<p style="color:blue;font-family:⾪书">在HTML中如何使⽤css样式</p>
<!-- 特点:仅作⽤于本标签。-->
(2). 内部⽅式(内嵌样式)
就是在head标签中使⽤ <style type="text/css"> .... </style> 标签来设置css样式
示例:
<style type="text/css">
....css样式代码
</style>
<!-- 特点:作⽤于当前整个⻚⾯ -->
(3). 外部导⼊⽅式(外部链⼊)
3.1(推荐)就是在head标签中使⽤标签导⼊⼀个css⽂件,在作⽤于本⻚⾯,实现css
示例:
<link href="⽂件名.css" type="text/css" rel="stylesheet"/>
3.2 还可以使⽤import在style标签中导⼊css⽂件。
示例:
<style type="text/css">
@import "style.css";
</style>
特点:作⽤于整个⽹站
优先级:当样式冲突时,就是采⽤就近原则,是值css属性离被修饰的内容最近的为主。
若没有样式冲突则采⽤叠加效果
三种样式表总结:
样式表 优点 缺点 使⽤情况 控制范围
⾏内样式表 书写⽅便,权重⾼ 没有实现样式和结构相分离 较少 控制⼀个标签(少)
内部样式表 部分结构和样式相分离 没有彻底分离 较多 控制⼀个⻚面(中)
外部样式表 完全实现结构和样式相分离 需要引⼊ 最多,强烈推荐 控制整个站点(多)
CSS中常用选择器
css2的选择符(重要)
(1). html选择符(标签选择器)
就是把html标签作为选择符使⽤
如 p{....} ⽹⻚中所有p标签采⽤此样式
h2{....} ⽹⻚中所有h2
(2). class类选择符 (使⽤点.将⾃定义名(类名)来定义的选择符)
定义: .类名{样式....} 匿名类
其他选择符名.类名{样式....}
使⽤:<html标签 class="类名">...</html标签>
.mc{color:blue;} /* 凡是class属性值为mc的都采⽤此样式 */
p.ps{color:green;} /*只有p标签中class属性值为ps的才采⽤此样式*/
注意:类选择符可以在⽹⻚中重复使⽤
class样式在使用的过程中,如果同时使用两种样式,需要用空格隔开。例如:
class = “id dd”。(一个标签中不允许使用同样的属性)
(3). Id选择符:
定义: #id名{样式.....}
使⽤:<html标签 id="id名">...</html标签>
注意:id选择符只在⽹⻚中使⽤⼀次.
选择符的优先级:从⼤到⼩ [ID选择符]->[class选择符]->[html选择符]->[html属性]
(4). 关联选择符(包含选择符)
格式: 选择符1 选择符2 选择符3 ...{样式....}
table a{....} /*table标签⾥的a标签才采⽤此样式*/
h1 p{color:red} /*只有h1标签中的p标签才采⽤此样式*/
(5). 组合选择符(选择符组)
格式: 选择符1,选择符2,选择符3 ...{样式....}
h3,h4,h5{color:green;} /*h3、h4和h5都采⽤此样式*/
(6). 伪类选(伪元素)择符:
格式: 标签名:伪类名{样式....}
a:link {color: #FF0000; text-decoration: none} /* 未访问的链接 */
a:visited {color: #00FF00; text-decoration: none} /* 已访问的链接 */
a:hover {color: #FF00FF; text-decoration: underline} /* ⿏标在链接上 */
a:active {color: #0000FF; text-decoration: underline} /* 激活链接 */
CSS3中的选择器(熟悉)
(1). 关系选择器:(ul中的直接子li标签采用此样式(注意ol中的li不是))
div>p 选择所有作为div元素的⼦元素p
div+p 选择紧贴在div元素之后p元素
div~p 选择div元素后⾯的所有兄弟元素p
(2). 属性选择器:
[attribute]选择具有attribute属性的元素。
[attribute=value]选择具有attribute属性且属性值等于value的元素。
[attribute~=value]选择具有attribute属性且属性值为⼀⽤空格分隔的字词列表,其中⼀个等于
value的元素。
[attribute|=value]选择具有att属性且属性值为以val开头并⽤连接符"-"分隔的字符串的E元素。
[attibute^=value]匹配具有attribute属性、且值以valule开头的E元素
[attribute$=value]匹配具有attribute属性、且值以value结尾的E元素
[attribute*=value]匹配具有attribute属性、且值中含有value的E元素
(3). 结构性伪类选择器:
::first-letter设置对象内的第⼀个字符的样式。
::first-line设置对象内的第⼀⾏的样式。
:before设置在对象前(依据对象树的逻辑结构)发⽣的内容。
:after设置在对象后(依据对象树的逻辑结构)发⽣的内容。
:lang(language)匹配使⽤特殊语⾔的E元素。
:element1~element2:
:first-of-type匹配同类型中的第⼀个同级兄弟元素
:last-of-type匹配同类型中的最后⼀个同级兄弟元素
:only-of-type匹配同类型中的唯⼀的⼀个同级兄弟元素
:only-child匹配⽗元素仅有的⼀个⼦元素
*:nth-child(n)匹配⽗元素的第n个⼦元素
:nth-last-child(n)匹配同类型中的倒数第n个同级兄弟元素
*:first-child 匹配⽗元素的第⼀个⼦元素
* :last-child 匹配⽗元素的最后⼀个⼦元素
:root匹配元素在⽂档的根元素。在HTML中,根元素永远是HTML
:empty匹配没有任何⼦元素(包括text
(4). *状态伪类选择器
:link 设置超链接a在未被访问前的样式。
:visited 设置超链接a在其链接地址已被访问过时的样式
:active 设置元素在被⽤户激活(在⿏标点击与释放之间发⽣的事件)时的样式
*:hover 设置元素在其⿏标悬停时的样式
*:focus 设置元素在其获取焦点时的样式
:target 匹配相关URL指向的E元素
:enabled 匹配⽤户界⾯上处于可⽤状态的元素
:disabled 匹配⽤户界⾯上处于禁⽤状态的元素
:checked 匹配⽤户界⾯上处于选中状态的元素
:not(selector)匹配不含有selector选择符的元素
::selection
(5). 其他伪类选择器
E:not(s) : {attribute}
匹配所有不匹配简单选择符s的元素E
p:not(.bg) {background-color:#00FF00;}
CSS常用属性
尺⼨与单位:
① 尺⼨
% 百分⽐
in 英⼨
cm 厘⽶
mm 毫⽶
em 1em 等于当前的字体尺⼨。 2em 等于当前字体尺⼨的两倍。 例如,如果某元素以 12pt 显示,那么 2em 是24pt。
em 是⾮常有⽤的单位,因为它可以⾃动适应⽤户所使⽤的字体。
ex ⼀个 ex 是⼀个字体的 x-height。 (x-height 通常是字体尺⼨的⼀半。)
pt 磅 (1 pt 等于 1/72 英⼨)
pc 12 点活字 (1 pc 等于 12 点)
px 像素 (计算机屏幕上的⼀个点)
② 颜⾊
单位 描述
颜⾊名 颜⾊单词名称。如red
rgb(x,x,x) RGB 值 (⽐如 rgb(255,0,0))
rgb(x%, x%, x%) RGB 百分⽐值 (⽐如 rgb(100%,0%,0%))
#rrggbb ⼗六进制数 (⽐如
③ color颜⾊属性值
a. HSL颜⾊: 通过对⾊调(H)、饱和度(S)、亮度(L)三个颜⾊通道的变化以及它们相互之间的叠加来得
到各式各样的颜⾊.
background-color: hsl(240,100%,50%);color:white;
b. HSLA颜⾊: ⾊调(H)、饱和度(S)、亮度(L)、透明度(A);
background-color: hsla(0,100%,50%,0.2);
*c. RGB颜⾊: 红(R)、绿(G)、蓝(B)三个颜⾊通道的变化
background-color: rgba(200,100,0);
d. RGBA颜⾊: 红(R)、绿(G)、蓝(B)、透明度(A)
background-color: rgba(0,0,0,0.5);
*e. 图⽚透明度的设置 img.opacity{ opacity:0.25;}
兼容IE8 filter:alpha(opacity=100);
字体属性:font
font: 简写
*font-size: 字体⼤⼩:20px,60%基于⽗对象的百分⽐取值
*font-family: 字体:宋体,Arial
font-style: normal正常;italic斜体; oblique倾斜的字体
*font-weight: 字体加粗 :bold
font-variant: small-caps ⼩型的⼤写字⺟字体
font-stretch: [了解]
可以通过js中escape()编码函数来测试属于什么字体。
字体名称 英⽂名称 Unicode 编码
宋体 SimSun \5B8B\4F53
新宋体 NSimSun \65B0\5B8B\4F53
⿊体 SimHei \9ED1\4F53
微软雅⿊ Microsoft YaHei \5FAE\8F6F\96C5\9ED1
楷体_GB2312 KaiTi_GB2312 \6977\4F53_GB2312
⾪书 LiSu \96B6\4E66
幼园 YouYuan \5E7C\5706
华⽂细⿊ STXihei \534E\6587\7EC6\9ED1
细明体 MingLiU \7EC6\660E\4F53
新细明体 PMingLiU \65B0\7EC6\660E\4F53
为了照顾不同电脑的字体安装问题,我们尽量只使⽤宋体和微软雅⿊中⽂字体
文本属性:
text-indent: ⾸⾏缩进:text-indent:2em;
text-overflow: ⽂本的溢出是否使⽤省略标记(...)。clip|ellipsis(显示省略标记)
*text-align: ⽂本的位置:left center right
text-transform:对象中的⽂本的⼤⼩写:capitalize(⾸字⺟)|uppercase⼤写|lowercase⼩写
*text-decoration: 字体画线:none⽆、underline下画线,line-through贯穿线
text-decoration-line:[了解]⽂本装饰线条的位置(浏览器不兼容)
*text-shadow: ⽂本的⽂字是否有阴影及模糊效果
vertical-align: ⽂本的垂直对⻬⽅式
direction:⽂字流⽅向。ltr | rtl
white-space:nowrap; /* 强制在同⼀⾏内显示所有⽂本*/
*letter-spacing: ⽂字或字⺟的间距
word-spacing:单词间距
*line-height:⾏⾼
*color
背景属性:background
background:简写
*background-color: 背景颜⾊
*background-image: 背景图⽚
*background-repeat:是否重复,如何重复?(平铺)
*background-position:定位
background-attachment: 是否固定背景,
scroll:默认值。背景图像是随对象内容滚动
fixed:背景图像固定
css3的属性:
*background-size: 背景⼤⼩,如 background-size:100px 140px;
多层背景:
background:url(test1.jpg) no-repeat scroll 10px 20px,
url(test2.jpg) no-repeat scroll 50px 60px,
url(test3.jpg) no-repeat scroll 90px 100px;
background-origin:content-box,content-box,content-box;
background-clip:padding-box,padding-box,padding-box;
background-size:50px 60px,50px 60px,50px 60px;
*边框
border:宽度 样式 颜⾊;
border-color;
border-style; 边框样式:solid实现,dotted点状线,dashed虚线
border-width:
border-left-color;
border-left-style;
border-left-width:
...
CSS3的样式
border-radius:圆⻆处理
box-shadow: 设置或检索对象阴影
* 内补⽩(内补丁)
padding: 检索或设置对象四边的内部边距,如padding:10px; padding:5px 10px;
padding-top: 检索或设置对象顶边的内部边距
padding-right: 检索或设置对象右边的内部边距
padding-bottom:检索或设置对象下边的内部边距
padding-left: 检索或设置对象左边的内部边距
* 外补⽩(外补丁)
margin: 检索或设置对象四边的外延边距,如 margin:10px; margin:5px auto;
margin-top: 检索或设置对象顶边的外延边距
margin-right: 检索或设置对象右边的外延边距
margin-bottom: 检索或设置对象下边的外延边距
margin-left: 检索或设置对象左边的外延边距
Position定位
*position: 定位⽅式:absolute(绝对定位)、fixed(固定)(relative定位参考,可对内部相对
absolute定位)
*z-index: 层叠顺序,值越⼤越在上⽅。
*top: 检索或设置对象与其最近⼀个定位的⽗对象顶部相关的位置
right: 检索或设置对象与其最近⼀个定位的⽗对象右边相关的位置
bottom: 检索或设置对象与其最近⼀个定位的⽗对象下边相关的位置
*left:
Layout布局
*display: 是否及如何显示:none隐藏,block块状显示...
*float: 指出了对象是否及如何浮动:值none | left | right
*clear: 清除浮动:none | left | right | both两侧
visibility:设置或检索是否显示对象。visible|hidden|collapse。
与display属性不同,此属性为隐藏的对象保留其占据的物理空间
clip: 检索或设置对象的可视区域。区域外的部分是透明的。 rect(上-右-下-左)
如:clip:rect(auto 50px 20px auto);上和左不裁剪,右50,下20.
*overflow: 超出隐藏:hidden,visible:不剪切内容
overflow-x:内容超过其指定宽度时如何管理内容: visible | hidden | scroll | auto
overflow-y:内容超过其指定⾼度时如何管理内容
Flexible Box 弹性盒⼦(旧版)
box-orient: 设置或检索弹性盒模型对象的⼦元素的排列⽅式。horizontal(⽔平)|vertical(纵向)
box-pack 设置或检索弹性盒模型对象的⼦元素的对⻬⽅式。
box-align 设置或检索弹性盒模型对象的⼦元素的对⻬⽅式。
box-flex 设置或检索弹性盒模型对象的⼦元素如何分配其剩余空间。
box-flex-group 设置或检索弹性盒模型对象的⼦元素的所属组。
box-ordinal-group 设置或检索弹性盒模型对象的⼦元素的显示顺序。
box-direction 设置或检索弹性盒模型对象的⼦元素的排列顺序是否反转。
box-lines
Flexible Box 弹性盒⼦(新版)
Flex 是 Flexible Box 的缩写,意为"弹性布局",⽤来为盒状模型提供最⼤的灵活性。
任何⼀个容器都可以指定为 Flex 布局。
.box{
display: flex;
}
⾏内元素也可以使⽤ Flex 布局。
.box{
display: inline-flex;
}
基本概念:
采⽤ Flex 布局的元素,称为 Flex 容器(flflex container),简称"容器"。
它的所有⼦元素⾃动成为容器成员,称为 Flex 项⽬(flflex item),简称"项⽬"。
容器默认存在两根轴:⽔平的主轴(main axis)和垂直的交叉轴(cross axis)。
主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end;
交叉轴的开始位置叫做cross start,结束位置叫做cross end。
项⽬默认沿主轴排列。单个项⽬占据的主轴空间叫做main size,占据的交叉轴空间叫做cross
size
容器上的6个属性
flex-direction:主轴的⽅向,
值:row左->右|row-reverse 右->左|column 上->下| column-reverse 下->上;
flex-wrap:⼀条条轴线排不下,如何换⾏?
值:nowrap不换⾏ | wrap向下换⾏ | wrap-reverse 向上换⾏;
flex-flow:属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap
justify-content:主轴上的对⻬⽅式:
值:flex-start左对⻬| flex-end右对⻬| center 居中|
space-between 两端对⻬,项⽬之间的间隔都相等|
space-around项⽬之间的间隔⽐项⽬与边框的间隔⼤⼀倍;
align-items:交叉轴上如何对⻬,
值:lex-start | flex-end | center | baseline | stretch;
align-content:多根轴线的对⻬⽅式:
值:flex-start | flex-end | center | space-between | space-around | stretch;
项目上的属性:
order:项⽬的排列顺序,数值越⼩,排列越靠前,默认为0。
flex-grow:属性定义项⽬的放⼤⽐例,默认为0
flex-shrink:属性定义了项⽬的缩⼩⽐例,默认为1,即如果空间不⾜,该项⽬将缩⼩。
flex-basis: 属性定义了在分配多余空间之前,项⽬占据的主轴空间(main size)。
flex:是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选。
align-self:属性允许单个项⽬有与其他项⽬不⼀样的对⻬⽅式,可覆盖align-items属性
用户界面User Interface
*cursor ⿏标指针采⽤何种系统预定义的光标形状。pointer⼩⼿,url⾃定义
zoom 设置或检索对象的缩放⽐例: normal|5倍|200%百分⽐
box-sizing 设置或检索对象的盒模型组成模式。content-box | border-box
content-box: padding和border不被包含在定义的width和height之内。
border-box: padding和border被包含在定义的width和height之内。
resize 设置或检索对象的区域是否允许⽤户缩放,调节元素尺⼨⼤⼩。
none: 不允许⽤户调整元素⼤⼩。
both: ⽤户可以调节元素的宽度和⾼度。
horizontal: ⽤户可以调节元素的宽度
vertical: ⽤户可以调节元素的⾼度。
outline 复合属性:设置或检索对象外的线条轮廓
outline-width 设置或检索对象外的线条轮廓的宽度
outline-style 设置或检索对象外的线条轮廓的样式
outline-color 设置或检索对象外的线条轮廓的颜⾊
outline-offset 设置或检索对象外的线条轮廓偏移位置的数值
nav-index 设置或检索对象的导航顺序。
nav-up 设置或检索对象的导航⽅向。
nav-right
多栏Multi-column
columns 设置或检索对象的列数和每列的宽度
column-width 设置或检索对象每列的宽度
column-count 设置或检索对象的列数
column-gap 设置或检索对象的列与列之间的间隙
column-rule 设置或检索对象的列与列之间的边框
column-rule-width 设置或检索对象的列与列之间的边框厚度
column-rule-style 设置或检索对象的列与列之间的边框样式
column-rule-color 对象的列与列之间的边框颜⾊
column-span 象元素是否横跨所有列
column-fill 对象所有列的⾼度是否统⼀
column-break-before 对象之前是否断⾏
column-break-after 对象之后是否断⾏
column-break-inside 对象内部是否断⾏
表格相关属性
table-layout 设置或检索表格的布局算法
border-collapse 设置或检索表格的⾏和单元格的边是合并在⼀起还是按照标准的HTML样式分开
separate | collapse
border-spacing 设置或检索当表格边框独⽴时,⾏和单元格的边框在横向和纵向上的间距
caption-side 设置或检索表格的caption对象是在表格的那⼀边
top | right | bottom | left
empty-cell 设置或检索当表格的单元格⽆内容时,是否显示该单元格的边框 hide | show
过渡Transition
transition 检索或设置对象变换时的过渡效果
transition-property 检索或设置对象中的参与过渡的属性
transition-duration 检索或设置对象过渡的持续时间
transition-timing-function 检索或设置对象中过渡的类型
transition-delay 检索或设置对象延迟过渡的时间
动画Animation
animation 检索或设置对象所应⽤的动画特效
animation-name 检索或设置对象所应⽤的动画名称
animation-duration 检索或设置对象动画的持续时间
animation-timing-function 检索或设置对象动画的过渡类型
animation-delay 检索或设置对象动画延迟的时间
animation-iteration-count 检索或设置对象动画的循环次数
animation-direction 检索或设置对象动画在循环中是否反向运动
animation-play-state 检索或设置对象动画的状态
animation-fill-mode 检索或设置对象动画时间之外的状态
2D变换2D Transform
transform 检索或设置对象的变换
transform-origin 检索或设置对象中的变换所参照的原点
Media Queries Properties媒体查询
width 定义输出设备中的⻚⾯可⻅区域宽度
height 定义输出设备中的⻚⾯可⻅区域⾼度
device-width 定义输出设备的屏幕可⻅宽度
device-height 定义输出设备的屏幕可⻅⾼度
orientation 定义'height'是否⼤于或等于'width'。值portrait代表是,landscape代表否
aspect-ratio 定义'width'与'height'
device-aspect-ratio 定义'device-width'与'device-height'的⽐率。
如常⻅的显示器⽐率:4/3, 16/9, 16/10
device-aspect-ratio 定义'device-width'与'device-height'的⽐率。
如常⻅的显示器⽐率:4/3, 16/9, 16/10
color 定义每⼀组输出设备的彩⾊原件个数。如果不是彩⾊设备,则值等于0
color-index 定义在输出设备的彩⾊查询表中的条⽬数。如果没有使⽤彩⾊查询表,则值等于0
monochrome 定义在⼀个单⾊框架缓冲区中每像素包含的单⾊原件个数。如果不是单⾊设备,则值等于0
resolution 定义设备的分辨率。如:96dpi, 300dpi, 118dpcm
scan 定义电视类设备的扫描⼯序
grid ⽤来查询输出设备是否使⽤栅格或点阵。只有1和0才是有效值,1代表是,0
代表否
WEB字体
字体格式:
不同浏览器所⽀持的字体格式是不⼀样的,我们有必要了解⼀下有关字体格式的知识。
1、TureType(.ttf)格式
.ttf字体是Windows和Mac的最常⻅的字体,是⼀种RAW格式,⽀持这种字体的浏览器有IE9+、
Firefox3.5+、Chrome4+、Safari3+、Opera10+、iOS Mobile、Safari4.2+;
2、OpenType(.otf)格式
.otf字体被认为是⼀种原始的字体格式,其内置在TureType的基础上,⽀持这种字体的浏览器有
Firefox3.5+、Chrome4.0+、Safari3.1+、Opera10.0+、iOS Mobile、Safari4.2+;
3、Web Open Font Format(.woffff)格式
woffff字体是Web字体中最佳格式,他是⼀个开放的TrueType/OpenType的压缩版本,同时也⽀持元数
据包的分离, ⽀持这种字体的浏览器有IE9+、Firefox3.5+、Chrome6+、Safari3.6+、Opera11.1+;
4、Embedded Open Type(.eot)格式
.eot字体是IE专⽤字体,可以从TrueType创建此格式字体,⽀持这种字体的浏览器有IE4+;
5、SVG(.svg)格式
.svg字体是基于SVG字体渲染的⼀种格式,⽀持这种字体的浏览器有Chrome4+、Safari3.1+、
Opera10.0+、iOS Mobile Safari3.2+;
了解了上⾯的知识后,我们就需要为不同的浏览器准备不同格式的字体,通常我们会通过字体⽣成⼯具帮我们⽣成各种格式的字体,因此⽆需过于在意字体格式间的区别差异。
字体图标:
图⽚是有诸多优点的,但是缺点很明显,⽐如图⽚不但增加了总⽂件的⼤⼩,还增加了很多额外的"http
请求",这都会⼤⼤降低⽹⻚的性能的。更重要的是图⽚不能很好的进⾏“缩放”,因为图⽚放⼤和缩⼩会
失真。 我们后⾯会学习移动端响应式,很多情况下希望我们的图标是可以缩放的。此时,⼀个⾮常重要
的技术出现了,额不是出现了,是以前就有,是被从新"宠幸"啦。。 这就是字体图标(
iconfont)。
字体图标优点:
可以做出跟图⽚⼀样可以做的事情,改变透明度、旋转度,等..
但是本质其实是⽂字,可以很随意的改变颜⾊、产⽣阴影、透明效果等等...
本身体积更⼩,但携带的信息并没有削减。
⼏乎⽀持所有的浏览器
移动端设备必备良药
字体图标使用流程:
设计字体图标
假如图标是我们公司单独设计,那就需要第⼀步了,这个属于UI设计⼈员的⼯作, 他们在 illustrator 或 Sketch 这类⽮量图形软件⾥创建 icon图标
之后保存为svg格式,然后给我们前端⼈员就好了。
其实第⼀步,我们不需要关⼼,只需要给我们这些图标就可以了,如果图标是⼤众的,⽹上本来就有的,可以直接跳过第⼀步,进⼊第三步。
上传⽣成字体包
当UI设计⼈员给我们svg⽂件的时候,我们需要转换成我们⻚⾯能使⽤的字体⽂件, ⽽且需要⽣成的是
兼容性的适合各个浏览器的。
推荐⽹站http://icomoon.io
icomoon字库
IcoMoon成⽴于2011年,推出的第⼀个⾃定义图标字体⽣成器,它允许⽤户选择他们所需要的图标,使
它们成⼀字型。 内容种类繁多,⾮常全⾯,唯⼀的遗憾是国外服务器,打开⽹速较慢。
推荐⽹站:http://www.iconfont.cn/
下载兼容字体包
刚才上传完毕, ⽹站会给我们把UI做的svg图⽚转换为我们的字体格式, 然后下载下来就好了
当然,我们不需要⾃⼰专⻔的图标,是想⽹上找⼏个图标使⽤,以上2步可以直接省略了, 直接到刚才的⽹站上找喜欢的下载使⽤吧。
字体引⼊到HTML
得到压缩包之后,最后⼀步,是最重要的⼀步了, 就是字体⽂件已经有了,我们需要引⼊到我们⻚⾯中。
1. ⾸先把 以下4个⽂件放⼊到 fonts⽂件夹⾥⾯。 通俗的做法
第⼀步:在样式⾥⾯声明字体: 告诉别⼈我们⾃⼰定义的字体
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?7kkyc2');
src: url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?7kkyc2') format('truetype'),
url('fonts/icomoon.woff?7kkyc2') format('woff'),
url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
第⼆步:给盒⼦使⽤字体
span {
font-family: "icomoon";
}
第三步:盒⼦⾥⾯添加结构
span::before {
content: "\e900";
}
或者
<span> </span>
⑤ 追加新图标到原来库⾥⾯
如果⼯作中,原来的字体图标不够⽤了,我们需要添加新的字体图标,但是原来的不能删除,继续使
⽤,此时我们需要这样做
把压缩包⾥⾯的selection.json 从新上传,然后,选中⾃⼰想要新的图标,从新下载压缩包,替换原来⽂件即可。