CSS(层叠样式表)

最新推荐文章于 2024-09-01 21:50:19 发布

PPPPeanut

最新推荐文章于 2024-09-01 21:50:19 发布

阅读量43

点赞数

文章标签： css css3 html

本文链接：https://blog.csdn.net/qq_43942381/article/details/122555493

版权

1.选择器

1.1 基本选择器

标签选择器

  <style>
        h1{
            color: #eeb88c;
            background-color: #33ee96;
            border-radius: 3px;
        }
        p{
          font-size: 80px;
        }
    </style>
</head>
<body>
<h1>cscs</h1>
<h1>csc2s</h1>
<p>listen to me</p>

类选择器

  <style>
        /*  .class  多个标签归类，可复用*/
        .spring {
            color: #eeb88c;
        }

        .summer {
            color: #33ee96;
        }
    </style>
</head>
<body>
<h1 class="spring">AAAAAAAAA</h1>
<h1 class="summer">BBBBBBBBB</h1>
<h1 class="autumn">CCCCCCCCC</h1>
<p class="spring"> PPPPPPP</p>

id选择器

   <style>
        /*  #id   id必须保证全局唯一
        不遵循就近原则
        id选择器>class选择器>标签选择器*/
        #spring {
            color: #33ee96;
        }
    </style>
</head>
<body>
<h1 id="spring">title1</h1>
</body>

1.2层次选择器

 /*后代选择器*/
       body p{
            background: #cb4bee;
        }
 /*子选择器*/
        body > p {
            background: #cb4bee;
        }   
/*相邻兄弟选择器*/
        .active + p{
            background: #cb4bee;
        }

1.3结构伪类选择器

 /*ul的第一个子元素*/
        ul li:first-child{
            background: #cb4bee;
        }
        /*ul的最后一个子元素*/
        ul li:last-child{
            background: #eea87b;
        }
        /*选中p1:定位到父元素，选择当前的第一个元素*/
        p:nth-child(1){
            background: #3aee7d;
        }
        /*选中父元素下的p元素的第二个*/
        p:nth-of-type(2){
            background: aliceblue;
        }

1.4属性选择器**

/*选择有id属性的标签*/
        a[id]{
            background: #eeb88c;
        }
        a[id=first]{
            background: #33ee96;
        }
/*class中有links的元素*/
        a[class *=links]{
            background: #cb4bee;
        }
/*选中href中以http开头(结尾 $=)的元素*/
        a[href^=http]{
            background: #cb4bee;
        }

2.页面修饰

字体样式

文本样式

超链接伪类

列表

盒子模型

浮动

定位

PPPPeanut

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS(层叠样式表)

1.选择器1.1 基本选择器标签选择器 <style> h1{ color: #eeb88c; background-color: #33ee96; border-radius: 3px; } p{ font-size: 80px; } </style></head><body>&lt
复制链接

扫一扫