【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 ...
随机推荐
- HTML5课程大纲/学习路线
HTML5课程大纲/学习路线 这是什么? 这个一个HTML技术路线的课程大纲/学习大纲. 你能用它做什么? 如果你是找工作的人, 利用本大纲, 你可以学习HTML5语言, 做一个HTML前端工程师, ...
- “微信应用号对行业影响”之一,app开发速来围观
昨天,微信张小龙的一个讲话刷爆朋友圈,除了4大价值观,最后顺便提到:要推出微信应用号! 其实,价值观也就说说听听,最后顺便提到的微信应用号,才是真正的巨型炸弹. 腾讯挟6亿高粘度用户之重,号令天下,阿 ...
- gulp-less学习教程
过程安装nodejs -> 全局安装gulp -> 项目安装gulp以及gulp插件 -> 配置gulpfile.js -> 运行任务node.npm安装 自己搜全局安装gul ...
- Redhat 6.5 x64 下载地址
http://ftp.okhysing.is/ftp/redhat/6.5/isos/x86_64/
- TIBCO ActiveMatrix BPM 生成daa包脚本
Ant 配置: <?xml version="1.0" encoding="UTF-8" ?> <project name="pro ...
- hdu 4570 Multi-bit Trie 区间DP入门
Multi-bit Trie 题意:将长度为n(n <= 64)的序列分成若干段,每段的数字个数不超过20,且每段的内存定义为段首的值乘以2^(段的长度):问这段序列总的内存最小为多少? 思路: ...
- MFC应用程序向导生成的文件
比方说我们用Visio Studio创建了一个MFC应用程序,名称为Mysdi.在创建这个项目的时候,默认的会生成许多类和文件,就关于这些文件的内容和要点展开以下论述. 框架窗口类头文件 向导为项目M ...
- 基于jQuery的上下左右无缝滚动应用(单行或多行)
$(function(){ var _wrap=$('ul.line');//定义滚动区域 var _interval=2000;//定义滚动间隙时间 var _moving; ...
- 如何确定照片是否被PS过
除了用软件,还可以先右键属性----解除锁定----重新打开属性看详细信息.
- zoj 3761
很简单但很虐心的一道题: 我感觉自己的算法没错,但是老是过不了:= = 但是还是把代码贴出来: 我的方法,用并查集的方式做一课树,然后对树进行遍历: 有多少棵树就有多少个点剩余: #include&l ...