0基础学前端-----CSS DAY5
0基础学前端-----CSS DAY5
视频参考：B站Pink老师
今天是CSS学习的第五天，今天开始的笔记对应Pink老师课程中的CSS第二天的内容。
本节重点：CSS的元素显示模式、三种元素显示模式的转换、CSS背景设置。
2. CSS的元素显示模式
2.1 什么是元素显示模式
作用：网页的标签非常多，在不同的地方会用到不同类型的标签，了解他们的特点可以更好的布局我们的网页。
元素显示模式就是元素（标签）以什么方式进行显示，比如<div>自己占一行，比如一行可以放多个<span>。
HTML元素分为块元素和行内元素两种类型。
2.2-1 块元素
常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>标签是最典型的块元素。
块级元素的特点：
- 比较霸道，自己占一行。
- 高度、宽度，外边距以及内边距都可以控制。
- 宽度默认是容器的100%。
- 是一个容器及盒子，里面可以放行内或块级元素。
注意：
-
文字类的元素（
<h1>~<h6>、<p>）内不能使用块级元素。 -
<p>标签主要用于存放文字，因此<p>里面不能放块级元素，特别是不能放<div>。 -
同理，
<h1>~<h6>等都是文字类块级标签，里面也不能放其他块级元素。
参考代码：Document 比较霸道，自己独占一行瑟瑟发抖这里有问题
结果展示：
2.2-2 行内元素
常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>标签是最典型的行内元素。有的地方也将行内元素称为内联元素。
行内元素特点：
-
相邻行内元素在一行上，一行可以显示多个。
-
高、宽直接设置是无效的。
-
默认宽度就是它本身内容的宽度。
-
行内元素只能容纳文本或其他行内元素。
注意： -
链接里不能再放链接。
-
特殊情况链接
<a>里面可以放块级元素，但是给<a>转换一下块级模式最安全。
参考代码：Document pink老师品如的衣服 pink老师品如的衣服
结果展示：
2.3 行内块元素
在行内元素中有几个特殊的标签——、、，它们同时具有块元素和行内元素的特点，有些资料称他们为行内块元素。
行内块元素的特点：
-
和相邻的行内元素在一行上，但是他们之间会有空白缝隙。一行可以显示多个。（行内元素特点）
-
默认宽度就是他本身内容的宽度。（行内元素特点）
-
高度、行高、外（内）边距均可控制。（块级元素特点）
参考代码：Document
结果展示：
2.4 元素显示模式总结
元素模式
元素排列
设置样式
默认宽度
包含
块级元素
一行只能放一个块级元素
可设置宽、高
容器的100%
容器级可以包含任何标签，<p>中不可包含块级元素
行内元素
一行可以放多个行内元素
不可直接设置宽、高
它本身内容的宽度
容纳文本或其他行内元素，<a>可放块级元素
行内块元素
一行放多个行内块元素
可设置宽、高
它本身内容的宽度
2.5 元素显示模式转换
特殊情况下，我们需要元素模式的转换，即一个模式元素需要另外一种模式特性。
e:想要增加<a>的触发范围
使用以下语法：
转换为块元素：display: block;
转换为行内元素：display: inline;
转换为行内块元素：display: inline-block;
其中第一个和第三个最常用。
参考代码：
<!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 {
width: 150px;
height: 50px;
background-color: pink;
/* 把行内元素a转换为块级元素 */
display: block;
}
div {
width: 300px;
height: 100px;
background-color: purple;
/* 把块级元素div转换为行内元素 */
display: inline;
}
span {
width: 300px;
height: 30px;
background-color: skyblue;
/* 行内元素转换为行内块元素 */
display: inline-block;
}
</style>
</head>
<body>
<a href="#">金星阿姨</a>
<a href="#">金星阿姨</a>
<div>我是块级元素</div>
<div>我是块级元素</div>
<span>行内元素转换为行内块元素</span>
<span>行内元素转换为行内块元素</span>
</body>
</html>
结果展示：
2.6 一个小工具----snipaste
这是一个强大的截图工具，也可以让你的截图贴回屏幕上。这里有需要的同学，可以去看pink老师的视频，下载并使用这个工具。个人体验感非常好！！！
课堂案例------简洁版小米侧边栏
任务：
-
把链接a转换为块级元素，这样链接可以独占一行并有宽和高。
-
鼠标经过a链接设置背景颜色。
参考代码：Document
结果展示：
2.7 小技巧-------单行文字垂直居中的代码
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>
div {
width: 200px;
height: 40px;
background-color: pink;
line-height: 40px;
}
</style>
</head>
<body>
<div>我要垂直居中</div>
</body>
</html>
重点是： height= line-height
结果展示：
2.8 单行文字垂直居中的原理
简单理解：行高的上空隙和下空隙把文字挤到中间了。如果行高小于盒子高度，文字会偏上，如果行高大于盒子高度，则文字偏下。可以参考下图理解：
3. CSS的背景
通过CSS背景属性，可以给页面元素添加背景样式。
背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。
3.1 背景颜色
background-color属性定义了元素的背景颜色。
background-color:颜色值；
一般情况下元素背景默认值是transparent，也可手动指定为透明色。
参考代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>背景颜色</title>
<style>
div {
width: 200px;
height: 200px;
/* background-color: transparent;透明的 */
background-color: pink;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
结果展示：
3.2 背景图片
background-image属性描述了元素的背景图像。实际开发常见于logo或者一些装饰性的小图片或超大背景图，有点事便于控制位置（精灵图也是一种运用场景）。
background-image: none/url(url);
参数值
作用
none
无背景图（默认的）
url
使用绝对或相对地址指定背景图片
参考代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>背景图片</title>
<style>
div {
width: 300px;
height: 300px;
background-image: url(images/logo.png);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
结果展示：
3.3 背景平铺
对背景图平铺可以使用background-repeat
background-repeat: repeat/no-repeat/repeat-x/repeat-y
参数值
作用
repeat
背景图像在横向和纵向上平铺（默认值）
no-repeat
不平铺
repeat-x
横向平铺
repeat-y
纵向平铺
参考代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>背景图片</title>
<style>
div {
width: 300px;
height: 300px;
/* 页面元素既可以添加背景颜色也可以添加背景图片，只不过背景图片会压住背景颜色 */
background-color: pink;
background-image: url(images/logo.png);
/* 背景图片不平铺 ,默认情况下都平铺*/
/* background-repeat: no-repeat; */
/* 沿x轴平铺 */
background-repeat: repeat-x;
/* 沿y轴平铺 */
/* background-repeat: repeat-y; */
}
</style>
</head>
<body>
<div></div>
</body>
</html>
结果展示：
3.4 背景图片位置
利用background-position属性可以改变图片在背景中的位置
background-position： x y;
参数值
说明
length
百分数/由浮点数和单位标识符组成的长度值
position
top/center/bottom/left/center/right方位名词
1.参数是方位名词
- 如果指定的两个值都是方位名词，则前后顺序无关，left top的效果=top left的效果。
- 如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐。
参考代码1:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>背景图片</title>
<style>
div {
width: 300px;
height: 300px;
background-image: url(images/logo.png);
background-color: pink;
background-repeat: no-repeat;
/* background-position: top center; */
/* 如果是方位名词 right center 和 center right 效果是等价的跟顺序无关 */
/* background-position: right center; */
/* background-position: right; */
/* 此时，第一个参数一定是top y轴顶部对齐
第二个参数省略x轴是水平居中显示的 */
background-position: top;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
结果展示：
参考代码二（应用1）：
<!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>
h3 {
width: 118px;
height: 40px;
/* background-color: pink; */
font-size: 14px;
font-weight: 400;
line-height: 40px;
background-image: url(images/icon.png);
background-repeat: no-repeat;
background-position: left center;
text-indent: 1.5em;
}
</style>
</head>
<body>
<h3>成长守护平台</h3>
</body>
</html>
结果展示：
参考代码三（应用2）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>超大背景图片</title>
<style>
body {
background-image: url(images/bg.jpg);
background-repeat: no-repeat;
background-position: center top;
}
</style>
</head>
<body>
</body>
</html>
结果展示：
2. 参数是精确单位
- 如果参数是精确坐标，那么第一个肯定是x坐标，第二个一定是y坐标
- 如果只能指定一个数值，那么该数值一定是x坐标，另外一个默认垂直居中
参考代码：
<!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>
div {
width: 300px;
height: 300px;
background-color: pink;
background-image: url(images/logo.png);
background-repeat: no-repeat;
/* background-position: 20px 50px; */
background-position: 20px;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
结果展示：
3. 参数是混合单位
-
如果是混合单位，则第一个值为x坐标，第二个值为y坐标。
参考代码：背景位置-精确单位
结果展示：
3.5 背景图像固定
background-attachment属性设置背景图像是否固定或随页面其余部分滚动
background-attachment：scroll/fixed;
参数
作用
scroll
背景图随对象滚动
fixed
背景图像固定
参考代码：
<!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>
body {
background-image: url(images/bg.jpg);
background-repeat: no-repeat;
background-position: center top;
color: #fff;
font-size: 20px;
background-attachment: fixed;
/* 把背景固定住 */
}
</style>
</head>
<body>
<p>天王盖地虎, pink老师一米五</p>
<p>天王盖地虎, pink老师一米五</p>
<p>天王盖地虎, pink老师一米五</p>
<p>天王盖地虎, pink老师一米五</p>
<p>天王盖地虎, pink老师一米五</p>
<p>天王盖地虎, pink老师一米五</p>
<p>天王盖地虎, pink老师一米五</p>
<p>天王盖地虎, pink老师一米五</p>
<p>天王盖地虎, pink老师一米五</p>
<p>天王盖地虎, pink老师一米五</p>
<p>天王盖地虎, pink老师一米五</p>
<p>天王盖地虎, pink老师一米五</p>
<p>天王盖地虎, pink老师一米五</p>
<p>天王盖地虎, pink老师一米五</p>
<p>天王盖地虎, pink老师一米五</p>
<p>天王盖地虎, pink老师一米五</p>
<p>天王盖地虎, pink老师一米五</p>
<p>天王盖地虎, pink老师一米五</p>
<p>天王盖地虎, pink老师一米五</p>
<p>天王盖地虎, pink老师一米五</p>
<p>天王盖地虎, pink老师一米五</p>
<p>天王盖地虎, pink老师一米五</p>
<p>天王盖地虎, pink老师一米五</p>
<p>天王盖地虎, pink老师一米五</p>
<p>天王盖地虎, pink老师一米五</p>
<p>天王盖地虎, pink老师一米五</p>
<p>天王盖地虎, pink老师一米五</p>
<p>天王盖地虎, pink老师一米五</p>
<p>天王盖地虎, pink老师一米五</p>
<p>天王盖地虎, pink老师一米五</p>
<p>天王盖地虎, pink老师一米五</p>
<p>天王盖地虎, pink老师一米五</p>
<p>天王盖地虎, pink老师一米五</p>
<p>天王盖地虎, pink老师一米五</p>
<p>天王盖地虎, pink老师一米五</p>
<p>天王盖地虎, pink老师一米五</p>
<p>天王盖地虎, pink老师一米五</p>
<p>天王盖地虎, pink老师一米五</p>
<p>天王盖地虎, pink老师一米五</p>
<p>天王盖地虎, pink老师一米五</p>
<p>天王盖地虎, pink老师一米五</p>
<p>天王盖地虎, pink老师一米五</p>
<p>天王盖地虎, pink老师一米五</p>
<p>天王盖地虎, pink老师一米五</p>
</body>
</html>
结果展示：
fixed效果如下，滚动滑动条背景图不变。
scroll效果如下，滚动滑动条背景图变化。
3.6 背景复合写法-----节约代码量
这个复合写法字体符合属性写法不同，他没有特定的书写顺序，一般约定为：
background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置
实际开发中更提倡复合写法。
代码展示：
<!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>
body {
/* background-image: url(images/bg.jpg);
background-repeat: no-repeat;
background-position: center top;
background-color: black;
background-attachment: fixed; */
background: black url(images/bg.jpg) no-repeat fixed center top;
color: #fff;
font-size: 20px;
/* background-attachment: fixed; */
/* 把背景固定住 */
}
</style>
</head>
<body>
<p>天王盖地虎, pink老师一米五</p>
<p>天王盖地虎, pink老师一米五</p>
<p>天王盖地虎, pink老师一米五</p>
<p>天王盖地虎, pink老师一米五</p>
<p>天王盖地虎, pink老师一米五</p>
<p>天王盖地虎, pink老师一米五</p>
<p>天王盖地虎, pink老师一米五</p>
<p>天王盖地虎, pink老师一米五</p>
<p>天王盖地虎, pink老师一米五</p>
<p>天王盖地虎, pink老师一米五</p>
<p>天王盖地虎, pink老师一米五</p>
<p>天王盖地虎, pink老师一米五</p>
<p>天王盖地虎, pink老师一米五</p>
<p>天王盖地虎, pink老师一米五</p>
<p>天王盖地虎, pink老师一米五</p>
<p>天王盖地虎, pink老师一米五</p>
<p>天王盖地虎, pink老师一米五</p>
<p>天王盖地虎, pink老师一米五</p>
<p>天王盖地虎, pink老师一米五</p>
<p>天王盖地虎, pink老师一米五</p>
<p>天王盖地虎, pink老师一米五</p>
<p>天王盖地虎, pink老师一米五</p>
<p>天王盖地虎, pink老师一米五</p>
<p>天王盖地虎, pink老师一米五</p>
<p>天王盖地虎, pink老师一米五</p>
<p>天王盖地虎, pink老师一米五</p>
<p>天王盖地虎, pink老师一米五</p>
<p>天王盖地虎, pink老师一米五</p>
<p>天王盖地虎, pink老师一米五</p>
<p>天王盖地虎, pink老师一米五</p>
<p>天王盖地虎, pink老师一米五</p>
<p>天王盖地虎, pink老师一米五</p>
<p>天王盖地虎, pink老师一米五</p>
<p>天王盖地虎, pink老师一米五</p>
<p>天王盖地虎, pink老师一米五</p>
<p>天王盖地虎, pink老师一米五</p>
<p>天王盖地虎, pink老师一米五</p>
<p>天王盖地虎, pink老师一米五</p>
<p>天王盖地虎, pink老师一米五</p>
<p>天王盖地虎, pink老师一米五</p>
<p>天王盖地虎, pink老师一米五</p>
<p>天王盖地虎, pink老师一米五</p>
<p>天王盖地虎, pink老师一米五</p>
<p>天王盖地虎, pink老师一米五</p>
</body>
</html>
重点注意： background: black url(images/bg.jpg) no-repeat fixed center top;和之前不同。
3.7背景色半透明
CSS3为我们提供了背景颜色半透明的效果。
background: rgb(0,0,0,0.3);
- 最后一个参数为alpha透明度，取值在0-1之间。
- 我们习惯把0.3的0省略，写为
background: rgb(0,0,0,.3); - 注意：背景半透明是指盒子背景半透明，盒子里内容不受影响。
- CSS3新增属性IE9+版本支持，但开发中不太关注兼容性写法，可放心使用。
参考代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>背景色半透明</title>
<style>
div {
width: 300px;
height: 300px;
background: rgba(0, 0, 0, .6);
}
</style>
</head>
<body>
<div>隐形的翅膀</div>
</body>
</html>
结果展示：
3.8 背景总结
属性
作用
值
background-color
背景颜色
预定义颜色值/16进制/RGB
background-image
背景图片
url(图片路径)
background-repeat
是否平铺
repeat/no-repeat/repeat-x/repeat-y
background-position
背景位置
方位名词/精确单位/混合单位
background-attachment
背景附着
scroll/fixed
背景简写
书写简单
背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置
背景色半透明
背景色半透明
background: rgba(0,0,0,.3)后必为四个值
案例-----五彩导航栏
参考代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>综合案例-五彩导航</title>
<style>
.nav a {
display: inline-block;
width: 120px;
height: 58px;
background-color: pink;
text-align: center;
line-height: 48px;
color: #fff;
text-decoration: none;
}
.nav .bg1 {
background: url(images/bg1.png) no-repeat;
}
.nav .bg1:hover {
background-image: url(images/bg11.png);
}
.nav .bg2 {
background: url(images/bg2.png) no-repeat;
}
.nav .bg2:hover {
background-image: url(images/bg22.png);
}
</style>
</head>
<body>
<div class="nav">
<a href="#" class="bg1">五彩导航</a>
<a href="#" class="bg2">五彩导航</a>
<a href="#" class="bg3">五彩导航</a>
<a href="#" class="bg4">五彩导航</a>
<a href="#" class="bg5">五彩导航</a>
</div>
</body>
</html>
结果展示：
—————————————————————————————————————————
第二天内容全部更新完毕，下节第三天开始( _)，有什么问题都可以在评论区进行讨论哦！