CSS基础

最新推荐文章于 2024-11-01 12:26:05 发布

添福宝615

最新推荐文章于 2024-11-01 12:26:05 发布

阅读量73

点赞数

分类专栏：笔记文章标签： css html html5

本文链接：https://blog.csdn.net/weixin_61923897/article/details/120550808

版权

笔记专栏收录该内容

31 篇文章 0 订阅

订阅专栏

选择器进阶

一、复合选择器

1、后代选择器：空格

作用：根据 HTML 标签的嵌套关系，选择父元素后代中满足条件的元素

选择器语法：选择器1 选择器2 { css }

结果：在选择器1所找到标签的后代（儿子、孙子、重孙子…）中，找到满足选择器2的标签，设置样式

注意点：
1. 后代包括：儿子、孙子、重孙子……
2. 后代选择器中，选择器与选择器之前通过空格隔开

2、子代选择器

二、并集选择器

三、交集选择器

四、Emmet语法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 1、生成普通标签：标签选择器 div -->
    <div></div>
    <p></p>
    <!-- 2、生成div标签+类名：类选择器.red -->
    <div class="red"></div>
    <div class="red"></div>
    <div class="father"></div>
    <div class="name"></div>
    <!-- 3、生成div标签+id属性：id选择器 #one -->
    <div id="one"></div>
#one 按tab键不可以
    <!-- 4、生成指定标签+类名+id属性：交集选择器 p.red#one -->
    <div class="red" id="one"></div>
    <p class="red" id="one"></p>
    <!-- 5、生成儿子：子代选择器 ul>li -->
    <ul>
        <li></li>
    </ul>

    <ul>
        <li></li>
    </ul>

    <div class="father">
        <div class="son"></div>
    </div>
    <!-- 6、生成内部文本：大括号 ul>li{我是li的内容} -->
    <div>TFBOYS</div>
    <ul>
        <li>我爱你们</li>
    </ul>
    <!-- 7、同时创建多个：*个数  ul>li*3 -->
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <ul>
        <li>TFBOYS</li>
        <li>TFBOYS</li>
        <li>TFBOYS</li>
        <li>TFBOYS</li>
        <li>TFBOYS</li>
    </ul>
</body>
</html>

五、 hover伪类选择器

背景相关属性

一、背景颜色

二、背景图片

三、背景平铺

四、背景位置

五、背景相关属性连写

元素显示模式

一、块级元素

二、行内元素

三、行内块元素

CSS三大特性

一、继承性

二、层叠性

综合案例-1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        a{
            width: 80px;
            height: 50px;
            background-color:#ff0000 ;
          /* 需要可以设置宽高，还需要一行显示多个 */
            display: inline-block; 
             /* 去除a标签默认的下划线 */
            text-decoration: none;
            /* 文字颜色 */
           color: #fff;
           /* 让内部文字水平居中 */
           text-align: center;
           /* 让内部文字垂直居中 */
           line-height: 50px;
        }
        a:hover{
            background-color: #ffa500;
        }
    </style>
</head>
<body>
    <a href="#">导航1</a>
    <a href="#">导航2</a>
    <a href="#">导航3</a>
    <a href="#">导航4</a>
    <a href="#">导航5</a>
</body>
</html>

综合案例-2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        a{
            width:95px ;
            height:48px ;
            background-color: red;
            display: inline-block;
            text-decoration: none;
            color: #fff;
            text-align: center;
            line-height: 37px;
        }
        .one{
            background: url(./images/2.png);
        }
        .two{
            background: url(./images/3.png);
        }
        .three{
            background: url(./images/4.png);
        }
        .four{
            background: url(./images/5.png);
        }

        /* ------------以下是hover之后的状态 */

        .one:hover{
            background: url(./images/6.png);
        }
        .two:hover{
            background: url(./images/7.png);
        }
        .three:hover{
            background: url(./images/1.png);
        }
        .four:hover{
            background: url(./images/2.png);
        }
    </style>
</head>
<body>
    <a href="#" class="one">五彩导航</a>
    <a href="#" class="two">五彩导航</a>
    <a href="#" class="three">五彩导航</a>
    <a href="#" class="four">五彩导航</a>
</body>
</html>