【CSS3】Advanced5:At Rules:@import, @media, and @font-face
1.@import
bolt another stylesheet onto your existing one.
@import url(**.css);
must be placed at the top of a stylesheet, before any other rules.
2.@media
screen
, print
, projection
, handheld
, and all
, or a comma-separated list of more than one,variables relating to that media
eg:@media screen,projection
3.@font-face
eg1:@font-face{
font-family:"font of all knowledge";
src:url(fontofallknowledge.woff");
}
create a font named “font of all knowledge” using the font-family
descriptor and links the font file “fontofallknowledge.woff” to that name using the src
descriptor. “font of all knowledge” can then be used in a standard font rule
The font will be downloaded (in this case from the same directory as the CSS file) and applied to paragraphs
eg2:Checking to see if a font is already present on a user’s computer,removing the need to download it,specify which one you’re interested in.
Could use Google Web Fonts
@font-face {
font-family: "font of all knowledge";
src: local("font of all knowledge"), local(fontofallknowledge), url(fontofallknowledge.woff);
font-weight: 400;
font-style: normal;
}
【CSS3】Advanced5:At Rules:@import, @media, and @font-face的更多相关文章
- 【CSS3】Advanced3:Universal, Child, and Adjacent Selectors
1.Universal selectors eg:#target*{ } 2.Child selectors < something immediately nested within some ...
- 【HTML】Advanced5:Accessible Forms
1.label <form> <label for="yourName">Your Name</label> <input name=&q ...
- 【CSS3】Advanced11:Media Queries
1.Browser-size specific CSS @media screen and (max/min-width:1000px){} 2.Orientation-specific CSS? @ ...
- 【CSS3】Advanced10:Gradient
1.background:linear-gradient(20deg/(to) bottom right,orange,red,hsl(60,100%,50%)); 2.-webkit-chrome/ ...
- 【CSS3】Advanced9:Transformation
1.transform:rotate(-10deg) skew(20deg,10deg) scaling(2/1,2) translate/移动(100px,200px) 2.transform:ma ...
- 【CSS3】Advanced8:CSS Backgrounds: Multiples, Size, and Origin
1.Multiples,Size,and Origin eg:background-image:url(bg.png),url(bullet.png) 0 50% no-repeat,url(arro ...
- 【CSS3】Advanced7:CSS Transitions
1.animate parts of your design without the need for the likes of JavaScrip 2.allowing smooth animati ...
- 【CSS3】Advanced6:Attribute Selectors
1.with the attribute abbr[title]{color:red} 2.with the attribute and it's value input[type=text][dis ...
- 【CSS3】Advanced4:Advanced Colors
1.rgba(red,green,blue,alpha(不透明度0.0(完全透明)与 1.0(完全不透明)) 2.HSLa(hue(色调 0red 120green 240blue),saturati ...
随机推荐
- C#动态生成图书信息XML文件
通过C#动态生成图书信息XML文件,下面有个不错的示例,需要的朋友可以参考下 通过C#动态生成图书信息XML文件(Books.xml),文件如下: 复制代码代码如下: <?xml version ...
- 【2】认识Bootstrap
作为当下最流行的前端开发框架Bootstrap,它可大大简化网站开发过程,从而深受广大开发者的喜欢,当然你去它的官网中文网站就能看到大大的小标定义:“简洁.直观.强悍.移动设备优先的前端开发框架,让w ...
- Delphi新语法和ifthen的扩展联想
Delphi之前已经重载了好多个ifthen函数 Math单元 ): Integer; overload; inline; ): Int64; overload; inline; ): UInt64; ...
- mysql Error Handling and Raising in Stored Procedures
MySQL的存储过程错误捕获方式和Oracle的有很大的不同. MySQL中可以使用DECLARE关键字来定义处理程序.其基本语法如下: DECLARE handler_type HANDLER FO ...
- [Linux/Ubuntu] vi/vim 使用方法讲解(转载)
转自:http://www.cnblogs.com/emanlee/archive/2011/11/10/2243930.html vi/vim 基本使用方法 vi编辑器是所有Unix及Linux系统 ...
- python 程序列表
用 python 通过读取注册表来获取机器安装的程序列表,包括,软件名称,版本号,安装日期等 # -*- coding: UTF8 -*-import _winregimport osimport ...
- jquery怎么实现左右滑动的问题
var len = $("#b span").length, curindex = 0; $("#leftRun").click(function(){ if( ...
- IntelliJ IDEA 13怎么创建JAVA SE项目
如下图,直接下一步,如果需要的话可以选择建立Main函数:
- ZOJ - 3195 Design the city
题目要对每次询问将一个树形图的三个点连接,输出最短距离. 利用tarjan离线算法,算出每次询问的任意两个点的最短公共祖先,并在dfs过程中求出离根的距离.把每次询问的三个点两两求出最短距离,这样最终 ...
- easyui源码翻译1.32--NumberBox(数值输入框)
前言 扩展自$.fn.validatebox.defaults.使用$.fn.numberbox.defaults重写默认值对象.下载该插件翻译源码 数值输入框是用来限制用户只能输入数值型数据的.他可 ...