您的位置: 首页  >  IT文章  >  HTML 目录 :  高级选择器 伪类选择器 标签的四大伪类 文本样式 背景样式 背景样式案例 边界圆角 显示方式 block 的显示规则 ovlerflow 属性 盒模型 浮动布局

HTML 目录 :  高级选择器 伪类选择器 标签的四大伪类 文本样式 背景样式 背景样式案例 边界圆角 显示方式 block 的显示规则 ovlerflow 属性 盒模型 浮动布局

分类: IT文章 • 2022-05-03 22:46:31

高级选择器

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            font-size: 30px;
        }

        /*选择器高级：基础选择器的各种组合*/

        /*1、群组选择器：控制多个*/
        /*注：每一个选择器位，可以为id、class、标签、选择器组合*/
        #h1, .p, .a {
            color: red;
        }

        /*2、后代(子代)选择器：控制一个标签，前方的都是修饰*/
        body .div2 .p2 {  /*后代 空格，父子(孙)*/
            color: orange;
        }
        .div2 > div > .p2 {  /*子代 >，父子*/
            color: pink;
        }
        /*高级选择器通过权重（个数）区别优先级:*/
        /*
        无限大于：id > class > 标签
        种类相同：比个数
        个数相同：比顺序
        高级选择器种类不影响优先级
        */


        /*3、兄弟(相邻)选择器：控制一个标签，前方的都是修饰*/
        .p3 ~ .i3 {   /*兄弟 ~，可相邻也可不相邻，但必须通过上方修饰下方*/
            color: greenyellow;
        }
        .div3 + .i3 {   /*相邻 +，必须相邻，但必须通过上方修饰下方*/
            color: green;
        }

    ul{
        list-style: none;
    }
    </style>
</head>
<body>
<ul type="" style="">
    <li>1</li>
    <li>1</li>
    <li>1</li>
</ul>
    <i class="i3">iiii1</i>
    <p class="p3">pppp</p>
    <div class="div3">dddd</div>
    <i class="i3">iiii2</i>

    <hr>

    <p class="p2">
        单独的p
    </p>
    <div class="div2">
        <div class="div22" id="div22">
            <p class="p2">div的p</p>
        </div>
    </div>


    <hr>
    <h1 class="h1" id="h1">标题</h1>
    <p class="p">段落</p>
    <div>
        <a class="a" href="">链接</a>
    </div>
</body>
</html>
View Code

伪类选择器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Title</title>

        <style>
            /*()内填的是编号，所以从1开始*/
            /*1.伪类选择器可以单独出现，相当于省略了统配*/
            /*2.:nth-child先匹配层级位置，再匹配标签*/
            /*3.:nth-of-type先匹配标签类型，再匹配层级位置*/
            i:nth-child(1) {
                 color: orange;
            }
            i:nth-child(4) {
                 color: red;
            }

            i:nth-of-type(1) {
                color: brown;
            }
            i:nth-of-type(2) {
                color: blue;
            }
        </style>

        <style>
            .box {
                width: 150px;
            }
            .pp {
                width: 50px;
                height: 50px;
                background-color: red;
                border-radius: 50%;
                float: left;
                text-align: center;
                line-height: 50px;
            }

            /* 2n偶数  2n-1|2n+1奇数  3n最后一列  3n+1|3n-2第一列 3n-1中间列*/
            .pp:nth-child(3n-1) {
                color: orange;
            }

            /*伪类选择器影响优先级，伪类就相当于class*/
            .a1.a2 {
                color: red;
            }
            .a1:nth-child(1) {
                color: orange;
            }
            /*id > class=:nth- > 标签*/
        </style>

        <style>
            /*属性选择器*/
            p[a] {
                color: crimson;
            }
        </style>
    </head>
    <body>

        <a class="a1 a2" href="">aaaaaaaaaaaaaa</a>

        <hr>
        <!--p.pp.p${p$}*9-->
        <div class="box">
            <p class="pp p1" a>p1</p>
            <p class="pp p2" b>p2</p>
            <p class="pp p3">p3</p>
            <p class="pp p4">p4</p>
            <p class="pp p5">p5</p>
            <p class="pp p6">p6</p>
            <p class="pp p7">p7</p>
            <p class="pp p8">p8</p>
            <p class="pp p9">p9</p>
        </div>

        <hr>

        <i class="i3">iiii1</i>
        <p class="p3">pppp</p>
        <div class="div3">dddd</div>
        <i class="i3">iiii2</i>
        <hr>
        <div>
            <i class="i3">iiii1</i>
            <p class="p3">pppp</p>
            <div class="div3">dddd</div>
            <i class="i3">iiii2</i>
        </div>
    </body>
