美文网首页
前端 css层叠样式表

前端 css层叠样式表

作者: 现实里的童话xklss | 来源:发表于2018-08-07 19:58 被阅读0次

    css层叠样式表

    所谓CSS是指层叠样式表 (Cascading Style Sheets),通过引入样式表,从而极大的提高了工作效率。

    基本语法

    css的样式表由一个一个的样式构成,一个样式又由选择器和声明快构成
    – 选择器 {样式名:样式值;样式名:样式值 ; }
    – p {color:red ; font-size:12px;}

    内部样式表

    <style>
        <p{color:red;font-size:30px;}
    </style>
    

    外部样式表

    <link rel=' '  type=' ' href='  '>
    

    css选择器

    选择器(selector),会告诉浏览器:网页 上的哪些元素需要设置什么样的样式。
    比如:p这个选择器就表示选择页面中的所 有的p元素,在选择器之后所设置的样式会 应用到所有的p元素上。

    元素选择器
    最常见的 CSS 选择器是元素选择器。换句话说,文档的元素就是最基本的选择器

    
           h1{
                color: pink;
                font-size:100px;
            }
    

    类选择器
    类选择器,可以根据元素的class属性值选 取元素。

    .lllloooo{
                color:red;
            }
    <p class="p2 lllloooo">呵呵哈哈哈</p>
    

    ID选择器
    ID选择器,可以根据元素的id属性值选取 元素。

    #p1,.p2,h1{
                background-color: yellow;
    
            }
    
    <p id="p1">呵呵哈哈哈</p>
    

    复合选择器(交集选择器)
    复合选择器,可以同时使用多个选择器, 这样可以选择同时满足多个选择器的元素

    span.p3{
                background-color: yellow;
            }
    <span class='p3'>呵呵哈哈哈</span>
    

    群组选择器(并集选择器)
    群组选择器,可以同时使用多个选择器, 多个选择器将被同时应用指定的样式。

    #p1,.p2,h1{
                background-color: yellow;
    
            }
    
    
    <h1>呵呵哈哈哈</h1>
    <p class="p2 lllloooo">呵呵哈哈哈</p>
    <p id="p1">呵呵哈哈哈</p>
    

    通用选择器
    通用选择器,可以同时选中页面中的所有 元素

           {
                color: red;
            }
    

    相关文章

      网友评论

          本文标题:前端 css层叠样式表

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