前端入门篇 | CSS

鹤茗_515

已于 2024-08-18 15:53:47 修改

阅读量608

点赞数 21

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

于 2024-08-13 18:21:35 首次发布

本文链接：https://blog.csdn.net/m0_55483876/article/details/141128512

版权

CSS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

下一篇持续更新中… 如有错误欢迎指正！！！

前言

学习目标

在这里插入图片描述

学习内容

在这里插入图片描述

Emmet语法

Emmet语法的前身是Zen coding，它使用缩写来提高HTML CSS的编写速度。vs code内部已经集成该语法。

快速生成HTML结构语法
快速生成CSS样式语法
CSS基本采取简写形式即可

比如w200，按TAB可以生成width:20px;
比如lh26，按TAB可以生成line-height:26px;

CSS的复合选择器

什么是复合选择器？

在CSS中，可以根据选择器的类型，把选择器分为基础选择器和复合选择器。复合选择器是建立在基础选择器之上，对基本选择器进行组合形成的。

复合选择器可以更准确、更高效地选择目标元素（标签）
复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的
常用的复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器等等。

后代选择器（重要）

后代选择器又称为包含选择器，可以选择父元素里面的子元素，其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。

元素1 元素2 {样式声明}
//上述语法表示选择元素1里面的所有元素2（后代元素）

在这里插入图片描述

子选择器（重要）

子元素选择器（子选择器）只能选择作为某元素的最近一级子元素。简单的理解就是选亲儿子元素。

元素1>元素2(样式声明)
//上述语法表示选择元素1里面的所有直接后代(子元素)元素2

在这里插入图片描述

并集选择器（重要）

并集选择器可以选择多组标签，同时为他们定义相同的样式。通常用于集体声明
并集选择器是各选择器通过英文逗号 “,” 连接而成。任何形式的选择器都可以作为并集选择器的一部分。

元素1,元素2{样式声明}
//上述语法表示选择元素1和元素2
//并集选择器喜欢竖着写
//一定要注意最后一个选择器不需要加逗号

在这里插入图片描述

伪类选择器

伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或者选择第1个，第N个元素。
伪类选择器书写最大的特点是用冒号 “:” 表示。比如 :hover、:first-child
因为伪类选择器很多，比如有链接伪类、结构伪类等。所以这里先给大家讲解常用的链接伪类选择器。

链接伪类选择器

a:link		//选择所有未被访问的链接
a:visited	//选择所有已被访问的链接
a:hover		//选择鼠标指针位于其上的链接
a:active	//选择活动链接(鼠标按下未弹起的链接)

链接伪类选择器注意事项
链接伪类选择器实际开发中的写法

focus伪类选择器

focus选择器用于选取获得焦点的表单元素。
焦点就是光标，一般情况< input >类表单元素才能获取。因此这个选择器也主要针对于表单元素来说。

input:focus{
	background-color:yellow;
}

复合选择器总结

在这里插入图片描述

CSS的元素显示模式

了解元素的显示模式，可以更好的让我们布局页面。
作用：网页的标签非常多，在不同地方会用到不同类型的标签，了解他们的特点，可以更好的布局我们的页面。
元素显示模式就是元素（标签）以什么方式进行显示，比如Div自己占一行，比如一行可以放多个spend。HTML元素一般分为块元素和行内元素两种类型。

元素显示模式的分类

块元素

在这里插入图片描述

行内元素

在这里插入图片描述

行内块元素

在这里插入图片描述

元素显示模式总结

在这里插入图片描述

元素显示模式的转换

特殊情况下，我们需要元素模式的转换。简单理解：一个模式的元素需要另外一种模式的特性。比如想要增加链接< a >的触发范围。

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

在这里插入图片描述

Snipaste截图工具

在这里插入图片描述

综合案例

在这里插入图片描述

/*这是我在学习时第一次自己写的代码*/
<!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>
        table {
            background-color: #535758;
            width: 426px;
            height: 528px;
            font-size: 26px;
        }

        a {
            text-decoration: none;
            display: block;
            width: 426px;
            height: 75px;
            color: white;
        }

        a:hover {
            background-color: #ff6f00;
        }

        td {
            text-indent: 2em;
            line-height: 80px;
        }
    </style>
</head>

<body>
    <table>
        <tr>
            <td>
                <a href="#">
                    手机 电话卡
                </a>
            </td>
        </tr>
        <tr>
            <td>
                <a href="#">
                    电视 盒子
                </a>
            </td>
        </tr>
        <tr>
            <td>
                <a href="#">笔记本 平板</a>
            </td>
        </tr>
        <tr>
            <td>
                <a href="#">
                    出行 穿戴
                </a>
            </td>
        </tr>
        <tr>
            <td>
                <a href="#">
                    智能 路由器
                </a>
            </td>
        </tr>
        <tr>
            <td>
                <a href="#">
                    健康 儿童
                </a>
            </td>
        </tr>
        <tr>
            <td>
                <a href="#">
                    耳机 音响
                </a>
            </td>
        </tr>
    </table>
</body>

</html>

小tips：单行文字垂直居中

CSS没有给我们提供文字垂直居中的代码，这里我们可以使用一个小技巧来实现。

解决方案：让文字的行高等于盒子的高度，就可以让文字在当前盒子内垂直居中。
实现原理：

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>
        a {
            text-align: center;
            display: inline-block;
            width: 120px;
            height: 58px;
            line-height: 58px;

            color: white;
            text-decoration: none;
            font-size: 18px;
        }

        .nav .red:hover {
            background-image: url(images/bg5.png);
        }

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

        .nav .red {
            background-image: url(images/bg1.png);
            /* 注意反斜杠的方向，不要反错 */
            background-repeat: no-repeat;
        }

        .skyblue {
            background-image: url(images/bg2.png);
            /* 注意反斜杠的方向，不要反错 */
            background-repeat: no-repeat;
        }

        .purple {
            background-image: url(images/bg3.png);
            /* 注意反斜杠的方向，不要反错 */
            background-repeat: no-repeat;
        }

        .pink {
            background-image: url(images/bg4.png);
            /* 注意反斜杠的方向，不要反错 */
            background-repeat: no-repeat;
        }
    </style>
</head>

<body>
    <div class="nav">
        <a href="#" class="red">五彩导航</a>
        <a href="#" class="skyblue">五彩导航</a>
        <a href="#" class="purple">五彩导航</a>
        <a href="#" class="pink">五彩导航</a>
    </div>
</body>

</html>
<!-- 第一次做，没整明白的就是四个导航栏之间的空格怎么控制 -->
<!-- 没加div -->
<!-- 在a中多加了一个background position -->