CSS学习归纳2

最新推荐文章于 2024-09-15 21:53:51 发布
最新推荐文章于 2024-09-15 21:53:51 发布
阅读量964 收藏 20
点赞数 27
文章标签： css 学习 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/SPIRITE_SYF/article/details/137245687
版权
本文详细介绍了CSS中的复合选择器（后代、子代、并集等），元素类型转换，以及背景设置，包括颜色、图片、平铺、位置、固定滚动等，通过实例展示了如何应用这些知识来创建导航栏效果。
摘要由CSDN通过智能技术生成

        这里是对选择器的进一步的学习，是CSS学习归纳1的进阶版本。同时还有元素类型转换的学习归纳。

一、复合选择器

1.1后代选择器

        所谓后代选择器就是指，能够对某一标签的后代（子代，孙子代...）进行选择修改的选择器。表达的方式以空格分隔。

        如何选择子代？格式是 ：父标签 子标签{}

<!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>

    /* 把ol的li选出来 */
    ol li {
      color: pink;
    }

  </style>
</head>

<body>
  <h1>一、后代选择器（重要）</h1>
  <ol>
    <li>我是ol的孩子</li>
    <li>我是ol的孩子</li>
    <li>我是ol的孩子</li>
    <li>我是ol的孩子</li>
  </ol>

</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>

    /* 把ul的孙子选出来 */
    ul li a {
      color: blue;
    }

  </style>
</head>

<body>
  <h1>一、后代选择器（重要）</h1>

  <ul>
    <li>我是ul的孩子</li>
    <li>我是ul的孩子</li>
    <li>我是ul的孩子</li>
    <li>我是ul的孩子</li>
    <li><a herf="#">我是ul的孙子</a> </li>

  </ul>



</body>

</html>

        如果出现了相同的标签结构，如下面的代码所示

<ul>
    <li>我是ul的孩子</li>
    <li>我是ul的孩子</li>
    <li>我是ul的孩子</li>
    <li>我是ul的孩子</li>
    <li><a herf="#">我是ul的孙子</a> </li>

  </ul>
  <ul>
    <li>我是ul的孩子</li>
    <li>我是ul的孩子</li>
    <li>我是ul的孩子</li>
    <li>我是ul的孩子</li>
    <li><a herf="#">我是ul的孙子</a> </li>

        此时该如何选择其中的某一个呢？这里需要我们给想要选中的标签起一个名字。

<ul>
    <li>我是ul的孩子</li>
    <li>我是ul的孩子</li>
    <li>我是ul的孩子</li>
    <li>我是ul的孩子</li>
    <li><a herf="#">我是ul的孙子</a> </li>

  </ul>
  <ul class="haha">
    <li>我是ul的孩子</li>
    <li>我是ul的孩子</li>
    <li>我是ul的孩子</li>
    <li>我是ul的孩子</li>
    <li><a herf="#">我是ul的孙子</a> </li>

        然后再对其中的属性做修改。格式是 ：.标签的名字 子标签 孙子标签{}

<!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>
    /* 一、后代选择器 */
    /* 把ol的li选出来 */
    ol li {
      color: pink;
    }

    /* 把ul的孙子选出来 */
    ul li a {
      color: blue;
    }

    /* 针对性选择 */
    .haha li a {
      color: yellow;
    }

  </style>
</head>

<body>
  <h1>一、后代选择器（重要）</h1>
  <ol>
    <li>我是ol的孩子</li>
    <li>我是ol的孩子</li>
    <li>我是ol的孩子</li>
    <li>我是ol的孩子</li>
  </ol>
  <ul>
    <li>我是ul的孩子</li>
    <li>我是ul的孩子</li>
    <li>我是ul的孩子</li>
    <li>我是ul的孩子</li>
    <li><a herf="#">我是ul的孙子</a> </li>

  </ul>
  <ul class="haha">
    <li>我是ul的孩子</li>
    <li>我是ul的孩子</li>
    <li>我是ul的孩子</li>
    <li>我是ul的孩子</li>
    <li><a herf="#">我是ul的孙子</a> </li>

  </ul>


</body>

</html>
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>
    .haha>a {
      color: rgb(222, 35, 41);
    }
  </style>
</head>

<body>
  <h1>一、子元素选择器（重要）</h1>
  只选择某元素最近一级的子元素
  <div class="haha">
    <a href="#">1111</a>
    <a href="#">1111</a>
    <ul>
      <li><a href="#">2222</a></li>
    </ul>
  </div>
</body>

</html>

        这里可以看到只有子类1111的链接变红了，而2222的链接没有变化。因为1111的链接属于hahah的子类。

