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的更多相关文章

  1. 【CSS3】Advanced3:Universal, Child, and Adjacent Selectors

    1.Universal selectors eg:#target*{ } 2.Child selectors < something immediately nested within some ...

  2. 【HTML】Advanced5:Accessible Forms

    1.label <form> <label for="yourName">Your Name</label> <input name=&q ...

  3. 【CSS3】Advanced11:Media Queries

    1.Browser-size specific CSS @media screen and (max/min-width:1000px){} 2.Orientation-specific CSS? @ ...

  4. 【CSS3】Advanced10:Gradient

    1.background:linear-gradient(20deg/(to) bottom right,orange,red,hsl(60,100%,50%)); 2.-webkit-chrome/ ...

  5. 【CSS3】Advanced9:Transformation

    1.transform:rotate(-10deg) skew(20deg,10deg) scaling(2/1,2) translate/移动(100px,200px) 2.transform:ma ...

  6. 【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 ...

  7. 【CSS3】Advanced7:CSS Transitions

    1.animate parts of your design without the need for the likes of JavaScrip 2.allowing smooth animati ...

  8. 【CSS3】Advanced6:Attribute Selectors

    1.with the attribute abbr[title]{color:red} 2.with the attribute and it's value input[type=text][dis ...

  9. 【CSS3】Advanced4:Advanced Colors

    1.rgba(red,green,blue,alpha(不透明度0.0(完全透明)与 1.0(完全不透明)) 2.HSLa(hue(色调 0red 120green 240blue),saturati ...

随机推荐

  1. 图片裁切插件jCrop的使用心得(四)

    在本篇中我来介绍一下jcrop如何实时展现用户裁切的效果图以及在项目中使用该插件注意的问题. 首先,你们在创建头像时,都可以在旁边实时的看到我裁切后的效果图,就如博客园. 这个是如何实现的呢,其实并不 ...

  2. laravel1

    生成模型的时候 同时生成migration文件php artisan make:model User --migration

  3. 怎么预防sql注入攻击

    假设sql是搜索用户A的文章,sql会是这样: select * from table where owner='A'; sql注入攻击者会修改用户名来实现攻击,例如把A 改成A' or 1='1 组 ...

  4. [转]利用/*+Ordered*/提高查询性能

    [转]利用/*+Ordered*/提高查询性能 2009-02-06 10:46:27|  分类: Oracle |  标签: |字号大中小 订阅  消耗在准备利用Oracle执行计划机制提高查询性能 ...

  5. JDBC和DBUtils区别(查询时jdbc只能返回ResultSet需要po转vo,dbutils返回的BeanListHandler与BeanHandler对应集合与对象)

    17:34 2013/6/7 JDBC //添加客户 public void addNewCustomer(Customer c) throws DAOException { Connection c ...

  6. Spring3事务管理——使用@Transactional 注解(转)

    文章地址:http://my.oschina.net/guanzhenxing/blog/214228

  7. 让Eclipse使用新版本的JRE

    更新到新的 Mac OS X 再打开Eclipse 编译程序会报错, Exception in thread "main" java.lang.UnsupportedClassVe ...

  8. PHP之关闭网页错误提示

    关闭PHP错误脚本提示是程序上线了必须做的一件事情,就是不管程序怎么报错我们都不能让错误日志在服务器上给大家看到,下面我来总结两种关闭PHP错误脚本提示的具体方法 最简单的办法就是直接在php程序代码 ...

  9. csuoj 1350: To Add Which?

    这个题目其实很简单,可惜当时比赛的时候看到出的人少,以为有trick,就和队友扯淡去了: 因为每个数总是被相邻的数影响,所以往前往后扫两遍就行了: #include<cstdio> #in ...

  10. javascript 冒泡

    http://www.cnblogs.com/hh54188/archive/2012/02/08/2343357.html http://blog.csdn.net/xuefeng0707/arti ...