7/19实训css

本文详细介绍了CSS的三大特性:层叠性、继承和优先级,并深入探讨了盒子模型,包括组成、内边距、外边距、盒子居中方法以及塌陷问题的解决。此外,还讲解了圆角边框、盒子阴影、文字阴影、浮动以及定位等重要概念,最后总结了CSS属性的书写顺序。
摘要由CSDN通过智能技术生成

前言

每天多学一点点,加油


一、css三大特性

1.层叠性(覆盖)

解决样式冲突,若样式冲突采用就近原则,只覆盖相同而属性。

<style>
        div {
            color: #000;
            font-size: 30px;

        }

        div {
            color: rgb(230, 78, 78);

        }
    </style>
</head>

<body>
    <div>my bebe bebe </div>
</body>

2.继承

子承父业。简化代码,主要继承有关文字的样式

<style>
        div {
            color: #000;
            font-size: 30px;

        }
    </style>
</head>
<body>
    <div>
        <p>my bebe bebe</p>
    </div>
</body>

3.优先级

  • 选择器相同,执行层叠。若不同,根据选择器权重。
  • 继承或*<元素选择器<类选择器、伪类选择器<id选择器<行内样式“style”<importane
  • 权重有4位数字组成不会进位,继承的权重是0,继承的代码和自己的比一定权重小
  • 权重叠加
      <style>
            /* 权重0,0,0,1+0,0,0,1=0,0,0,2 */
            div p {
                color: #000;
                font-size: 30px;
            }
    
            /* 权重0,0,0,1 */
            p {
                color: rgb(197, 59, 59);
            }
    
            /* 0,0,1,0+0,0,0,1=0,0,1,1 */
            .nov p {
                color: rgb(131, 86, 86);
    
            }
        </style>
    </head>
    
    <body>
        <div class="nov">
            <p>my bebe bebe</p>
        </div>
    </body>
    

二、盒子模型

1.组成

边框(会改变盒子大小),内容,内边距(会改变盒子大小),外边距

1)边框粗细,样式,颜色,

<style>
        div {
            width: 300px;
            height: 200px;
            /* 边框粗细 */
            border-width: 10px;
            /* 边框样式 */
            border-style: solid;
            /* 颜色 */
            border-color: cornflowerblue;
        }
    </style>
</head>

<body>
    <div>
        <p>my bebe bebe</p>
    </div>
</body>
div {
            width: 300px;
            height: 200px;
            /* 边框复合写法 */
            border: 5px solid red;
        }

改变单边颜色 

div {
            width: 300px;
            height: 200px;
            /* 边框复合写法 */
            border: 5px solid red;
            /* 改变单边颜色,就近原则顺序不能改变 */
            border-top: 5px solid rgb(26, 23, 23);
        }

2.内边距

 /* padding-left: 50px;
            padding-top: 50px;
            padding-bottom: 50px; */
            /* 内边距复合写法 一个值代表上下左右 2个值是第一个代表上下,二个代表左右 三个值:上 左右 下 四个值:上 右 下左顺时针*/
            padding: 5px;

案例

<style>
        div {

            height: 20px;
            /* 边框复合写法 */
            border: 3px solid rgb(223, 226, 217);
            /* 改变单边颜色,就近原则顺序不能改变 */
            border-top: 5px solid rgb(172, 236, 43);
            /* padding-left: 50px;
            padding-top: 50px;
            padding-bottom: 50px; */
           
            padding: 5px;
        }

        div a {
            display: inline-block;
            font-size: 12px;
            color: rgb(105, 210, 224);
            height: 30px;
            padding: 0 5px;
            font-style: initial;
            text-decoration: none;
        }

        a:hover {
            background-color: rgb(12, 51, 51);
        }
    </style>
</head>

<body>
    <div>
        <a href="#">肘子舒</a>
        <a href="#">肘子舒</a>
        <a href="#">肘子舒</a>
        <a href="#">肘子舒</a>
    </div>
</body>

 

 3.外边距

<style>
        div {
            width: 30px;
            height: 20px;
            background-color: rgb(201, 89, 89);
        }

        .one {
            margin-bottom: 10px;
        }
    </style>
</head>

<body>
    <div class="one">1</div>
    <div>2</div>
</body>

重点

4.盒子居中和行内元素和行内块元素居中

盒子必须指定宽度,左右外边距设为auto

给父元素添加

盒子居中:margin: 100px auto;

行内元素和行内块元素居中:text-align: center;

