DAY 4 | 自学前端第四天

知道自己在做什么很重要

今天学习 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>

学而不思则罔，思而不学则殆。