DAY 4 | 自学前端第四天

pangpangcm

已于 2022-03-28 22:39:19 修改

阅读量105

点赞数 1

分类专栏：前端自学笔记文章标签： css

于 2022-03-21 23:34:45 首次发布

本文链接：https://blog.csdn.net/weixin_39108774/article/details/123649456

版权

前端自学笔记专栏收录该内容

15 篇文章 1 订阅

订阅专栏

知道自己在做什么很重要

今天学习 emmet语法、CSS复合选择器、CSS元素显示模式、CSS的背景。

Emmet语法

快速生成HTML结构语法

生成标签，直接输标签名，按tab； div---tab——<div></div>
生成多个相同标签，加上*即可； div*3——三个<div></div>
父子标签，可以用>； ul >li 即可
兄弟标签，用+ ；div＋p
带类名或者ID名的，直接写 .demo 或者 #two tab 键就可以了
div名有顺序，可以用自增符号$
div {我知道} tab ——<div>我知道</div>

快速生成CSS样式语法

比如 w200 按tab 可以生成 width：200px；
比如 lh26 按tab 可以生成 line-height：26px；

快速格式化代码

右键格式化文档
也可以设置当我们保存页面的时候自动格式化代码：文件——首选项——设置——搜索format——勾选On Save

CSS复合选择器

复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的。常用的复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器等等。

1 后代选择器（重要）：也叫包含选择器，可以选择父元素里的所有子元素。

.nav a

   <title>后代选择器</title>
    <style>
        /* 我要把ol的li选出来换颜色 */
        ol li {
            color: aqua;
        }

        ul li {
            font-size: 20px;
        }

        .bra li a {
            text-decoration: none;
        }

        .nav li a {
            color: rgb(134, 76, 4);
        }
    </style>
</head>

<body>
    <ol>
        <li>我是ol的孩子</li>
    </ol>
    <ol class="bra">
        <li><a href="#">我是ol的孙子</a></li>
    </ol>
    <ol class="nav">
        <li><a href="#">我是ol的孙子</a></li>
    </ol>
    <ul>
        <li>我是ul的孩子</li>
    </ul>
</body>

2 子选择器（重要）：也叫子元素选择器，可以选择最近一级元素，亲儿子元素。

.nav>a

 <title>子元素选择器</title>
    <style>
        /* .nav a {
            color: red;
        } */
        .nav>a {
            color: red;
        }
    </style>
</head>

<body>
    <div class="nav">
        <a href="#">
            我是儿子
        </a>
        <p>
            <a href="#">我是孙子</a>
        </p>
    </div>
</body>

课堂练习：（后代选择器和子元素选择器）

 <title>课堂练习</title>
    <style>
        /* .nav ul li a {
            color: red;
        } */
        .hot>a {
            color: red;
        }
    </style>
</head>

<body>
    <!-- <div class="nav">
        <ul>
            <li><a href="#">百度</a></li>
            <li><a href="#">百度</a></li>
        </ul>
    </div> -->
    <div class="hot">
        <a href="#">大肘子</a>
        <ul>
            <li> <a href="#">猪头</a></li>
            <li> <a href="#">猪尾巴</a></li>
        </ul>
    </div>
</body>

3 并集选择器（重要）：可以选择多组标签，同时为他们定义相同的样式。通常用于集体声明。用英文逗号 , 进行分割。最后一个选择器不用加逗号。

.nav,

        div,
        p {
            color: pink;
        }

4 链接伪类选择器：

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

<title>链接伪类选择器</title>
    <style>
        /* 未访问的链接 a :link  把没有点击过的（访问过的）链接选出来 */
        a:link {
            color: red;
            text-decoration: none;
        }

        /* a visited 选择访问过的链接 */
        a:visited {
            color: green;
        }

        /* a hover 选择鼠标经过的那个链接 */
        a:hover {
            color: rgb(127, 8, 238);
        }

        /* a:active 选择的是我们鼠标正在按下但没有弹起鼠标的那个链接 */
        a:active {
            color: pink;
        }
    </style>
</head>

<body>
    <a href="#">小猪佩奇</a>
    <a href="http://www.XXXXX.com">未知的胖胖</a>
</body>

注意事项：

