HTML+CSS宝典 CSS基础 更多的样式
一、透明度
透明度有两种设置方式
1、第一种使用 opacity 属性，设置的是整个元素的透明度
就是这个元素盒子里面的内容、边框、背景所有的东西都通过opacity属性进行设置，整个元素内部所有的东西都会透明度，
opactiy不那么的常用，需要把整个区域都变成透明才会用到这个属性
opacity 属性的取值范围 0 ~ 1，
0 表示透明，
1 表示完全不透明
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>透明度 opacity</title>
<style>
div{
position: absolute;
width: 300px;
height: 300px;
top:0;
left:0;
bottom:0;
right: 0;
margin: auto;
background-color: #ff8c8c;
line-height: 36px;
text-align: center;
opacity:.5; /* 透明度 */
}
</style>
</head>
<body>
<img style="width:100%;" src="http://www.ruyic.com/blog/uploads/image/202201/164242168139798.jpg" alt="">
<div>
<h1>There's no such thing as a free lunch.</h1>
</div>
</body>
</html>div元素出现透明效果
There's no such thing as a free lunch.
2、通常使用的是第二种方式，在颜色位置设置alphaton（阿尔法）通道
就是设置颜色的时候可以使用 rgba，a表示的是阿尔法通道，
阿尔法通道的意思是它的取值也是 0 ~ 1，0表示这个颜色完全透明，1表示完全不透明
可以独立的设置某一个地方，比如把文字颜色设置成透明
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>阿尔法通道</title>
<style>
div{
position: absolute;
width: 300px;
height: 300px;
top:0;
left:0;
bottom:0;
right: 0;
margin: auto;
background-color: #ff8c8c;
line-height: 36px;
text-align: center;
color: rgb(255,255,255,.2); /* 文字颜色设置成半透明 */
}
</style>
</head>
<body>
<img style="width:100%;" src="http://www.ruyic.com/blog/uploads/image/202201/164242168139798.jpg" alt="">
<div>
<h1>There's no such thing as a free lunch.</h1>
</div>
</body>
</html>文字呈透明效果，不影响div元素
There's no such thing as a free lunch.
边框也可以设置成透明，先改一下背景设置，
1. 背景默认覆盖是边框盒的，改成背景覆盖内容盒 background-clip: padding-box;
2. 然后修改透明边框 border: 10px solid rgb(0, 0, 0, .2);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>rgba</title>
<style>
div{
position: absolute;
width: 300px;
height: 300px;
top:0;
left:0;
bottom:0;
right: 0;
margin: auto;
background-color: #ff8c8c;
background-clip: padding-box; /* 设置背景覆盖内容盒子 */
line-height: 36px;
text-align: center;
color:#fff;
border:15px solid rgb(0,0,0,.3); /* 设置边框半透明 */
}
</style>
</head>
<body>
<img style="width:100%;" src="http://www.ruyic.com/blog/uploads/image/202201/164242168139798.jpg" alt="">
<div>
<h1>There's no such thing as a free lunch.</h1>
</div>
</body>
</html>边框变透明了
There's no such thing as a free lunch.
可以进行精细的设置某一个部分实现透明效果
1. 背景设置成透明 background-color: rgb(255, 140, 140, .6);
2. 字体不透明
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>rgba</title>
<style>
div{
position: absolute;
width: 300px;
height: 300px;
top:0;
left:0;
bottom:0;
right: 0;
margin: auto;
background-clip: padding-box;
line-height: 36px;
text-align: center;
color:#fff;
border:15px solid rgb(0,0,0,.3);
background-color: rgb(255,140,140,.6); /* 背景设置成半透明 */
}
</style>
</head>
<body>
<img style="width:100%;" src="http://www.ruyic.com/blog/uploads/image/202201/164242168139798.jpg" alt="">
<div>
<h1>There's no such thing as a free lunch.</h1>
</div>
</body>
</html>背景透明
There's no such thing as a free lunch.
二、鼠标
1、使用 cursor 属性设置鼠标样式，属性值很多
cursor属性
poiner 小手
auto 默认，让浏览器来控制，比如遇到文字变成选择光标，在文本框变成输入状态
e-resize 表示重新调整尺寸
help 帮助，鼠标箭头多了一个问号
2、cursor属性还可以设置图片
如果要设置鼠标为一张图片，图片不能用jpg、png...这些格式有的浏览器能支持，有的浏览器支持不了的，一般都会用ico格式作为后缀的图片
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>鼠标</title>
<style>
div{
background:orange;
width:100px;
height:100px;
cursor: url(./target.ico), auto; /* 设置鼠标为一张图片 */
}
</style>
</head>
<body>
<div></div>
</body>
</html>一定要把图片变成.ico，或者是另外一种.cur格式（cur表示鼠标样式格式）
三、盒子显示和隐藏
用CSS来控制盒子的显示和隐藏有两种方式
display: none
表示不生成盒子，这种方式有可能会影响到其他元素的排版，因为一个元素消失了就不生成盒子了，剩下的元素可能就要改变了排列方式，
display属性是能控制盒子类型的，把类型设置为none，就表示没有盒子类型，他就不生成盒子了
visibility: hidden
表示依然生成盒子，生成的盒子是什么类型呢？
display是什么类型就是什么类型，display是block盒子就是块盒，display是inline盒子就是行盒，
这种方式不影响盒子的类型，只是从视觉上移除盒子，盒子仍然占据空间
visibility属性是可见度的意思，
visible 默认值是显示的意思，
hidden 隐藏
js里可以控制这个属性来达到一个闪烁的效果（QQ图标闪烁）
四、背景图
背景图 和 img元素的区别
已经学了img元素了，直接用img元素来表达图片不完了吗，为什么要使用背景图呢？
img是属于html的概念，背景图是属于CSS的概念。
什么时候用img元素，什么时候用背景图？
1. 当图片是网页内容时候，必须使用img元素，因为元素表示的是网页的内容结构，是网页的内容组成部分，必须使用img图片
2. 当图片仅用于网页的美化时，必须使用背景图，美化就是CSS的部分
所以背景图和图片怎么区分，关键取决于它的含义
比如广告很多使用的是图片，虽然广告不是网站的核心内容，但也是内容的一部分，
建议使用img元素，表示页面上有这么一个广告
比如游戏网站的按钮一定是一个图片，按钮使用img元素还是背景图呢？
按钮就应该使用的是一张背景图片，不应该使用img
按钮就是一个button元素，所以从内容的角度来说，这个按钮图片不是必须要有的，
这张图片就是来修饰按钮的，表示这个按钮很好看，给按钮做了一个美化，因此这个时候应该使用背景图。
背景图涉及的css属性
background-image url()
background-repeat
background-size 表示背景图的尺寸
background-position
1、url
background-image url()
注意一点，如果css文件是一个是独立的文件，背景图路径要相对css文件的路径
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>background-image:url()</title>
<style>
div{
width: 700px;
height: 600px;
border 2px solid;
background-image: url('http://www.ruyic.com/blog/uploads/image/202201/164242168139798.jpg');
}
</style>
</head>
<body>
<div></div>
</body>
</html>给整个网站设置背景图，要给body元素设置
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>给整个网页设置背景图</title>
<style>
body{
background-image: url('http://www.ruyic.com/blog/uploads/image/202201/164242168139798.jpg');
}
</style>
</head>
<body>
</body>
</html>2、repeat
background-repeat
背景图默认情况下，背景图会在横坐标和纵坐标中进行重复，而重复是可以控制的，可以设置背景不让他重复
repeat是重复的意思 background-repeat: no-repeat; 表示不重复
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>background-repeat</title>
<style>
body{
background-image: url('http://www.ruyic.com/blog/uploads/image/201904/155591911913470.png');
background-repeat: no-repeat;
}
</style>
</head>
<body>
</body>
</html>background-repeat 是一个速写属性
background-repeat: no-repeat; 相当于写了下面两个
background-repeat-x: no-repeat; 横坐标方向不重复
background-repeat-y: no-repeat; 纵坐标方向不重复
background-repeat: repeat-x; 设置背景图只在x轴横向重复
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>background-repeat:repeat-x</title>
<style>
body{
background-image: url('http://www.ruyic.com/blog/uploads/image/201904/155591911913470.png');
background-repeat:repeat-y;
}
</style>
</head>
<body>
</body>
</html>只在x轴横坐标重复的效果，相当于设置了
background-repeat-x: repeat;
background-repeat-y: no-repeat;
也可设置只在纵向重复
background-repeat: repeat-y;
也可设置默认值repeat，两个方向都重复
background-repeat: repeat;
3、size
background-size 表示背景图的尺寸
背景图比较大，div盒子比较小，所以盒子里面显示不完整，
默认情况下，背景图按照图片的尺寸来显示，不会对图片进行缩放，我们可以通过 background-size 来控制
有两个预设值（类似于object-fit）
1. contain
2. cover
contain
意思是保证图片能完整的显示到div盒子里面，no-repeat 有重复把重复去掉
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>background-size:contain</title>
<style>
div{
width: 700px;
height: 420px;
border: 1px solid;
background-image: url('http://www.ruyic.com/blog/uploads/image/202201/164242168139798.jpg');
background-repeat: no-repeat; /* 去掉重复 */
background-size: contain; /* 保证图片能完整的显示到div盒子里面*/
}
</style>
</head>
<body>
<div></div>
</body>
</html>横向撑满，纵向按照比例缩放
cover
意思背景图一定要把这个区域撑满，然后还要保证图片比例不变，所以图片有些地方就隐藏掉了
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>background-size:cover</title>
<style>
div{
width: 700px;
height: 420px;
border: 1px solid;
background-image: url('http://www.ruyic.com/blog/uploads/image/202201/164242168139798.jpg');
background-repeat: no-repeat;
background-size: cover; /* 背景图一定要把这个区域撑满，然后还要保证图片比例不变，所以图片有些地方就隐藏掉了 */
}
</style>
</head>
<body>
<div></div>
</body>
</html>背景图比例上发生了变化（？？？？）
数值和百分百比
background-size: 300px 200px; 可以自己设置一些数值，宽300像素，高200像素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>数值和百分百比</title>
<style>
div{
width: 700px;
height: 420px;
border: 1px solid;
background-image: url('http://www.ruyic.com/blog/uploads/image/202201/164242168139798.jpg');
background-repeat: no-repeat;
background-size:300px 200px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>background-size: 100%; 意思是横向上一定要撑满，纵向上按照比例缩放
background-size: 100% 100%; 写两个100%，第一个表示横向撑满，第二个表示纵向撑满，于是背景图比例上发生了变化，就没有保持比例了
4、position
background-position 设置背景图的位置
这几个预设值可以分别设置横向和纵向的位置
left
bottom
right
top
center
right bottom 横向靠右，纵向靠下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>设置背景图的位置</title>
<style>
div{
width: 700px;
height: 400px;
border: 1px solid;
background-image: url('http://www.ruyic.com/blog/uploads/image/201904/155591911913470.png');
background-repeat: no-repeat;
background-position:right bottom;
}
</style>
</head>
<body>
<div></div>
</body>
</html>conter 表示横向居中，同时纵向也居中
background-image: url('http://www.ruyic.com/blog/uploads/image/201904/155591911913470.png');
background-repeat: no-repeat;
background-position: center;center top 横向居中，纵向靠上
background-image: url('http://www.ruyic.com/blog/uploads/image/201904/155591911913470.png');
background-repeat: no-repeat;
background-position: center top;center buttom 横向居中，纵向靠下
background-image: url('http://www.ruyic.com/blog/uploads/image/201904/155591911913470.png');
background-repeat: no-repeat;
background-position: center bottom;left center 横向靠左，纵向居中
background-image: url('http://www.ruyic.com/blog/uploads/image/201904/155591911913470.png');
background-repeat: no-repeat;
background-position: left center;也可以写数值和百分比（百分比用的不多）
数值指的是相对位置
background-position: 0px 0px; 两个数分别表示，背景图的左边离盒子左边的距离，背景图的上边离盒子上边的距离
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>设置背景图的位置</title>
<style>
div{
width: 700px;
height: 400px;
border: 1px solid;
background-image: url('http://www.ruyic.com/blog/uploads/image/201904/155591911913470.png');
background-repeat: no-repeat;
background-position: 0px 0px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>background-position: 0px 20px; 第二个数字表示纵向的Y坐标，离上边的距离
background-position: 40px 20px; 第一个数值增加到40像素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>设置背景图的位置</title>
<style>
div{
width: 700px;
height: 400px;
border: 1px solid;
background-image: url('http://www.ruyic.com/blog/uploads/image/201904/155591911913470.png');
background-repeat: no-repeat;
background-position: 40px 20px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>可以写具体的数字，也可以写负数
5、雪碧图
雪碧图也叫精灵图，是单词 spirit 精灵的意思，音译过来叫雪碧图
雪碧图的意思是，网页上有一些小图标，把这些小图标合并成一张图片
为什么要合并呢？
如果单独做成一张一张单独的图片，会导致产生很多很多的图片，
网站渲染的时候就要读很多文件，这样会降低网站的渲染效率，所以会把这些零散的文件，合并成一张大的文件
这样只需要读一张文件就行了，而且图片文件还会被浏览器缓存起来，之后的运行就会非常非常快了
在实际的开发中，会遇到把很多的图标，合并到一张的大图，
我们需要从雪碧图中取出一小块出来，怎么取呢？利用背景图的位置 background-position，取出雪碧图中的一小块
看栗子
1. div元素加上一张雪碧图背景
2. no-repeat 设置不重复
3. 尺寸不变，用原始尺寸
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>雪碧图</title>
<style>
div{
width: 28px;
height: 28px;
border: 1px solid;
background-image: url('http://www.ruyic.com/blog/uploads/image/202201/164263479556296.png');
background-repeat: no-repeat;
background-position: -48px -38px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>6、attachment
background-attachment 通常用于设置背景图是否固定
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>固定背景图</title>
<style>
body{
background-image: url('http://www.ruyic.com/blog/uploads/image/202201/164242168139798.jpg');
background-repeat: no-repeat; /* 设置不重复 */
background-size: 100%; /* 横向100%，纵向自适应 */
background-attachment: fixed; /* 设置背景图是相对于视口的，有点类似于固定定位 */
}
</style>
</head>
<body>
<div style="height: 2000px;"></div>
</body>
</html>7、背景图和背景颜色混用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>背景图和背景颜色混用</title>
<style>
body{
background-image: url('http://www.ruyic.com/blog/uploads/image/201904/155591911913470.png');
background-repeat: repeat-x; /* 只在x轴重复 */
background-color: #ffd200;
}
</style>
</head>
<body>
</body>
</html>8、速写属性（简写）
background: url('./pic.jpg') 不重复 位置/尺寸 固定 背景颜色;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>简写属性</title>
<style>
body{
background: url('http://www.ruyic.com/blog/uploads/image/201904/155591911913470.png') no-repeat 50% 50%/200px 200px fixed #ffd200;
}
</style>
</head>
<body>
</body>
</html>在速写属性里面有两地方有可能写成数字（数值），
1. 一个是尺寸 background-size，
2. 还有一个是位置 background-position，位置也可能是数字和百分比
比如位置居中 background-position: center ，
也可能设置 background-position:50% 50% 也表示居中，这里有点特殊 两个50% 好像是距离左边、上边各有一半的距离，实际上表示居中
意思是说 background-size: 100% 属性有可能取百分比，有可能是具体的像素值
那么在书写的时候，浏览器怎么知道哪个是尺寸？哪个是位置呢？
所以浏览器要求这样写
1. 先写位置
background: url('pic.jpg') no-repeat 50% 50%/100% fixed #ffd200;
2. 写一个斜杠分开，尺寸写在斜杠后面，再写尺寸
background: url('pic.jpg') no-repeat 50% 50%/100% fixed #ffd200;
3. 然后再写固定 fixed
background: url('pic.jpg') no-repeat 50% 50%/100% fixed #ffd200;
4. 写背景颜色
background: url('pic.jpg') no-repeat 50% 50%/100% fixed #ffd200;
位置这里，也不可以不写50% 50%，可以简单的写预设值center，总之顺序要先写位置，再写尺寸才行
background: url('pic.jpg') no-repeat center/100% fixed #ffd200;
也不是每个属性都写，
比如no-repeat 可以不写，不写就按照默认值
background: url('pic.jpg') center/100% fixed #ffd200;
fixed也可以不写，不写fixed背景就依附在body元素上， body元素滚动背景就跟着滚动
background: url('pic.jpg') no-repeat center/100% #ffd200;
firstTime: 20220123