CSS级联样式表的优势与使用方式

CSS:级联样式表( 层叠样式表)   Cascading  Style  Sheet

CSS的优势 :

       1. 内容与表现分离

        2.网页的表现统一,容易修改

        3. 丰富的样式, 使页面布局更加灵活 

        4.减少网页的代码量,增加网页的浏览速度,节省网络宽带

        5. 运用独立于页面的CSS,有利于网页被搜索引擎收录

CSS语法规则 :

        选择器{ 声明1; 声明2 ; 声明3; .....}

CSS在html页面中的使用: (3种)
   1. 行内样式: 在开标签中, 通过style属性使用
    2. 内部样式: 在head中, 通过style标签定义选择器
    3. 外部样式: 编写css文件, 在head中引用css文件
        外部样式的引用方式: (2种)
            1) 使用link标签引用
            2) 在style标签中通过@import命令引用
        面试题: 对比外部样式的2种引用方式
            1) 归属:
                link属于html4
                @import属于css2.1
            2) 加载顺序:
                link按照html标签的解析方式: 根据标签的位置由上到下解析. 样式效果先于页面内加载
                @import会在页面内容加载完毕后才解析
            3) 优劣: 在网速不好的情况下
                    link: 必须页面完全加载成功才能看到. 用户永远看到的是完整的页面效果
                    @import: 用户会先看到无效果渲染的页面内容, 然后逐步看到渲染效果

3种css使用方式之间的优先级: (当方式效果冲突时, 最终的渲染效果使用谁的)
    行内 > 内部 > 外部
    注1: 以上优先顺序只针对@import方式
    注2: 如果使用link引用外部样式, 则内部样式和外部样式之间没有绝对的优先顺序

3种css使用方式的使用频率: 尽量使用外部样式, 少量使用内部样式, 尽量不用行内样式


版权声明:本文为yiXin_Chen原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。