CSS的学习-美化网页的内容
CSS（层叠样式表），样式表语言。
书写位置：title标签下方添加style双标签，style标签里面书写CSS代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>初始 CSS </title>
<style>
/*CSS 代码*/
/* 选择器 {CSS 属性}*/
/* 属性名和属性值成对出现 键值对 */
p {
color: red;
font-size: 30px;
}
</style>
</head>
<body>
<p>体验 CSS</p>
</body>
</html>
CSS引入方式
- 内部样式表：学习使用
css代码写在style标签里面 - 外部样式表：开发使用
- css代码写在单独的css文件中（.css）
- 在HTML使用
link标签引入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 引入方式</title>
<!-- link 引入外部样式表：rel:关系, 样式表 -->
<link rel="stylesheet" href="./my.css">
</head>
<body>
<p>这是p标签</p>
<div>这是div标签</div>
</body>
</html>
/* 这个文件放 CSS 代码 */
/* 选择器{CSS 属性}*/
p{
color: red;
}
行内样式：配合JavaScript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 引入方式</title>
<!-- link 引入外部样式表：rel:关系, 样式表 -->
<link rel="stylesheet" href="./my.css">
</head>
<body>
<p>这是p标签</p>
<!-- 行内，style=" CSS 属性" -->
<div style="color: green; font-size: 30px;">这是div标签</div>
</body>
</html>
选择器
作用：查找标签，设置样式
基础选择器
- 标签选择器-标签名作为选择器，选中同名标签设置相同的样式—无法差异化同名标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>标签选择器</title>
<style>
p {
color: red;
}
</style>
</head>
<body>
<p>这是p标签</p>
<p>1111</p>
<p>2222</p>
</body>
</html>
- 类选择器（.类名）-差异化同名标签的显示效果、类名要见名之义
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>类选择器</title>
<style>
/* 定义 */
.red {
color: red;
}
.size {
font-size: 50px;
}
</style>
</head>
<body>
<!-- 使用 -->
<!-- 一个类选择器，可以给多个标签使用 -->
<p class="red">111111</p>
<p>222222</p>
<!-- 一个标签可以使用多个类名，class属性值写多个类名，类名用空格隔开 -->
<div class="red size">div 标签</div>
</body>
</html>
- id选择器（#id名）-查找标签，差异化设置标签的显示效果
场景：id选择器一般配合js使用，很少用来设置CSS样式
规则：同一个id选择器在一个页面只能使用一次
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>id选择器</title>
<style>
#red {
color: red;
}
</style>
</head>
<body>
<div id="red">div 标签</div>
</body>
</html>
- 通配符选择器-查找页面所有标签，设置相同样式
写法：*，不需要调用，浏览器自动查找页面所有标签，设置相同的样式
一般用来开发项目初期，清除默认标签样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>通配符选择器</title>
<style>
* {
color: red;
}
</style>
</head>
<body>
<p>p 标签</p>
<div>div 标签</div>
<h1>h1 标签</h1>
<ul>
<li>li </li>
<li>li </li>
<li>li </li>
</ul>
<strong>strong </strong>
</body>
</html>
画盒子-使用合适的选择器画盒子
width 宽带、height 高度、background-color 背景色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>画盒子</title>
<style>
.red{
width: 100px;
height: 100px;
background-color: brown;
}
.orange{
width: 200px;
height: 200px;
background-color: orange;
}
</style>
</head>
<body>
<div class="red">div1</div>
<div class="orange">div2</div>
</body>
</html>
文字控制属性
字体大小：Font-size（文字尺寸，PC端常用单位为px）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>字体大小</title>
<style>
/* 谷歌浏览器默认文字大小：16px */
p{
font-size: 30px;
}
</style>
</head>
<body>
<p>测试字体大小</p>
<div>测试默认文字大小</div>
</body>
</html>
字体粗细：Font-weight（数字/关键字，正常为400、加粗为700）
<!DOCTYPE html> <html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>字体粗细</title>
<style>
h3{
font-weight: 400;
}
div{
font-weight: 700;
}
</style> </head> <body>
<h3>标题</h3>
<div>div 标签</div> </body> </html>
字体样式：Font-style（正常，倾斜）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>字体样式</title>
<style>
em{
font-style: normal;
}
div{
font-style: italic;
}
</style>
</head>
<body>
<em>标签</em>
<div>div 标签</div>
</body>
</html>
行高
属性值：数字+px / 数字（当前标签font-size(字体大小)属性值的倍数）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>行高</title>
<style>
p{
font-size: 20px;
/* line-height: 30px; */
line-height: 2;
}
</style>
</head>
<body>
<p>
v去年热舞哦期待反扒确定进去哦陪我的机票请问大家殴打的期盼我的家藕去皮围巾搭配
五点九二五九违反破解分配王府井解放前配件的发票清单的期盼为大家欧文东京都是的就
是决gg聘请外籍都完全接到判决书度假区评委多久哦多久哦生的伟吉萨家的爬上坡大飒飒
怕的就是但是经常加大送到爬升阶段手扒鸡吊牌的怕就怕的静安寺庞大的就阿婆的骄傲受
打击啊静安寺拼接大屏觉得
</p>
</body>
</html>
行高-垂直居中：行高属性值等于盒子高度属性值
<!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{
height: 100px;
background-color: skyblue;
line-height: 100px;
}
</style>
</head>
<body>
<div>文<br>字</div>
</body>
</html>
字体族：font-family(字体名)
font-family属性最后设置一个字体族名、网页开发建议使用无衬线字体
<!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{
font-family: 楷体;
}
</style>
</head>
<body>
<div>测试字体</div>
</body>
</html>
font复合属性–设置网页文字公共样式
font:(是否倾斜 是否加粗 字号/行高 字体)-必须按顺序书写
注意：字号和字体值必须书写，否则font属性不生效
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>font属性</title>
<style>
div{
/* font: italic 700 30px/2 楷体; */
font: 30px 楷体;
/* font: italic 700 30px/2; */
}
</style>
</head>
<body>
<div>测试 font 属性</div>
</body>
</html>
文本缩进
text-indent (数字+px / 数字+em)(1em=当前标签的字号大小)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文本缩进</title>
<style>
p{
text-indent: 2em;
font-size: 30px;
}
</style>
</head>
<body>
<p>去年热舞哦期待反扒确定进去哦陪我的机票请问大家殴打的期盼我的家藕去皮围巾搭配
五点九二五九违反破解分配王府井解放前配件的发票清单的期盼为大家欧文东京都是的就
是决gg聘请外籍都完全接到判决书度假区评委多久哦多久哦生的伟吉萨家的爬上坡大飒飒
怕的就是但是经常加大送到爬升阶段手扒鸡吊牌的怕就怕的静安寺庞大的就阿婆的骄傲受
打击啊静安寺拼接大屏觉得</p>
</body>
</html>
文本对齐
text-align (left / center / right)-默认左对齐
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文本对齐方式</title>
<style>
h1{
/* 本质：居中的是文字内容，不是标签 */
/* text-align: center; */
text-align: right;
}
</style>
</head>
<body>
<h1>标题文字</h1>
</body>
</html>
图片对齐方式
text-align本质是控制内容的对齐方式，属性要设置给内容的父级
<!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{
text-align: center;
}
</style>
</head>
<body>
<div>
<img src="./images/校徽.jfif" alt="">
</div>
</body>
</html>
文本修饰线
text-decoration (none-无 / underline-下划线 / line through-删除线 / overline-上划线)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文本修饰线</title>
<style>
a{
text-decoration: none;
}
div{
text-decoration: underline;
}
p{
text-decoration: line-through;
}
span{
text-decoration: overline;
}
</style>
</head>
<body>
<a href="#">a 标签，去掉下划线</a>
<div>div 标签，添加下划线</div>
<p>p 标签，添加删除线</p>
<span>span 标签，添加顶划线</span>
</body>
</html>
文字颜色
color
-颜色关键字（学习测试）：
颜色英文单词，说明：red, green, blue
-rgb表示法(了解)：
rgb (r, g, b) 说明：三原色，取值0-255
-rgba表示法(开发使用，实现透明色)：
rgba (r, g, b, a) 说明：a表示透明度，取值0-1
-十六进制表示法(开发使用，从设计稿复制)：
#RRGGBB 说明：#000000，#ffcc00，简写为：#000，#fc0
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文字颜色</title>
<style>
h1{
background-color: aqua;
/* color: red;
color: rgb(0, 255, 0); */
/* color: rgba(0, 0, 0, 0.8); */
color: #0000ff;
}
</style>
</head>
<body>
<h1>h1 标签</h1>
</body>
</html>
调试工具：谷歌浏览器
作用：检查代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>调试工具</title>
<style>
/* 调试工具的细节
1. 如果是错误的属性，有黄色叹号
2. CSS属性的前面有多选框。如果勾选：这个属性生效；如果没有勾选：这个属性不生效 */
div{
color: red;
font-size: 66px;
}
</style>
</head>
<body>
<div>测试文字</div>
</body>
</html>
综合案例1-新闻详情
网页制作思路：1、从上到下，先整体再局部 2、先标签，再CSS美化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>新闻详情</title>
<style>
h1{
text-align: center;
font-weight: 400;
font-size: 30px;
color: #333;
}
div{
font-size: 14px;
color: #999;
}
p{
text-indent: 2em;
font-size: 18px;
color: #333;
}
/* div{
text-align: center;
} */
.pic{
text-align: center;
}
</style>
</head>
<body>
<h1>在希望的田野上|湖北秋收开镰 各地多举措保增产增收</h1>
<div>来源：央视网|2077年01月28日14:58</div>
<p><strong>央视网消息</strong>：2019年，事件视界望远镜团队让世界首次看到了黑洞的样子。不过，研究人员公
布的这张发光环形物体的图像并不是传统的图片，而是经过计算获得的。利用位于美国、墨
西哥、智利、西班牙和南极地区的射电望远镜所得到的数据，研究人员进行了数学转换，最
终合成了这张标志性的图片。研究团队还发布了实现这一壮举所用的编程代码，并撰文记录
这一发现，其他研究者也可以在此基础上进一步加以分析。</p>
<p>这种模式正变得越来越普遍。从天文学到动物学，在现代每一项重大科学发现的背后，
都有计算机的参与。</p>
<div class="pic"><img src="./校徽.jfif" alt=""></div>
<p>如果没有能够解决研究问题的软件，以及知道如何编写并使用软件的研究人员，一台计算
机无论再强大，也是毫无用处的。如今的科学研究从根本上已经与计算机软件联系在一起，
后者已经渗透到研究工作的各个方面。近日，《自然》（Nature）杂志将目光投向了幕后，
着眼于过去几十年来改变科学研究的关键计算机代码，并列出了其中10个关键的计算机项目。
/p>
<p>最初的现代计算机并不容易操作。当时的编程实际上是手工将电线连接成一排排电路来实
现的。后来出现了机器语言和汇编语言，允许用户用代码为计算机编程，但这两种语言都需要
对计算机的架构有深入的了解，使得许多科学家难以掌握。20世纪50年代，随着符号语言的发
展，特别是由约翰·巴克斯及其团队在加州圣何塞的IBM开发的“公式翻译”语言Fortran，这种
情况发生了变化。利用Fortran，用户可以用人类可读的指令来编程，例如x = 3 + 5。然后
由编译器将这些指令转换成快速、高效的机器代码。</p>
</body>
</html>
综合案例2-CSS简介
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 简介</title>
<style>
h1{
color: #333;
}
p{
text-indent: 2em;
font-size: 14px;
color: #444;
line-height: 30px;
}
a{
color: #0069c2;
}
li{
font-size: 14px;
color: #444;
line-height: 30px;
}
</style>
</head>
<body>
<h1>CSS (层叠样式表)</h1>
<p>事件视界望远镜团队让世界首次 <a href="#">样式表</a>看到了黑洞的样子。
不过，研究人员公布的这张发光环形物体的图像并不是传统的图片，而是经过计算
获得的。利用位于美国、墨西哥、智利、西班牙和南极地区的射电望远镜所得到的
数据，研究人员进行了数学转换，最终合成了这张标志性的图片。</p>
<p><strong>这种模式正变得越来越普遍。</strong>从天文学到动物学，在现代
每一项重大科学发现的背后，都有计算机的参与。美国斯坦福大学的计算生物学家
迈克尔·莱维特因“为复杂化学系统创造了多尺度模型”与另两位研究者分享了2013
年诺贝尔化学奖，他指出，今天的笔记本电脑内存和时钟速度是他在1967年开始获
奖工作时实验室制造的计算机的1万倍。“我们今天确实拥有相当可观的计算能力，”
他说，“问题在于，我们仍然需要思考。”</p>
<ul>
<li>如果没有能够解决研究问题的软件。</li>
<li>如果没有能够解决研究问题的软件。</li>
<li>如果没有 <a href="#">详细参考手册</a>问题的软件。</li>
</ul>
</body>
</html>
复合选择器
多个基础选择器组合而成
后代选择器
父选择器 子选择器 {CSS属性}，父子选择器之间空格隔开
```html
```html
```html
<!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 里面的span 文字颜色是红色 */
/* 后代选择器会选中所有后代 */
div span{
color: red;
}
</style>
</head>
<body>
<span>spa 标签</span>
<div>
<span>这是div 的儿子 span</span>
<p>
<span>这是孙子 span </span>
</p>
</div>
</body>
</html>
子代选择器
父选择器和子选择器用**>**隔开
<!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 > span{
color: red;
}
</style>
</head>
<body>
<div>
<span>儿子 span </span>
<p>
<span>孙子 span </span>
</p>
</div>
</body>
</html>
并集选择器
多组标签设置相同的样式，选择器之间用**，**隔开
<!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,
p,
span{
color: red;
}
</style>
</head>
<body>
<div>div 标签</div>
<p>p 标签</p>
<span>span 标签</span>
</body>
</html>
交集选择器
选中同时满足多个条件的元素
选择器1和选择器2连写，且标签选择器放在最前面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>D交集选择器</title>
<style>
/*既又的关系：既是p标签，又有box类*/
p.box{
color: red;
}
</style>
</head>
<body>
<p class="box">p 标签，使用了类选择器 box</p>
<p>p 标签</p>
<div class="box">div 标签，使用了类选择器 box</div>
</body>
</html>
伪类选择器
伪类表示元素状态，选中元素的某个状态设置样式
鼠标悬停状态：选择器**:hover**{CSS属性}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>伪类选择器</title>
<style>
/* 任何标签都可以设置鼠标悬停的状态 */
a:hover{
color: red;
}
/* div:hover */
.box:hover{
color: green;
}
</style>
</head>
<body>
<a href="#">a 标签，超链接</a>
<div class="box">div 标签</div>
</body>
</html>
伪类-超链接：超链接一共有四个状态
:link-访问前、:visited-访问后、:hover-鼠标悬停、:active-点击时(激活)
如果要给超链接设置以上四个状态，必须按照LVHA的顺序书写
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>超链接伪类</title>
<style>
/* a:link{
color: red;
}
a:visited{
color: green;
}
a:hover{
color: blue;
}
a:active{
color: orange;
} */
/* 工作中，一个a标签选择器设置超链接的样式，:hover状态特殊设置 */
a {
color: red;
}
a:hover{
color: green;
}
</style>
</head>
<body>
CSS三大特性
（1）继承性：子级默认继承父级的文字控制属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS特性-继承性</title>
<style>
body{
font-size: 30px;
color: red;
font-weight: 700;
}
</style>
</head>
<body>
<div>div 标签</div>
<p>p 标签</p>
<span>span 标签</span>
<!-- 如果标签自己有样式则生效自己的样式，不继承 -->
<a href="#">a 标签</a>
<h1>h1 标签</h1>
</body>
</html>
（2)层叠性
-相同的属性会覆盖：后面的CSS属性覆盖前面的CSS属性
-不同的属性会叠加：不同的CSS属性都生效
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS特性-层叠性</title>
<style>
div{
color: green;
font-size: 30px;
}
div{
color: red;
font-weight: 700;
}
</style>
</head>
<body>
<div>div 标签</div>
</body>
</html>
（3)选择器的优先级
优先级/权重，判断规则：选择器优先级高的样式生效
公式：通配符选择器<标签选择器<类选择器<id选择器<行内样式<!important (选中的标签范围越大，优先级越低)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS特性-优先级</title>
<style>
/* 选中的标签范围越大，优先级越低 */
div{
color: green;
}
/* !important 提权功能，提高权重/优先级到 最高，慎用 */
*{
color: red !important;
}
.box{
color: blue;
}
#test{
color: orange;
}
</style>
</head>
<body>
<div class="box" id="test" style="color: purple;">div 标签</div>
</body>
</html>
优先级-叠加计算规则：复合选择器，需要权重叠加计算
（行内样式，id选择器个数，类选择器个数，标签选择器个数）
-从左到右依次比较选择器个数，同一级个数多的优先级高，如果个数相同，则向后比较
-!important权重最高
-继承权重最低
Emmet写法-代码简写
CSS中大多简写方式为属性单词的首字母
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Emmet 写法</title>
<style>
div{
width: ;
height: ;
width: 500px;
background-color: #fff;
width: 500px;
height: 200px;
background-color: #fff;
}
</style>
</head>
<body>
<div></div>
<p class="box"></p>
<div class="box"></div>
<p id="box"></p>
<div></div>
<p></p>
<div>
<p></p>
</div>
<span></span><span></span><span></span>
<div>111</div>
</body>
</html>
背景属性
背景图：装饰性的图片效果
background-image（bgi）属性值：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: 400px;
height: 400px;
/* 背景图默认是平铺（复制）的效果 */
background-image: url(./images/1.jpg);
color: aliceblue;
}
</style>
</head>
<body>
<div>div 标签</div>
</body>
</html>
背景图平铺方式
background-repeat(bgr)
no-repeat / 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: 400px;
height: 400px;
background-color: pink;
background-image: url(./images/1.jpg);
/* 不平铺，盒子的左上角显示一张背景图 */
background-repeat: no-repeat;
/* background-repeat: repeat; */
/* background-repeat: repeat-x; */
/* background-repeat: repeat-y; */
}
</style>
</head>
<body>
<div>div 标签</div>
</body>
</html>
背景图位置
background-position (bgp)
left / right / center / top / bottom (数字+px)
-关键字取值方式写法，可以颠倒取值顺序
-可以只写一个关键字，另一个方向默认居中；数字只写一个表示水平方向，垂直方向默认居中。
<!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: 400px;
height: 400px;
background-color: pink;
background-image: url(./images/1.jpg);
background-repeat: no-repeat;
/* background-position: 0 0; */
/* background-position: left top; */
/* 正数向右，负数向左 */
/* background-position: right bottom; */
/* background-position: 50px 0; */
/* 正数向下，负数向上 */
/* background-position: -50px 0; */
/* background-position: 0 -100px; */
/* background-position: 50px center; */
/* background-position: bottom left; */
/* background-position: bottom; */
background-position: 50px;
}
</style>
</head>
<body>
<div>div 标签</div>
</body>
</html>
背景图缩放
background-size (bgz)
-cover / contain
-百分比
-数字+单位
<!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: 500px;
height: 300px;
background-color: pink;
background-image: url(./images/1.jpg);
background-repeat: no-repeat;
/* contain: 如果图的宽高跟盒子尺寸相对停止缩放，可能导致盒子有留白 */
/* background-size: contain; */
/* cover: 缩放背景图的时候完全覆盖盒子，可能导致图片显示不全 */
/* background-size: cover; */
/* 100%表示图片宽度和盒子一样，高度等比缩放 */
background-size: 100%;
}
</style>
</head>
<body>
<div>div 标签</div>
</body>
</html>
背景图固定
background-attachment (bga)-fixed
<!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/1.jpg);
background-repeat: no-repeat;
background-position: center top;
background-attachment: fixed;
}
</style>
</head>
<body>
<p>socpjasp就从怕时间Copa是从的评价哦怕cos【爱吃【哦安排时间从</p>
<p>socpjasp就从怕时间Copa是从的评价哦怕cos【爱吃【哦安排时间从</p>
<p>socpjasp就从怕时间Copa是从的评价哦怕cos【爱吃【哦安排时间从</p>
<p>socpjasp就从怕时间Copa是从的评价哦怕cos【爱吃【哦安排时间从</p>
<p>socpjasp就从怕时间Copa是从的评价哦怕cos【爱吃【哦安排时间从</p>
<p>socpjasp就从怕时间Copa是从的评价哦怕cos【爱吃【哦安排时间从</p>
<p>socpjasp就从怕时间Copa是从的评价哦怕cos【爱吃【哦安排时间从</p>
<p>socpjasp就从怕时间Copa是从的评价哦怕cos【爱吃【哦安排时间从</p>
<p>socpjasp就从怕时间Copa是从的评价哦怕cos【爱吃【哦安排时间从</p>
<p>socpjasp就从怕时间Copa是从的评价哦怕cos【爱吃【哦安排时间从</p>
<p>socpjasp就从怕时间Copa是从的评价哦怕cos【爱吃【哦安排时间从</p>
<p>socpjasp就从怕时间Copa是从的评价哦怕cos【爱吃【哦安排时间从</p>
<p>socpjasp就从怕时间Copa是从的评价哦怕cos【爱吃【哦安排时间从</p>
<p>socpjasp就从怕时间Copa是从的评价哦怕cos【爱吃【哦安排时间从</p>
<p>socpjasp就从怕时间Copa是从的评价哦怕cos【爱吃【哦安排时间从</p>
<p>socpjasp就从怕时间Copa是从的评价哦怕cos【爱吃【哦安排时间从</p>
<p>socpjasp就从怕时间Copa是从的评价哦怕cos【爱吃【哦安排时间从</p>
<p>socpjasp就从怕时间Copa是从的评价哦怕cos【爱吃【哦安排时间从</p>
<p>socpjasp就从怕时间Copa是从的评价哦怕cos【爱吃【哦安排时间从</p>
<p>socpjasp就从怕时间Copa是从的评价哦怕cos【爱吃【哦安排时间从</p>
<p>socpjasp就从怕时间Copa是从的评价哦怕cos【爱吃【哦安排时间从</p>
<p>socpjasp就从怕时间Copa是从的评价哦怕cos【爱吃【哦安排时间从</p>
<p>socpjasp就从怕时间Copa是从的评价哦怕cos【爱吃【哦安排时间从</p>
<p>socpjasp就从怕时间Copa是从的评价哦怕cos【爱吃【哦安排时间从</p>
<p>socpjasp就从怕时间Copa是从的评价哦怕cos【爱吃【哦安排时间从</p>
<p>socpjasp就从怕时间Copa是从的评价哦怕cos【爱吃【哦安排时间从</p>
<p>socpjasp就从怕时间Copa是从的评价哦怕cos【爱吃【哦安排时间从</p>
</body>
</html>
背景复合属性
background (bg)
```html
```html
<!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: 400px;
height: 400px;
/* background: pink url(./images/1.jpg) no-repeat center bottom/cover; */
background: pink url(./images/1.jpg) no-repeat center bottom/contain;
}
</style>
</head>
<body>
<div>div 标签</div>
</body>
显示模式：标签的显示方式
-块级元素 div：
独占一行/宽度默认是父级的100%/添加宽高属性生效
-行内元素：
一行共存多个/尺寸由内容撑开/加宽高不生效，背景色生效
-行内块元素：
一行共存多个/默认尺寸由内容撑开/加宽高生效
<!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: 100px;
height: 100px;
}
.div1{
background-color: brown;
}
.div2{
background-color: orange;
}
span{
width: 200px;
height: 200px;
}
.span1{
background-color: brown;
}
.span2{
background-color: orange;
}
img{
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<!-- 块元素 -->
<div class="div1">div 标签1</div>
<div class="div2">div 标签2</div>
<!-- 行内元素 -->
<span class="span1">span11111</span>
<span class="span2">span2</span>
<!-- 行内块元素 -->
<img src="./images/1.jpg" alt="">
<img src="./images/1.jpg" alt="">
</body>
转换显示模式
display (block/inline-block/inline)
<!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: 100px;
height: 100px;
/* display: inline-block; */
display: inline;
}
.div1{
background-color: brown;
}
.div2{
background-color: orange;
}
span{
width: 200px;
height: 200px;
/* display: block; */
display: inline-block;
}
.span1{
background-color: brown;
}
.span2{
background-color: orange;
}
img{
width: 100px;
height: 100px;
display: block;
}
</style>
</head>
<body>
<!-- 块元素 -->
<div class="div1">div 标签1</div>
<div class="div2">div 标签2</div>
<!-- 行内元素 -->
<span class="span1">span11111</span>
<span class="span2">span2</span>
<!-- 行内块元素 -->
<img src="./images/1.jpg" alt="">
<img src="./images/1.jpg" alt="">
</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>热词</title>
<style>
/* 默认效果 */
a{
display: block;
width: 200px;
height: 80px;
background-color: #3064bb;
color: #fff;
text-decoration: none;
text-align: center;
line-height: 80px;
font-size: 18px;
}
/* 鼠标悬停效果 */
a:hover{
background-color: #608dd9;
}
</style>
</head>
<body>
<a href="#">HTML</a>
<a href="#">CSS</a>
<a href="#">JavaScript</a>
<a href="#">Vue</a>
<a href="#">React</a>
</body>
</html>
综合案例2-banner效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>banner效果</title>
<style>
.banner{
height: 500px;
background-color: #f3f3f4;
background-image: url(./images/bg1.png);
background-repeat: no-repeat;
background-position: left bottom;
/* 文字控制属性，继承给子集 */
text-align: right;
color: #333;
}
.banner h2{
line-height: 100px;
font-weight: 400;
font-size: 36px;
}
.banner p{
font-size: 20px;
}
.banner a{
width: 125px;
height: 40px;
background-color: #f06b1f;
display: inline-block;
/* 转块级无法右对齐，因为块元素独占一行 */
/* display: block; */
text-align: center;
line-height: 40px;
color: #f3f3f4;
text-decoration: none;
font-size: 20px;
}
</style>
</head>
<body>
<div class="banner">
<h2>让创造产生价值</h2>
<p>我们希望小游戏平台可以提供无限的可能性，让每一个创作者都可以将他们的才华和创意传递给用户。</p>
<a href="#">我要报名</a>
</div>
</body>
</html>
