本文转自:http://www.zhangxinxu.com/wordpress/2017/03/css3-font-face-src-local/ by zhangxinxu from http://www.zhangxinxu.com/wordpress/?p=6063本文可全文转载,但需得到原作者书面许可,同时保留原作者和出处,摘要引流则随意. 很多人只要一提到@font face规则,心中就会不由自主“哦~~”的一声:“这个我知道,可以用来生成自定义字符小图标!”话是没错,问题在于很多人…

前言 过去,Web设计师为了保证网站能够正常显示,只能使用“Web安全字体”,即每台机器都预装的字体.但Web安全字体有时并不好看... @font-face能够使得任何一台机器能够显示理想中的字体. 字体定义文件 这里我们只要知道有这些格式的字体文件即可,不用背下来. ttf:True Type Font,Windows里面一般都是这种格式的,[控制面板]->[字体]可以查看系统自带字体. otf:Open Type Font eot:Embeded Open Type, IE仅支持该字体.…

是不是在很很多网站的公共样式中会看到这样的代码?font: 12px/150% Arial, Verdana, "\5b8b\4f53";意思为:字体大小/行高 字体族 "\5b8b\4f53″ 就是 “宋体”.用 unicode 表示,不用 SimSun, 是因为 Firefox 的某些版本和 Opera 不支持 SimSun 的写法.注释乱码:强烈建议不要用中文注释.font-family:’宋体’为了方便大家好查,整理了些中文名 Unicode,特此献给其他前端开发的朋…

CSS和HTML一样都是由W3C制定的标准,本章中介绍的特性和功能还是来源于CSS1和CSS2(CSS2是根据CSS1扩展的).W3C也有新的版本更新,称为CSS3.虽然浏览器已经准备开始实现CSS3某些方面的内容,但当前浏览器仍然无法支持某些特性.一张样式表由样式规则组成,以告诉浏览器怎样去呈现一个文档.如图6.2所示给出了关于CSS规则的一个示例. 图6.2  CSS规则组成 CSS的规则主要由“选择器”和“声明”两部分组成,选择器指定声明应用于哪个或哪些元素(后面有详细讲解).例如,任何H…

