CSS学习笔记二 ——详细附图

最新推荐文章于 2024-08-19 19:27:18 发布
最新推荐文章于 2024-08-19 19:27:18 发布
阅读量334 收藏
点赞数 1
分类专栏： # html+css 文章标签： css css3 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45890970/article/details/121717980
版权
这篇博客详细介绍了CSS中的选择器进阶，包括复合选择器、后代选择器、子代选择器、并集选择器、交集选择器以及伪类选择器的应用。同时，讲解了背景颜色、背景图片、背景平铺和背景位置等相关属性，并通过实例展示了如何使用。此外，还探讨了元素显示模式的转换、CSS的继承性和层叠性，以及优先级的计算规则。最后，提供了导航栏的两种实现方式作为综合案例。
摘要由CSDN通过智能技术生成

CSS学习笔记二

1. 选择器进阶

复合选择器

后代选择器（注意空格）

1.相关介绍
在这里插入图片描述
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>
        div p{
            color:brown;
        }
    </style>
</head>
<body>
    <p>这是一个p标签</p>
    <div>
        <p>这是div的儿子p</p>
    </div>
</body>
</html>

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

子代选择器（大于号）

1.相关知识
在这里插入图片描述
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>
       div>a{
           color: red;
       }
    </style>
</head>
<body>
    <div>
        父级
        <a href="#">这是div里面的a</a>
        <p>
            <a href="#">这是div里面的p里面的a</a>
        </p>
    </div>
</body>
</html>

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

并集选择器（，）

1.相关知识
在这里插入图片描述
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>
      p,
      div,
      span,
      h1{
          color: red;
      }
    </style>
</head>
<body>
    <p>ppp</p>
    <div>div</div>
    <span>span</span>
    <h1>h1</h1>
    <h1>h1=h1</h1>
</body>
</html>

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

交集选择器

1.相关知识
在这里插入图片描述
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>
      .box{
          font-size: 14px;
      }
      p.box{
          color: red;
      }
    </style>
</head>
<body>
    <p class="box">这是p标签：box</p>
    <p>pppp</p>
    <div class="box">这是div标签：box</div>
</body>
</html>

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

hover伪类选择器（：）

1.相关知识
注意：任何标签都可以添加伪类，任何一个标签都可以鼠标悬停。
在这里插入图片描述
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:hover{
        color:red;
        background-color: blue;
    }
    </style>
</head>
<body>
    <a href="#">超链接</a>
</body>
</html>

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

Emment语法

1.相关知识
（1) div+p同级。
（2）提示css属性，单词的首字母；如fw700=font-width:700。
在这里插入图片描述
2.演示

  • ul>li{$}*3
<ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
  • w300+h200+bgc
width: 300px;
height: 200px;
background-color: #fff;

2. 背景相关属性

背景颜色

1.background(bgc)，其取值和color一样可以采用四种方式（关键字，rgb表示法，rgba表示法，十六进制）
2.背景颜色默认值是透明：rgba(0,0,0,.5)。(0省略)
3.背景颜色不会影响盒子大小，并且还能看清盒子的大小和位置，一般布局中习惯先给盒子设置背景颜色。
4.示例

<!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>
        div{
            background-color: pink;
        }
    </style>
</head>
<body>
    <div>div</div>
</body>
</html>

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

背景图片

1.background-image: url(./images/cat.png)，./images/cat.png为背景图片路径。
2.背景图片默认是在水平和垂直方向平铺的。
3.演示

<!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>
        div{
            width: 400px;
            height: 400px;
            background-color: pink;
            background-image: url(./images/cat.png);
        }
    </style>
</head>
<body>
    <div>嘤嘤嘤</div>
</body>
</html>

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

背景平铺

在这里插入图片描述
例子：

<!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>
        div{
            width: 400px;
            height: 400px;
            background-color: pink;
            background-image: url(./images/cat.png);
            background-repeat: no-repeat;
        }
    </style>
