【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 ...
随机推荐
- CANVAS运用-对图片的压缩上传(仅针对移动浏览器)
最近在移动端设计头像上传功能时,原本是以<input type="file">直接通过formData上传,然而实际使用情况是:对于过大的图片(高像素手机所拍摄的照片等 ...
- 使用内核定时器的second字符设备驱动及测试代码
驱动: #include <linux/kernel.h> #include <linux/module.h> #include <linux/fs.h> #inc ...
- centos系统python升级2.7.3
首先下载源tar包 可利用linux自带下载工具wget下载,如下所示: wget http://www.python.org/ftp/python/2.7.3/Python-2.7.3.tgz 下载 ...
- C# 目录与文件管理
文件读写 学习了一点点希望对以后的学习工作有帮助 在应用程序中基本任务是对数据的操作,这就是对数据进行访问和保存挤兑数据的读写,应用程序访问一个文本文件叫做“读”:对文本文件的内容进行修改后保存这些修 ...
- C语言中‘\n'为什么能表示CRLF两个字节
为什么要说这个简单的问题? 众所周知,在Windows下文本文件的换行符是CRLF,占两个字节.在Unix下是LF,占一个字节.(还有奇葩的Mac是CR).但是C语言中直接printf一个 ‘\n’, ...
- Python和VS
下载VS Code 安装插件Python 安装Python,注意这里需要把Python的目录配置到环境变量中 文档结构非常重要,py文件一定位于根目录,.vscode平级:我曾经因为py文件在.vsc ...
- qt 5 界面美化
大家都知道,用UI做起界面来非常方便,但是如果我们不熟练他的操作的话,做起来也会有不少布局的麻烦, 所以,我打算写一篇文章来记录自己参考大牛用代码写界面的文章,感谢百度,感谢各位QT大牛的帮助. 所谓 ...
- vs2013下使用Assist X的破解方法
Assist X的破解下载:http://pan.baidu.com/s/1kTnDH23 密码:j9jp 01.安装,点击VA_X_Setup2042.exe 安装 02.破解 找到这样的目录:C: ...
- PHP扩展编写示例
1.生成描述文件,包含对函数等的定义 [chengyi@localhost php-extension]$ cat hello_cy.def string self_concat(string str ...
- Google考虑抛弃Cookies机制
根据华尔街日报的报道,Google 正在考虑抛弃古老的浏览器 cookies 来追踪用户信息的机制.作为替代,Google 将开发一种「个人匿名标识机制」.Google 早前已经计划在 IE 和 iP ...