灯塔：CSS笔记（2）

一 选择器进阶

后代选择器：空格

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

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

结果：

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

注意点：

1.后代包括：儿子 孙子 重孙子....

2.后代选择器中，选择器与选择器之间通过空格隔开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div p{
            color: red;
        }
        /* div{
            color: chartreuse;
        } */
    </style>
</head>
<body>
   
        <div><p>这是一个div标签</p></div>

    <div>看看我变红了吗</div>
</body>
</html>
子代选择器： >

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

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

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

注意点：

1.子代只包括儿子

2.子代选择器中，选择器与选择器之间通过 > 隔开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div>a{
            color: brown;
        }
        
    </style>
</head>
<body>
    <div>
        <p>
            <a href="#">我是超链接</a>
        </p>
        <a href="#">我是超链接2</a>
    </div>
    <a href="#">我是超链接3</a>
</body>
</html>
并集选择器： ，

作用：同时选择多组标签，设置相同的样式

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

结果：找到 选择器1和选择器2选中的标签，设置样式

注意点：

1.并集选择器中的每组选择器之间通过分隔

2.并集选择器中的每组选择器可以是基础选择器或者复合选择器

3.并集选择器中的每组选择器通常一行写一个，提高代码的可读性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p,div,span,a{
            font-family: 楷体;
            color: rgb(255, 0, 0);
        }
    </style>
</head>
<body>
    <p>我是p标签</p>
    <div>我是div标签</div>
    <span>我是span标签</span>
    <br>
    <a href="#">我是超链接</a>
    <h1>现在需要把上面的四个改色和字体</h1>
</body>
</html>
交集选择器：紧挨着

作用：选择器1 . 选择器2{css}

结果：（既又原则）找到页面中既能被选择器1选中又能被选择器2选中的标签，设置样式

注意点：

1.交集选择器中的选择器之间是紧挨着的，没有东西分隔

2.交集选择器中如果有标签选择器，标签选择器必须写在最前面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div.class{
            color: brown;
        }
    </style>
</head>
<body>
    <p>This is a p </p>
    <div class="class">这里有一个div标签</div>
    <p class="class">这里是一个p标签</p>
</body>
</html>
hover伪类选择器

作用：选中鼠标悬停在元素上的状态，设置样式

选择器语法：选择器 ：hover{ css }

注意点：伪类选择器选中的元素的某种状态

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div:hover{
            color: green;
       
        }
        a:hover{
            color: brown;
        }
        p:hover{
            color: rgb(99, 30, 210);
        }
    </style>
</head>
<body>
    <p>鼠标悬停时 文字显示为绿色</p>
    <div>上面是一个p标签</div>
    <a href="#">超链接</a>
</body>
</html>
emment语法

作用：通过简单语法，快速生成代码

语法：类似于刚刚学的选择器的写法

记忆示例效果
标签名div<div> <div>
类选择器.red<div class=" red "> <div>
id选择器#one<div id="one"> <div>
交集选择器p.red#one

<p class="red" id="one"> <p>

子代选择器ul>li<ul><li> </li></ul>
内部文本ul>li(我是li的内容)<ul><li>我是li的内容</li></ul>
创建多个ul>li*3<ul><li> </li><li> </li><li> </li><ul>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- p.box  -->
    <p class="box"></p>
    <!-- p.red#one  -->
    <p class="red" id="one"></p>
    <!-- 同级的div和p ： div+p  -->
    <p></p>
    <div></div>
    <!-- 父子：> -->
    <div>
        <p></p>
    </div>
    <!-- ul>li*3  -->
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <!-- ul>li*3{$} -->
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <!-- ul>li{1111}*3  -->
    <ul>
        <li>1111</li>
        <li>1111</li>
        <li>1111</li>
    </ul>
</body>
</html>

背景相关属性

背景颜色

属性名：background-color（bgc）

属性值：颜色取值：关键字  rgb表示法  rgba表示法  十六进制...

注意点：背景颜色默认值使透明：rgba（0，0，0，0） transparent

背景颜色不会影响盒子大小，并且还能看清盒子的大小和位置，一般在布居中会习惯给盒子设置背景颜色

