`
ningzhisheng
  • 浏览: 11728 次
  • 性别: Icon_minigender_1
最近访客 更多访客>>
社区版块
存档分类
最新评论

CSS教程15 CSS的At-Rules@规则

阅读更多
At-rules分装不同的CSS规则,应用在特定场合。

Importing

  import@规则引用另外的样式。例如,如果你想添加另外样式到现在的样式,可以这样:
  @import url(addonstyles.css);
  这很像使用link元素连接CSS到HTML,本质上说有一个内容样式像下面:
  <style type="text/css" media="all">@import url(monkey.css);</style>
  这是为了照顾老版本浏览器,比如Netscape4不支持@规则所以不能链接样式表,已经构建好标签的HTML页面会失去样式表提供的功能。

Media types

  media@规则应用内容使用特定媒体,比如打印,例如:

Example Source Code [www.52css.com]
@media print {
    body {
        font-size: 10pt;
        font-family: times new roman, times, serif;
    }
    #navigation {
        display: none;
    }
}
  媒体形式:
  all,所有媒体。
  aural,言语合成器。
  handheld,移动设备
  print,打印
  projection,投影
  screen,电脑屏幕
  你还可以使用braille,embossed,tty或者tv。
  注意:说了这么多,IE只支持all,screen和print。

Charachter sets 字符设定

  charset@规则简单设定外部样式里的编码。它出现在样式的最上面例如@charset "ISO-8859-1";

Font faces 字体外观

  font-face@规则用来详细描述字体,可以在CSS里嵌入外部字体。
  它需要font-family描述符引用字体,它的值可以是字体的名称或是新命名一个。嵌入一个字体,使用src描述符。其他添加到font-face@规则里的描述符将影响正在使用的内含字体,例如如果你添加font-weight: bold粗体到@规则,font-family的src只能运用到带有font-family属性的选择器里,而且选择器里font-weight属性同样设置成bold。
  看下面例子:

Example Source Code [www.52css.com]
@font-face {
    font-family: somerandomfontname;
    src: url(somefont.eot);
    font-weight: bold;
}
p {
    font-family: somerandomfontname;
    font-weight: bold;
}
  如上面的例子,段落里的字体将是somefont的字体(如果p选择器没有font-weight: bold,那字体就不是somefont)
  嵌入字体还凑合着用,因为Mozilla浏览器不支持也没有计划添加这个功能。只有IE有分寸的支持,但这也不是说可以直接使用,IE浏览器嵌入字体,你还需要微软WEFT软件,它提供Truetype字体转换成压缩的OpenType字体(只有这个你才能使用URI指定)。由于这个限制(显得非常复杂)兼容性,最好不要使用系统没有的字体。

Pages

  page@规则服务页面媒体,是个高级方式应用于打印媒体样式。它定义了页面块,在盒模型上扩展,所以你可以定义单一页面的大小和表现。
  应用page@规则有许多规定,比如没有padding和border,而且也不上我们说的电脑屏幕,所以pixels和ems单位不被允许使用。
  有许多特定属性可以使用,比如size,可以设定portrait纵向,landscape横向,auto自动或长度。marks属性可以用来定义裁剪标志

Example Source Code [www.52css.com]
@page {
    size: 15cm 20cm;
    margin: 3cm;
    marks: cross;
}
页面媒体里的伪标签

  有三种伪标签用来链接特定page@规则,如下形式:@page :pseudo-class {stuff}。
  :first应用到页面媒体里的第一页
  :left和:right应用到左边和左边页面。这可能用在指定有非常大margin的左边页面和有非常大margin的右边页面。
  还有一些页面@规则,比如page-breaks页面中断和named pages页面命名,但这些@规则在浏览器里很难工作,你也许浪费了许多时间阅读这篇文章,不过这些都是不错的想法。
分享到:
评论

相关推荐

    css2. 0中文手册-好东西

    Css2.0中文手册提供了完整的 CSS2.0 的属性(Properties)、规则(At-Rules)、伪类(Pseudo-Classes)、伪元素(Pseudo-Elements)、声明 (Declarations)、单位(Units)、选择符(Se lectors)的介绍。其内容涵括了 W3C 的 CSS...

    css20_css_

    CSS 2.0样式表中文手册手册提供了完整的 CSS2.0 的属性(Properties)、规则(At-Rules)、伪类(Pseudo-Classes)、伪元素(Pseudo-Elements)、声明(Declarations)、单位(Units)、选择符(Selectors)的介绍。其内容涵括了 ...

    CSS2.0_CSS教程_

    手册提供了完整的 CSS2.0 的属性(Properties)、规则(At-Rules)、伪类(Pseudo-Classes)、伪元素(Pseudo-Elements)、声明(Declarations)、单位(Units)、选择符(Selectors)的介绍。其内容涵括了 W3C 的 CSS2.0 标准,...

    css详细教程.chm

     手册提供了完整的 CSS2.0 的属性(Properties)、规则(At-Rules)、伪类(Pseudo-Classes)、伪元素(Pseudo-Elements)、声明(Declarations)、单位(Units)、选择符(Selectors)的介绍。其内容涵括了 W3C 的 CSS2.0 标准,...

    CSS2.0和CSS3.0 最新中文版参考手册(完整版)

     手册提供了完整的 CSS2.0 的属性(Properties)、规则(At-Rules)、伪类(Pseudo-Classes)、伪元素(Pseudo-Elements)、声明(Declarations)、单位(Units)、选择符(Selectors)的介绍。其内容涵括了 W3C 的 CSS2.0 标准,...

    CSS 2.0中文手册-苏沈小雨.rar

     手册提供了完整的 CSS2.0 的属性(Properties)、规则(At-Rules)、伪类(Pseudo-Classes)、伪元素(Pseudo-Elements)、声明(Declarations)、单位(Units)、选择符(Selectors)的介绍。其内容涵括了 W3C 的 CSS2.0 标准,...

    css样式教程大全,简单方便查询

     手册提供了完整的 CSS2.0 的属性(Properties)、规则(At-Rules)、伪类(Pseudo-Classes)、伪元素(Pseudo-Elements)、声明(Declarations)、单位(Units)、选择符(Selectors)的介绍。其内容涵括了 W3C 的 CSS2.0 标准,...

    SS2.0和CSS3.0 最新中文版参考手册(完整版)

     手册提供了完整的 CSS2.0 的属性(Properties)、规则(At-Rules)、伪类(Pseudo-Classes)、伪元素(Pseudo-Elements)、声明(Declarations)、单位(Units)、选择符(Selectors)的介绍。其内容涵括了 W3C 的 CSS2.0 标准,...

    CSS2.0手册(苏沈小雨版)

    手册提供了完整的 CSS2.0 的属性(Properties)、规则(At-Rules)、伪类(Pseudo-Classes)、伪元素(Pseudo-Elements)、声明(Declarations)、单位(Units)、选择符(Se lectors)的介绍。其内容涵括了 W3C 的 CSS2.0 标准,...

    CSS的私有属性小结(针对FireFox浏览器)

    At-rules @-moz-documenturl(http://www.w3.org/),url-prefix(http://www.w3.org/Style/),domain(jb51.net){div{color:red;}}  url是指定样式在哪里网址下可以用,url-prefix是指定样式在哪个目录下,domain是指定...

    eslint-plugin-tailwindcss:用于Tailwind CSS用法的ESLint插件

    eslint-plugin-tailwindcss 使用 v2.0.3强制执行最佳做法和并发性的规则安装您首先需要安装 : $ npm i eslint --save-dev接下来,安装eslint-plugin-tailwindcss : $ npm install eslint-plugin-tailwindcss --...

    CSS-style-sheet.rar_StyleSheet.css_style

    CSS 样式表中文手册,手册提供了完整的 CSS2.0 的属性(Properties)、规则(At-Rules)、伪类(Pseudo-Classes)、伪元素(Pseudo-Elements)、声明(Declarations)、单位(Units)、选择符(Selectors)的介绍。

    CSS 2.0样式表中文手册(CHM)

    手册提供了完整的 CSS2.0 的属性(Properties)、规则(At-Rules)、伪类(Pseudo-Classes)、伪元素(Pseudo-Elements)、声明(Declarations)、单位(Units)、选择符(Selectors)的介绍。其内容涵括了 W3C 的 CSS2.0 标准,...

    css网页设计教程,css电子书

    手册提供了完整的 CSS2.0 的属性(Properties)、规则(At-Rules)、伪类(Pseudo-Classes)、伪元素(Pseudo-Elements)、声明(Declarations)、单位(Units)、选择符(Selectors)的介绍。其内容涵括了 W3C 的 CSS2.0 标准,...

    css2中文手册

      &lt;br&gt;手册提供了完整的 CSS2.0 的属性(Properties)、规则(At-Rules)、伪类(Pseudo-Classes)、伪元素(Pseudo-Elements)、声明(Declarations)、单位(Units)、选择符(Se lectors)的介绍。其内容涵括了 W3C 的 ...

    css2.0中文手册

    手册提供了完整的CSS2.0的属性(Properties)、规则(At-Rules)、伪类(Pseudo-Classes)、伪元素(Pseudo-Elements)、声明(Declarations)、单位(Units)、选择符(Selectors)的介绍。其内容涵括了W3C的CSS2.0标准,以及...

    CSS样式表手册2.0版 网页设计制作

    本手册针对的是已有一定网页设计制作... 手册提供了完整的 CSS2.0 的属性(Properties)、规则(At-Rules)、伪类(Pseudo-Classes)、伪元素(Pseudo-Elements)、声明(Declarations)、单位(Units)、选择符(Selectors)的介绍。

    css-exclude:排除在多个文件中找到的 CSS 规则

    css-exclude 是一个简单的实用程序,它允许您输入两个 css 文件,并让该实用程序打印出在第一个文件中找到的规则/at-rules,而不是在第二个文件中。 css-exclude 不关心文档顺序,这使得在复杂的 CSS 文件上使用很...

    css2.0 Handbook 样式表中文手册

    css2.0 Handbook。...有属性(Properties) 选择符(Selectors) 伪类(Pseudo-Classes) 伪对象(Pseudo-Elements) 规则(At-Rules) 声明(Declaration) 单位(Units) 滤镜(Filters) css handbook rainer's dhtml CSS参考

    CSS2.0.zip

    手册提供了完整的 CSS2.0 的属性(Properties)、规则(At-Rules)、伪类(Pseudo-Classes)、伪元素(Pseudo-Elements)、声明(Declarations)、单位(Units)、选择符(Selectors)的介绍。

Global site tag (gtag.js) - Google Analytics