首頁 > web前端 > html教學 > 了解CSS中的@ AT规则_html/css_WEB-ITnose

了解CSS中的@ AT规则_html/css_WEB-ITnose

WBOY
發布: 2016-06-24 11:25:52
原創
1095 人瀏覽過

常规规则

@[KEYWORD] (RULE);
登入後複製
  • @charset

    定义字符集。字符设置据说会被HTTP头覆盖。

    @charset "utf-8";
    登入後複製
  • @import

    导入其他CSS样式文件。实际上线时候,不建议使用,多请求,阻塞加载之类。但,本地开发可以使用,用做CSS模块化开发,然后使用一些(如grunt)工具进行压缩并合并。但是呢,相比less, sass等还是有不足,就是 @import语句只能在CSS文件顶部,使得文件的前后关系控制,就不那么灵活。

    @import 'global.css';
    登入後複製
  • @namespace

    此规则应用到XML HTML(XHTML)上特别有用,因为这样的话XHTML元素可以作为选择器在CSS中使用。

    /* XHTML命名空间 */@namespace url(http://www.w3.org/1999/xhtml);/* 内嵌在XHTML的SVG的命名空间 */@namespace svg url(http://www.w3.org/2000/svg);
    登入後複製

嵌套规则

@[KEYWORD] {  /* 嵌套语句 */}
登入後複製
  • @document

    CSS 4.0规范有相关说明。如果文档满足给定的一些条件,就可以应用我们指定的一些样式。比如说,这个CSS文件被子站A调用,和被子站C调用,我们可以通过域名匹配来执行不同的CSS样式。这样,我们可以有效避免冲突,或者防止外链之类。

    @document   /* 页面URL需要是 */  url(http://www.zhangxinxu.com/),    /* 页面URL的开头必须是... */  url-prefix(www.zhangxinxu.com/wordpress/),    /* 该域上的所有页面 */  domain(zhangxinxu.com),  /* 所有https协议页面 */  regexp("https:.*"){    /* 开始样式 */  body { font-family: Comic Sans; }}
    登入後複製
  • @font-face

    这个大家可能比较熟,自定义字体用的。IE6也支持。目前相关文章也挺多,就不啰嗦,放个示意:

    @font-face {  font-family: 'MyWebFont';  src:  url('myfont.woff2') format('woff2'),        url('myfont.woff') format('woff');}
    登入後複製
  • @keyframes

    喜欢CSS3的同学这个也耳熟能详了,输入法打出来发现居然是“详”而不是“翔”,原来不是“听得太多耳朵都能拉出屎来”的意思哦,学习了!

    @keyframes fadeIn {  0% {    opacity: 0;  }  100% {    opacity: 1;  }}
    登入後複製
  • @media

    媒介查询,解释非常常用的。响应式宽度啊,retina屏幕判断啦,打印屏幕啦,甚至IE7,IE8浏览器的hack啦,很多,本文标题是了解,不深入,给大家简单演示下使用就好了:

    @media all and (min-width: 1280px) {    /* 宽度大于1280干嘛干嘛嘞... */ }
    登入後複製
    @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 2dppx) {     /* Retina屏幕干嘛干嘛嘞... */ }
    登入後複製
    @media print {    /* 闪开闪开,我要打印啦! */ }
    登入後複製
    @media \0screen\,screen\9 {    /* IE7,IE8干嘛干嘛嘞... */ }
    登入後複製
    @media screen\9 {    /* IE7干嘛干嘛嘞... */ }
    登入後複製
  • @page

    这个规则用在打印文档时候修改一些CSS属性。使用 @page我们只能改变部分CSS属性,例如间距属性 margin, 打印相关的 orphans, widows, 以及 page-break-*, 其他CSS属性会被忽略。

    @page :first {  margin: 1in;}
    登入後複製
  • @supports

    是否支持某CSS属性声明的AT规则,浏览器对齐支持性越来越好了,鄙人已经在实际项目中使用了这个规则,干嘛用呢?说来惭愧,当作hack使用了。具体细节不表。下面是一些使用示意:

    /* 检查是否支持CSS声明 */ @supports (display: flex) {  .module { display: flex; }}/* 检查多个条件 */ @supports (display: flex) and (-webkit-appearance: checkbox) {  .module { display: flex; }}
    登入後複製
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板