美文网首页
CSS的三种样式表和优先级

CSS的三种样式表和优先级

作者: 切切歆语 | 来源:发表于2019-11-25 23:31 被阅读0次

    1、外部样式表
    当样式需要应用于很多页面时,外部样式表将是理想的选择。在使用外部样式表的情况下,你可以通过改变一个文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式表。

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>CSS外部样式表</title>
        </head>
      <!--引入CSS样式表 -->
        <link rel="stylesheet" type="text/css" href="../css/css1.1.css"/> 
        </style>
        <body>
            
        <h1>我是大标题哦!</h1>
            
        </body>
    </html>
    

    css1.1样式表

    h1{
        font-family: "agency fb";
        font-size: 18px;
        color: #0000FF;
    }
    

    2、内部样式表
    当单个文档需要特殊的样式时,就应该使用内部样式表。你可以使用 <style> 标签在文档头部定义内部样式表

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>CSS内部样式表</title>
        </head>
        <style type="text/css">
            div{
                widows: auto;
                height: 2em;
                background: red;
            }
        
        </style>
        <body>
        <div>
            <p>我是一个div</p>
        </div>
    
            
        </body>
    </html>
    

    3、内联样式
    由于要将表现和内容混杂在一起,内联样式会损失掉样式表的许多优势。请慎用这种方法,例如当样式仅需要在一个元素上应用一次时。

    <p style="font-size:1cm;color:red;border:1ps solid blue">这是一个段落    </p>
    

    样式的优先级
    (外部样式)External style sheet <(内部样式)Internal style sheet <(内联样式)Inline style

    相关文章

      网友评论

          本文标题:CSS的三种样式表和优先级

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