背景图片：

属性名：background-image（bgi）

属性值：

background-image：url（'图片的路径'）；

注意点:

背景图中url中可以省略引号

背景图片默认仅仅是在水平和垂直方向上平铺的

背景图片仅仅是指给盒子起到装饰效果，类似于背景颜色，是不是能撑开盒子的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 300px;
            background-color: pink;
            background-image: url(./beauty.jpg);
        }
    </style>
</head>
<body>
    <div>
        整个背景吧
    </div>
</body>
</html>
背景平铺

属性名：background-repeat（bgr）

属性值：

取值效果
repeat（默认）水平和垂直方向都平铺
no-repeat不平铺
repeat-x沿着水平方（x轴）平铺
repeat-y沿着垂直方向（y轴）平铺
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 300px;
            background-color: red;
            background-image: url(./beauty.jpg);
            background-repeat: no-repeat;
            /* background-repeat: repeat-x; */
            /* background-repeat: repeat-y; */
            /* background-repeat: repeat; */

        }
    </style>
</head>
<body>
    <div>load</div>
</body>
</html>
背景位置

属性名：background-position（bgp）

属性值：

background-position：水平方向位置  垂直方向位置;

 注意点：方位名词取值和坐标取值可以混使用，第一个取值表示水平，第二个取值表示垂直

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 1900px;
            height: 1600px;
            background-color: white;
            background-repeat:no-repeat ;
            background-image: url(./bird.jpg); 
            /* background-position: center center;  */
             /* background-position: right bottom;  */
            /* background-position: left top;  */
            /* background-position: center; */
             background-position: -50px 60px; 

        }
    </style>
</head>
<body>
    <div>这是背景位置</div>
</body>
</html>
背景相关属性的连写形式

属性名：background（bg）

属性值：单个属性的合写，取值之间用空格隔开

书写顺序：

推荐：background：color image repeat position

省略问题：

*可以按需求省略

*特殊情况：在pc端，如果盒子大小和背景图片大小一样，此时可以直接写background：url（）

注意点：

*如果需要设置单独的样式和连写 ，要么把单独的样式写在连写的下面 ，要么把单独的样式写在连写的里面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 2000px;
            height: 1900px;
            /* background: pink url(./bird.jpg) no-repeat bottom center; */
            /* background: pink url(./bird.jpg) no-repeat  center bottom; */
            /* background: pink url(./bird.jpg) no-repeat  center bottom;  */
            background: pink url(./bird.jpg) no-repeat 50px 100px;
            /* 背景图如果是英文单词可以颠倒顺序 */
            /* 测试背景图位置如果是数值 不要颠倒顺序 */
            
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>
img标签和背景图片的区别

需求：需要在网页中展示一张图的效果？

法一：直接写上img标签即可

法二：div标签+背景图片

*需要设置div的宽高，因为背景图片只是装饰css样式，不能撑开div标签

元素单独显示模式
块级元素

显示特点：

1.独占一行（一行只能显示一个）

2.宽度默认是父元素的宽度，高度默认由内容撑开

3.可以设置宽高

代表标签：

div p h系列、ul 、li、dl、dd、form、header、nav、footer...

行内元素

显示特点：

1.一行可以显示多个

2.宽度和高度默认由内容撑开

3.不可以设置宽高

代表标签：

a、span、b、u、i、s、strong、ins、em、del...

行内块元素

显示特点：

1.一行可以显示多个

2.可以设置宽高

代表标签：

input、textarea、button、select...

特殊情况：img标签有行内块元素特点，但是Chrome调试工具中显示结果是inline

元素显示模式转换

目的：改变元素默认的显示特点，让元素符合布局要求

语法：

属性效果使用频率
display：block转换成块元素较多
display：inline-block转换成行内块元素较多
display：inline转换成行内元素极少

拓展1：HTML嵌套规范注意点：

1.块级元素一般作为大容器，可以嵌套：文本、块级元素、行内元素、行内块元素等等...

但是：p标签中不要求嵌套div、p、h等块级元素

1.a标签内部可以嵌套任意元素

