自学前端——第四天

最新推荐文章于 2024-07-25 09:24:40 发布

m0_74758366

最新推荐文章于 2024-07-25 09:24:40 发布

阅读量96

点赞数

分类专栏：自学前端文章标签：前端 html css css3 html5

本文链接：https://blog.csdn.net/m0_74758366/article/details/128588741

版权

自学前端专栏收录该内容

15 篇文章 1 订阅

订阅专栏

1. 复合选择器

1.1 后代选择器

后代选择器的特点是可以选择父系标签里的子系标签。基本应用场景如下：

如果用基础选择器，想实现上面的代码很繁琐，但是用后代选择器就简单了很多，如下：

可以看出后代选择器实际上就是多个任意基础选择器的复合。上面的示例就是两个标签选择器的复合，父系标签X在前，中间一个空格隔开，然后写子系标签Y，意即：选择X标签里的所有Y标签。如下示例：

很明显只用标签选择器没法实现蓝色和绿色的区分。回想一下前面学过的基础选择器，当我们遇到两个<p></p>标签，想让其中一个标签里的文字呈现蓝色，另一个呈现绿色，我们采用的方法是什么？是采用类选择器，在需要使用的标签里调用这个类。同样的，可以将上下两个<ul></ul>视为两个<p></p>，建立一个类让color：green，然后在下面的<ul>里调用这个类即可。要注意这里建立类的时候的写法，如下：

直接类名加子系标签，而不用再写父系标签。运行：

1.2子选择器

子选择器的作用是选择某父系标签里的子系标签改变样式，注意孙系及往后的标签都不改变。

1.3并集选择器

并集选择器的作用，同时改变多组标签的样式，通常用于集体声明。

如下示例：要求让所有数字的颜色都呈红色，汉字不改变，采用其他选择器则比较繁琐，采用并级选择器可以节省很多代码量。

代码如下：

从上图也可以看出并集选择器的使用规范：各个选择器之间使用逗号分隔开；

每个选择器独占一行。

1.4 伪类选择器

1.4.1链接伪类选择器

链接伪类选择器分4个：

（i）a:link {}，意为选择所有

（ii）a:visited {}，意为选择所有已被访问过的链接；

（iii）a:hover {}，意为选择鼠标指针当前选中的链接；

（iv）a:active {}，意为选择鼠标选中并按下（未弹起）时的链接。

注意：1.伪类选择器使用时需用引号连接；

2.链接伪类选择器的4个形式在书写时需要按照固定顺序，即LVHA的顺序。

3.因为a链接在浏览器中具有默认样式，因此实际工作中一般都需要对a标签单独指定样式。

上图中的“百度”是鼠标点击过（即被访问过）的链接，Google是被鼠标选中但没按下的链接。源码如下，读者可以自行体验：

<!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:link {
            color: black;
        }

        a:visited {
            color: blueviolet;
        }

        a:hover {
            color: skyblue;
        }

        a:active {
            color: green;
        }

        a {
            text-decoration: none;
        }
    </style>
</head>

<body>
    <a href="#">百度</a>
    <a href="www.">Google</a>
</body>

</html>

1.4.2 focus伪类选择器

作用：选择获得焦点（如光标）的表单元素。

一般而言，<input>类表单元素才能获得光标，因此这个选择器主要是针对表单起作用的。

格式如下：

运行效果如下：

2. 元素显示模式

2.1 块元素

常见的块元素有<p>、<h1~h6>、<div>、<ul>、<ol>、<li>等。

块元素的特点：

（i）独占一行（行高可以自行规定）；

（ii）宽度、高度、外边距、内边距都可以控制；

（iii）默认宽度与其父系标签（或者说容器）一致；

（iv）可以充当一个容器，里面可以放块元素或者行内元素。

注意：文字类的元素（如<p>和<h1~h6>）内不能使用块元素。

