CSSXUEXI

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>css学习</title>
        <style>
            #idchoose{color: aqua;}
            .classchoose{color: firebrick; text-align: center;}
            body{background-color: royalblue ;
                 background-image: url('OIP-C.jfif');
                 background-repeat: no-repeat;
                 background-position:center;
                }
            p{background-color: aliceblue;}
            h5{text-align: left;color: orangered;}
        </style>
    </head>
    <body>
        <p>css  层叠样式表</p>
        <h5>样式定义如何显示HTML元素</h5>
        <h5>样式通常储存在样式表中</h5>
        <h5>样式表可以解决内容与表现分离的问题</h5>
        <h5>外部样式表可以极大的提高工作效率</h5>
        <h5>外部样式表通常储存在CSS文件中,多个样式定义可层叠为一个</h5>
        <h5>规则由两个主要的部分构成:选择器以及一条或多条声明:</h5>
        <h4> 选择器 {属性:属性值;属性:属性值;}</h4>
        <h4 id="idchoose"> 选择器:id 选择器  #id值 {属性:属性值;}</h4>
        <h4 class="classchoose"> 选择器:class 选择器 --类选择器 .class值{属性:属性值;}</h4>
        </h5>/*css注释 */</h5>
        <p>插入样式表的三种方式:</p>
        <ul>
            <li>外部样式表  在HTML头部利用link标签链接css样式文件 适合多页面</li>
            <li>内部样式表 单个文档需要特殊样式时,可以使用内部样式表 在HTML头部使用style标签定义内部样式表</li>
            <li>内联样式  单个标签内使用 style属性</li>
        </ul>
        <p>多重样式优先级:内联样式>内部样式>外部样式>浏览器默认样式  *外部样式放在内部样式后面则外部样式将覆盖内部样式</p>
        
    </body>
</html>

上一篇:学习之响应式Web设计---一个实例


下一篇:element UI select 下拉框 实现可搜索下拉框功能