</html>
View Code

标签的四大伪类

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /*链接的初始状态*/
        a:link {
            color: deepskyblue;
        }
        /*链接的悬浮状态*/
        a:hover {
            /*cursor: wait;*/
            /*cursor: col-resize;*/
            cursor: pointer;
            color: blue;
        }
        /*链接的激活状态*/
        a:active {
            color: deeppink;
        }

        /**链接的已访问状态*/
        a:visited {
            color: yellow;
        }

    </style>

    <style>
        body {
            /*文本不能选择*/
            user-select: none;
        }
        /*普通标签都可以去使用 :hover :active */
        .btn {
            width: 80px;
            height: 38px;
            background-color: cornflowerblue;

            border-radius: 5px;
            text-align: center;
            line-height: 38px;
            color: white;
        }
        .btn:hover {
            cursor: pointer;
            background-color: deepskyblue;
        }
        .btn:active {
            background-color: blue;
        }
    </style>
</head>
<body>
<a href="https://www.baidu.com">aaaaaaaaaaaaaaaaaa</a>

<div class="btn">按钮</div>


</body>
</html>
View Code

文本样式

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>文本样式</title>
    <style>
        .div {
            width: 200px;
            height: 200px;
            background-color: orange;
        }

        .div {
            /*字体大小: 最小12px，还需要更小就更换字体库*/
            font-size: 30px;

            /*字体库(字族)：字体, 备用1, ..., 备用n*/
            /*font-family: "STSong", "微软雅黑";*/

            /*字重: 100~900  bold normal lighter*/
            font-weight: lighter;

            /*字体颜色*/
            color: tomato;

            /*水平位置: left center right*/
            text-align: center;

            /*行高(垂直位置)：默认文本在所在行高中垂直居中，要实现文本的垂直居中，让行高 = 容器高*/
            line-height: 200px;

            /*文本划线: underline line-through overline none*/
            text-decoration: underline;
        }
        a {
            text-decoration: none;
        }
        i {
            font-style: normal;
        }
    </style>
</head>
<body>
    <div class="div">文本</div>
    <a href="">aaaa</a>
    <i>dasdassad</i>
</body>
</html>
View Code

背景样式

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .bg {
            width: 300px;
            height: 300px;
            background-color: tomato;
        }

        .bg {
            /*背景颜色*/
            background-color: red;
            /*背景图片*/
            background-image: url("img/001.png");
            /*平铺: no-repeat repeat repeat-x repeat-y */
            background-repeat: no-repeat;
            /*背景定位: x轴(left center right) y轴(top center默认 bottom)*/
            /*background-position: right top;*/
            /*指定尺寸移动*/
            /*background-position: 100px 100px;*/
            /*反向移动*/
            background-position: 10px -10px;
        }
    </style>
</head>
<body>
    <div class="bg">12345</div>
</body>
</html>
View Code

背景样式案例

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            background-color: cornflowerblue;
        }
        .h1 {
            /* 1300px;*/
            /*height: 900px;*/
            width: 500px;
            height: 100px;
            background-color: tomato;
        }
        .h1 {
            background-image: url("img/bg.png");
            background-position: 0 -150px;
        }
        .h1:hover {
            background-position: 0 -250px;
        }
    </style>
    <style>
        .p1 {
            width: 155px;
            height: 48px;
            background-color: green;
            background-image: url("img/bg.png");
        }
        .p2 {
            width: 157px;
            height: 48px;
            background-color: green;
            background-image: url("img/bg.png");
            background-position-x: -155px;
        }
        .p1:hover, .p2:hover {
            background-position-y: -48px;
            cursor: pointer;
        }
        /*背景图片操作：就是更换背景图片的位置*/
    </style>