可以这么理解，<p><h1~h6>实际上是特殊的<div>标签，即<div>严格是<p><h1~h6>的父系，<p><h1~h6>严格是<div>的子系，因此二者永远只能是<div>包含<p><h1~h6>。

示例：

运行：

看似用<p>将<div>包含起来并没有出错，但是我们用f12审查功能就可以发现端倪：

2.2 行内元素（内联元素）

常见的行内元素有<a>,<strong>,<b>,<em>,<i>,<del>,<s>,<ins>,<u>,<span>等，其中<span>是最典型的行内元素。

特点：

（i）相邻的行内元素显示在同一行内；

（ii）行内元素的高和宽无法直接设置；

（iii）行内元素的默认宽度取决于其内容的多少；

（iv）行内元素只能容纳文本或其他行内元素。

注意：<a>标签里面不能再放一个<a>,但是可以放块元素，但是给<a>转换一下块级模式最安全。

2.3 行内块元素

行内块元素是指哪些同时具有块元素和行内元素特点的特殊元素，常见的行内块元素有：

<img />,<input />,<td>。

特点：

（i）相邻的行内块元素在同一行内；（行内元素特点）

（ii）行内块元素的默认宽度取决于其内容的宽度；（行内元素特点）

（iii）行内块元素的高度、宽度、内外边距都可以控制。（块元素特点）

2.4 显示模式总结

块元素独占一行，且高度、宽度、内外边距可控；可以包含任何标签；

行内元素一行多个，高度、宽度、内外边距不可控；只能包含文本或其它行内元素（a例外）；

行内块元素一行多个，高度、宽度、内外边距可控。

2.5 显示模式的转换

在实际应用中，我们经常会遇到需要让行内元素具有块元素特点的情况，如下：

在一个网上商城的页面，“手机”其实是一个超链接，但是由于行内元素<a>无法自定义高和宽，因此想点击“手机”两个小字有些困难，为了提高客户体验，可以使用display:block，将行内元素<a>转化为块元素，然后设定其高度宽度，最终实现“手机”所在的一整栏都是一个超链接的效果。

代码如下：

<!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 {
            width: 200px;
            height: 40px;
            background-color: grey;
            display: block;
        }
    </style>
</head>

<body>
    <a href="#">手机</a>
</body>

</html>

运行：

总结：

转换为块元素用：display:block;

转换为行内元素用：display:inline;

转换为行内块元素用：display:inline-block;

2.6 侧边栏案例

设法实现以上侧边栏，在侧边栏的实践过程中，有以下几个值得关注的点：

（i）文字垂直居中的方法：

在前面几天的学习中，我们了解到行间距=上间距+文字高度+下间距，而且上间距和下间距始终是一样高的。由于文字上图中的文字是存在一个块元素盒子之中，所以只要让line-height=height即可实现文字垂直居中。

（ii）文字不顶格的方式：

可以采用text-indent的方式缩进，后面学习侧边距后会有另外的方法。

源码如下：

<!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 {
            background-color: rgb(255, 115, 0);
        }

        a {
            color: white;
            background-color: rgb(56, 55, 55);
            width: 200px;
            height: 48px;
            text-decoration: none;
            line-height: 48px;
            text-indent: 2em;
            display: block
        }
    </style>
</head>

<body>
    <a href="#1">手机 电话卡</a>
    <a href="#2">电视 盒子</a>
    <a href="#3">笔记本 平板</a>
    <a href="#4">出行 穿戴</a>
    <a href="#5">智能 路由器</a>
    <a href="#6">健康 儿童</a>
    <a href="#7">耳机 音响</a>
</body>

</html>

3. CSS的背景

3.1 背景颜色

3.2 背景图片

background-image 意即背景图片，经常用于logo、一些装饰性的小图片或者是超大的背景图片，优点是非常便于控制位置。

语法规范：background-image: url( )；

示例：

运行：

3.3背景平铺

