`

CSS @import at规则

 
阅读更多

at规则
HTMLDog指南 > CSS高级指南 > at规则

at(@)规则把CSS规则都注入了一个压缩胶囊中,并且应用到指定的某些事物中。喔。

导入
导入import at规则将吞入另外的样式表。比如,如果你需要把另外的样式表的样式添加到现有的,你可以这样做:

@import url(addonstyles.css);
这经常用来取代连接CSS到HTML中的标签,本质上就是一个内部样式表的形式,看起来像这样:
@import url(monkey.css);

这样做的好处是,一些老浏览器如Netscape 4.x不接受at规则,进而不连接样式表,从而,如果你有良好结构的标记,只剩下朴素功能的HTML(尽管没有样式)。

媒体类型
媒体media at规则将把内容应用到指定的媒体,比如打印。比如

@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(电视)。

字符集
字符集charset at规则设置一个外部样式的字符编码,它应该出现在样式的顶端,大致如此:@charset "ISO-8859-1";

字体外观
字体外观font-face at规则用来详细描述一个能嵌入CSS的外部字体。

它 必须一个font-family的字体可以参考的描述符,值可以是系统已经存在的字体名称(这种情况发生时会覆盖掉该字体),也可以是全新的名字。为了嵌 入一个字体,需用使用src描述符。字体外观at规则的其他描述符是使用该字体的一些条件,比如,在at规则里面增加一条font-weight: bold样式,如果font-weight属性也设置了bold,font-family的src将应用该规则到带有font-family属性的选择 符。

使用字体外形at规则看起来像这样:
@font-face { font-family: somerandomfontname; src: url(somefont.eot); font-weight: bold; } p { font-family: somerandomfontname; font-weight: bold; }

这将使somefont.eot这个字体应用到段落里(如果p选择符没有设置成font-weight: bold的话就不会)。

注意
现 在内嵌字体的支持度还算凑合。基于Mozilla的浏览器不支持,并且也没有最近的计划显示它会支持。仅Internet Explorer似有一定程度上的支持,但也没有直接得方法。为了在IE中嵌入字体,你需要使用微软的WEFT软件,它会把一个TrueType字体转换 成一个压缩的OpenType字体(这也值嗯嗯在指定的URI上使用)。因为有限的(也相当复杂)的兼容性,最好不要使用没有适合的可替换系统字体的内嵌 字体。

页面
页面page at规则用于页式(分页)媒体,是一个把样式应用到打印媒体的先进方法。它定义页面块的盒状模型(见边界和补白)扩展因此你可以定义一个独立页面的尺寸和表现。

应用page at规则有许多约定,比如没有补白和边界,我们也没有谈论电脑屏幕──点(pixel)和em作为单位是不可以的。

可以使用很多指定属性,比如尺寸size,可以设置为portrait(竖排格式)、landscape(横排格式)、auto(自动)或者一个高度。marks属性也可以用来定义裁剪标志。

@page { size: 15cm 20cm; margin: 3cm; marks: cross; }

页式媒体的伪类
有三个伪类被用来指定与page at规则相结合,用如此形式:@page :pseudo-class { stuff }。

:first应用到页式媒体的第一页。

:left和:right分别用于左边和右边的页面。这可以用来指定左边或者右边页面一个更大的边界。

还有其他更多的小方面指定页面at规则,比如页面分隔符和命名页面,但鉴于这个at规则很难在任何浏览器上工作,你可能在浪费时间在阅读这些东西上面。虽然还有更妙的主意……

分享到:
评论

相关推荐

    CSS中@用法小结(示例详解)

    在CSS中,`@`符号是用来开启特殊声明或规则的,称为`at-rule`。这些规则提供了CSS标准之外的功能,用于定义样式表的行为或者引入额外的样式资源。下面是对一些常见`@`规则的详细解释: 1. **@charset**: `@...

    简明 CSS 2.1 参考手册【作者:金步国】

    导入样式表的方法(示范) <style type="text/css" media="all" title="应用于所有媒体的样式"> ... 的At规则来指定其自身使用的字符集。 @import 必须放置在常规样式之前,不管是在中还是在外部样式表中。

    CSS中一些@规则的用法小结

    在CSS中,`@规则`(也称为at-rules)是一种特殊的声明,它们不用于定义样式,而是指导浏览器如何处理CSS样式表。这些规则通常用于引入外部资源、定义动画、控制媒体查询等。以下是关于一些常见`@规则`的详细说明: ...

    CSS 一些使用用法

    `@import` 规则用于在CSS文件中引入另一个外部CSS文件。这有助于减少代码重复,维护大型网站的样式时尤其有用。例如: ```css @import url('样式地址'); ``` 这里的“样式地址”是包含CSS规则的外部文件的URL。在...

    前端必考面试

    link 会在页面加载时同时被加载,而 @import 引用的 CSS 会等到页面被加载完再加载。import 只在 IE5 以上才能识别,而 link 是 XHTML 标签,无兼容问题。link 方式的样式的权重高于 @import 的权重。 四、浏览器的...

    IE5,IE6,IE7,IE8的css兼容性列表

    首先,我们来看看At-rules,即CSS中的元规则。在CSS2.1中,@charset用于定义文档的字符编码,IE5到IE8都支持;@import用于导入外部样式表,也均被支持;而@media和@page用于响应式布局和页面打印,IE5和IE5.5不支持@...

    受规则支持:对CSS规则的功能测试支持

    isAtRuleSupported ... import isAtRuleSupported from '@ryanmorr/is-at-rule-supported' ; // Check if the @keyframes rule supported isAtRuleSupported ( '@keyframes' ) ; // Check if the @supports rule s

    Cascading Style Sheets 2.0 Programmer's Reference by Eric Meyer

    ### 选择器、伪类、伪元素与AT规则 #### 选择器类型 - **类型选择器**:基于元素类型(如`p`、`div`)选择元素。 - **后代选择器**:选择特定元素的后代。 - **通用选择器**:选择所有元素。 - **子元素选择器**:...

    个人资料:个人网站

    用于指定族CSS规则: font-family: 'Lobster', cursive; 火狐缓存 如果您希望Firefox始终下载最新文件,则可以按以下方式更改doc频率设置: type this into the address bar: about:config you will see a long ...

    百度富文本编辑器(只需要修改配置文件即可)

    例如,对于安全问题,UEditor提供了过滤规则,可以防止恶意代码注入;对于性能问题,可以优化图片上传和内容加载机制。 总的来说,百度富文本编辑器以其高度可配置性和广泛的功能,为Web开发提供了便捷的文本编辑...

    2024年高频八股文面试题合集

    - **JS模块化**:JavaScript中使用`import`和`export`语句进行模块定义和导入。例如,使用ES6模块标准。 - **CSS模块化**:CSS模块化涉及将样式与特定组件关联,从而避免全局样式冲突。可以使用CSS预处理器如Sass...

    htmlparser(c#,java)

    String title = ((Tag) titleNodes.elementAt(0)).getAttribute("content"); // 处理标题... } ``` 6. 扩展功能: - HTMLParser还可能支持CSS选择器、XPath表达式等高级查询方式,方便地定位HTML元素。 - 它...

    Python实现简单的HttpServer服务器示例

    print("serving at port", PORT) httpd.serve_forever() ``` 这段代码创建了一个监听8000端口的HTTP服务器,它可以处理基本的GET请求,并返回指定目录下的静态文件。 接下来,我们讨论一下HTTP协议。HTTP是超...

Global site tag (gtag.js) - Google Analytics