为了确保生效，请按照顺序声明：link visited hover active
因为a链接在浏览器中具有默认样式，所以我们实际工作中都需要给链接单独指定样式。
链接伪类选择器实际工作开发中的写法：

  <title>实际开发伪类选择器</title>
    <style>
        a {
            color: black;
            text-decoration: none;
            font-weight: 700;
        }

        a:hover {
            color: blue;
        }
    </style>
</head>

<body>
    <a href="#">我是一个链接</a>
</body>

5 focus伪类选择器：用于选取焦点的表单元素。

 <title>focus伪类选择器</title>
    <style>
        input:focus {
            background-color: rgb(247, 214, 219);
            color: white;
        }
    </style>
</head>

<body>
    <input type="text">
    <input type="text">
    <input type="text">
</body>

CSS 的元素显示模式

1 什么是元素的显示模式

就是元素（标签）以什么方式进行显示，比如<div>自己占一行，比如一行可以放多个<span>。

HTML元素一般分为块元素和行内元素。

2 元素显示模式的分类

块元素：<h1>--<h6>、<p>、<div>、<ul>、<ol>、<li>

特点：

独占一行；
高度宽度外边距内边距都可以控制；
宽度默认是容器的100%；
是一个盒子，可以装行内或者块状元素。

注意：

