CSS---基础外部样式表

Posted 2020-07-02 Heroine.z

<link rel="stylesheet" type="text/css" href="style.css" media="all">

1.CSS用link来链接样式表和文档。link需要放到head元素中，但不能放到其他元素内部。

对于CSS文档，type总是设置为text/css。这个值描述了使用link标记加载的数据类型。

href属性值可以是绝对的URL也可以是相对的。

media属性：

　　all：用于所有表现的媒体。

　　screen：在屏幕媒体（如桌面计算机监视器）中表现文档使用。在这种系统上运行所有web浏览器都是屏幕媒体的用户代理。
　　print：为视力正常的用户打印文档使用，另外还会在显示文档的“打印预览”时使用。

　　projection：用于投影媒体，如发表演讲时显示幻灯片的数字投影仪。

rel的属性值定为"alternate stylesheet"就可以定义候选样式表了。

<style type="text/css">
@import url(styles.css) all;
@import url(styles.css) projection,print;
@import url(http://example.org/library/styles.css);
</style>

2.style一定要用type属性。@import用于指示web浏览器加载一个外部样式表。必须写在其他CSS规则之前，之后兼容用户代理就会将其忽略。
　　文档中可以有不只一个@import语句，但是不同与link，每个@import样式表都会加载并使用，所以额发指定候选式样表。

　　与link一样，可以限制所导入的样式表应用于一种或多种媒体。

　　如果有一个外部样式表，它需要使用其他外部样式表中的样式。此时@import就非常有用。由于外部样式表不能包含任何文档标记，所以不能用link元素。

3.如何让较老的浏览器也能访问自己的文档

　　如果一个浏览器无法识别<style>和</style>就会将其统统忽略，不过这些标记中的声明不一定会忽略，因为对于浏览器而言，它们看上去就像是正常的文本。所以样式的声明会出现在页面的最上面。（当然，浏览器应该忽略这些文本，因为这不是body元素的一部分，但是事实总是相反）。解决这个问题的办法，建议将声明包含在一个注释标记中。

    <style type="text/css"><!-- 
    @import url(style.css);
        h1{
            color: azure;
        }
     --></style>

4.style属性可以与任何html标记关联。一个内联style属性中只能放一个声明块，而不能放整个样式表。不能在style属性中放@import，也不能包含完整的规则。style属性值只能是规则中出现在大括号之间的部分。