首页 前端知识 CSS精灵图、字体图标、HTML5新增属性、界面样式和网站 favicon 图标

CSS精灵图、字体图标、HTML5新增属性、界面样式和网站 favicon 图标

2024-05-08 10:05:34 前端知识 前端哥 202 557 我要收藏

精灵图

为什么要使用精灵图

一个网页中往往会应用很多小的背景图像作为修饰,当网页中的图像过多时,服务器就会频繁地接收和发送请求图片,造成服务器请求压力过大,这将大大降低页面的加载速度,因此,为了有效地减少服务器接收和发送请求的次数,提高页面的加载速度,出现了 CSS 精灵技术(也称CSS Sprites、CSs 雪碧)。
核心原理:将网页中的一些小背景图像整合到一张大图中,这样服务器只需要一次请求就可以了
精灵技术目的:为了有效地减少服务器接收和发送请求的次数,提高页面的加载速度

精灵图(sprites)的使用

使用精灵图核心:

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

字体图标

字体图标的产生

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

字体图标的优点

轻量级:一个图标字体要比一系列的图像要小。一旦字体加载了,图标就会马上渲染出来,减少了服务器请求灵活性:本质其实是文字,可以很随意的改变颜色、产生阴影、透明效果、旋转等
兼容性:几乎支持所有的浏览器,请放心使用.
注意:字体图标不能替代精灵技术,只是对工作中图标部分技术的提升和优化。

精灵图与字体图标的使用总结

如果遇到一些结构和样式比较简单的小图标,就用字体图标。
如果遇到一些结构和样式复杂一点的小图片,就用精灵图。

字体图标的使用

