DAY03 CSS第二天

一、Emmet语法

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

1、快速生成HTML结构语法

生成标签直接输入标签名按TAB键即可比如div 然后按TAB键
如果想要生成多个相同标签加上*就可以了比如div * 3 就可以快速生成3个div
如果有父子关系的标签，就可以用> 比如 ul> li 就可以了
如果有兄弟关系的标签，用 + 就可以了比如 div+p
如果生成带有类名或者id名字的，直接写 .demo 或者 #two tab键就可以了
如果生成div 类名是有顺序的，可以用自增符号$
如果想要在生成的标签内部写内容可以用{}表示

2、快速生成CSS 样式语法

CSS 基本采取简写形式即可。

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

3、快速格式化代码

Vscode 快读格式化代码：shift+alt+f

也可以设置当我们保存页面的时候自动格式化代码：

文件----> 首选项------>设置
搜索emmet.include;
在settings.json下的用户中添加以下语句：

“editor.formatOnType”:true,

“editor.formatonSave”:true

只需要设置一次即可，以后都可以自动保存格式化代码

二、CSS 的复合选择器

1、什么是复合选择器

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

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

2、后代选择器(重要)

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

语法：

元素1 元素2 {样式声明}

上述语法表示选择元素1 里面的所有元素2(后代元素)

例如：

ul li {样式声明} /* 选择ul里面所有的li标签元素 */

元素1和元素2中间用 空格隔开
元素1是父级，元素2是子级，最终选择的是元素2
元素2可以是儿子，也可以是孙子等，只要是元素1的后代即可
元素1和元素2可以是任意选择器

代码：

<!DOCTYPE html>
<html lang="zh-CN">
<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>/* 把ol下的li变为红色 */ol li {color: red;}ol li a {color: green;}.nav li a {color: yellow;}</style>
</head>
<body><ol><li>我是ol的孩子</li><li>我是ol的孩子</li><li>我是ol的孩子</li><li><a href="#">孙子</a></li></ol><ol class="nav"><li>我是ol的孩子</li><li>我是ol的孩子</li><li>我是ol的孩子</li><li><a href="#">孙子</a></li><li><a href="#">孙子</a></li><li><a href="#">孙子</a></li></ol><ul><li>我是ul的孩子</li><li>我是ul的孩子</li><li>我是ul的孩子</li></ul>
</body>
</html>

3、子选择器(重要)

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

语法：

元素1> 元素2 {样式声明}

上述语法表示选择元素1里面所有的直接后代(子元素) 元素2。

元素1和元素2中间用大于号隔开
元素1是父级，元素2是子级，最终选择的是元素2
元素2必须是亲儿子，其孙子、重孙子之类都不归他管，也可以叫它亲儿子选择器

代码：

<!DOCTYPE html>
<html lang="zh-CN">
<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>.nav>a {color: yellowgreen;}</style>
</head>
<body><div class="nav"><a href="#">我是儿子</a><p><a href="#">我是孙子</a></p></div>
</body>
</html>

练习

第一题：后代选择器

    <!-- 将下面链接文字修改为红色 --><div class="nav"><ul><li><a href="#">百度</a></li><li><a href="#">百度</a></li></ul>

.nav ul li a {color: red;
}

第二题:子元素选择器

<!-- 将下面的大肘子文字修改为红色 -->
<div class="hot"><a href="#">大肘子</a><ul><li><a href="#">猪头</a></li><li><a href="#">猪尾巴</a></li></ul>
</div>

.hot>a {    color: red;}

4、并集选择器(重要)

并集选择器可以选择多组标签，同时为他们定义相同的样式。通常用于集体声明

并集选择器是各选择器通过英文逗号（，）连接而成，任何形式的选择器都可以作为并集选择器的一部分。

语法：

元素1，元素2 {样式声明}

上述语法表示选择元素1和元素2

例如：

ul,div {样式声明} /*选择 ul 个 div 标签元素*/

元素1和元素2中间用逗号隔开
逗号可以理解为和的意思
并集选择器通常用于集体声明

代码：

<!DOCTYPE html><html lang="zh-CN"><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>        /* 要求1：请把熊大熊二改为粉色 */        /* div,p {            color: pink;        } */        /* 要求2：熊大熊二改为粉色 还有佩奇一家改为粉色 */        div,        p,        .pig li {            color: pink;        }        /* 约定语法规范，并集选择器竖着写 */        /* 一定要注意最后一个选择器不能加逗号 */    </style></head><body>    <div>熊大</div>    <p>熊二</p>    <span>光头强</span>    <ul class="pig">        <li>佩奇</li>        <li>乔治</li>        <li>猪爸爸</li>        <li>猪妈妈</li>    </ul></body>    </html>

5、伪类选择器

伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第一个，第N个元素。

伪类选择器书写最大的特点是用冒号（: )表示，比如 :hover 、 :first-child。

因为伪类选择器很多，比如有链接伪类、结果伪类等，所以这里讲最常用的链接伪类选择器。

6、链接伪类选择器

语法：

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

伪类选择器注意事项：

