千锋前端笔记样式表

JUMPLANB

已于 2022-03-11 10:46:22 修改

阅读量320

点赞数

文章标签：前端

于 2022-02-26 12:17:19 首次发布

本文链接：https://blog.csdn.net/B_planzp/article/details/123142754

版权

外部样式表的语句后面加！important

h1{
    color:red!important;
}

选择器：实现一对多，或者多对一的选控制

样式表的优先级（就近原则）

行内>内部样式表>外部样式表

选择器

标签选择器

类选择器（class）定义一类标签：就近原则

ID选择器（区英文名，不可以用关键字）：一次定义一个标签，具体执行

通配符（清除元素的默认边距和填充值）

群组选择器：逗号隔开（margin:0 auto<盒子居中>）

后代选择器：父级盒子里面所有同标签的属性

后代选择器的匹配原则是从右至左

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 通配符选择器 */
        *{
            margin: 0;
            padding: 0;
            /* margin:0 auto; */
            /* 元素居中 */
        }
        /* 元素选择器 */
        div{
            width: 300px;
            height: 300px;
        }
        /* 类选择器 */
        .q1{
            background-color: green ;
            background-position: ;
        }
        .q2{
            background-color: red ;
        }
        /* ID选择器 */
        #z1{
            background-color: blue;
        }
        /* 群组选择器 */
        #z2,h1{
            background-color: blueviolet;
           color: red;
        }
        .z3 h1{
            background-color: brown;
        }

        

    </style>
</head>
<body>
    <div class="q1" class="a1"></div>
    <div class="q2"></div>
    <div id="z1"></div>
    <div id="z2">
        <P>黄金百战穿金甲，不破楼兰终不还</P>
    </div>
  <div class="z3">
        <h1>
            曾许人间第一流
        </h1>
  </div>
</body>
</html>

、

伪类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .fudong{
            float: left;
            width: 300px;
            height: 300px;
            margin: 20px;
            background-color: blueviolet;
        }
        .fudong:hover{
            background-color: ;
        }
        img{
            margin-left: 17px;
        }
        /* 初始状态 */
        a:link{
            color: blueviolet;
        }
        /* 被访问后 */
        a:visited{
            background-color: aqua;
        }
        /* 悬停，鼠标滑过时的状态 */
        a:hover{
            background-color: aqua;
        }
        /* 按下鼠标时的状态 */
        a:active{
            background-color: bisque;
        }
        /* 需要保持link、visited、hover、active的顺序 */
        dt{
            text-align: center;
        }
/*文字居中*/
        .qf{
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <div></div>
    <div class="fudong">
        <dl class="qf">
            <dd>
                <a href="https://baijiahao.baidu.com/s?id=1654101894896542271">
                    <img   src="./img/千锋教育.png" alt=""title="测评">
                </a>
            </dd>
            <dt><a href="http://www.qfedu.com/">千锋教育</a></dt>
        </dl>
    </div>
    <div class="fudong">
        <dl>
            <dd>
               <a href="https://zhuanlan.zhihu.com/p/65509068">
                    <img src="./img/黑马程序员.png" alt=""title="测评">
                </a>
            </dd>
            <dt><a href="http://www.itheima.com/">黑马程序员</a></dt>
        </dl>
    </div
        >
 <div class="fudong">
     <dl>
         <dd> 
             <a href="https://baijiahao.baidu.com/s?id=1655007796024673215">
                 <img src="./img/尚硅谷_20220310114855.png" alt=""title="测评">
                </a>
            </dd>
         <dt><a href="http://www.atguigu.com/">尚硅谷</a></dt>
     </dl>
</div>

</body>
</html>