【无标题】

最新推荐文章于 2024-10-02 17:15:49 发布

soft_Youth

最新推荐文章于 2024-10-02 17:15:49 发布

阅读量108

点赞数

分类专栏：前端预习文章标签： html

本文链接：https://blog.csdn.net/soft_Youth/article/details/124264189

版权

前端预习专栏收录该内容

6 篇文章 0 订阅

订阅专栏

第三次预习

一、CSS高级选择器（复合选择器）

复合选择器就是建立在基础选择器之上，对基本选择器进行组合形成的。
常用的复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器

1、后代选择器（又称为包含选择器）
可以选择父元素包含的子元素
写法为

<head>
    <style>
        /* 写法为！ */
        /* 父标签 字标签{

        } */
        ol li{
            color:brown
        }
    </style>
</head>
<body>
    <ol>
        <li>被选中的</li>
        <li>被选中的</li>
        <li>被选中的</li>
    </ol>
    <ul>
        <li>未被选中的</li>
        <li>未被选中的</li>
        <li>未被选中的</li>
    </ul>
</body>

显示效果如下
在这里插入图片描述
被组合的可以是任意形式的基础选择器，除了标签名，还可以用类名

2、子选择器
只能选择某元素最近一级的子元素

<head>
    <style>
        
        /* 写法为！ */
        /* 父标签>字标签{

        } */
        .nav>a{color:brown 
        }
    </style>
</head>
<body>
    <div class="nav">
        <a href="#">会被选中</a>
        <p>
            <a href="#">不会被选中</a>
        </p>
    </div>
</body>

显示效果如下
在这里插入图片描述
3、并集选择器
可以选择多组标签，同时为他们定义相同的样式。

<head>
    <style>
        
        /* 写法为！ */
        /* 元素1，元素2{

        } */
        div,p,ul li{color:brown 
        }
    </style>
</head>
<body>
    <div>123</div>
    <p>456</p>
    <ul>
        <li>789</li>
        <span>10 11 12</span>
    </ul>
</body>

显示效果如下
在这里插入图片描述
4、伪类选择器
用于向某些选择器添加特殊效果，比如给链接添加特殊效果，或选择第一个或第n个元素，书写特点是用：表示，比如：first-child

1）链接伪类选择器
在这里插入图片描述

<head>
    <style>
       a:link{
           color:black;
       }
    </style>
</head>
<body>
    <a href="#">lianjie</a>
</body>

在这里插入图片描述
2）focus伪类选择器
用于选取获得焦点的表单元素，焦点就是光标，一般情况表单元素才能获取，因此这个选择器也针对表单来说。
使用范例：

<head>
    <style>
       input:focus{
           background-color:yellow;
       }
    </style>
</head>
<body>
    <input type="text">
    <input type="text">
    <input type="text">
</body>

显示效果如下
在这里插入图片描述

二、阴影

1、使用box-shadow为盒子添加阴影
在这里插入图片描述
这些值前两个是必须的，后面的可以省略

<head>
    <style>
      div{
          width:100px;
          height:100px;
          background-color:pink;
         margin:100px auto;
         /* box-shadow: 按表中顺序添加数值 */
      }
    </style>
</head>

 /* 可以实现鼠标挪到盒子上时就显示阴影 */
      div:hover{
          box-shadow：；
      }

2、文字阴影
使用text-shadow为文本添加阴影
在这里插入图片描述

三、圆角边框

在这里插入图片描述

<head>
    <style>
      div{
          width:100px;
          height:100px;
          background-color:pink;
          border-radius: 30px;
      }
    </style>
</head>
<body>
    <div></div>
</body>

显示效果如下
在这里插入图片描述
如果使用是百分比，则代表宽度的百分之多少
可分别设置四个角的圆度，以左上角的角为第一个，顺时针方向
如果是两个数值，则是左上和右下对应第一个数值，另外两个角对应第二个数值

四、背景

1、背景颜色
background-color
在这里插入图片描述
2、背景图片
background-image

<head>
    <style>
      div{
          width:800px;
          height:400px;
          background-color:  pink;
          background-image: url(bgi.jpg);
      }
    </style>
</head>
<body>
    <div></div>
</body>

显示效果如下
在这里插入图片描述
3、背景平铺
background-repeat

<head>
    <style>
      div{
          width:800px;
          height:600px;
          background-color:  pink;
          background-image: url(logo.png);
          background-repeat: repeat-y;
      }
    </style>
</head>
<body>
    <div></div>
</body>

显示效果如下
在这里插入图片描述
4、背景位置
background-position

<head>
    <style>
        div{
            width:400px;
            height:400px;
            background-image: url(logo.jpg);
            background-repeat: no-repeat;
            background-color: pink;
            /* 使用方位介词时，xy先后顺序无关 */
            background-position: x y;
            /* 例如左上角使用left top和top left效果一样 */
        }
    </style>
</head>
<body>
    <div>

    </div>
</body>