1.3并集选择器

        所谓并集选择器就是指，一次对多个选择器做同样的操作，这里的选择器可以是CSS学习归纳1中简单的选择器，同样还可以是现在的后代选择器，子代选择器的组合。以逗号做分隔。有了子代选择器、后代选择器的知识，这个就很简单。

        格式：选择器1，选择器2，...，选择器n{}

<!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,
    .haha li {
      color: pink;
    }
  </style>

</head>

<body>
  <div>111</div>
  <p>22222</p>
  <ul class="haha">
    <li>pig1</li>
    <li>pig2</li>
    <li>pig3</li>
  </ul>
</body>

</html>

1.4链接伪类选择器

        这个是十分常见的，提高了界面的人机交互的体验感受。

        这里需要特别注意的两点：1、<a>的颜色、样式不同于文本文字，需要单独对其修改设置；2、属性在设置的时候务必遵守”LVHA“的顺序。Link：未点击的链接时的属性； Visited：未点击的链接时的属性；Hover：鼠标经过链接时的属性；Active：点击链接但未松手时的属性。

<!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>
    a {
      text-decoration: none;
    }

    /* LVHA 这样的顺序*/

    /* 未点击的链接 */
    a:link {
      color: black;
    }

    /* 已点击的 */
    a:visited {
      color: orange;
    }

    /* 鼠标经过特效 */
    a:hover {
      color: brown;
    }

    /* 点击特效 */
    a:active {
      color: red;
    }
  </style>
</head>

<body>
  <h1>伪类选择器，实现特效</h1><br>
  <div>针对页面中所有的链接</div>
  <div>LVHA的顺序书写</div>
  <div>链接标签独立于body，需要单独指定</div>

  <a href="#">实现特效</a><br>
  <a href=" http://www.baidu.com" target="_blank">实现特效</a><br>
  <a href=" http://www.xxxxxx.com" target="_blank">实现特效</a><br>

</body>

</html>

        上面代码，创建了3个链接。1、去除了链接的下划线。2、未点击时链接呈现黑色。3、点击过的链接呈现橘色。4、鼠标经过时的链接呈现棕色。5、鼠标点击时的链接呈现红色。

1.5focus选择器

        这个使用相对较少，但同样也是提高交互的方法之一。可以让用户点击某个交互窗口的时候，改变窗口的颜色，起到提醒的作用。

<!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>
    input:focus {
      background-color: rgb(111, 111, 238);
    }
  </style>
</head>

<body>
  <div>选取获得焦点的表单元素</div>
  <input type="text">
</body>

</html>

二、元素的显示模式

2.1块元素

        特点：1、独占一行；2、可以调整宽度，高度，内外边距；3、是一个容器，可以放很多块级，行级元素4、如果对宽度不加以改变，默认和浏览器一样宽。

        注意：文字标签中一般不放其他的块级元素。

2.2行内元素

        特点：1、一行可以放多个；2、无法设置长、宽；3、默认的宽度就是内容的宽度；4、行内元素中内允许存放文本和行级元素；

        注意：1、<a>中不可以嵌套<a>;2、<a>中可以放块级元素，但是需要提前对块级转换模式

2.3行内块元素

        <img><input><td>同时具备块元素、行内元素的特点，称为行内块。

        特点：1、独占多个；2、可以调整宽度，高度，内外边距；3、有默认的宽度；

2.4元素模式转换

        将行级元素转化为块级元素，使之可以拥有自己的长宽。转换的语句是display：模式。

        常见的用法：1、将链接标签转化为块级标签，增大链接的触发范围。

<!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>
    a {
      width: 150px;
      height: 50px;
      background-color: pink;
      /* 转换为块元素 */
      display: block;
    }

    div {

      background-color: pink;
      /* 转换为行内元素 */
      display: inline;
    }

    span {
      width: 300px;
      height: 300px;
      background-color: rgb(75, 188, 188);
      display: inline-block;
    }
  </style>
</head>

<body>
  将一个元素转成另一个元素，如增加链接的触发范围<br>

</body>
<a href="#">链接一下</a>
<div>块级元素</div>
<span>行内元素转化为行内块</span>

</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>
    a {
      display: block;
      width: 230px;
      height: 40px;
      background-color: #555;
      font-size: 14px;
      text-decoration: none;
      text-indent: 2em;
      color: aliceblue;
      line-height: 40px;
    }

    a:hover {
      background-color: #ff6700;
    }
  </style>
</head>

<body>
  <a href="#">111 111</a>
  <a href="#">222 222</a>
  <a href="#">333 333</a>
  <a href="#">444 444</a>

</body>

</html>

四、背景设置

        一般对背景的设置，都会以background-xxx：命名。

4.1背景颜色

        background-color: 颜色;

4.2背景图片

        background-image: url(图片的地址);