文字类元素内不能使用块状元素；
<p>标签主要放文字，所以<p>里不能放块状元素，特别不能放<div>；
同理，<h1>--<h6>等都是文字类块级标签，里面也不能放其他块级元素。

    <title>块级元素</title>
    <style>
        div {
            height: 50px;
            width: 200px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div>独占一行就是我</div>我想和你一行
    <!-- p和h里面放文字内容，不要放div
    <p>
    <div>这里有点问题</div>
    </p> -->
</body>

行内元素：<span><a><strong><b><em><i><del><s><ins><u>，也叫内联元素。

特点：

相邻行内元素在一行，一行显示多个；
宽度，高度直接设置是无效的；
默认高度是它本身内容的宽度；
行内元素只能容纳文本或其他行内元素。

注意：

<a>链接里不能再放链接；
特殊情况下<a>里面可以放块级元素，但是给<a>转换一下块级模式最安全。

  <title>行内元素</title>
    <style>
        span {
            /* 高和宽直接设置是无效的，默认宽度为本身内容的宽度 */
            width: 100px;
            height: 200px;
            background-color: hotpink;
        }
    </style>
</head>

<body>
    <!-- 行内元素只能容纳文本或其他行内元素 -->
    <span>胖胖是个</span>
    <strong>葡萄籽</strong>
</body>

行内块元素：<img /><input /><td>,同时具有块元素和行内元素的特点。

特点：

和相邻行内块在一行，但之间有空白间隙，一行显示多个；（行内元素特点）
默认宽度是本身内容宽度；（行内元素特点）
高度，行高，内外边距可以控制。（块级元素特点）

3 元素显示模式的转换

一个模式的元素需要另外一个模式的特性。比如增加<a>的触发范围。

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

  <title>元素显示模式转换</title>
    <style>
        a {
            width: 100px;
            height: 50px;
            background-color: hotpink;
            text-decoration: none;
            /* 把行内元素 a 转换为块元素 */
            display: block;
        }

        div {
            width: 200px;
            height: 100px;
            /* 把块元素 div 转换为行内元素 */
            display: inline;
        }

        span {
            width: 100px;
            height: 80px;
            background-color: pink;
            /* 把行内元素 span 转换为行内块元素 */
            display: inline-block;
        }
    </style>
</head>

<body>
    <a href="#">金星阿姨</a>
    <a href="#">金星阿姨</a>
    <div>我是块级元素</div>
    <div>我是块级元素</div>
    <span>把行内元素转换为行内块元素</span>
    <span>把行内元素转换为行内块元素</span>
</body>

4 一个小工具的使用 snipaste

snipaste——截图工具，可以截图贴到屏幕上

快捷方式：

F1＋fn可以截图
F3＋fn 桌面置顶
点击图片，Alt取色，shift切换取色模式
ESC取消图片显示

5 案例：简洁版小米侧边栏

 <title>案例题</title>
    <style>
        a {
            text-decoration: none;
            color: white;
            background-color: rgb(112, 75, 75);
            display: block;
            width: 200px;
            height: 25px;
            text-indent: 2em;
        }

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

<body>
    <!-- 可以不用div，转换成块级元素本身可以独占一行 -->
    <a href="#">手机电话卡</a>
    <a href="#">电视 盒子</a>
    <a href="#">笔记本 平板</a>
    <a href="#">出行 穿戴</a>
    <a href="#">路由器</a>
    <a href="#">健康 儿童</a>
    <a href="#">耳机 音响</a>
</body>

6 单行文字垂直居中（小技巧）

CSS没有提供文字垂直居中的代码——解决方案：让文字行高等于盒子高度

 <title>单行文字垂直居中</title>
    <style>
        div {
            width: 200px;
            height: 30px;
            background-color: pink;
            /* 文字行高line-height等于盒子行高height即可垂直居中 */
            line-height: 30px;
        }
    </style>
</head>

<body>
    <div>我要垂直居中</div>
</body>

CSS的背景

背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。

1 背景颜色

background-color:transparent ：默认背景颜色是透明的。

<title>背景颜色</title>
    <style>
        div {
            width: 100px;
            height: 50px;
            /* 默认背景颜色是透明的
            background-color: transparent; */
            background-color: pink;
        }
    </style>
</head>

<body>
    <div></div>
</body>

2 背景图片

background-image：描述元素的背景图片。便于控制位置。

background-image: url(图片路径)

 <title>背景图片</title>
    <style>
        div {
            width: 1000px;
            height: 600px;
            /* 不要拉下URL */
            background-image: url(images/wlop.jpg);
        }
    </style>
</head>

<body>
    <div>

    </div>
</body>

3 背景平铺

background-repeat：进行平铺。

 <title>背景平铺</title>
    <style>
        div {
            width: 2000px;
            height: 1000px;
            background-color: pink;
            background-image: url(images/wlop.jpg);
            /* 不进行背景平铺 */
            /* background-repeat: no-repeat; */

            /* 默认情况下，背景图片是平铺的 */
            /* background-repeat: repeat; */

            /* 沿着X轴平铺 */
            /* background-repeat: repeat-x; */

            /* 沿着Y轴平铺 */
            background-repeat: repeat-y;
        }
    </style>
</head>

<body>
    <div></div>
</body>

4 背景图片位置（重要）

background-position：改变图片在背景中的位置。

background-position: x y ;

参数代表 x 坐标和 y 坐标。可以使用方位名词或者精确单位

方位名词：

如果两个值都是方位名词，前后顺序无关，效果一样；
如果指定一个值是方位名词，另一个值省略，则第二个值默认居中对齐。

<title>背景图片位置-方位名词</title>
    <style>
        div {
            width: 500px;
            height: 500px;
            background-image: url(images/wlop.jpg);
            /* 1 如果两个值都是方位名词，前后顺序无关，效果一样 */
            /* background-position: right center; */
            /* background-position: center right; */

            /* 1 如果指定一个值是方位名词，另一个值省略，则第二个值默认居中对齐 */
            /* background-position: right; */
            background-position: top;
        }
    </style>
</head>

<body>
    <div></div>
</body>

案例1：王者荣耀小图标

 <title>方位名词应用</title>
    <style>
        h3 {
            width: 118px;
            height: 40px;
            font-size: 14px;
            font-weight: 400px;
            line-height: 40px;
            background-color: rgb(243, 211, 219);
            background-image: url(images/sprite.png);
            background-repeat: no-repeat;
            background-position: left center;
            text-indent: 2em;
        }
    </style>
</head>

<body>
    <h3>成长守护平台</h3>
</body>

案例2：王者荣耀背景图

 <title>超大背景图</title>
    <style>
        body {
            background-image: url(images/jpg.jpg);
            background-position: center top;
            background-repeat: no-repeat;
        }
    </style>
</head>

<body>

</body>

精确单位：

如果参数是精确坐标，那么第一个肯定是x 第二个肯定是y ；
如果只有一个参数，参数一定是 x ，另外一个默认垂直居中。

<title>精确单位</title>
    <style>
        div {
            background-image: url(images/wlop.jpg);
            width: 500px;
            height: 500px;
            background-color: pink;
            background-repeat: no-repeat;
            /* 如果参数是精确坐标，那么第一个肯定是x 第二个肯定是y  */
            /* background-position: 20px 50px; */
            /* background-position: 50px 20px; */

            /* 如果只有一个参数，参数一定是 x ，另外一个默认垂直居中 */
            background-position: 20px;
        }
    </style>
</head>

<body>
    <div>
    </div>
</body>

混合单位：

指定两个值是精确单位和方位名词混合，第一个是x,第二个是y

 <title>混合单位</title>
    <style>
        div {
            background-image: url(images/wlop.jpg);
            width: 500px;
            height: 500px;
            background-color: pink;
            background-repeat: no-repeat;
            background-position: 20px center;
        }
    </style>
</head>

<body>
    <div></div>
</body>

5 背景图片固定（背景附着）

background -attachment：设置背景图像是否固定或者随着页面其余部分滚动

 <title>背景图片固定</title>
    <style>
        body {
            background-image: url(images/jpg.jpg);
            background-repeat: no-repeat;
            background-position: center top;
            color: #fff;
            font-size: 20px;
            background-attachment: fixed;
        }
    </style>
</head>

<body>
    <p>学而不思则罔，思而不学则殆</p>
    <p>学而不思则罔，思而不学则殆</p>
    <p>学而不思则罔，思而不学则殆</p>
    <p>学而不思则罔，思而不学则殆</p>
    <p>学而不思则罔，思而不学则殆</p>
    <p>学而不思则罔，思而不学则殆</p>
    <p>学而不思则罔，思而不学则殆</p>
    <p>学而不思则罔，思而不学则殆</p>
    <p>学而不思则罔，思而不学则殆</p>
    <p>学而不思则罔，思而不学则殆</p>
    <p>学而不思则罔，思而不学则殆</p>
    <p>学而不思则罔，思而不学则殆</p>
    <p>学而不思则罔，思而不学则殆</p>
    <p>学而不思则罔，思而不学则殆</p>
    <p>学而不思则罔，思而不学则殆</p>
    <p>学而不思则罔，思而不学则殆</p>
</body>

6 背景复合写法

没有特定的书写顺序，一般习惯顺序

background：背景颜色---背景图片地址---背景平铺---背景图像滚动---背景图片位置

 <title>背景属性复合写法</title>
    <style>
        body {
            background: black url(images/jpg.jpg) no-repeat fixed center top;
            color: #fff;
            font-size: 20px;
        }
    </style>
</head>

<body>
    <p>学而不思则罔，思而不学则殆</p>
    <p>学而不思则罔，思而不学则殆</p>
    <p>学而不思则罔，思而不学则殆</p>
    <p>学而不思则罔，思而不学则殆</p>
    <p>学而不思则罔，思而不学则殆</p>
    <p>学而不思则罔，思而不学则殆</p>
    <p>学而不思则罔，思而不学则殆</p>
    <p>学而不思则罔，思而不学则殆</p>
    <p>学而不思则罔，思而不学则殆</p>
    <p>学而不思则罔，思而不学则殆</p>
    <p>学而不思则罔，思而不学则殆</p>
    <p>学而不思则罔，思而不学则殆</p>
    <p>学而不思则罔，思而不学则殆</p>
    <p>学而不思则罔，思而不学则殆</p>
    <p>学而不思则罔，思而不学则殆</p>
    <p>学而不思则罔，思而不学则殆</p>
    <p>学而不思则罔，思而不学则殆</p>
    <p>学而不思则罔，思而不学则殆</p>
    <p>学而不思则罔，思而不学则殆</p>
</body>

7 背景色半透明

background：rgba(0,0,0,.3);

最后一个是alpha透明度，取值在0-1之间，实际开发0.3——.3

 <title>背景半透明</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background: rgba(0, 0, 0, .5);
        }
    </style>
</head>

<body>
    <div>隐形的翅膀</div>
</body>

案例——导航栏

<title>多变导航栏</title>
    <style>
        .nav a {
            /* 行内块元素 */
            display: inline-block;
            text-decoration: none;
            text-align: center;
            color: #fff;
            width: 114px;
            height: 44px;
            line-height: 44px;
            background: rgb(255, 255, 255);
        }

        .nav .bg1 {
            background: url(images/jpg1.jpg) no-repeat center;
        }

        .nav .bg2 {
            background: url(images/jpg2.jpg) no-repeat center;
        }

        .nav .bg1:hover {
            background: url(images/jpg2.jpg);
        }

        .nav .bg2:hover:hover {
            background: url(images/jpg1.jpg);
        }
    </style>
</head>

<body>
    <div class="nav">
        <a href="#" class="bg1">五彩导航</a>
        <a href="#" class="bg2">五彩导航</a>
        <a href="#" class="bg1">五彩导航</a>
        <a href="#" class="bg2">五彩导航</a>
    </div>

</body>