但是：a标签不能嵌套a标签

CSS特性：

1.继承性：

特性：子类元素默认继承父类元素样式的特点(子承父业)

可以继承的常见属性（文字控制属性都可以继承）

1.color

2.font-weight、font-style、font-size、font-family

3.text-indent、text-align

4.line-height

5.。。。

注意点：可以通过调试工具判断样式是否可以继承

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            color: blueviolet;
            font-family: 楷体;
        }
        div p a {
            color:black;
        }
    </style>
</head>
<body>
    <div>
        <p>
            <a href="#">超链接</a>
        </p>
        <span>span </span>
        <br>
        <a href="#">a </a>
        <h1>一级标题</h1>
    </div>
</body>
</html>

（拓展）继承失效的特殊情况

如果元素有浏览器默认样式，此时继承性依然存在，但是如果子类本身就有的属性 ，就不会继续继承

1.a标签的color会继承失效

2.h系类标签的font-sizde会继承失效

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 控制文字的属性都能继承，不是控制文字的不能继承 */
        /*css上一行出错会影响下一行*/
        div{
            color: red;
            font: size 30px;;
            height: 300px;
        }
    </style>
</head>
<body>
    <div>这是div标签
        <span>
            这是div里面的span
        </span>
    </div>
</body>
</html>

继承的例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 都是继承，继承里面谁高，看继承哪个父级，哪个父级高，哪个选择器生效 */
        div p{
            color: red;
        }
        .father{
            color: blue;
        }
    </style>
</head>
<body>
    <div class="father">
        <p class="son">
            <span>文字</span>
        </p>
    </div>
</body>
</html>

2.层叠性：

特性：

1.给同一个标签设置不同的样式→    此时样式会层叠叠加   →会共同作用在标签上

2.给同一个标签设置相同的样式→    此时样式会层叠覆盖   →最终写在最后的样式会生效

注意点：当样式冲突时，只有选择器优先级相同时，才能通过层叠性判断结果

3.1优先级的介绍：

特性：不同的选择器具有不同的优先级，优先级高的选择器样式会覆盖优先级低的选择器样式

优先级公式：

继承<通配符选择器<标签选择器<类选择器<id选择器<行内式<！important

注意点：

1.！important写在属性值的后面，分号的前面！

2.！important不能提升继承的优先级，只要是继承优先级最低！

3.实际开发中不建议使用！important。

3.2权重叠加计算

 测试优先级例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box{
            color: aqua;
        }
        .box{
            color: blue;
        }
        div{
            color: chartreuse!important;
        }
        body{
            color: red;
        }
    </style>
</head>
<body>
    <div class="box" id="box" style="color:blueviolet;">测试优先级</div>
</body>
</html>
Chrome调试工具 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/442639.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

基于Springboot的智慧社区居家养老健康管理系统（有报告）。Javaee项目，springboot项目。

基于Springboot的智慧社区居家养老健康管理系统（有报告）。Javaee项目，springboot项目。

演示视频&#xff1a; 基于Springboot的智慧社区居家养老健康管理系统&#xff08;有报告&#xff09;。Javaee项目&#xff0c;springboot项目。 项目介绍&#xff1a; 采用M&#xff08;model&#xff09;V&#xff08;view&#xff09;C&#xff08;controller&#xff09;…
阅读更多...
膜厚测量仪在半导体应用中及其重要

膜厚测量仪在半导体应用中及其重要

随着科技的不断发展&#xff0c;半导体行业已成为当今世界的核心产业之一。在这个领域中&#xff0c;半导体膜厚测量仪作为关键设备&#xff0c;其精度和可靠性对于产品质量和生产效率具有至关重要的作用。本文将详细介绍半导体膜厚测量仪的工作原理、应用领域以及其在半导体制…
阅读更多...
如何分辨Mac设备X86或ARM

如何分辨Mac设备X86或ARM

在终端中输入如下命令可以获取到当前 Mac 设备是 X86 还是 ARM 类型 uname -a 以上便是此次分享的全部内容&#xff0c;希望能对大家有所帮助!
阅读更多...
运动想象 (MI) 迁移学习系列 (2) :TDLNet