</head>
<body>
    <div>嘤嘤嘤</div>
</body>
</html>

在这里插入图片描述

背景位置

1.background-position:center center;可以省略为background-position:center;
在这里插入图片描述
2.例子(若x给负值，往左走；若y给负值，往上走；)

<!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>
        div{
            width: 400px;
            height: 400px;
            background-color: pink;
            background-image: url(./images/cat.png);
            background-repeat: no-repeat;
            background-position:-50px -100px;
            
        }
    </style>
</head>
<body>
    <div>嘤嘤嘤</div>
</body>
</html>

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

背景相关属性

  1. 推荐书写顺序（也可以不按这个顺序来）：background:color image repeat position。
  2. 背景图位置如果是英文单词可以颠倒顺序，数字不能颠倒顺序。
  3. 可以按需省略。
  4. 例子
<!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>
        div{
            width: 400px;
            height: 400px;
            /*推荐顺序*/
            /*background: pink url(./images/cat.png) no-repeat center bottom ;*/
            background:center pink url(./images/car.jpg) no-repeat ;  /*不是推荐顺序也可以*/
            
        }
    </style>
</head>
<body>
    <div>嘤嘤嘤</div>
</body>
</html>

显示效果：
在这里插入图片描述
注意：img用来显示网页中比较重要的图片，不重要的背景图片（如：修饰作用的）。

3. 元素显示模式 <>

块级元素

1.独占一行（一行只显示一个），可以设置宽高。
2.包括：div、p、h系列，ul、li 、dl、dt、dd、 form、 header、 nav、 footer...

行内元素

1.一行可以显示多个。宽度高度默认由内容撑开，不可设置宽高，但背景可以设置。
2.包括：a 、span、 b 、u、i、 s、 striong、 ins、 em、 del...。

行内块元素

1.一行可以显示多个，加宽高可以生效。
2.包括：input 、textarea 、button 、select...。
特殊情况：img标签有行内块元素的特点，但是Chrome调试工具中显示结果是inline

元素显示模式转换

1.相关知识
在这里插入图片描述
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>
        div{
            width: 200px;
            height: 100px;
            display: inline-block;
            background: pink;
        }
    </style>
</head>
<body>
   <div>pp</div>
   <div>ppp</div>
</body>
</html>

显示效果：
在这里插入图片描述
3.嵌套规范
（1）块级元素一般作为大容器，可以嵌套：文本、块级元素、行内元素、行内块元素等等…。（但是p标签中不要嵌套div、p、h等块级元素）
（2）a标签内部可以嵌套任何元素，但是不能嵌套a标签。

4. CSS特性

继承性

1.子元素有默认夫元素样式的特点。
2.文字控制属性都可以继承，控制标签本身的一律不能继承。
在这里插入图片描述
3.如果本来就有颜色，就不会继承父亲的颜色，比如超链接。如果本来就有字号大小，也不会基础父亲的，比如h系列。

层叠性

1.相关知识
在这里插入图片描述

优先级

  1. 谁的范围广，谁的优先级低。
    在这里插入图片描述
  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>
        /*id 选择器*/
        #ox{
            color: orange;
        }
        /*类选择器*/
        .box{
            color: blue;
        }
        /*标签选择器*/
        div{
            color: green !important;
        }
        /*继承*/
        body{  
            color: red;  
        }
    </style>
</head>
<body>
    <div class="box" id="ox" style="color: brown; font-size:32px ">你好</div>
</body>
</html>

显示结果如下：
在这里插入图片描述
3. 权重叠加计算
在这里插入图片描述
例子：


<!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>
        /*(0,1,0,1)*/
        div #one{
            color: orange;
        }
        /*(0,0,2,0)*/
        .father .son{
            color: blue;
        }
        /*(0,0,1,1)*/
        .father p{
            color: green;
        }
        /*(0,0,0,2)*/
        div p{  
            color: red;  
        }
    </style>