在3.2的案例中可以发现图片沿x轴和y轴平铺开来了，这是由于背景图片的另一个属性：background-repeat的默认值就是沿x、y平铺。background-repeat有4种平铺样式：

（i）background-repeat：no-repeat，即不平铺；

（ii）background-repeat：repeat-x，即沿x平铺；

（iii）background-repeat：repeat-y，即沿y平铺；

（iv）background-repeat：repeat，即沿x、y平铺。

3.4 背景图片位置

语法规范：background-position：xpx ypx ；

x和y分别代表x坐标和y坐标，可以使用方位名词和精确单位或者是混合单位。

方位名词有：top、center、bottom、left、right

当使用方位名词做坐标时，（i）两个方位名词的先后顺序无所谓；

（ii）如果只指定了一个方位名词，另一个值就默认居中对齐。

当使用精确单位做坐标时，（i）必须前是x坐标，后是y坐标；

（ii）如果只指定一个坐标，则必须是x坐标，y轴方向默认垂直居中。

当使用混合单位做坐标时，必须前是x坐标，后是y坐标；

3.5 背景图像固定（背景附着）

语法规范：background-attachment：scroll / fixed

前者的作用是使滚动页面时，背景图片随着页面一起滚动；

后前者的作用是使滚动页面时，背景图片固定在页面上，不随滚轮滚动而离开。

示例：当background-attachment：fixed 时

滚轮向下滚动：

可以看到这张图片始终在读者的页面中，不随滚轮滚动而改变。

当background-attachment：scroll时，

向下滚动滚轮：

可以看到图片随着滚轮滚动而离开。

3.6 背景属性的复合写法

（图片摘自32-背景属性复合写法_哔哩哔哩_bilibili）

和font属性的复合写法实际上一致，不过background后面的值顺序并不做强制要求，上图只是一个较为推荐的顺序。

3.7 背景图片透明度

语法规范：background：rgba（0，0，0，x）；

其中a是alpha（透明度）的简写，x的取值范围是[ 0，1 ]

x是小数时，一般是0.3这种形式，可以省略0，写成 . 3

背景图片的透明度不会影响其中文字的透明度。

3.8 背景总结

（图片来源：34-背景总结_哔哩哔哩_bilibili）

4. 综合案例——彩色导航

效果：

鼠标经过导航，导航文字不变色，图片变色。

实践过程中有几个值得注意的点：

（i）文本的水平居中不再使用text-indent缩进，而是采用text-align=“center”；

（ii）链接伪类选择器在使用时注意冒号两侧不能有空格，否则失效；

（iii）在这里链接伪类选择器不能直接用a:hover{ }，而是采用了复合选择器的方式，如：

. a1:hover { }.

代码：

<!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 {
            display: inline-block;
            height: 58px;
            width: 120px;
            line-height: 50px;
            text-align: center;
            background-color: pink;
            background-repeat: no-repeat;
            text-decoration: none;
            color: white;
        }

        .a1 {
            background-image: url(images/bg1.png);
        }

        .a1:hover {
            background-image: url(images/bg11.png);
        }

        .a2 {
            background-image: url(images/bg2.png);
        }

        .a2:hover {
            background-image: url(images/bg22.png);
        }

        .a3 {
            background-image: url(images/bg3.jpg);
        }

        .a3:hover {
            background-image: url(images/bg3.png);
        }

        .a4 {
            background-image: url(images/bg4.png);
        }

        .a4:hover {
            background-image: url(images/bg5.png);
        }
    </style>
</head>

<body>
    <a href="#" class="a1">五彩导航</a>
    <a href="#" class="a2">五彩导航</a>
    <a href="#" class="a3">五彩导航</a>
    <a href="#" class="a4">五彩导航</a>
</body>

</html>

<!-- 水平居中：text-align=center; -->
<!-- 链接伪类选择器冒号两边不能有空格，否则失效 -->

图片素材如下：