CSS动画属性会触发整个页面的重排relayout.重绘repaint.重组recomposite Paint通常是其中最花费性能的,尽可能避免使用触发paint的CSS动画属性,在CSS动画中使用webkit-transform: translateX(3em)的方案代替使用left: 3em,因为left会额外触发layout与paint,而webkit-transform只触发整个页面composite: div { /*IE10以下支持哈*/ /*定义动画完成一个周期所需要的时间,以秒或…

在CSS3中新增了多个文本属性,同样有了这些属性我们在进行问题特效处理时,就尽可能少的用到其他软件去制作特效文字了. 在以前使用CSS进行web开发的时候,必须使用计算机上安装好的字体,如果有些用户的计算机上未安装该字体,可能会达不到开发人员的预期效果.而通过CSS3,开发人员可以使用他们喜欢的任意字体,只要将需要的字体文件放到web服务器上就OK了. 注:现在的主流浏览器不支持部分新增属性. 最简单的文本特效就是给文本添加阴影了. 可以给文本添加水平偏移值.垂直偏移值和模糊半径,也可以定义阴影…

效果如下     实现原理: 利用CSS3的@keyframes规则创建动画效果: 使用CSS3的animation效果完成滚动切换. 代码说明: 样式表中@-webkit-keyframes及@keyframes定义了旋转360度的操作: 样式表中.border div定义了div的基本样式,红色的10px圆形: 10个div嵌套使用; <style> @-webkit-keyframes rotate { 100% { -webkit-transform: rotate(-360deg);…

先看例子 This is a test 1. This is a test 2. This is a test 3. This is a test 4. This is a test 5. This is a test 1. 如果看完上一篇纵向滚动的朋友,就很容易理解横向滚动的实现方式了. 实现原理: 1. 利用CSS3的@keyframes规则创建动画效果: 2. 使用CSS3的animation效果完成滚动切换. @-webkit-keyframes scrollText2 { 0%{ -w…

老惯例,先看例子. This is a test 1. This is a test 2. This is a test 3. This is a test 4. This is a test 5. This is a test 1. 实现原理: 1. 利用CSS3的@keyframes规则创建动画效果: 2. 使用CSS3的animation效果完成滚动切换. CSS代码 @-webkit-keyframes scrollText1 { 0%{ -webkit-transform: trans…

先上效果图,不要在意用来当素材的图片: 在搜索相关资料的时候,查到有两种实现方式:一是使用JavaScript,二是使用CSS3中的Animation(动画),这里使用的是CSS3中的Animation实现的图片轮播功能. 首先我们要理解这个图片轮播的结构,我一早上都因为没有理解结构在那里浪费时间,中午睡了一觉起来思路就通了,就...做出来了┑(￣Д ￣)┍ 其实就和老式电影放映机差不多原理,要显示的内容就是胶片上的一张张照片,并排排列: 轮播起来就像播放老式电影一样,胶片移动,显示区域会显示想…

- h5新增的标签 新增元素 说明 video 表示一段视频并提供播放的用户界面 audio 表示音频 canvas 表示位图区域 source 为video和audio提供数据源 track 为video和audio指定字母 svg 定义矢量图 code 代码段 figure 和文档有关的图例 figcaption 图例的说明 main   time 日期和时间值 mark 高亮的引用文字 datalist 提供给其他控件的预定义选项 keygen 秘钥对生成器控件 output 计算值 pr…

[外链图片转存失败(img-yfi1VPyy-1563434266398)(https://upload-images.jianshu.io/upload_images/11158618-fc8784aa1868fbb5.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)] CSS3 完全向后兼容 选择器.框模型.背景和边框.文本效果.2D/3D转换.动画.多列布局.用户界面 [外链图片转存失败(img-v3cEr47w-156343426…

转换.过渡.动画 2D 转换 1.translate() 方法 通过 translate() 方法,元素从其当前位置移动,根据给定的 left(x 坐标) 和 top(y 坐标) 位置参数: 实例 div { transform: translate(50px,100px); } 值 translate(50px,100px) 把元素从左侧移动 50 像素,从顶端移动 100 像素. 2.rotate() 方法 通过 rotate() 方法,元素顺时针旋转给定的角度.允许负值,元素将逆时针旋转.…

CSS3 边框 通过 CSS3,您能够创建圆角边框,向矩形添加阴影,使用图片来绘制边框 - 并且不需使用设计软件,比如 PhotoShop. 在本章中,您将学到以下边框属性: border-radius     圆角边框 box-shadow       边框阴影 border-image     边框插入图片   border-image:url(border.png) 30 30 round; CSS3 背景 CSS3 包含多个新的背景属性,它们提供了对背景更强大的控制. 在本章,您将学到以…

对于web开发来说,CSS是最有效的美化页面.设置页面布局的技术.但问题是,CSS是一种标记性语言,语法结构非常的松散.不严谨.WEB程序员会经常发现自己的或别人的CSS文件里有大量的冗余代码或错误或能够大量优化的地方.如果你经常使用静态编程语言(比如,Java,C语言)等,你会发现实用的IDE工具会给编程带来巨大的效率,像Eclipse这样的能够实时自动分析代码问题的集成开发环境就是一个典型的例子.那么,CSS程序员有没有这样的帮助工具呢? 下面将要介绍的10款工具都是一些在线的应用,你不需要…

在我的博客园定制的css中有2个之前没有遇到的csss属性@font-face @media @media 在css文件中的使用如下 ` @media screen and (max-width: 1260px) { body { margin: 0 30px; } } @media screen and (max-width: 600px) { body { font-size: 13px; } } ` @media查询 @media 属性在CSS3里面已经演变成一种 media querie…

注意:蓝色 重要:红色 目录: 1. 学会使用CSS选择器: 9大选择器.交集选择器.并集选择器.后代选择器.子代选择器.伪类选择器. 2.font.color.横向竖向居中.文本修饰.首行缩进. font合写规则 3. 熟练掌握CSS背景属性 5大属性 4. 熟练掌握CSS三种显示模式.换行.宽高内外边距.总宽高.包容. 5. 熟练掌握CSS三大特性:层叠.继承.优先级(权重) 前言:CSS 1:CSS(Cascading Style Sheets)  层叠样式表(级联样式表) 2:引入CSS…

来源于:http://blog.poetries.top/2016/10/20/review-jQuery/ http://www.jianshu.com/p/f8e3936b34c9 首先,来了解一下jQuery学习的整体思路 第一节 jQuery初步认知 jQuery概述 JQuery概念 javascript概念 基于Js语言的API和语法组织逻辑,通过内置window和document对象,来操作内存中的DOM元素 JQuery概念 基于javascript的,同上,提高了代码的效率 j…

jQuery 最核心的组成部分就是:选择器引擎.它继承了 CSS 的语法,可以对 DOM 元素的标签名.属性名.状态等进行快速准确的选择,并且不必担心浏览器的兼容性. jQuery选择器实现了 CSS1~CSS3 的大部分规则之外,还实现了一些自定义的选择器,用于各种特殊状态的选择. 一．简单选择器 在使用 jQuery 选择器时,我们首先必须使用“$()”函数来包装我们的 CSS 规则.而CSS 规则作为参数传递到 jQuery 对象内部后,再返回包含页面中对应元素的 jQuery 对象. 随…

//简单选择器$('div').css('color','red'); //元素选择器,返回多个元素$('#box').css('color','red');//id选择器,返回单个元素$('.box').css('color','red');//类(class)选择器,返回多个元素//css将ID为box的元素字体颜色变红#box{ color:red;}//jquery写法$('#box').css('color','red');alert($('.pox').size());//获取类为p…

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>fontface</title> <style type="text/css"> /*完美解决css3 web-safe字体各种浏览器兼容问题*/ @font-face { font-family: 'myfont';/*定义…

文本: color 颜色 line-height 行高 direction 文本方向 letter-spacing 字符间距 text-align 对齐方式 text-decoration 文本修饰 text-indent 首行缩进 text-transform 字母大小写 unicode-bidi 文本方向 white-space 空白的处理方式 word-spacing 字间距 text-shadow 阴影css3 word-wrap 换行规则css3…

//ELEMENT DOM选择//on are tag names. //All the divs on the page: $$('div'); //All the divs and paragraphs //note: this returns an array with all the divs first, //then all the paragraphs: $$('div', 'p'); //When you include Selectors.js, you can //pass…

第四章 jQuery框架的选择器 4.1 jQuery选择器说明 jQuery 最核心的组成部分就是选择器引擎.它完全继承了 CSS 的风格,可以对 DOM 元 素的标签名.属性名.状态等进行快速准确的选 择,而且不必担心浏览器的兼容性,写法更加简洁. jQuery 选择器实现了 CSS1~CSS3 的大部分规则之外,还实现了一些自定义的选择器,用于各种特殊状态的选择. 优点:相对于直接使用 JavaScript 获取页面元素和处理业务逻辑相比,使用jQuery 选择器来进行操作代码更简单且拥有…

第一节 jQuery初步认知 jQuery概述 JQuery概念 javascript概念 基于Js语言的API和语法组织逻辑,通过内置window和document对象,来操作内存中的DOM元素 JQuery概念 基于javascript的,同上,提高了代码的效率 jQuery是什么: 是一个javascript代码仓库,我们称之为javascript框架. 是一个快速的简洁的javascript框架,可以简化查询DOM对象.处理事件.制作动画.处理Ajax交互过程. 它可以帮我们做什么(有什…

内容摘要: 1.简单选择器 2.进阶选择器 3.高级选择器 发文不易,转载请注明出处! jQuery 最核心的组成部分就是:选择器引擎.它继承了 CSS 的语法,可以对 DOM 元素的标签名.属性名.状态等进行快速准确的选择,并且不必担心浏览器的兼容性.jQuery选择器实现了 CSS1~CSS3 的大部分规则之外,还实现了一些自定义的选择器,用于各种特殊状态的选择. 一．简单选择器 在使用 jQuery 选择器时,我们首先必须使用“$()”函数来包装我们的 CSS 规则.而CSS 规则作为参数…

学习要点: 1.简单选择器 2.进阶选择器 3.高级选择器 jQuery 最核心的组成部分就是:选择器引擎.它继承了 CSS 的语法,可以对 DOM 元素的标签名.属性名.状态等进行快速准确的选择,并且不必担心浏览器的兼容性.jQuery选择器实现了 CSS1~CSS3 的大部分规则之外,还实现了一些自定义的选择器,用于各种特殊状态的选择. 一．简单选择器 在使用 jQuery 选择器时,首先必须使用“$()”函数来包装 CSS 规则.而CSS 规则作为参数传递到 jQuery 对象内部后,再返…

一.简介 Plotly是一个非常著名且强大的开源数据可视化框架,它通过构建基于浏览器显示的web形式的可交互图表来展示信息,可创建多达数十种精美的图表和地图,本文就将以jupyter notebook为开发工具,详细介绍Plotly的基础内容. 二.绘图语法规则 2.1 离线绘图方式 Plotly中绘制图像有在线和离线两种方式,因为在线绘图需要注册账号获取API key,较为麻烦,所以本文仅介绍离线绘图的方式.离线绘图又有plotly.offline.plot()和plotly.offline.…

1.Css盒模型(box model) web开发中,html的每个元素都是盒子,盒子可以装内容(content).可以有填充物(padding).有外壳(border) 和 外保护层(margin) .下图为控制台中的盒子详解:浏览器的控制台是我们了解一个元素最好的一个工具,下图可以清晰的看出一个盒子所拥有的属性. 元素的实际宽高 上图可清晰的看出 元素实际的宽=border-left+padding-left+元素内容宽+padding-right+border-right 元素实际的高=b…

一.css3的选择器 1. 父子选择器 直接关系 .box>.com 2. 兄弟选择器 相邻关系 .box+.com <span>hello</span> <p>world</p> span+p{color:red;} 这里通过span 找到p里面的元素 目的是p 3.通用兄弟选择器 属于同一个父元素E~F 跟E同属于一个父元素的所有的F 4.群组选择器 把具有相同样式租在一起中间用,隔开,也是常用的选择器 5.P[class=^box] 以box开头…