【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 ...
随机推荐
- MVC+EF 随笔小计————Html Helpers
理论基础 -- Html Helpers 主要分成输入类和显示类. 输入类: TextArea, TextBox Password Hidden DropDownList ListBox (与Drop ...
- 【BZOJ】1051: [HAOI2006]受欢迎的牛
[HAOI2006]受欢迎的牛 Description 每一头牛的愿望就是变成一头最受欢迎的牛.现在有N头牛,给你M对整数(A,B),表示牛A认为牛B受欢迎. 这种关系是具有传递性的,如果A认为B受欢 ...
- 树莓派 raspberry 入门之安装操作系统以及配置
最近新入手一树莓派,型号是2代B,屏幕是微雪的7 inch c型 显示屏.下面来教大家怎么点亮树莓派. 第一步,装好显示器,显示器的电源接在树莓派的usb口上,HDMI口不多说,连上.然后装好鼠标.键 ...
- Hadoop 2.4.0完全分布式平台搭建、配置、安装
一:系统安装与配置 Hadoop选择下载2.4.0 http://hadoop.apache.org / http://mirror.bit.edu.cn/apache/hadoop/common/h ...
- 基于协同过滤的个性化Web推荐
下面这是论文笔记,其实主要是摘抄,这片博士论文很有逻辑性,层层深入,所以笔者保留的比较多. 看到第二章,我发现其实这片文章对我来说更多是科普,科普吧…… 一.论文来源 Personalized Web ...
- 浅谈HTTP响应拆分攻击
在本文中,我们将探讨何谓HTTP响应拆分以及攻击行为是怎样进行的.一旦彻底理解了其发生原理(该原理往往被人所误解),我们就可以探究如何利用响应拆分执行跨站点脚本(简称XSS).接下来自然就是讨论如果目 ...
- 解决“重新安装vmware-tools”灰色而无法安装的问题
前几天重装系统,之后虚拟机需要重新装,装好后要使用vmware-tools实现文件共享,却发现虚拟机那里显示为灰色的,无法安装vmware-tools,在共享文件夹那里设置好共享的文件夹猴也没有用,/ ...
- RecyclerView一个奇怪的npe异常
java.lang.NullPointerException at android.support.v7.widget.RecyclerView.computeVerticalScrollOffset ...
- Android 开发绕不过的坑:你的 Bitmap 究竟占多大内存?
0.写在前面 本文涉及到屏幕密度的讨论,这里先要搞清楚 DisplayMetrics 的两个变量,摘录官方文档的解释: density:The logical density of the displ ...
- uva 11646 - Athletics Track
题意:如图,体育场的跑道一圈是400米,其中弯道是两段半径相同的圆弧.已知矩形的长宽比例为a:b,求长和宽的具体数值. 注意:圆弧的圆心在纵轴线上! #include<iostream> ...