CSS基础（emmet 语法,CSS 复合选择器, 布局认知,背景样式）

最新推荐文章于 2024-07-24 22:08:48 发布

魔术师ID

最新推荐文章于 2024-07-24 22:08:48 发布

阅读量1.4k

点赞数 1

分类专栏： html5+css3 文章标签： css css3 html

本文链接：https://blog.csdn.net/qq_45585640/article/details/121998097

版权

html5+css3 专栏收录该内容

5 篇文章 1 订阅

订阅专栏

CSS基础

1. emmet 语法 —— 开发效率

1.1 emmet 语法生成 html 标签

emmet 的特点和作用是什么？

通过简写提高编码效率。

emmet 生成 HTML 结构语法

序号	符号	含义	示例
1	`*N`	连续生成 N 个	`div*5`
2	`父>子`	生成父子关系结构	`ul>li*5`
3	`兄+弟`	生成兄弟关系结构	`h1+div2+h4+p2`
4	`.class` / `#id`	生成带 class 或 id 的 div	`.red` / `#app`
5	`tag.class` / `tag#id`	生成带 class 或 id 的 tag	`p.red` / `span#nav`
6	`$*N`	`$` 位置会被连续的数字替换	`.demo$*5`
7	`{内容$}`	标签内容	`p{段落$}*5`

生成多个相同的标签用哪个符号？

*N div*5

父子关系用哪个符号？兄弟关系用哪个符号？

父>子 ul>li*5
兄+弟 h1+div*2+h4+p*2

带类名或者 id 的 div 如何编写？其他标签呢？

.class / #id

自增符号是哪个符号？

$*N
.demo$*5

标签内容是哪个符号？

{内容$}
p{段落$}*5

1.2 emmet 语法快速生成 css 样式

emmet 生成 css 有什么规律？

常用属性大多用英文单词的首字母连写即可，示例如下：
tac → text-align: center;
ti2em → text-indent: 2em;
lh26px → line-height: 26px;
tdn → text-decoration: none;

如何设置宽高？

w100 → width: 100px;
h200 → height: 200px;

emmet 记不住怎么办？

不要硬记，以完成代码为主
会用在开发时能够快一点，不会用也不至于怎么样，做出结果最重要！

1.3 快速格式化代码

你认为程序员编写出符合规范的代码重要吗？为什么？

非常重要
代码是最好的文档，代码的可读性非常重要，代码写得规范，是专业性的体现

「快速格式化代码」扩展 —— 保存时自动格式化

ctrl + , → 首选项 / 设置
输入 fromat，勾选 Format On Save，如下图所示：

注意：

VSCode 自带的格式化器能够在保存时自动格式化 HTML 代码（包含其中的 CSS）
VSCode 自带的格式化器目前不支持单独的 CSS 文件做格式化

2. CSS 复合选择器 —— 选择器

2.1 复合选择器简介

复合选择器具有什么特点？

对基础选择器进行组合
由两个或多个基础选择器，通过不同方式组合而成的

复合选择器能解决什么问题？

更准确、更高效的选择目标元素

常用的复合选择器有几类？

4类，
分别是：

后代选择器、
子代选择器、
并集选择器、
伪类选择器

2.2 后代选择器

后代选择器的应用场景是什么？

可以选择父元素中的子元素

后代选择器的语法格式是什么？元素之间使用什么符号分开？

语法格式：

    选择器1 选择器2 {样式声明;}

后代选择器的选择器之间使用空格分开。

后代选择器最终选中的元素是父代元素还是子代元素？

后代选择器最终选中的元素是子代元素 → 后代元素

后代选择器的元素除了使用标签选择器，还可以使用其他的基础选择器吗？

可以
后代选择器中的元素可以是任一一种基础选择器

    <style>
        ol li {
            color: aqua;
        }
        .adv-selector ul li a {
            color: rgb(255, 0, 0);
        }
    </style>

2.3 子元素选择器

子代选择器的应用场景是什么？

选择某个元素最近一级的子元素（亲儿子）

子代选择器的语法格式是什么？元素之间使用什么符号分开？

语法格式

选择器1 > 选择器2 {样式声明;}

子代选择器的选择器之间使用 > 分开。

子代选择器最终选中的元素是父代元素还是子代元素？

子代选择器最终选中的元素是子代元素

2.5 并集选择器

并集选择器的应用场景是什么？

集体声明——选择多组标签，同时设置相同的样式

并集选择器的语法格式是什么？元素之间使用什么符号分开？有什么注意点？

语法格式

   选择器1,
   选择器2 {
     样式声明;
   }

并集选择器的选择器之间使用 , 分开，最后一个选择器不需要逗号
并集选择器通常会竖式排列选择器，提高代码的可读性

并集选择器可以使用后代选择器或子代选择器吗？

可以

   <style>
        div,
        p,
        .pig li {
            color: cyan;
        }
    </style>

2.6 链接伪类选择器(上)

伪类选择器使用单冒号 :，是某种状态下的样式，例如 :hover 表示鼠标指向元素的状态。

链接伪类选择器的应用场景是什么？