</head>
<body>
    <div class="father">
        <p class="son" id="one"> 你好</p>
    </div>
</body>
</html>

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

5. 综合案例

  1. alt+shift可以选多行添加或者删除内容。

导航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{
        text-decoration: none;
          width: 100px;
          height: 50px;
          background-color: red;
          display: inline-block; /*转行内块*/
          color:white;
          text-align: center;
          line-height: 50px;
      }
      a:hover{
          background-color: orange;
      }
    </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{
          text-decoration: none;
          width: 120px;
          height: 58px;
          background-color: pink;
          display: inline-block;
          text-align: center;
          line-height: 50px;
          color: #fff;
      }
      .one{
          background-image: url(./images/bg1.png);
      }
      .two{
          background-image: url(./images/bg2.png);
      }
      .three{
          background-image: url(./images/bg3.png);
      }
      .four{
          background-image: url(./images/bg4.png);
      }
      .one:hover{
          background-image: url(./images/bg5.png);
      }
      .two:hover{
          background-image: url(./images/bg6.png);
      }
      .three:hover{
          background-image: url(./images/bg7.png);
      }
      .four:hover{
          background-image: url(./images/bg8.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>

在这里插入图片描述

焦妮敲代码
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
CSS详细笔记
nuomi_w的博客
11-15 779
1.CSS简介 CSS的主要使用场景就是美化网页，布局页面的。 1.1HTML的局限性 说起HTML，这其实是个非常单纯的家伙，他只关注内容的语义。比如表明这是一个大标题，表明这是一个段落，表明这儿有一个图片，表示此处有链接。 1.2 CSS-网页的美容师 CSS是层叠样式表(Cascading Style Sheets)的简称. 有时我们也会称之为CSS样式表或级联样式表。 总结: HTML主要做结构,显示元素内容. CSS美化 HTML,布局网页. CSS最大价值:由HTML专注去做结构呈现，样式交给
CSS基础学习笔记一（详细）
Speed_Pig的博客
03-04 2703
文章目录初识CSS 初识CSS
CSS学习笔记三——详细附图
Concise200的博客
12-17 319
CSS学习笔记三1. PxCook2. 盒子模型2.1 盒子模型的介绍宽高边距（border）内边距（padding）外边距（margin）2.2 综合案例新浪导航 1. PxCook 实际开发需要测量工具测量图片尺寸大小或者颜色，如图所示。 一般我们使用的是Pxcook软件，点击链接可以查看下载和使用教程。 2. 盒子模型 2.1 盒子模型的介绍 示例 <!DOCTYPE html> <html lang="en"> <head> <meta char
CSS学习笔记一 ——详细附图、入门必看
Concise200的博客
12-02 521
CSS入门1. 基础认知初始引入方式2. 基础选择器标签选择器类选择器id选择器通配选择器3. 字体和文本样式font文本缩进水平对齐方式文本修饰行高颜色常见取值标签水平居中方法（常用）4.Chrome调试工具 1. 基础认知 初始 CSS是层叠样式表。 css写在style标签中，style标签一般写在head标签里面，title标签下面。 (1)选择器是查找标签的， css的注释：/* */ 例子： <!DOCTYPE html> <html lang="en"> <
学习标准——笔记
10-31
### 学习标准——笔记 #### 一、CSS布局技巧与注意事项 1. **对象具有浮动属性时的宽度处理：** - 当一个HTML元素（如`<div>`）设置了`float`属性后，该元素将脱离文档流，并且不再占据原来的位置空间。因此，在...
HTML+CSS学习笔记.zip
01-01
HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记 HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记 HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记 ...
前端三件套css学习笔记分享
02-24
前端三件套css学习笔记分享
css学习笔记
12-20
本人自己学习CSS过程中亲自总结的思维导图，结构清晰，重点突出，便于记牢
html+css学习笔记 前端 CSS html
11-02
学习了一个月的前端笔记
css设置元素居中显示
DN金猿的博客
08-18 260
CSS中实现居中显示可以通过不同的属性来实现，取决于你是要水平居中还是垂直居中，或者两者都要。4.水平和垂直居中 - 使用flexbox。选择合适的方法取决于你的具体需求和上下文。5.水平和垂直居中 - 使用定位和转换。6.水平和垂直居中 - 使用grid。1.水平居中 - 行内元素或文本。2.水平居中 - 块级元素。3.垂直居中 - 单行文本。
【前端 23】用Less优化你的CSS书写体验
delepaste的博客
08-18 844
Less（Leaner Style Sheets）是一种CSS预处理器，它扩展了CSS的功能，引入了变量、嵌套规则、混合（Mixins）、运算等特性，使得CSS编写更加灵活和强大。下面，我们将详细介绍如何在VS Code中使用Less，包括基础语法和一些实用的VS Code插件。
CSS的:only-child伪类：精准定位单一子元素的样式艺术
2402_85758349的博客
08-18 533
伪类选择器是CSS中用来选择元素的特定状态或属性的关键字。例如，:hover伪类用于选择鼠标悬停时的元素。伪类则用于选择唯一的子元素。
CSS的:read-write和:read-only伪类：增强表单元素的样式与用户体验
liuxin33445566的博客
08-17 496
伪类在CSS中用于选择不在文档树中的元素，或者根据元素的特定状态来选择元素。和:read-only伪类就是根据输入字段是否可编辑来选择元素。
CSS方向选择的艺术：深入探索:horizontal和:vertical伪类
2401_85702623的博客
08-17 810
和:vertical伪类是CSS选择器，用于根据元素的书写模式（writing mode）来选择元素。选择器应用于书写模式为水平方向的元素，而:vertical选择器应用于书写模式为垂直方向的元素。
css 文字图片居中及网格布局
m0_69254007的博客
08-16 329
【代码】css 文字图片居中及网格布局。
CSS的:first-child与:last-child伪类：精准定位首尾子元素
2401_85743969的博客
08-18 559
伪类选择器是CSS中用来选择元素的特定状态或属性的关键字。例如，:hover伪类用于选择鼠标悬停时的元素。和伪类则分别用于选择父元素的第一个和最后一个子元素。
探索CSS的未来与过去：:past-link伪类的创新应用
2402_85761468的博客
08-17 489
CSS（层叠样式表）是构建网页视觉表现的核心技术。随着CSS4的提出，一系列新的选择器被引入，旨在提供更丰富的样式控制能力。:past-link伪类是这些新提议中的一个，尽管它目前还未被广泛实现，但它代表了CSS选择器未来发展的一个方向。本文将探讨:past-link伪类的概念、潜在的实现方式以及如何利用它来增强网页的交互性和视觉表现。
CSS(源码+lw+部署文档+讲解等)
最新发布
lpw1012的博客
08-19 834
🌞博主介绍：✌全网粉丝15W+,CSDN特邀作者、211毕业、高级全栈开发程序员、大厂多年工作经验、码云/掘金/华为云/阿里云/InfoQ/StackOverflow/github等平台优质作者、专注于Java、小程序技术领域和毕业项目实战，以及程序定制化开发、全栈讲解、就业辅导✌🌞👇🏻精彩专栏 推荐订阅👇🏻2023-2024年最值得选的微信小程序毕业设计选题大全：100个热门选题推荐✅2023-2024年最值得选的Java毕业设计选题大全：500个热门选题推荐✅Java精品实战案例《500套》
CSS学习笔记：WEB开发中的样式精华
这篇CSS学习笔记详细介绍了CSS的基础知识，包括其起源、作用以及如何改善HTML页面的设计。CSS，即层叠样式表，是一种用于网页样式控制的语言，1996年由W3C制定并通过，旨在增强HTML的美工设计能力，支持多种设备的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

焦妮敲代码

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值