8.9笔记

最新推荐文章于 2024-09-16 21:30:36 发布

aaaaaaaallllll653

最新推荐文章于 2024-09-16 21:30:36 发布

阅读量223

点赞数 5

文章标签：笔记

本文链接：https://blog.csdn.net/aaaaaaaallllll/article/details/141057868

版权

vh:视窗的高度

vw:视窗的宽度

css三种引入方式：

1.内部样式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            width: 100%;
            height: 100%;
            background-color:gray;
        }
    </style>
</head>
<body>
    <h1>HTML块元素和行内元素</h1>
</body>
</html>

2.行内样式：

<p style="color: antiquewhite;font-size: large;">内联元素在显示时通常不会以新行开始。</p>

里面可以有多个属性，属性和属性之间要用;隔开

3.外部方式：

创建css文件1：

span{
    color: blue;
}

用link标签引入：

<span>吃饭</span>
    <link rel="stylesheet" href="./a33.css">

通过@import引入：

新建css文件2：

span{
    font-size: 400%;
}

在css文件1中引入css文件2：

@import url(./a333.css);
span{
    color: blue;
}

在html文件中引入css文件1:

    
    <span>吃饭</span>
    <link rel="stylesheet" href="./a33.css">

引入方式有优先级，行内的引入方式最大，剩下两种谁离得近先用谁

选择器：

1.标签选择器：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 100%;
            height: 100%;
            background-color:gray;
        }
    </style>
</head>
<body>
    <div>HTML块元素和行内元素</div>
    <div>HTML块元素和行内元素</div>
    <div>HTML块元素和行内元素</div>
</body>
</html>

2.类选择器：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            color: brown;
        }
    </style>
</head>
<body>
    <div class="box">HTML块元素和行内元素</div>
    <div>HTML块元素和行内元素</div>
    <div class="box">HTML块元素和行内元素</div>
</body>
</html>

3.id选择器：（一个页面里只能用一次）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #ccc{
            color: yellowgreen;
        }
 </style>
</head>
<body>
    <div id="ccc">哈哈哈</div>
</body>
</html>

4.通配符选择器：（所有标签都会应用）

 *{
            color: darkorange;
        }

选择器也有优先级：

id>class>标签>*

分组选择器:

h4,h6,h3,.ee{
            color: teal;
        }

派生选择器：
空格表示后代选择器

>表示子元素选择器

+表示相邻兄弟选择器

~兄弟选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  
    <style>
        /* body{
            width: 100%;
            height: 100%;
            background-color:gray;
        }
        div{
            color: rgba(255, 150, 322,.6);
        }
        h3{
            color: #bdf;
        }
        .aa{
            color: blueviolet;
        }
        #ccc{
            color: yellowgreen;
        }
        .ee{
            font-style: italic;
        }
        h4,h6,h3,.ee{
            color: teal;
        }
        *{
            color: darkorange;
        }
        #rrr{
            color: black;
        } */


        .unit div{
            color: aqua;
        }
        div > .unique{
            color: blueviolet;
        }
        div + p {
            color: darkcyan;
        }
        div ~ p {
            color: rosybrown;
        }
        div ~ .under {
            color: thistle;
        }
        div + .up{
            color: slategray;
        }
        .unit .up{
            color: rgb(42, 165, 93);
        }
        div .no{
            color: tomato;
        } 
    </style>
</head>
<body>
    <!-- <br><br><h3>HTML 内联元素</h3>
    <p style="color: antiquewhite;font-size: large;">内联元素在显示时通常不会以新行开始。</p>
    
   
    <div>哈哈哈</div>
    <div class="aa ee">哈哈哈</div>
    <div>哈哈哈</div>
    <div id="ccc">哈哈哈</div>
    
    <span>吃饭</span>
    <link rel="stylesheet" href="./a33.css"> -->
    
     
    <div class="unit">
        <div>哈哈哈</div>
        <div>哈哈哈</div>
        <div class="unique">
            <h4>速度</h4>
            <p class="no">打发时间</p>
        </div>
        <p class="up">困死了</p>
        <p class="under">困死了</p>
        <p class="up">困死了</p> 
    </div>
</body>
</html>