4.3背景平铺

        background-repeat: no-repeat; 不重复

        background-repeat: repeat-x;    在x方向上重复

        background-repeat: repeat-y;    在y方向上重复

        background-repeat: repeat;       在x和y方向上都重复

4.4背景位置

        （1）可以用方位词描述：background-position: 方位词1 方位词2;

        方位词包括：center、top、bottom、left、right   .如果只写一个另一个默认居中显示。

        （2）可以用精确的数量词描述：background-position: 0px 150px;只写一个值，默认为x赋值，y默认为center。

4.5背景固定/滚动

        背景随着滚动而滚动：background-attachment: scroll;

        

        背景不随着滚动而滚动：background-attachment: fixed;

4.6复合写法

        代码量变小，对于顺序没有强制要求。不像链接伪选择器必须按照”LVHA“。

        background：背景颜色、背景图片、背景平铺、背景滚动、背景位置

4.7背景色透明度如何使用

        background-color: rgba(0, 0, 0, 0.3); 最后一个参数0~1取值，越小越透明。

五、综合案例

        这里给大家几个图片，然后可以运行这个代码。可以实现一个类似导航栏的功能。

<!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>
    a {
      /* 转化为块级元素，增大选中范围 */
      display: block;
      height: 58px;
      width: 120px;
      text-decoration: none;
      color: aliceblue;
    }

    .color1 a:hover {
      color: aqua;
      background-image: url(images/bg11.png);
    }

    .color2 a:hover {
      color: aqua;
      background-image: url(images/bg22.png);
    }

    .color3 a:hover {
      color: aqua;
      background-image: url(images/bg4.png);
    }

    .color4 a:hover {
      color: aqua;
      background-image: url(images/bg5.png);
    }


    .color1 {
      /* 将行内元素转化为行内块 */
      display: inline-block;
      height: 58px;
      width: 120px;
      background-image: url(images/bg1.png);
      line-height: 50px;
      text-align: center;
    }

    .color2 {
      /* 将行内元素转化为行内块 */
      display: inline-block;
      height: 58px;
      width: 120px;
      background-image: url(images/bg2.png);
      line-height: 50px;
      text-align: center;
    }

    .color3 {
      /* 将行内元素转化为行内块 */
      display: inline-block;
      height: 58px;
      width: 120px;
      background-image: url(images/bg3.jpg);
      line-height: 50px;
      text-align: center;
    }

    .color4 {
      /* 将行内元素转化为行内块 */
      display: inline-block;
      height: 58px;
      width: 120px;
      background-image: url(images/bg4.png);
      line-height: 50px;
      text-align: center;
    }
  </style>
</head>

<body>
  <span class="color1"><a href="www.baidu.com">百度一下</a></span>
  <span class="color2"><a href="www.google.com">谷歌一下</a></span>
  <span class="color3"><a href="www.souhu.com">搜狐官网</a></span>
  <span class="color4"><a href="www.xiaomi.com">小米官网</a></span>
</body>

</html>

        防止大家没图片，我附上我的代码下载。