<style>
        .one {
            width: 300px;
            height: 200px;
            background-color: rgb(201, 89, 89);
            /* 盒子居中 */
            margin: 100px auto;
            /* 文字居中 */
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="one"><span>1</span></div>

</body>

 行内块与文字同

5.塌陷问题

想让子元素与父元素相离,但直接不可以操作

/* 1.父元素定义边框 */

/* 2.父元素定义内边距 */

/* 3.overflow.hiden */

<style>
        .one {
            width: 300px;
            height: 200px;
            background-color: rgb(201, 89, 89);
            /* 盒子居中 */
            margin: 100px auto;
            /* 文字居中 */
            text-align: center;
            margin-top: 50px;
            /* 1.父元素定义边框 */
            border: 1px solid transparent;
            /* 2.父元素定义内边距 */
            padding: 1px;
            /* 3.overflow.hiden */
            overflow: hidden;
        }

        .wo {
            width: 100px;
            height: 50px;
            background-color: lightgreen;
            margin-top: 50px;
        }
    </style>
</head>

<body>
    <div class="one">
        <div class="wo"><img src="suibian.jpg"></div>
    </div>

</body>

 6.清除内外边距

* {
            margin: 0px;
            padding: 0px;
        }

三、案例

 <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        body {
            background-color: rgb(255, 250, 250);
        }

        .one {
            width: 298px;
            height: 500px;
            margin: 100px auto;
            background-color: rgb(173, 159, 159);

        }

        .one img {
            width: 100%;
        }

        .re {
            height: 70px;
            font-size: 14;
            padding: 0 28px;
            margin-top: 30px;
        }

        .app {
            font-size: 12px;
            color: #dbc2c2;
            padding: 0 28px;
            margin-top: 20px;
        }

        .info {
            font-size: 14px;
            margin-top: 15px;
            padding: 0 28px;
        }

        .info h4 {
            font-weight: 400px;
            display: inline-block;
            font-weight: 400;
        }

        .info span {
            color: brown;
            font-size: 16px;
        }

        .info em {
            font-style: normal;
            margin: 0 6px 0 15px;
            color: cornsilk;
        }

        a {
            color: black;
            text-decoration: none;

        }
    </style>
</head>

<body>
    <div class="one">
        <img src="zzh.jpg" alt="">
        <p class="re">周子舒第一大美人</p>
        <div class="app">来自于 19826753评论</div>
        <div class="info">
            <h4><a href="#">周子舒天窗窗花出名...</a></h4>
            <em>|</em>
            <span>9999.0</span>
        </div>
    </div>

</body>

四、圆角边框

  • 圆角边框:border-radius: 10px(长度);
  • 当正方形变圆:border-radius: 50%(宽度和高度一半即为圆形)
  • 长方形设置高度一半即可变
  •  对角线为一个数值可简写border-radius:左上角顺时针走四个数值

五、盒子阴影

box-shadow: 20px(x轴) 20px (y轴)【必写】20px(虚实) 20px(阴影尺寸) black(阴影颜色);

六、文字阴影

text-shadow: 5px 5px 6px black;

七、浮动

1.标准流

行、块等按照默认方式排队,最基本的方式。

2.浮动

使多个盒子在一行上浮动。

<style>
        .one,
        .two {
            width: 200px;
            height: 100px;
            background-color: rgb(134, 38, 38);
            float: left;
        }
    </style>
</head>

<body>
    <div class="one">
        <h4>123</h4>
    </div>
    <div class="two">
        <h4>124</h4>
    </div>
</body>
  • 脱标: 脱离标准的控制,去到指定位置
  • 浮动的盒子不再保留原来的位置,标准盒子占有原来位置,浮动盒子在标准盒子上方浮着(重点)
  • 浮动特性:两个以上盒子会处在同一行,当页面装不下时会另起一行,有行内块元素特性
  • 浮动盒子和标准流父盒子搭配使用:标准盒子约束浮动盒子
  • 一个浮动,则全部浮动。若第一个孩子不浮动,则是标准流独占一行,后面的不会压上。浮动只会影响后面的盒子。
  • 清除浮动:本质是清除浮动元素造成的影响。clear:属性值(both) ;闭合浮动,只让浮动在父盒子内部影响。                                                                                                                        1.额外标签法:在浮动的末尾添加一个空块的标签                                                                      2.父级添加overflow:overflow:hiden                                                                                              3.清除浮动:clearfix:after       在浮动的盒子后加了一个新盒子                                                4.双伪元素:浮动盒子前后都加一个盒子形成一个闭合 

3.定位

八、css属性书写顺序(重点)


总结

累了

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值