字体图标是一些网页常见的小图标,我们直接网上下载即可。 因此使用可以分为
1.字体图标的下载
2.字体图标的引入(引入到我们htm页面中)
3.字体图标的追加(以后添加新的小图标
2.3 字体图标的下载

推荐下载网站:

  1. icomoon字库 http://icomoon.io
  2. 阿里 iconfont 字库 http://www.iconfont.cn/

字体图标的引用

下载完毕之后,注意原先的文件不要删,后面会用。

  1. 把下载包里面的 fonts 文件夹放入页面根目录下
    在这里插入图片描述
  2. 在 CSS 样式中全局声明字体:简单理解把这些字体文件通过css引入到我们页面中定注意字体文件路径的问题。
    这段文字在文件里有。
@font-face{
font-family:"icomoon';
url('fonts/icomoon.eot?7kkyc2');
src: 	url('fonts/icomoon.eot?7kkyc2#iefix')format('embedded-opentype')
src: 	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;
}
  1. html 标签内添加小图标。
span {
	font-family:"icomoon';
	font-size: 100px;
}

在这里插入图片描述

字体图标的追加

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

HTML5新增属性

HTML5新增的input类型

属性值说明
type=“email”限制用户输入必须为Email类型
type=“url”限制用户输入必须是URL类型
type=“data”限制用户输入必须为日期类型
type=“time”限制用户输入必须为时间类型
type=“month”限制用户输入必须为月类型
type=“week”限制用户输入必须为周类型
type=“number”限制用户输入必须为数字类型
type=“tel”手机号码
type=“search”搜索框
type=“color”生成一个颜色选择表单

重点记住:number tel search 这三个

HTML5新增的表单属性

属性说明
requiredrequired表单拥有该属性表示内容不能为空,必填
placeholder提示文本表单的提示信息,存在默认值将不显示
autofocusautofocus自动聚焦属性,页面加载完成自动聚焦到指定表单
autocompleteoff/on当用户在字段开始键入时,浏览器基于之前键入过的值,应该显示出在字段中填写的选项。默认已经打开,如autocomplete=“on”,关闭autocomplete="off"需要放在表单内,同时加上name属性,同时成功提交
multiplemultiple可以多选文件提交

HTML5新增的语义化标签

 <header>: 头部标签
<nav>: 导航标签
 <article>:内容标签
<section>: 定义文档某个区域
<aside>: 侧边栏标签
<footer>: 尾部标签

注意:
这种语义化标准主要是针对搜索引擎的,这些新标签页面中可以使用多次。在IE9 中,需要把这些元素转换为块级元素。其实,我们移动端更喜欢使用这些标签HTML5 还增加了很多其他标签

video视频标签

属性描述
autoplayautoplay视频就绪自动播放(谷歌浏览器需要添加muted来解决自动播放问题)
controlscontrols向用户显示播放控件
widthpx设置播放器宽度
heightpx设置播放器高度
looploop播放完是否继续播放该视频,循环播放
preloadauto(预先加载视频)
none(不应加载视频)
规定是否加载视频(如果有了autoplay,就忽略该属性)
srcurl视频url地址
posterImgurl加载等待的画面图片
mutedmuted静音播放

属性选择器

属性选择器可以根据元素特定属性来显示元素。这样就可以不用借助于类或者id选择器。

选择符简介
E[att]选择具有 att 属性的 E元素
E[att=“'val”]选择具有 att 属性且属性值等于 val 的E元素
E[att^=“'val”]匹配具有 att 属性且值以 val 开头的 E元素
E[att$=“val”]匹配具有 att 属性且值以 val 结尾的 E元索
E[att*=“val”]匹配具有 att 属性且值中含有 val 的 E元素

注意:类选择器、属性选择器、伪类选择器,权重为 10。

结构伪类选择器

结构伪类选择器主要根据文档结构来选择器元素,常用于根据父级选择器里面的子元素

选择符简介
E:first-child匹配父元素中的第一个子元素 E
E:last-child匹配父元素中最后一个E元素
E:nth-child(n)匹配父元素中的第 n个子元素E
E:first-of-type指定类型E的第一个
E:last-of-type指定类型E的最后一个
E:nth-of-type(n)指定类型E的第n个

nth-child(n)选择某个父元素的一个或多个特定的子元素

  • n 可以是数字,关键字和公式
  • n 如果是数字,就是选择第n个子元素,里面数字从1开始…
  • n 可以是关键字:even偶数,odd 奇数
  • n可以是公式:常见的公式如下(如果n是公式,则从0开始计算,但是第0个元素或者超出了元素的个数会被忽略)
公式取值
2n偶数
2n+1奇数
5n5 10 15…
n+5从第5个开始(包含第五个)到最后
-n+5前5个(包含第5个)

区别:

  1. nth-child 对父元素里面所有孩子排序选择(席号是固定的) 先找到第n个孩子,然后看看是否和E匹配
  2. nth-of-type 对父元素里面指定子元素进行排序选择。先去匹配E,然后再根据E 找第n个孩子

伪元素选择器

伪元素选择器可以帮助我们利用CSS创建新标签元素,而不需要HTML标签,从而化HTML结构,

选择符简介
:: before在元素内部的前面插入内容
::after在元素内部的后面插入内容

注意:

  • before 和 after 创建一个元素,但是属于行内元素
  • 新创建的这个元素在文档树中是找不到的,所以我们称为伪元素
  • 语法: element::before {}
  • before 和 after 必须有 content 属性
  • before 在父元素内容的前面创建元素,after在父元素内容的后面插入元素
  • 伪元素选择器和标签选择器一样,权重为1
    在这里插入图片描述
p::before {
position:absolute;
right:20px;
top: 10px;e91e";content:font-size:20px;
}

伪元素清除浮动

后面两种伪元素清除浮动算是第一种额外标签法的一个升级和优化。

.clearfix:after {
content:";
display: blolk;
height:0;
clear: both;
visibility: hidden;
}
.clearfix:before,.clearfix:after{
content:"";
display:table;
}
.clearfix:after{
clear:both;
}

CSS创建三角

网页中常见一些三角形,使用CSS直接画出来就可以,不必做成图片或者字体图标张图 ,CSS 三角做法如下:

div {
width:0;
height:0;
line-height:0;
font-size:0;
border:50px solid transparent;
border-left-color:pink;
}

界面样式

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

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

鼠标样式cursor

li {cursor : pointer}

设置过检索在对象上移动的鼠标指针采用何种系统定义的光标形状。

属性值描述
default默认
pointer小手
move移动
text文本
not-allowed禁止

轮廓线outline

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

input {outline: none;}

防止拖拽文本域 resize

实际应用过程中,文本域右下角是不可以拖拽的。

textarea {resize:none;}

vertical-align属性

CSS 的 vertical-align属性使用场景:经常用于设置图片或者表单(行内块元素)和文字垂直对齐官方解释:用于设置一个元素的垂直对齐方式,但是它只针对于行内元素或者行内块元素有效。

vertical-align :baseline l top | middle l bottom
描述
baseline默认。元素放置在父元素的基线上
top把元素的顶端与行中最高元素的顶端对齐
middle把此元素放置在父元素的中部
bottom把元素的顶端与行中最低的元素的对齐

在这里插入图片描述

vertical-align 属性应用

图片、表单和文字对齐

图片、表单都属于行内块元素,默认的 vertical-align 是基线对齐。
默认文字与图片是基线对齐。
此时可以给图片、表单这些行内块元素的vertical-align 属性设置为 middle 就可以让文字和图片垂直
居中对齐了。

解决图片底部默认空白缝隙问题

bug:图片底侧会有一个空白缝隙,原因是行内块元素会和文字的基线对齐
主要解决方法有两种

  1. 给图片添加vertical-align:middle|top|bottom等。(提倡使用的)
  2. 把图片转换为块级元素 display: block;
文本溢出显示省略号
  1. 单行文本溢出显示省略号
/*1.先强制一行内显示文本*/
默认 normal 自动换行)white-space: nowrap;/*2.超出的部分隐藏*/公
overflow: hidden;
/*3.文字用省略号替代超出的部分*/
text-overflow:ellipsis;
  1. 多行文本溢出显示省略号
    多行文本溢出显示省略号,有较大兼容性问题,适合于webKit浏览器或移动端(移动端大部分是webkit内核)
overflow:hidden;
text-dverflow: ellipsis;
/*弹性伸缩盒子模型显示 */
display:-webkit-box;
/*限制在一个块元素显示的文本的行数 */
webkit-line-clamp:2;
/*设置或检索伸缩盒对象的子元素的排列方式*/
webkit-box-orient:vertical;

常见布局技巧

margin负值的运用

  1. 让每个盒子margin 往左侧移动 -1px 正好压住相邻盒子边框
    果有定位,则加z-index)
  2. 鼠标经过某个盒子的时候,提高当前盒子的层级即可(如果没有有定位,则加相对定位(保留位置),如果有定位,则加z-index)

文字围绕浮动元素

巧妙运用浮动元素不会压住文字的
特性
在这里插入图片描述

行内块的巧妙运用

在这里插入图片描述

CSS三角强化

width:0;
height:0;
border-color:transvarent red transparent transparent;solid;border-style:
border-width:22px8px00;

CSS初始化

不同浏览器对有些标签的默认值是不同的,为了消除不同浏览器对HTML文本呈现的差异,照顾浏览器的兼容,我们需要对CSS初始化
简单理解: CSS初始化是指重设浏览器的样式。(也称为CSSreset)
每个网页都必须首先进行CSS初始化。
这里我们以以 京东css初始化代码为例。

Unicode编码字体:

把中文字体的名称用相应的Unicode编码来代替,这样就可以有效的避免浏览器解释CSS代码时候出现乱码的问题。
比如:
黑体 \9ED1\4F53宋体\5B8B\4F53
微软雅黑\5FAE\8F6F\96C5\9ED1

CSS盒子模型

CSS3 中可以通过 box-sizing 来指定盒模型,有2个值:即可指定为content-box、border-box,这样我们计算盒子大小的方式就发生了改变。
可以分成两种情况:

  1. box-sizing:content-box 盒子大小为 width + padding+ border (以前默认的)
  2. box-sizing:border-box 盒子大小为width
    如果盒子模型我们改为了box-sizing:border-box ,那padding和border就不会撑大盒子了(前提padding和border不会超过width宽度)

CSS其他特性

CSS3滤镜filter:

filter CSS属性将模糊或颜色偏移等图形效果应用于元素。

filter: 函数(); 例如:filter:blur(5px);blur模糊处理 数值越大越模糊filter: 

CSS3 calc 函数:

calc()此CSS函数让你在声明CSS属性值时执行一些计算。

width: calc(100% -80px);

括号里面可以使用 +、-、*、/来进行计算。

CSS3 过渡

过渡(transition)是CSS3中具有颠覆性的特征之一,我们可以在不使用 Flash 动画或JavaScript 的情况下,当元素从一种样式变换为另一种样式时为元素添加效果。
过渡动画 : 是从一个状态 渐渐的过渡到另外一个状态,可以让我们页面更好看,动感十足,虽然 低版本浏览器不支持(ie9以下版本 ) 但是不会影响页面布局。
我们现在经常和 :hover 一起 搭配使用。

transition:要过渡的属性 花费时间 运动曲线 何时开始;

1.属性 : 想要变化的 css 属性,宽度高度 背景颜色 内外边距都可以 。如果想要所有的属性都变化过渡,写一个a 就可以。
2.花费时间 :单位是 秒(必须写单位 )比如 0.5s
3.运动曲线:默认是 ease (可以省略)
4.何时开始 :单位是 秒(必须写单位)可以设置延迟触发时间 默认是 0s(可以省略)

网站 favicon 图标

favicon.ico 一般用于作为缩略的网站标志,它显示在浏览器的地址栏或者标签上。目前主要的浏览器都支持favicon.ico 图标。
在这里插入图片描述

制作favicon图标

  1. 把品优购图标切成png图片。
  2. 把 png 图片转换为ico 图标,这需要借助于第三方转换网站,例如比特虫:http://www.bitbug.net/

favicon图标放到网站根目录下

HTML页面引入favicon图标

1.在html页面里面的 元素之间引入代码。

<link rel="shortcut icon" href="favicon.ico"
type="image/x-icon"/>
转载请注明出处或者链接地址:https://www.qianduange.cn//article/7514.html
标签
评论
发布的文章

Unity读取Json的几种方法

2024-05-12 17:05:57

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!