CSS3
1. css3与css2之间的区别
css3 = css2 + 新语法 + 新属性，就是对css2的扩充、删减和优化。
2. 结构伪类
| 选择器 | 功能 |
|---|---|
| E:first-child | 匹配第一个孩子 |
| E:last-child | 匹配最后一个孩子 |
| E:nth-child(n) | 匹配第n个孩子 |
| E:nth-child(2n) | 匹配偶数的孩子，如2、4、6… |
| E:nth-child(even) | 匹配偶数的孩子，如2、4、6… |
| E:nth-child(2n+1) | 匹配奇数的孩子，如1、3、5… |
| E:nth-child(odd) | 匹配奇数的孩子，如1、3、5… |
| E:only-child | 匹配有且只有一个孩子 |
举例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>结构伪类</title>
<style type="text/css">
/*使用css3中的结构伪类选择器来匹配元素*/
/*匹配第一个孩子的语法格式：E:first-child{属性:值;}*/
.box ul li:first-child{
color: #f00;
width: 100px;
height: 30px;
line-height: 30px;
border: 1px solid #000;
}
/*匹配最后一个孩子的语法格式： E:last-child{属性:值;}*/
.box ul li:last-child{
color: #0f0;
width: 100px;
height: 30px;
line-height: 30px;
border: 2px dashed grey;
}
/*匹配第n个孩子的语法格式： E:last-child(n){属性:值;}*/
.box ul li:nth-child(2){
color: pink;
width: 100px;
height: 30px;
line-height: 30px;
border: 2px dotted rgb(160, 207, 31);
}
/*匹配偶数孩子的语法格式： E:last-child(even){属性:值;}
或者E:last-child(2n){属性:值;}*/
.box ul li:nth-child(2n){
color: rgb(33, 35, 199);
background-color: pink;
width: 100px;
}
/*匹配偶数孩子的语法格式： E:last-child(odd){属性:值;}
或者E:last-child(2n+1){属性:值;}*/
.box ul li:nth-child(odd){
color: gold;
background-color: skyblue;
width: 100px;
}
/*匹配有且只有一个孩子*/
div ul li:only-child{
color: rgb(255, 153, 0);
}
</style>
</head>
<body>
<div class="box">
<ul>
<li>黑马程序员1</li>
<li>黑马程序员2</li>
<li>黑马程序员3</li>
<li>黑马程序员4</li>
<li>黑马程序员5</li>
<li>黑马程序员6</li>
<li>黑马程序员7</li>
<li>黑马程序员8</li>
<li>黑马程序员9</li>
<li>黑马程序员10</li>
</ul>
</div>
<div>
<ul>
<li>只有一个</li>
</ul>
</div>
</body>
</html>
案例：使用CSS3中的结构伪类选择器实现隔行变色的表格。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>使用CSS3实现隔行变色的表格</title>
<style type="text/css">
table tr:nth-child(even){
background-color: #f00;
}
table tr:nth-child(odd){
background-color: #00f;
}
table tr:hover{
background-color: #ccc;
}
</style>
</head>
<body>
<table width="500px" border="1px" align="center">
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
3. border-collapse
- 这个属性主要是用来合并表格的边框线，其值为：collapse
- border-collapse:collapse;
- 如下例子当中表格的边框线就会变得很细
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>合并表格的边框线</title>
<style type="text/css">
table{
border-collapse: collapse;
border-color: #f00;
}
</style>
</head>
<body>
<table width="600" border="1">
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
4. 伪元素
| 选择器 | 功能 |
|---|---|
| :first-letter | 操作当前元素中的第一个字 |
| :first-line | 操作当前元素中的第一行 |
| ::before | 在之前插入，在一个盒子内部的最前面 |
| ::after | 在之后插入，在一个盒子内部的最后面 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>伪元素</title>
<style type="text/css">
.box{
width: 40%;
margin: 100px auto;
font-size: 14px;
border: 1px solid #444;
color: #333;
}
.box::before{
/*要在当前元素的最前面插入文字，必须将文字放在content中*/
content:"黑马程序员";
}
.box:first-letter{
/*操作当前元素中的第一个字*/
color: rgb(143, 36, 36);
font-size: 40px;
padding: 20px;
}
.box:first-line{
color: rgb(179, 19, 171);
}
.box::after{
content:"hello";
}
</style>
</head>
<body>
<div class="box">
故事是从一个叫做张小凡的普通少年开始的。故事是从一个叫做张小凡的普通少年开始的。
故事是从一个叫做张小凡的普通少年开始的。故事是从一个叫做张小凡的普通少年开始的。
故事是从一个叫做张小凡的普通少年开始的。故事是从一个叫做张小凡的普通少年开始的。
</div>
</body>
</html>
5. 文本阴影
- text-shadow: 水平阴影 垂直阴影 模糊距离 阴影颜色
- 注释：text-shadow属性向文本添加一个或多个阴影。该属性是逗号分隔的阴影列表，每个阴影有两个或三个长度值和一个可选颜色值进行规定。省略长度是0.
| 值 | 描述 |
|---|---|
| h-shadow | 必需，水平阴影的位置，允许负值 |
| v-shadow | 必需，垂直阴影的位置，允许负值 |
| blur | 可选，模糊的距离 |
| color | 可选，阴影的颜色 |
- 补充：
- 文字阴影可以有多组值，多组之间用逗号隔开就可以
- 水平阴影正值阴影在右边，负值在左边
- 水平阴影正值阴影在下边，负值在上边
- 模糊强度，值越大越模糊
设置两组阴影：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>文本阴影</title> <style type="text/css"> .box{ font-size: 40px; font-family: "楷体"; color: rgb(187, 57, 57); /*给文本设置阴影 text-shadow: 水平阴影 垂直阴影 模糊距离 阴影颜色 */ text-shadow: 3px 3px 3px rgb(111, 193, 231); } </style> </head> <body> <div class="box"> 黑马程序员 </div> </body> </html><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>文本阴影</title> <style type="text/css"> .box{ font-size: 40px; font-family: "楷体"; color: rgb(187, 57, 57); /*给文本设置阴影 text-shadow: 水平阴影 垂直阴影 模糊距离 阴影颜色 */ text-shadow: 3px 3px 3px rgb(111, 193, 231); } .b2{ font-size: 50px; font-family: "隶书"; color: rgb(211, 132, 28); text-shadow: 4px 2px 2px rgb(41, 212, 18),-4px -4px 3px rgb(241, 62, 131); } </style> </head> <body> <div class="box"> 黑马程序员 </div> <div class="b2">传智播客</div> </body> </html>
6. 盒子阴影
- box-shadow:水平方向阴影 垂直方向阴影 模糊距离 阴影尺寸 阴影颜色 内/外阴影
- 注意：水平阴影和垂直阴影是必须写的，其他的可以省略不写
- 语法： box-shadow:h-shadow vishadow blur spread color inset/outset(默认值);
- 注释：box-shadow向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表，每个阴影由2-4个长度值、可选颜色值以及可选的inset关键词来规定。省略长度的值是0.
- 盒子阴影可以有多组值，多组之间用逗号隔开就可以
- 水平阴影正值阴影在右边，负值在左边
- 垂直阴影正值在下边，负值在上边
- 模糊尺寸，值越大越模糊
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>盒子阴影</title> <style type="text/css"> .box{ width: 100px; height: 100px; border: 1px solid #000; /*给这盒子设置阴影*/ box-shadow: 3px 3px 3px 3px #f00,-4px -4px 2px 2px #0f0 inset; } </style> </head> <body> <div class="box"></div> </body> </html> - 给图片设置阴影
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>给图片设置阴影</title> <style type="text/css"> img{ box-shadow: 4px 4px 4px 2px #FFA07A; } </style> </head> <body> <img src="./img/liyifeng.jpeg" alt=""> </body> </html>
7. 圆角矩形
border-radius:左上 右上 右下 左下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>圆角矩形</title>
<style type="text/css">
div{
width: 100px;
height: 100px;
border: 1px solid #f00;
}
/*使用结构伪类选择器来匹配元素*/
div:nth-child(1){
/*border-radius:左上 右上 右下 左下;*/
border-radius: 10px 20px 30px 40px;
margin-bottom: 20px;
}
div:nth-child(2){
border-radius: 20px;
margin-bottom: 20px;
}
div:nth-child(3){
/*实现圆形
第一步：当前元素的高度与宽度要相同，也就是这个元素是一个正方形
第二步：border-radius属性值为宽高的一半
*/
border-radius: 50px;
background-color: #ccc;
}
div:nth-child(4){
/*实现椭圆*/
width: 100px;
height: 40px;
border-radius: 20px; /*该值为高度的一半*/
background-color: #ccc;
}
div:nth-child(5){
/*实心的上半圆：：高度要等于宽度的一半*/
width: 100px;
height: 50px;
border-radius: 50px 50px 0px 0px;/*左上与右上值等于高度*/
background-color: #9da;
}
div:nth-child(6){
/*实心的左半圆：：宽度要等于高度的一半*/
width: 50px;
height: 100px;
border-radius: 50px 0px 0px 50px;/*左上与左下值等于高度*/
background-color: rgb(54, 165, 165);
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
8.圆角矩形案例
实现淘宝网上的椭圆形的“更多”超链接按钮。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>圆角矩形案例</title>
<style type="text/css">
body{
background-color: #ccc;
}
.more{
width: 60px;
height: 30px;
background-color: white;
text-align: center;
line-height: 30px;
margin: 100px auto;
/*圆角矩形中的椭圆*/
border-radius: 10px;
font-size: 13px;
font-family: '微软雅黑';
}
/*先把a标签转换成块元素再进行超级链接的修饰*/
a{
display: block;
width: 60px;
height: 30px;
border-radius: 10px;
}
a:link,a:visited{
color: #000;
text-decoration: none;
}
div a:hover{
background-color: #f78923;
color: #fff;
}
</style>
</head>
<body>
<div class="more"><a href="#">更多</a></div>
</body>
</html>
圆角图片的实现：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>圆形图片</title>
<style type="text/css">
img{
width: 300px;
height: 200px;
border-radius: 100px;
}
</style>
</head>
<body>
<img src="./img/th.jpg" alt="">
</body>
</html>
9.透明度
- 只要有颜色，都可以实现透明度。
- rgba(红,绿,蓝,透明度)
- a：表示透明度，取值范围是0-1，0表示完全透明，1表示不透明
- 背景颜色透明度：background-color:rgba(255,255,255,0.3);
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>背景颜色透明度</title> <style type="text/css"> *{ margin: 0; padding: 0; } .box{ width: 100px; height: 100px; background-color: rgba(255,0,0,0.3); position: fixed; } </style> </head> <body> <div class="box"></div> <p>Git 更像是把数据看作是对小型文件系统的一组快照。 每次你提交更新，或在 Git 中保存项目状态时，它主要对当时的全部文件制作一个快照并保存这个快照的索引。 为了高效，如果文件没有修改，Git不再重新存储该文件，而是只保留一个链接指向之前存储的文件。 Git 对待数据更像是一个快照流。 </p> </body> </html> - 文本颜色透明度:color:rgba(255,0,0,0.3);
- 边框颜色透明度：border:1px solid rgba(255,255,255,0.5);
扫一扫
1475
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