SPIRIT_SYF
关注
CSS学习归纳2的综合案例
04-01
"CSS学习归纳2的综合案例"可能涵盖了一系列的CSS技术，旨在帮助学习者更深入地理解如何使用CSS来美化和布局网页。让我们逐步解析这个综合案例可能涉及的知识点。 首先，`综合案例.html`很可能是包含HTML结构的文件...
CSS学习归纳3中的综合案例的代码
04-06
"CSS学习归纳3中的综合案例的代码"这个主题聚焦于通过实际的HTML页面来演示和实践CSS技术。这些案例涵盖了盒子模型和导航栏的设计，这些都是构建现代网页布局的基础。下面将详细阐述这些知识点。 首先，我们来看...
CSS学习归纳3
SPIRITE_SYF的博客
04-06 797
在上一节CSS学习归纳2中我们讨论了选择器的使用、块级行级元素的转化使用以及背景的设置。本节将在上述学习的基础上对CSS的特性、盒子的边框，内外边距等性质加以归纳。并且最后会做一个综合的案例，并附上代码。
CSS学习归纳1
SPIRITE_SYF的博客
04-01 720
在学习CSS之前，应该完成了HTML的学习。HTML是一个网页的骨架，但是只有骨架是不够好看的，现在希望通过某一个技术去美化我们的网页，这里就需要学习CSS。HTML的内容都是写在中，而CSS的内容都是写在下的标签下的。第一部分的学习主要是是对文本，文字的美化工作，包括大小，字体，颜色，对齐，字体样式，如何缩进，字体粗度，行高等进行学习。
CSS学习归纳5
SPIRITE_SYF的博客
04-08 1355
1、将盒子定在某一个位置，就是摆放盒子。2、定位=定位模式+边偏移。3、使用position属性设置：static静态，relative相对，absolute绝对，fixed固定。4、边偏移（相对于父元素某条边的举例）：top，bottom，left，righ。1、标准流：元素默认的排布方式，一般用于垂直排布。2、浮动：让多个块级盒子显示在一行，实现多个块级盒子的水平显示。3、定位：具备层叠的概念。实现叠加的显示。
CSS学习路线
警警的博客
09-15 1016
CSS学习路线涵盖了从基础到进阶再到深入探索的各个阶段，每个阶段都有其特定的学习内容和面试中常见的题目。通过系统地学习和实践，你可以逐步掌握CSS的核心技能，并在面试中展现出自己的专业能力和实践经验。
CSS学习归纳4
SPIRITE_SYF的博客
04-07 1281
前几节的内容学起来可能有些乏味，但这一节的内容相比之下就有趣很多。这一节主要是一些有关盒子、文字的外观设计以及另一个大点--浮动。
CSS学习归纳6
SPIRITE_SYF的博客
04-10 889
精灵图其实就是由很多小图片集合而成的大图片。使用精灵图可以减少网络请求，减少了浏览器向服务器发送的请求次数,提高了网页加载速度。1、精灵图主要针对背景图片使用的。2、使用 backgroun-position 调用。3、x向右为正，y向下为正。1、遇到结构和样式简单的，可以使用字体图标。2、如果一些结构和样式复杂的，可以使用精灵图。
css学习归纳总结
weixin_42228502的博客
07-15 418
选择器的分组CSS选择器分为1.群组选择器 如：p, body, img, div{} 2.兄弟选择器 如：p + p { color:#f00; } 3.属性选择器 如： p[title] { color:#f00; } 4.包含（后代）选择器 如：body ul li{} 5.子元素选择器 如：div &gt; p{} 6.ID选择器 如：#myDiv{} 7.类选择器 ...
CSS系统学习总结
m0_63263973的博客
02-14 884
为了创建一个径向渐变，你也必须至少定义两种颜色节点。颜色节点即你想要呈现平稳过渡的颜色。同时，你也可以指定渐变的中心、形状（圆形或椭圆形）、大小。默认情况下，渐变的中心是 center（表示在中心点），渐变的形状是 ellipse（表示椭圆形），渐变的大小是 farthest-corner（表示到最远的角落）。
CSS学习归纳总计(一)
Hao_Yanru的博客
03-17 709
文章目录CSS概述CSS创建方式行内样式表内部样式表——文档内嵌样式外部样式表——外部引用样式CSS样式表层叠和继承样式表层叠样式表继承浏览器样式CSS中的选择器基本选择器通用选择器元素选择器ID选择器类选择器复合选择器分组选择器子选择器 CSS概述 CSS，（Cascading Style Sheets，层叠样式表）用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言 CSS创建方...
css归纳整理
12-11
对css进行了归纳整理，利用思维导图的方法便于初学者学习整理
JavaSE html+CSS基础笔记归纳.zip
08-08
总结来说，"JavaSE html+CSS基础笔记归纳.zip" 包含的内容是JavaSE的基础知识，HTML和CSS的网页设计，MySQL数据库的使用，以及Java面试的常见问题。对于初学者或复习者来说，这些资料可以帮助巩固基础，提升技能，并...
HTML CSS入门级常用知识点归纳总结（结尾实战练习附源码）
01-08
### HTML CSS入门级常用知识点归纳总结 在学习前端开发的过程中，HTML与CSS是不可或缺的基础技能。无论是对于初学者还是有一定基础的学习者来说，掌握好HTML和CSS的基本用法及常见技巧都是十分重要的。本文将围绕...
CSS —— 界面布局
m0_73557953的博客
09-10 1045
采用flex布局的元素，称为 Flex 容器（flex container），简称"容器"
CSS——盒子模型
m0_73557953的博客
09-12 389
margin : auto => 让target元素左右两边的margin都占据尽可能多的空间，就会各占一半，使元素居中。水平方向：margin-left : auto => 让target元素左边的margin占据尽可能多的空间，使元素靠右。首先CSS将所有的元素都看成一个盒子。
CSS 常用元素属性
2301_79881188的博客
09-11 1026
CSS 属性有很多, 可以参考文档。
响应式CSS 媒体查询——WEB开发系列39
最新发布
一条晒干的咸鱼的博客
09-15 1245
CSS媒体查询（Media Queries）是响应式设计中的核心技术之一，帮助我们在不同设备上展示不同的样式。通过媒体查询，开发者可以检测用户设备的特性，如屏幕宽度、高度、分辨率、方向等，针对性地调整网页布局。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值