HTML5与CSS3基础教程-第8章 操作样式表

第8章 操作样式表

《HTML5与CSS3基础教程（第8版）》 第8章读书笔记

• 2020/03/04

• 外部样式表的引用： （p140）

  • 使用link链接引用；
  • 使用@import引用。

  link与@import的区别：

  1. 两者导入的语法不同

     link引入css语法：

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

     @import引入css语法：

     <style type="text/css"> @import url("style.css") </style>
     

  2. link和import语法结构不同

     link是html标签，只能放在html源代码中使用，link除了可以加载css外，还可以做很多其他事情，比如定义RSS，定义rel连接属性等。

     @import看作CSS样式，只能加载CSS

  3. 加载顺序不同

     link方式，浏览器将css文件和HTML的主题部分一同加载，所以显示出来的页面从一开始就是带样式效果的。

     @import方式，浏览器则会先装在完整个HTML文件再装载CSS文件

  4. 权重

     link方式的样式的权重高于@ import的权重。

  5. 当使用javascript控制DOM去改变样式的，只能用link方式，因为@import眼里只有CSS ，不是DOM可以操控的。

  6. 兼容性

     link是XHTML标签，无兼容问题，@import是在CSS2.1提出的，低版本的浏览器不支持

• 使用媒体相关的样式表： （p147 - 148）

  可以指定一个只用于特定输出的样式表，比如用于打印的样式表。

  • 使用link或style元素时添加media属性： <link rel="stylesheet" href="style.css" media="print"/> media的值有all、aural、braille、handheld、print、projection、screen、tty和tv。

  • 也可以使用CSS3引入的@media功能 ：

    @media print{
        body{
            ...
        }
        
        p{
            ...
        }
        ...
    }