针对链接的不同状态设置不同的样式

链接伪类选择器一共有几个，分别表示什么含义？

链接伪类选择器	说明
a:link	选择所有未被访问的链接
a:visited	选择所有已经被访问的链接
a:hover	选择鼠标指针位于其上的链接
a:active	选择激活链接（鼠标按下未抬起的链接

   /* 选择所有未被访问的链接 */
    a:link {
        color: rgb(255, 0, 0);
        text-decoration: none;
    }
    /* 选择所有已经被访问的链接 */
    a:visited {
        color: rgb(255, 238, 0);
    }
    /* 选择鼠标指针位于其上的链接 */
    a:hover {
        color: skyblue;
    }
    /* 选择激活链接（鼠标按下未抬起的链接) */
    a:active {
        color: green;
    }

2.7 链接伪类选择器(下)

链接伪类选择器的书写顺序有要求吗？如何记忆？

有
LoVe HAte（爱与恨）

在实际开发中，需要给 a 标签单独设置样式吗？为什么？

需要
因为 a 标签是有点击跳转行为的，默认与其他文本的显示样式就不相同

在实际开发中，通常只使用链接伪类选择器的哪一个状态？为什么？

:hover
因为只有鼠标经过链接时，与用户的交互是最直接的
示例代码如下：

a {
  color: #333;
  text-decoration: none;
}

a:hover {
  color: skyblue;
  text-decoration: underline;
}

2.8 focus 伪类选择器

focus 伪类选择器的应用场景是什么？

在表单中突出显示当前获得焦点的表单元素，提升用户体验

input:focus {
            background-color: rgb(216, 118, 118);
            color: rgb(72, 255, 0);
        }

2.9 复合选择器总结

选择器	作用	频率	用法示例
后代	找后代	较高	使用空格分隔 `.nav a`
子代	找儿子	较少	使用 `>` 分隔 `.nav>a`
并集	找大伙	较多	使用 `,` 分隔 `.nav, .header`
链接伪类	链接状态	较多	`a:hover`
focus	表单状态	较少	`input:focus`

3. 元素的显示模式 —— 布局认知

3.1 什么是元素显示模式

什么是元素显示模式？HTML 元素一般有几种显示模式？

元素以什么方式进行显示
HTML 一般有两种显示模式

猜一猜块元素和行内元素有什么特点？

块元素独占一行显示
行内元素可以一行显示多个

3.2 块元素 —— block

块级元素有什么特点？

独占一行
可以设置宽度、高度、外边距、边框和内边距
宽度默认是父级容器的宽度
可以存放其他行内元素和块级元素

块级元素有什么注意事项？

开发时不要在文本类元素中添加其他元素，专注于文本存放（h1~h6、p）

常见的块级元素有哪些？如何验证？

div、ul、ol、li、h1~h6、p
在 HTML 中添加一个盒子，在 Chrome 调试器中验证是否具有块级元素特征

3.3 行内元素 —— inline

行内元素有什么特点？

相邻行内元素在一行显示，一行多个
给行内元素设置宽高是无效的
默认宽度是内容的宽度（被内容撑开）
只能容纳文本或其他行内元素

行内元素有什么注意事项？

链接不能再放链接
特殊情况的链接可以存放块级元素

a 标签中能够放块级元素吗？应用场景是什么？

特殊情况下可以存放块级元素
应用场景：在电商网站点击商品列表项跳转到商品明细项

3.4 行内块元素 —— inline-block

行内块元素有什么特点？

相邻行内元素在一行显示，一行多个（行内元素特点）
默认宽度就是本身内容的宽度（行内元素特点）
可以设置宽度、高度、外边距、边框和内边距（块级元素特点）

我们现在学习过的标签中，有那三个是行内块元素？

img、input、td

3.5 元素显示模式总结

元素模式	英文	排列方式	指定宽高
块级元素	block	一行一个	可以
行内元素	inline	一行多个，内容撑开	不可以
行内块元素	inline-block	一行多个	可以

3.6 显示模式的转换

显示模式转换的应用场景是什么？

让行内元素具有宽高：把行内元素转换成块元素或者行内块元素
让块元素一行显示：把块元素转换成行内块元素

三种显示模式转换的代码是什么？哪两个比较重要？

display: block 转换为块元素
display: inline-block 转换为行内块元素
display: inline 转化为行内元素（使用较少）
在写 CSS 时，记住把 display 转换显示模式的设置写在第一行。

3.7 简单小米侧边栏

<!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>12. 简单小米侧边栏</title>
    <style>
        a {
            display: block;
            width: 200px;
            height: 30px;
            background-color: pink;
            margin-top: 2px;
            text-align: center;
            text-decoration: none;
            font: normal 100 20px/30px "微软雅黑";
        }
        a:hover {
            background-color: rgba(224, 127, 0, 0.945);
        }
    </style>
</head>

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

</html>

3.8 单行文字垂直居中

如何实现单行文字的垂直居中？

将 line-height 设置为盒子的高度。

行高实现原理

4. 背景图片 —— 样式

4.1 背景颜色

一般情况下元素的背景颜色是什么？

