css整理

最新推荐文章于 2024-09-15 21:53:51 发布

qq_38874239

最新推荐文章于 2024-09-15 21:53:51 发布

阅读量138

点赞数

文章标签： css

本文链接：https://blog.csdn.net/qq_38874239/article/details/111322254

版权

在这里插入图片描述

style样式

添加背景色
方法一

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style="background-color: #2459a2;">fdsa</div>
</body>
</html>

在这里插入图片描述
方法二
id选择器
面对过个可以提前声明

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #i1{
        background-color: #2459a2;
        }
    </style>
</head>
<body>
    <div id="i1">fdsa</div>
    <div id="i1">fa</div>
    <div id="i1">dsa</div>0
</body>
</html>

缺点：ID要是相同
为了避免这个缺点可以用组合选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #i1,#i2,#i3{
        background-color: #2459a2;
        }
    </style>
</head>
<body>
    <div id="i1">fdsa</div>
    <div id="i2">fa</div>
    <div id="i3">dsa</div>
</body>
</html>

方法三
class选择器
面对这个缺点我们可以用class

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
        background-color: #2459a2;
        }
    </style>
</head>
<body>
    <div class="c1">fdsa</div>
    <div class="c1">fdsa</div>
    <div class="c1">fdsa</div>
</body>
</html>

方法四
标签选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
        background-color: #2459a2;
        }
    </style>
</head>
<body>
    <div>fdsa</div>
    <span>fdsa</span>
    <div>fdsa</div>
</body>
</html>

只要是在head上面声明的都会发生变化，包括内嵌套的标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
        background-color: #2459a2;
        }
    </style>
</head>
<body>
    <div>fdsa</div>
    <span>
        <div>
            df
        </div>
        fdsa
    </span>
    <div>fdsa</div>
</body>
</html>

如果只是要嵌套的标签有变化就要用层级选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        span div {
        background-color: #2459a2;
        }
    </style>
</head>
<body>
    <div>fdsa</div>
    <span>
        <div>
            df
        </div>
        fdsa
    </span>
    <div>fdsa</div>
</body>
</html>

属性选择器，对选择到的标签再次通过属性进行筛选。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1[n='redhat']{width:800px; height:20px;}
    </style>
</head>
<body>
    <input class="c1" type="text" n="redhat">
    <input class="c1" type="text">
</body>
</html>

在这里插入图片描述
当一个标签用了两个样式，写在下面的优先，如果在标签里的style优先级最高

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            background-color: red;
        }
        .c2{
            background-color: black;
        }
    </style>
</head>
<body>
    <div class="c1 c2" style="background-color: green;">ddd</div>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="commons.css">
</head>
<body>
    <div class="c1 c2">ddd</div>
</body>
</html>

建立css文件书写style属性。

css边框

在这里插入图片描述

最简单的边框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style="border: 1px solid red;">
        <!--
         宽度，样式，颜色
         实线solid
         -->
        adfaf
    </div>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style="height: 800px;
    width: 80%;
    border: 1px solid red;
     font-size: 20px;
     text-align: center;
     line-height: 800px;
     font-weight: bold;
        ">sadfa
    </div>
<!--高度800像素，宽度80%，边框1像素,字体大小20像素,居中,在高度800像素居中,加粗-->
</body>
</html>

float

我们有个需求，一行左边是红色，右边是黑色
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
   <div style="width: 50%; background-color:red; float: left">3</div>
   <div style="width: 50%; background-color:black; float: right">3</div>
</body>
</html>

左飘，在红色的基础上累加。实现标签的堆叠

标签的互换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
   <div style="background-color: black; display: inline;">gg</div>
    <!--块级标签互换-->
   <span style="background-color: black; display: block;">gg</span>
<!--    行内标签互换-->
<!-- 行内标签无法设置高度-->
    <span style="background-color: black; height: 50px;width: 70px">dddd</span>
    <span style="display:inline-block;background-color:red;height: 50px;width:70px">dfd</span>
    <!--两种性质都有-->
    <span style="display: none">dfs</span>
    <!--标签消失,关灯-->
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body style="margin 8">
    <div style="border: 1px solid red; height: 70px;">
        <div style="background-color: green; height: 50px;
        margin-top:20px;"></div>
    </div>
<!--外边距-->

    <div style="border: 1px solid red; height: 70px;">
        <div style="background-color: green; height: 50px;
        padding-top:20px;"></div>
    </div>
<!--内边距-->
</body>
</html>

在这里插入图片描述案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .pg-header{
            height: 38px;
            background-color: #dddddd;
            line-height: 38px;
        }
    </style>
</head>
<body style="margin :0 auto;">
    <div class="pg-header">
        <div style="width: 980px;margin : auto; ">
        <div style="float: left;">收藏本站</div>
        <div style="float: right;">
            <a>登录</a>
            <a>注册</a>
        </div>
        <div style="clear: both;"></div>
        <!--清除同行元素，不允许其它元素与之在一行内-->
        </div>
    </div>

</body>
</html>