</head>
<body>
    <div class="h1">

    </div>

    <p class="p1"></p>

    <p class="p2"></p>
</body>
</html>
View Code

边界圆角

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {
            width: 400px;
            height: 200px;
            background-color: red;
        }
        .box {
            /*border-radius: 50%;*/

            /*左上是第一个角，顺时针编号，不足找对角，只有一个值同时控制4个角*/
            /*border-radius: 10px 20px 30px 40px;*/
            /*border-radius: 10px 50px 100px;*/
            /*border-radius: 10px 100px;*/
            /*border-radius: 100px;*/

            /*横向 / 纵向*/
            /*border-radius: 50% / 50px;*/

            /*横向1,2,3,4 / 纵向13,24*/
            /*border-radius: 10px 30px 50px 100px / 50px 100px;*/

            border-radius: 200px 200px 0 0 / 200px 200px 0 0;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>
View Code

显示方式

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>

    <style>
        /*
        block：1.可以手动设置宽高 2.自带换行 3.支持所有css样式
        inline：1.宽高只能由文本内容撑开，不能手动设置 2.不带换行 3.支持部分css样式
        inline-block：1.可以手动设置宽高 2.不带换行 3.支持所有css样式
        */
        /*
        嵌套关系
        block：可以嵌套block、inline、inline-block
            div、li搭架构的，可以任意嵌套     h1~h6、p 建议只嵌套inline，就是用来转文本的
        inline：只用来嵌套inline
            span、i、b、em、strong     a一般都会修改其display为block
        inline-block：不建议嵌套任何
            img input系统都设计成了单标签
        none：没有显示方式，就会在页面中隐藏
        */
        /*
        开发是：修改display的情况 - 要支持宽高，要更改位置(水平排列还是垂直排列)
        */
        div {
            display: block;
            width: 100px;
            height: 100px;
            background-color: red;
        }
        span {
            display: inline;
            width: 100px;
            height: 100px;
            background-color: orange;
        }
        owen {
            display: inline-block;
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
    <style>
        a {
            display: block;
            width: 100px;
            /*height: 100px;*/
            /*透明色：transparent*/
            background-color: brown;
            border: 1px solid black;
        }
        img {
            width: 100px;
        }
        p {
            text-align: center;
        }
    </style>
</head>
<body>
    <!--div{divdivdiv}*2+span{spanspanspan}*2-->
    <div>divdivdiv</div>
    <div>divdivdiv</div>
    <span>spanspanspan</span>
    <span>spanspanspan</span>
    <owen>owenowenowen</owen>
    <owen>owenowenowen</owen>

    <a href="https://www.baidu.com">
        <img src="img/bd_logo.png" alt="">
        <p>前往百度</p>
    </a>
</body>
</html>
View Code

block 的显示规则

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*display：
        不同的标签在页面中有不同的显示规则
        如有些是自带换行、有些同行显示、有些同行显示还支持宽高，这些不是标签的特性，而是标签的display属性值决定的

        完成复杂的布局和样式，标签的显示方式都采用 block
        a {
            display: block;
        }
        a可以任意嵌套其他标签，还可以设置宽高，还支持所有css样式，但是a不再同行显示了(block自带换行)

        如果解决block同行显示 => css布局

        */

        /*
        inline: 同行显示，不用去关宽高，不用额外操作
        inline-block: 同行显示, 一般会主动设置宽或高、设置宽，高会等比缩放，反之亦然
        有inline特性的标签，同行显示，但是有默认垂直对其方式vertical-align
        */

        /*
        block：默认显示规则

        宽继承父级，高由内容撑开
        */
        img {
            border: 1px solid black;
        }
        .img1 {
            width: 200px;
        }
        .img2 {
            height: 200px;
        }
        span, img {
            /*baseline基线 middle中线 top顶线*/
            vertical-align: middle;
        }
    </style>
    <style>
        div {
            height: 100px;
            border: 1px solid black;
            display: inline-block;
        }
        .d1 {
            width: 200px;
        }
        .d2 {
            width: 500px;
        }
        .d3 {
            width: 200px;
        }
    </style>
</head>
<body>
<span>123</span>
<span>456</span>
<img class="img1" src="img/bd_logo.png" alt="">
<img class="img2" src="img/bd_logo.png" alt="">
<hr>
<div class="d1"></div>
<div class="d2"></div>
<div class="d3"></div>

</body>
</html>
View Code

ovlerflow 属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*
        1、规定了标签的宽高，标签的内容超出范围
        2、规定了标签的宽高，标签内的子标签显示区域更大，超出范围
        如果让父级宽高限制内容和子集
        */
        .box {
            width: 200px;
            height: 200px;
            background-color: orange;
            /*内容超出，都会以 hidden 处理影藏，如果想显示全内容，采用子页面*/
            /*hidden：影藏超出内容  scroll：以滚动显示超出内容  auto：有超出内容才滚动显示*/
            overflow: scroll;
        }
        .sup {
            width: 200px;
            height: 200px;
            background-color: red;
            /*overflow: hidden;*/
        }
        .sub {
            width: 300px;
            height: 300px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="box">汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字汉字</div>
    <div class="sup">
        <div class="sub"></div>
    </div>
</body>
</html>
View Code

盒模型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒模型</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: red;
        }
        /*盒模型：
        什么是盒模型：页面中的每一个标签都可以称之为一个盒子
        盒子的组成并发：外边距、边框、内边距、内容四部分组成，每部分都有独立区域

        外边距 - margin - 控制位置
        边框 - border - 控制边框
        内边距 - padding - 控制内容与边框的间距
        内容 - content(width*height) - 文本内容或子标签显示的区域
        */
        .box {
            /*padding: 50px;*/
        }
        .box {
            /*上右下左*/
            /*当要保证显示区域不变，内容往里偏移，增加padding、相应减少content*/
            padding: 20px 0 0 20px;
            width: 180px;
            height: 180px;
        }
        .box {
            /*border边框：宽度 、 样式 solid实现 dashed虚线 dotted点状线、 颜色*/
            border: 10px dotted black;
        }
        /*margin参考系：自身原有位置
        margin的left和top控制自身位置
        margin的right和bottom控制兄弟位置
        */
        .box {
            margin-left: 100px;
            margin-top: 100px;
        }
        .abc {
            width: 200px;
            height: 200px;
            background-color: orange;
            margin-top: 10px;
            margin-left: -1px;
        }
        .top, .bottom {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
        .top {
            margin-bottom: -50px;
        }
        .bottom {
            background-color: tan;
        }
        /*盒模型布局的地位：盒模型用来完成超简单的布局要求，一般都是用来辅助其他布局，完成布局的微调*/

        .abc {
            /*上右下左*/
            /*margin: 10px 20px 30px 40px;*/
            /*快速居右*/
            /*margin-left: auto;*/
            /*快速居中*/
            /*margin-left: auto;*/
            /*margin-right: auto;*/
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div class="box">12345</div>
    <div class="abc"></div>

    <div class="top"></div>
    <div class="bottom"></div>
</body>
</html>
View Code

浮动布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .wrap {
            width: 150px;
            background-color: cornflowerblue;
            /*height: 200px;*/
        }
        .d {
            width: 50px;
            height: 50px;
            background-color: orange;
            border-radius: 50%;
        }
        /*浮动布局：不再撑开父级高度，但浮动受父级宽度影响*/
        .d {
            float: right;
        }
        /*如何让父级刚刚好包含所有子标签：清浮动 - 不是清除子标签的浮动效果，而是让父级获得一个刚好的高度*/
        .wrap:after {
            display: block;
            content: "";
            /*清浮动的关键*/
            clear: both;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="d d1">1</div>
        <div class="d d2">2</div>
        <div class="d d3">3</div>
        <div class="d d4"></div>
        <div class="d d5"></div>
        <div class="d d6"></div>
        <div class="d d7"></div>
        <div class="d d8"></div>
        <div class="d d9"></div>

    </div>
</body>
</html>
View Code

相关推荐