美文网首页菜鸟前端工程师程序员我爱编程
html+css学习笔记007-样式优先级0外链css样式表

html+css学习笔记007-样式优先级0外链css样式表

作者: Mr柳上原 | 来源:发表于2018-05-24 11:49 被阅读19次

    Author:Mr.柳上原

    • 付出不亚于任何的努力
    • 愿我们所有的努力,都不会被生活辜负
    • 不忘初心,方得始终

    心比天高

    手如残废

    刚学习前端的时候理解较快

    老师布置的课后作业都能飞快完成

    于是蜜汁自信

    觉得前端不过如此

    越深入的去学习

    才发现自己是多么的井底之蛙

    <!DOCTYPE html> <!-- 文档类型:标准html文档 -->
    
    <html lang='en'> <!-- html根标签 翻译文字:英文 -->
    
    <head> <!-- 网页头部 -->
    
    <meat charset='UTF-8'/> <!-- 网页字符编码 -->
    
    <meat name='Keywords' content='关键词1,关键词2'/>
    
    <meat name='Description' content='网站说明'/>
    
    <meat name='Author' content='作者'/>
    
    <title>前端59期学员作业</title> <!-- 网页标题 -->
    
    <link rel='stylesheet' type='text/css' href='css/css1.css' /> <!-- 外链样式表 -->
    
    <style type='text/css'> /*内部样式表*/
    
    /* 选择器优先级 */
    
    *{ }
    div{ }
    .box{ }
    #box{ } /* * < 元素名 < class < id 选择范围越广,优先级越低 */
    
    .box{ }
    .box{ } /* 选择器相同的时候,后面的样式覆盖前面 */
    
    #box ul .li{ }
    .box #ul .li{ } /* 复杂情况下,id选择器个数 > class选择器个数 > 元素名选择器个数 */
    
    /* 选择器使用原则:准确的选中元素,利于维护 */
    
    
    /* 样式表优先级 */
    
    外链样式表 < 内嵌样式表 < 行间样式表 /* 就近原则 */
    
    .class{... !important} /* 增加权重,高于行间样式表 */
    
    </style>
    
    </head>
    
    <body> <!-- 网页主干:可视化区域 -->
    
    <div id='box' class='box'>
    <ul id='ul' class='ul'>
    <li id='li' class='li'></li>
    <li></li>
    </ul>
    </div>
    
    </body>
    
    </html>
    

    相关文章

      网友评论

        本文标题:html+css学习笔记007-样式优先级0外链css样式表

        本文链接:https://www.haomeiwen.com/subject/asojjftx.html