为确保生效，请按照LVHA的循顺序声明：:link ----:visited---- :hover----- :active
记忆方法：love hate 或者 lv包包hao。
因为 a 链接在浏览器中具有默认样式，所以我们实际工作中都需要给链接单独指定样式

伪类选择器实际开发中的写法：

/* a 是标签选择器 所有的标签 */a {    color: gray;}/* :hover 是链接伪类选择器 鼠标经过 */a:hover {    color: red;  /* 鼠标经过的时候，由原来的 灰色 变成了 红色 */}

代码：

<!DOCTYPE html><html lang="zh-CN"><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>        /* 1、 a:link 未访问的链接 */        /* a:link {            color: #333;            text-decoration: none;        } */        /* 2、a:visited 访问过的链接 */        /* a:visited {            color: orange;        } */        /* 3、a:hover 鼠标指针位于其上的链接  */        /* a:hover {            color: blue;        } */        /* 4、a:active 活动链接（鼠标按下未弹起的链接） */        /* a:active {            color: red;        } */        a {            color: #333;            text-decoration: none;        }        a:hover {            color: blue;        }    </style></head><body>    <a href="#">百度</a>    <a href="http://www.asdasdad.com">新浪</a></body></html>

7、 :focus 伪类选择器

:focu 伪类选择器用于选取获得焦点的表单元素

较短就是光标，一般情况input 标签类标签元素才能获取，因此这个选择器也主要针对于表单元素。

input:focus {    background-color: yellow;}

代码：

<!DOCTYPE html><html lang="zh-CN"><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>:focus伪类选择器</title>    <style>        /* 把获得光标的input表单元素选取出来 */        input:focus {            background-color: blue;            color: red;        }    </style></head><body>    <input type="text">    <input type="text">    <input type="text"></body></html>

8、复合选择器总结

三、CSS 的元素显示模式

了解元素的显示模式可以更好的让我们布局页面

1、什么是元素显示模式

作用：网页的标签非常多，在不同地方会用到不同类型的标签，了解他们的特点可以更好的布局我们的页面。

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

HTML 元素一般分为块元素和行内元素两种类型。

2、块元素

常见的块元素有 h1 ~ h6 、 p 、div 、ul 、 ol 、li等，其中 div标签是最典型的块元素

块级元素的特点：

比较霸道，独占一行
高度，宽度、外边距以及内边距都可以控制
宽度默认是容器（父级宽度）的100%
是一个容器及盒子，里面可以放行内或者块级元素

注意点：

文字类的元素内不能使用块级元素
p 标签主要用于存放文字，因此 p 标签里面不能放块级元素，特别是不能放 div 标签
同理，h1~h6 标签等都是文字类块级标签，里面也不能放其他块级元素

代码：

<!DOCTYPE html><html lang="zh-CN"><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: 200px; */            height: 200px;            background-color: red;        }    </style></head><body>    <div>霸道的一逼</div>    瑟瑟发抖</body></html>

3、行内元素

常见的行内元素有 a、 strong 、b 、em 、i 、del 、s 、 ins 、u 、span等，其中span标签是最典型的行内元素。有的地方也将行内元素称为内联元素。

行内元素的特点：

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

注意：

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

代码：

<!DOCTYPE html><html lang="zh-CN"><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>        span {            width: 200px;            height: 200px;            background-color: red;        }    </style></head><body>    <span>spaider mann who are you？</span> <strong>你怎么穿着品如的衣服</strong>    <span>spaider man</span> <strong>你怎么穿着品如的衣服</strong></body></html>

4、行内块元素

在国内元素中有几个特殊的标签： img 、input 、td ，它们同时具有块元素和行内元素的特点。有些资料称它们为行内块元素。

行内块元素的特点：

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

代码：

<!DOCTYPE html><html lang="zh-CN"><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>        input {            width: 250px;            height: 250px;        }    </style></head><body>    <input type="text">    <input type="text"></body></html>

5、元素显示模式总结

6、元素显示模式转换

在特殊情况下，我们需要元素模式的转换，简单理解：一个模式的元素需要另外一种模式的特性

比如想要增加链接 a 的触发范围

转换为块元素：display:block;(经常使用)
转换为行内元素：display:inline;
转换为行内块：display:inline-block;(经常使用)

额外：一个小工具的使用 snipaste

Snipaste是一个简单但强大的截图工具，也可以将截图贴回到屏幕上

常用快捷方式：

F1可以截图，同时测量大小，设置箭头，书写文字等
F3在桌面置顶显示
点击图片，alt 可以取色（按下shift可以切换取色模式）
按下ESC取消图片显示

额外：一个小技巧单行文字垂直居中的代码

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

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

四、CSS 的背景

通过CSS 背景属性，可以给页面元素添加背景样式。

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

1、背景颜色

background-color属性定义元素的背景颜色。

语法：

background-color:颜色值;

一般情况下元素背景颜色默认值是transparent（透明），也可以手动指定背景颜色为透明

2、背景图片