transparent 透明的

4.2 背景图片

背景图片的应用场景是什么？

logo
装饰图片
超大图片
精灵图（雪碧图）

背景图片有什么优点？

非常容易控制位置

背景图片的语法是什么？

background-image: none | url(url);

指定背景图片的 url 时需要引号吗？

不需要

4.3 背景平铺

在使用背景图片时，默认背景是平铺的吗？

默认是平铺的

背景平铺有哪些属性？

参数	说明
repeat	默认，水平垂直平铺
no-repeat	不平铺
repeat-x	水平平铺
repeat-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>背景平铺</title>
    <style>
        div {
            width: 400px;
            height: 100px;
            background-image: url(./images/logo.png);
            background-repeat: repeat;
        }
        .no-repeat {
            width: 400px;
            height: 100px;
            background-color: greenyellow;
            background-image: url(./images/logo.png);
            background-repeat: no-repeat;
        }
        .repeat-x {
            width: 400px;
            height: 100px;
            background-color: rgb(168, 111, 111);
            background-image: url(./images/logo.png);
            background-repeat: repeat-x;
        }
        .repeat-y {
            width: 400px;
            height: 100px;
            background-color: rgb(0, 132, 255);
            background-image: url(./images/logo.png);
            background-repeat: repeat-y;
        }
    </style>
</head>
<body>
    <div></div>
    <div class="no-repeat"></div>
    <div class="repeat-x"></div>
    <div class="repeat-y"></div>
</body>
</html>

4.4 背景位置-方位名词

哪一个属性可以改变图片在背景中的位置？

background-position (背景位置)

使用方位名词指定背景图片有顺序要求吗？

没有
因为从方位名词能够分清方向

方位名词都分别对应哪些方位？

水平方向：left / right / center
垂直方向：top / bottom / center

如果指指定了一个方位名词，第二个值默认如何对齐？

居中对齐

如何让背景图片水平垂直居中？

background-position: center;

4.5 背景位置案例

<!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>13. 背景位置案例</title>
    <style>
        h3 {
            width: 200px;
            height: 50px;
            background-color: rgb(180, 155, 155);
            background-image: url(./images/icon.png);
            background-repeat: no-repeat;
            background-position: left;
            text-indent: 2em;
            line-height: 50px;
        }
    </style>
</head>
<body>
    <h3>背景位置案例</h3>
</body>
</html>

4.6 王者荣耀背景图片

<!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>13. 王者荣耀背景图片</title>
    <style>
        body {
            background-image: url(./images/bg.jpg);
            background-repeat: no-repeat;
            background-position: top;
        }
    </style>
</head>
<body>
    
</body>
</html>

4.7 背景位置-精确单位

使用精确坐标指定背景图片有顺序要求吗？

有
第一个值一定是 x / 第二个值一定是 y

    <style>
        .box {
            width: 100%;
            height: 200px;
            background-image: url(./images/logo.png);
            background-repeat: no-repeat;
            background-position: 500px 300px;
        }
    </style>

如果只指定了一个值，是哪个方向的值？另一个方向呢？

x 方向的
垂直方向居中显示

4.8 背景位置-混合单位

指定背景图片可以混合使用单位吗？顺序有没有要求？

可以
第一个值一定是 x / 第二个值一定是 y

    <style>
        .box {
            width: 100%;
            height: 200px;
            background-image: url(./images/logo.png);
            background-repeat: no-repeat;
            background-position: 500px center;
        }
    </style>

4.9 背景固定

背景固定的应用场景是什么？

可以制作视差滚动效果

`background-attachment` 有哪两个参数？分别代表什么含义？

scroll 默认，背景图像跟随滚动
fixed 背景图像固定

body {
            background-image: url(./images/bg.jpg);
            background-repeat: no-repeat;
            background-position: top;
            background-attachment: fixed;
            color: greenyellow;
            font-size: 20px;
        }

4.10 背景属性复合写法

我们已经学过了哪个属性的复合写法？

font: font-style font-weight font-size/line-height font-family

背景属性的复合写法有顺序要求吗？

没有
但是推荐顺序是：background: color image repeat attachment position

背景属性的复合写法在开发中用的多吗？每次都要写全吗？

多
不需要每次都要写全，需要啥就写啥

4.11 背景颜色半透明

使用 `background-color` 能够设置背景颜色半透明吗？为什么？

可以 background: rgba(0, 0, 0, 0.3); 本质上就是在设置背景颜色。

`rgba` 中的 alpha 取值范围是多少？

取值范围：0 ~ 1
0 完全透明 / 1 完全不透明

    <style>
    body {
        background-color: rgba(165, 165, 165, 0.5);
    }
    </style>

4.12 背景总结

属性	作用	值
background-color	颜色	颜色 / `#f00` / `rgba(red, green, blue, alpha)`
background-image	图像	`url(图片路径)`
background-repeat	平铺	`repeat` / `no-repeat` / `repeat-x` / `repeat-y`
background-position	位置	`x`, `y` / `left right center` `top bottom center`
background-attachment	附着方式	`scroll` / `fixed`