web——css进阶

最新推荐文章于 2024-10-04 22:03:04 发布

小琛

最新推荐文章于 2024-10-04 22:03:04 发布

阅读量124

点赞数

分类专栏： web前端文章标签： css 前端 css3

本文链接：https://blog.csdn.net/qq_44745063/article/details/125049173

版权

web前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

本文介绍了CSS中的后代选择器、子代选择器、并集选择器、交集选择器和`:hover`伪类选择器的用法，详细讲解了背景颜色、图片、平铺、位置等属性的设置，并通过实例展示了如何实现导航链接的美化。同时，阐述了CSS的继承和层叠原理，以及`display`属性在转换元素显示模式中的应用。

摘要由CSDN通过智能技术生成

作者：小琛
欢迎转载，请标明出处

选择器进阶

后代选择器

语法：选择器1 选择器2

根据嵌套关系，在选择器1中选择后代中所有满足内容的标签

子代选择器

语法：选择器1>选择器2

在选择器1中，寻找子代且只有子代的标签

并集选择器

语法：选择器1,选择器2

从标签中，选择包含选择器1或选择器2的内容

交集选择器

语法：选择器1.选择器2

从标签中，选出既有1又有2的内容

hover伪类选择器

语法：选择器1:hover

效果：当鼠标hover对应内容时，执行对应操作

背景

background-color 背景色
background-image 背景图片
可以配合:url()完成添加图片操作
background-repeat 平铺
有三个参数：no-repeat（不平铺）、repeat-X（X方向）、repeat-Y（Y方向）
background-position 背景位置
水平参数：left、right、center
垂直参数：top、center、bottom、
同时支持数字+px，可以设置负值，效果为部分内容被隐藏

背景相关内容的设置支持多元素同时设置，例如：
background：color url repeat positon

继承、层叠属性

继承：子代标签可以继承父代标签的相关css设置

控制文字的内容可继承（两个例外），其余无法继承
这种继承不是绝对的，部分内容不支持继承，例如a标签的color不会继承、h系列的font-size不会继承

层叠：当某个内容被重复定义，以后定义覆盖前定义为主

根据这个属性，可以简化工作量，例如：在body设定所有字体为16px，后续特殊的字体进行特殊设定即可

显示模式

块、行内、行内块

块：某一块内容
行内：某一行支持多个元素
行内块：两者均具备

转换

转为块级：display:block
转为行内块：display:inline-block
转为行内：display：inline

例子

在这里插入图片描述

<!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>导航</title>
    <style>
        .background{
            width: 100px;
            height: 50px;
            background-color: brown;
            display: inline-block;
            font-size: 20px;
            text-align: center;
            line-height: 50px;
            color: aliceblue;
            text-decoration: none;
        }
        a:hover {
            background-color: coral;
        }
    </style>
</head>
<body>
    <a href="#" class="background">导航1</a>
    <a href="#" class="background">导航2</a>
    <a href="#" class="background">导航3</a>
    <a href="#" class="background">导航4</a>
    <a href="#" class="background">导航5</a>
</body>
</html>