运动想象 (MI) 迁移学习系列 (2) :TDLNet

运动想象迁移学习系列:TDLNet 0. 引言1. 主要贡献2. 网络介绍2.1 TDM模块2.2 Inception模块2.3 RAMM模块 3. 特征可视化算法4. 结果4.1 消融实验4.2 与基于CNN的参考和迁移学习方法的比较4.3 基于遮挡信号频率的特征可视化 5. 总结欢迎来稿 论文地址&#xff1a;https://ieeex…
阅读更多...
委员建议进一步扩大香港与内地金融市场互联互通发展

委员建议进一步扩大香港与内地金融市场互联互通发展

在我们共同追寻金融发展的星辰大海之际&#xff0c;我怀着无比激动的心情&#xff0c;向诸位委员提议进一步扩大香港与内地金融市场互联互通发展。这个议题犹如一颗璀璨的明珠&#xff0c;闪耀着诱人的光芒&#xff0c;吸引着我们为之奋斗。让我们共同探讨这一话题&#xff0c;…
阅读更多...
新版电脑QQ使用体验怎么样？最软库帮你体验！

新版电脑QQ使用体验怎么样？最软库帮你体验！

你已经有多久没在电脑上用QQ了&#xff1f; 最近腾讯发布了由NT架构打造的最新版电脑QQ&#xff0c;彻底抛弃了以往陪伴了我们十几年的用户界面 采用了全新的用户界面&#xff0c;说是全新界面&#xff0c;其实就是风格往微信靠拢而已。 最软库本期就给大家试试新QQ&#xff0c…
阅读更多...
基于MPPT的太阳能光伏电池simulink性能仿真,对比扰动观察法,增量电导法,恒定电压法

基于MPPT的太阳能光伏电池simulink性能仿真,对比扰动观察法,增量电导法,恒定电压法

目录 1.课题概述 2.系统仿真结果 3.核心程序与模型 4.系统原理简介 4.1 扰动观察法 (Perturb and Observe Method) 4.2 增量电导法 (Incremental Conductance Method) 4.3 恒定电压法 (Constant Voltage Method) 5.完整工程文件 1.课题概述 在simulink中&#xff0c;实…
阅读更多...
2024年阿里云服务器新版计算器上线了，报价不求人

2024年阿里云服务器新版计算器上线了，报价不求人

阿里云服务器价格计算器&#xff0c;鼠标选择云服务器ECS实例规格、地域、系统盘、带宽及购买时长即可一键计算出精准报价&#xff0c;报价不求人使用计算器自己查&#xff0c;报价清单支持下载。阿里云服务器网aliyunfuwuqi.com分享阿里云服务器价格计算器链接地址&#xff1a…
阅读更多...
前端面试练习24.3.8

前端面试练习24.3.8

防抖和节流 防抖&#xff08;Debouncing&#xff09;&#xff1a; 防抖是指在短时间内连续触发同一事件时&#xff0c;只执行最后一次触发的事件处理函数。 在实际应用中&#xff0c;常常用于处理用户输入的搜索框或者滚动事件。例如&#xff0c;当用户连续输入搜索关键词时&am…
阅读更多...
【Redis】redis的基本使用

【Redis】redis的基本使用

&#x1f4dd;个人主页&#xff1a;五敷有你 &#x1f525;系列专栏&#xff1a;Redis ⛺️稳中求进&#xff0c;晒太阳 Redis的概述 为什么要有redis? redis是数据库&#xff0c;mysql也是数据库&#xff0c;redis做缓存的意义就是为了减轻数据库压力 数据库为什么…
阅读更多...
Android Studio轮播图使用失败怎么办【已解决】

Android Studio轮播图使用失败怎么办【已解决】

Android Studio轮播图使用失败怎么办 1.在gethub上面搜索轮播图 2.选择要使用的轮播图 3.查看该轮播图的配置方法 4.复制该依赖放入build.gradle中 5.重新构建 6.使用banner 发现没有报错了 7.参考网址 https://github.com/youth5201314/banner
阅读更多...
element---tree树形结构（返回的数据与官方的不一样）

