【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 ...
随机推荐
- Activity组件
Activity 间书作者:阿敏其人 关于Activity博文上 间书作者:阿敏其人 关于Activity博文中 间书作者:阿敏其人 关于Activity博文下
- linux点滴:rsync
rsync(remote sync)是一款远程同步工具,可以实现全量备份.增量备份.本地备份.删除,核心功能是远程数据备份. 工作原理 rsync核心算法 1.分块checksum算法 首先,把文件平 ...
- R语言和大数据
#安装R语言R3.3版本会出现各种so不存在的问题,退回去到R3.1版本时候就顺利安装.在安装R环境之前,先安装好中文(如果没有的话图表中显示汉字成框框了)和tcl/tk包(少了这个没法安装sqldf ...
- codeforces 633D - Fibonacci-ish 离散化 + 二分查询
Fibonacci-ish Yash has recently learnt about the Fibonacci sequence and is very excited about it. He ...
- ThinkPHP框架安全性能分析
http://www.freebuf.com/articles/web/59713.html 点击劫持cookie 点击劫持所有链接
- Pair Project: Elevator Scheduler [电梯调度算法的实现和测试]:刘耀先-11061183,罗凡-11061174
本次为我们两个人的第一次结对编程.从总体而言,我们对结对编程比单人编程略显不适应.但是经过一段时间的磨合,我们逐渐的习惯了这种编程方式. 1. 结对编程的优缺点 结对编程的优点: (1) ...
- Python的库和资源(转)
Python的库和资源: http://blog.sina.com.cn/s/blog_3cb6a78c0100hpaq.html Python 常用模块: http://www.pythonclub ...
- BT5下安装Metasploit4.5方法
BT5与Ubuntu下安装最新版Metasploit4.5方法:(先把老版本的MSF uninstall,BT5自带的老版本Metasploit没有办法升级!) 1.下载Metasploit下的Lin ...
- forward && redirect 区别介绍
解释一 一句话,转发是服务器行为,重定向是客户端行为.为什么这样说呢,这就要看两个动作的工作流程: 转发过程:客户浏览器发送http请求---->web服务器接受此请求-->调用内部的一个 ...
- COOKIE漫谈
cookie概述在上一节,曾经利用一个不变的框架来存储购物栏数据,而商品显示页面是不断变化的,尽管这样能达到一个模拟全局变量的功能,但并不严谨.例如在导航框架页面内右击,单击快捷菜单中的[刷新]命令, ...