HTML（3）-CSDN博客

本文链接：https://blog.csdn.net/qq_74120587/article/details/131647352

伪类选择器

<style>
        a:link {
            color: pink;
        }

        a:visited {
            color: red;
        }

        /* :hover   鼠标悬停 */
        a:hover {
            /* cursor  鼠标样式 */
            cursor: pointer;
            font-size: 40px;
        }


        a:active {
            font-size: 70px;
        }

        div {
            width: 300px;
            height: 300px;
            background-color: pink;
        }

        /* s a:hover+div {
            background-color: blue;
        } */
        a:hover+div {
            /* background-color: greenyellow; */
            display: none;
        }
    </style>

结构伪类选择器

<style>
        ul li:first-child {
            background-color: pink;
        }

        ul li:last-child {
            background-color: green;
        }

        ul li:nth-child(3) {
            background-color: blue;
        }

        ul li:nth-of-type(4) {
            background-color: chartreuse;
        }
    </style>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
    </ul>


</body>

伪元素选择器

<style>
        ul li::before {
            content: ">";
        }

        ul li::after {
            content: url();
        }

        /* input::placeholder  表单提示词 */
        input::placeholder {
            color: rgb(62, 226, 56);
        }


        /* ::selection 选中时 */
        ul li:nth-child(4)::selection {
            color: pink;
        }
    </style>
<body>
    <input type="text" name="" id="" placeholder="jdhcndsk">
    <ul>
        <li>1dcdscdscdcd</li>
        <li>2cdcdcdcdc</li>
        <li>3cdcdscdsc</li>
        <li>4cdcdcdcddcds</li>

    </ul>


</body>

文本相关样式

<style>
        div {
            /* width: 300px; */
            height: 200px;
            background-color: pink;
            /* text-indent: 2em; */
            /* 文本水平对齐方式 */
            text-align: center;
            /* overflow: auto; */
            /* 行高  单行文本垂直居中   行高=元素高度*/
            line-height: 200px;



        }

        a {
            color: pink;
            text-decoration: none;
            /* text-decoration: line-through; */
            /* text-decoration: overline; */
        }
    </style>

list

<style>
        /* css具有层叠行，后面的会覆盖前面的 */
        ul li {
            height: 30px;
            list-style: none;
            list-style: circle;
        }
    </style>

元素显示模式转换

<style>
        .box {
            /* 行内元素无法设置宽、高        转换为行内块元素 */
            /* display: none;隐藏元素，脱离文档流 */
            display: none;
            /* display: inline-block;  将元素转换为行内块元素 */
            /* display: inline;  行内元素 */
            width: 300px;
            height: 300px;
            background-color: pink;
        }

        span {
            display: inline-block;
            /* display: block;  块元素 */
            width: 300px;
            height: 300px;
            background-color: rgb(15, 105, 66);
        }

        a {
            display: inline-block;
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>

背景

<style>
        body {
            /* width: 4000px; */
            height: 4000px;
            /* background-color: aqua; */
            /* background-image: url(../米莱迪.jpg); */
            /* background-repeat: no-repeat; */
            /* background-attachment: fixed; */
            /* background-position: top left; */
            background: fixed url(../米莱迪.jpg) no-repeat;
        }
    </style>

边框

<style>
        div {
            width: 300px;
            height: 300px;
            background-color: pink;
            /* border-radius: 10px; */
            /* border-width 边框宽度 */
            /* border-width: 20px;
            border-style: solid;
            border-color: rgb(35, 223, 18); */
            border: 4px solid black;
            /* border-radius: 50%;    边框弧度*/
            border-top-left-radius: 40%;
        }
    </style>

合并相邻边框

<style>
        table {
            /* 合并相邻边框 */

            border-collapse: collapse;

        }

        td {
            border: 5px solid red;
        }
    </style>

阴影

<style>
        div {
            width: 300px;
            height: 300px;
            background-color: pink;
            /* box-shadow: 20px 20px 10px 10px black; */
        }

        p {
            text-shadow: red 5px 5px;

        }
    </style>

轮廓线

<style>
        input[type="text"] {
            outline: none;
            outline-style: groove;
        }
    </style>

防拖拽

<style>
        textarea {
            /* 防止文本拖拽 */
            resize: none;
            /* vertical-align改变与文字的对齐方式 */
            vertical-align: top;
            vertical-align: middle;
            vertical-align: bottom;
        }
    </style>

隐藏元素

<style>
        div {
            width: 300px;
            height: 300px;
        }

        .box1 {
            /* display: none;   脱离文档流，原来的位置不再保留 */

            /* display: none; */

            /*visibility: hidden;  元素隐藏，位置保留  */

            /* visibility: hidden; */
            /* opacity: 0; */
            background-color: pink;
        }

        .box2 {
            background-color: aquamarine;
        }
    </style>

绝对定位

<style>
        .grandfather {
            position: relative;
            width: 1200px;
            height: 1200px;
            background-color: aquamarine;
        }

        .father {
            /* position: relative; */

            width: 600px;
            height: 600px;
            background-color: pink;
            margin: 400px;
        }

        .son {
            /* position: absolute;  绝对定位：不保留原来位置  子绝父相   父亲没有相对定位，继续向上找，谁有相对定位，以谁作为参考移动
            如果都没找到，则相对于浏览器进行定位
            */

            position: absolute;
            /* top: -100px; */
            bottom: -100px;
            left: 500px;
            width: 100px;
            height: 100px;
            background-color: aqua;
        }

        .son2 {
            width: 100px;
            height: 100px;
            background-color: rgb(40, 65, 65);
        }
    </style>

固定定位

<style>
        body {
            height: 4000px;
        }

        div {
            /* 固定定位:相对于可视区域进行定位 */
            position: fixed;
            right: 40px;
            top: 50%;
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>

粘性定位

<style>
        body {
            height: 4000px;
        }

        .one {
            position: sticky;
            top: 0;
            background-color: pink;
        }
    </style>