element---tree树形结构（返回的数据与官方的不一样）

项目中要用到属性结构数据&#xff0c;后端返回的数据不是官方默认的数据结构&#xff1a; <el-tree:data"treeData":filter-node-method"filterNode":props"defaultProps"node-click"handleNodeClick"></el-tree>这是文档…
阅读更多...
零、自然语言处理开篇

零、自然语言处理开篇

目录 0、NLP任务的基础——符号向量化 0.0 词袋模型 0.1 查表/One-hot编码 0.2 词嵌入模型/预训练模型 0.2.0 Word2Vec &#xff08;0&#xff09;CBOW &#xff08;1&#xff09;Skip-gram 0.2.1 GloVe 0.2.2 WordPiece 0.2.3 BERT 0.2.4 ERNIE NLP自然语言处理&am…
阅读更多...
投放项目到github仓库（代码集合）

投放项目到github仓库（代码集合）

1 假设你的项目文件夹为Project1 &#xff0c;那么代开Project1后 右键选择打开Git Bash 2输入初始化本地仓库 git init 3输入git add . (.表示全部&#xff0c;当然也可以部分选取&#xff0c;请自行百度) 4输入 git remote add origin https://github.com/********.git(网…
阅读更多...
GitHub和Gitee的基本使用和在IDEA中的集成

GitHub和Gitee的基本使用和在IDEA中的集成

文章目录 【1】GitHub1.创建仓库2.增加和修改文件3.创建分支4.删除仓库5.远程仓库下载到本地 【2】Gitee1.创建仓库2.远程仓库下载到本地. 【3】IDEA集成GitHub【4】IDEA集成Gitee1.在Gitee中修改&#xff0c;同步到本地2.从Gitee中下载项目 【1】GitHub 1.创建仓库 先登陆这…
阅读更多...
LeetCode每日一题之 寻找数组中心下标

LeetCode每日一题之 寻找数组中心下标

题目介绍&#xff1a; 题目链接&#xff1a;. - 力扣&#xff08;LeetCode&#xff09; 算法原理: 这道题仍然可以使用前缀和的思想来求解&#xff0c;不理解基础前缀和模板的可以看我前面的博客&#xff0c;上图中0-2号位元素的和可以很好地用前缀和数组求出&#xff0c;而后…
阅读更多...
系统安全保证措施-word

系统安全保证措施-word

【系统安全保证措施-各支撑材料直接套用】 一、 身份鉴别 二、 访问控制 三、 通信完整性、保密性 四、 抗抵赖 五、 数据完整性 六、 数据保密性 七、 应用安全支撑系统设计 软件全套资料下载进主页。
阅读更多...
智慧公厕系统的运作过程

智慧公厕系统的运作过程

智慧公厕是一种新型的未来城市公共厕所&#xff0c;通过物联网、互联网、大数据、云计算、自动化控制等技术&#xff0c;实现公共厕所使用、运营、管理、养护的全过程全方位信息化。 那么&#xff0c;智慧公厕是如何运作的&#xff1f;智慧公厕的运作过程包括什么技术&#xf…
阅读更多...
广度优先搜索和深度优先搜索

广度优先搜索和深度优先搜索

广度优先搜索 广度优先搜索&#xff08;Breadth-First-Search&#xff0c;BFS&#xff09;类似于二叉树的层序遍历算法&#xff08;借助队列&#xff09;&#xff0c;其基本思想是&#xff1a;首先访问起始顶点&#xff0c;接着由v出发&#xff0c;依次访问v的各个未访问过的邻…
阅读更多...
【LeetCode: 212. 单词搜索 II - dfs】

【LeetCode: 212. 单词搜索 II - dfs】

&#x1f680; 算法题 &#x1f680; &#x1f332; 算法刷题专栏 | 面试必备算法 | 面试高频算法 &#x1f340; &#x1f332; 越难的东西,越要努力坚持&#xff0c;因为它具有很高的价值&#xff0c;算法就是这样✨ &#x1f332; 作者简介&#xff1a;硕风和炜&#xff0c;…
阅读更多...
最新文章

Copyright @ 2022~2023