background-image属性描述了元素的背景图像。实际开发常见于logo或者一些装饰的小图片或者是超大的背景图片，有点是非常便于控制位置。（精灵图也是一种运用场景）

语法：

background-image：none|url（url）;

none 是无背景图片(默认的)
url 是使用绝对或相对地址指定背景图像

3、背景平铺

如果要在HTML页面上对背景图像进行平铺，可以使用background-repeat属性

语法：

background-repeat：repeat|no-repeat|repeat-x|repeat-y

repeat：背景图像在纵向和横向上平铺(默认的)
no-repeat：背景图像不平铺
repeat-x：背景图像在横向上平铺
repeat-y：背景图像在纵向上平铺

4、背景图片位置

利用background-position属性可以改变图片在背景中的位置

语法：

background-position：x y;

参数代表的意思是：x 坐标和 y 坐标。可以使用** 方位名词或者精确单位**

length：百分数|由浮点数字和单位标识符组成的长度值。
position：top|center|bottom|ledt|right 方位名词。

参数是方位名词
- 如果指定的两个值都是方位名词，则两个值前后顺序无关，比如left top 和 top left 效果一致
- 如果只指定一个方位名歌，另一个值省略，则第二个值默认居中对齐。
参数是精确单位
- 如果参数值是精确坐标，那么第一个肯定是X坐标，第二个一定是Y坐标
- 如果指定一个数值，那么该数值一定是x坐标，另一个默认垂直居中
参数是混合单位
- 如果指定的两个值是精确单位和方位名词混合使用，则第一个值是x坐标，第二个值是y坐标。

5、背景图像固定(背景附着)

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

background-attachment后期可以制作视差滚动的效果。

语法：

background-attachment: scroll    |   fixed

scroll:背景图像是随对象内容滚动(默认)
fixed：背景图像固定

6、背景复合写法

为了简化背景属性的代码，可以将这些属性合并简写在同一个属性background中。从而节约代码量。

当使用简写属性时，没有特定的书写吮吸，一般习惯约定顺序为：

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

语法：

background：transparent（透明）  url(image.jpg)  no-repeat   fixed   top cener；

这是实际开发中，更提倡的写法。

7、背景颜色半透明

CSS提供了背景颜色半透明的效果。

background：rgba(0,0,0,0.3);

最后一个参数是alpha透明度，取值范围在0~1之间。
习惯把0.3的0省略掉，写为background:rgba(0,0,0,.3);
注意：背景半透明是指盒子背景半透明，盒子里面的内容不受影响
CSS3 新增属性，是IE9+版本浏览器才支持的

8、背景总结

2021-07-07 Day04 CSS基础第二天相关推荐

前端自学day04——css基础
课程自学:(b站)黑马程序员[前端HTML5+CSS3+移动Web全套教程]
css 背景颜色默认,CSS 基础——颜色和背景属性
日常打卡,CSS 基础第二部分:颜色和背景属性.主要介绍了如何使用 CSS 样式设置元素的颜色.背景颜色和背景图像. 1.颜色属性 color color属性用来设置指定元素的颜色,颜色值是一个关键字 ...
2021.07.07 宇信科技
2021.07.07 宇信科技宇信科技晚上电话面问了一堆java基础,离谱,jd上也没要求java:简历筛选扣工资! java小白,凭借c语言基础简单回答了一哈,面试官估计在电 ...
2021年07月-2022年1月币种涨幅跌幅排行
使用OKX永续合约SWAP数据. 分为两个部分 2021年07月15日-2021年11月15日 4个月上涨 2021年11月01日-2022年01月31日 2个月下跌 COIN UHIGH ULOW ...
css做名单,css基础教程：2021年适合新手的7个CSS入门教程推荐
上一篇我们向同学们推荐了5个html入门教程,本篇我们继续向同学们精选推荐一些适合新手学习的CSS基础入门教程,欢迎学习! 首先我们来介绍什么是CSS?以及CSS的作用 CSS 是一种标准样式表语言, ...
前端学习从入门到高级全程记录之3 （CSS基础知识）
本次学习目标从今天开始我们要学习CSS的知识了,前面HTML知识还比较生疏的同学别忘了复习. 本次学习目标: 学会使用CSS选择器熟记CSS样式和外观属性熟练掌握CSS各种选择器熟练掌握CSS ...
HTML、css基础知识
typora-copy-images-to: media 第01阶段.前端基础.CSS初识 CSS层叠样式表学习目标理解 css的目的作用 css的三种引入方式应用 css三种引用方式的书写通 ...
CSS基础选择器、字体和文本样式
一.CSS简介美化网页.布局页面 CSS(层叠样式表Cascading Style Sheets)(CSS样式表或级联样式表) 主要用于设置HTML中的文本内容(字体.大小.对齐方式等).图片的外形 ...
字节跳动前端面试题：CSS 基础
实战教程全栈技术精选好文注意:每道题前面出现的 (xx) 数字代表这道题出现的频次,此 CSS 基础是基于 30+ 篇前端面经整理出的问题和对应的回答.参考链接等.文章内容为拿到 Offer ...

2021-07-07 Day04 CSS基础第二天