CSS入门
目录
CSS简介
CSS 指层叠样式表 (Cascading Style Sheets)，主要用来给HTML网页设置外观或者样式。
语法规则
h1 {color:red; fontsize:14px;}
选择器 {声明; 声明}
/*声明对比html*/
属性="值" /*html*/
属性:值 /*CSS*/
CSS中属性值一般不加引号
CSS中属性为数值型时，一般情况下需要加单位，单位一般都是px（像素），而在HTML中可以不加单位
快速入门
p {
color: #FF0000;
font-size: 100px;
}
快速生成：如 p.top + tab p#top + tab
书写方式
嵌入式
<head>
<style type="text/css"> //如果是HTML5文档 type可以省略不写
p {
color: #FF0000;
font-size: 100px;
}
</style>
</head>
外链式
单独使用以.css为扩展名的文件，然后在<head></head>标签中使用<link />
<head>
<link rel="stylesheet" href="CSS文件的地址"/>
</head>
确认文件引入成功 --> 检查元素 --> Network --> 刷新网页 --> 查看外链文件Status
行内式
<body>
<标签名 style="属性:值; 属性:值;"></标签名>
</body>
总结
- 使用嵌入式的方式来书写CSS代码，它只能作用于当前的HTML文件
- 使用外链式的方式来书写CSS代码，它可以作用于多个HTML文件
注释
/*注释内容*/
选择器
基本选择器
| 选择器 | 格式 |
|---|---|
| 通用选择器 | * |
| 标签选择器 | 标签名 |
| 类选择器 | .class属性值 |
| Id选择器 | #id属性值 |
.box{
width: 100px;
height: 100px;
background-color: #f00;
}
p.box {
color: #000;
}
.h{
/*行高主要设置文本垂直方向居中对齐*/
height：40px;
line-height: 40px;
border:1px solid #f00; /*实线边框*/
}
<!-- span标签是一个行内元素，它是不可以设置宽度和高度的。只有块级元素才可以。-->
<p>
这是一个<span>行内元素</span>可以单独定义。
</p>
文本属性
color, text-align, text-decoration, text-transform, Line-height, text-indent, letter-spacing, word-spacing
- text-indent 首行缩进 单位：px/em 1em就表示一个汉字
- text-align 只能控制文字位置
字体属性
font-style, font-weight, font-size, font-family, font
- font-family: "微软雅黑","黑体","宋体"; //会根据顺序直到找到对应字体，没有就会显示宋体
- font:italic bold 14px "微软雅黑";
- font-weight: normal; //可以用在标题上去除加粗
复合选择器
| 选择器 | 含义 | 举例 |
|---|---|---|
| 选择器1,选择器2{属性:值;} 多元素选择器 | 匹配多个元素，逗号分隔 | p,h1,h2 |
| E F{属性:值;} 后代元素选择器 | 匹配属于E元素后代的F元素，空格分隔 | #slidebar p |
| E > F{属性:值;} 子元素选择器 | 匹配所有E元素的子元素F | div > p |
| E + F{属性:值;} 相邻元素选择器 | 匹配所有E元素之后的同级相邻元素F | div + div |
列表样式属性
| 属性 | 值 | 含义 |
|---|---|---|
| list-style-type | none,disc(实心圆),square(实心小方块),circle(空心圆) | 设置列表前项目符号 |
| list-style-position | inside,outside | 设置列表项标记的放置位置 |
| list-style-image | url | 将图像设置为列表项标记 |
| list-style | square inside url | 在一个声明中设置所有列表属性 |
ctrl+鼠标左键可以在sublime上添加输入光标，同时输入
常用格式
/*设置div居中*/
margin-left: auto;
margin-right: auto;
/*设置h2文本垂直居中*/
height: 40px;
line-height: 40px;
伪类选择器
给超级链接的不同状态来设置样式
| 选择器 | 含义 |
|---|---|
| :link | 向未被访问的链接添加样式 |
| :visited | 向已被访问的链接添加样式 |
| :hover | 当鼠标悬浮在元素上方时，向元素添加样式 |
| :active | 鼠标放在元素上面时，点击的一瞬间，左键按下左键没弹出 |
a:link{
color: #f00;
}
a:visited{
color: #000;
}
a:hover{
color: gold;
}
a:active{s
color: #0f0;
}
超级链接的不同状态它起使是有顺序的。也就是说伪类选择器设置其实是有顺序。
如果不按照伪类选择器的顺序，那么样式就会失效。
顺序："Love Hate" link visited hover active
超级链接的美化
通常会去掉超级链接的下划线，然后同时会给超级链接设置一个颜色。
一般情况下：
- 正常状态与访问过后的状态设置为一样
- 当鼠标方式的时候给其设置另外一个颜色 激活状态一般不会设置 因为激活状态的时间太短
举例：
a:link,a:visited{
color: #444;
text-decoration: none;
}
a:hover{
color: #f00;
text-decoration: underline;
}
属性选择器
- 属性选择器它是与标签的属性名和属性值有关。
- 属性选择器是通过标签的属性名和属性值来匹配元素。
| 选择器 | 含义 | 举例 |
|---|---|---|
| [attr] | 匹配所有具有attr属性的元素，不考虑他的值 | h1[align]{……} input[type][size] |
| [attr = "val"] | 匹配所有attr属性值等于val的元素 | h1[align="center"]{……} 属性值一般加引号 |
| [attr^ = "val"] | 匹配元素中attr属性以指定值开头的所有元素 | Font[color^="#ff"] |
| [attr$ = "val"] | 匹配元素中attr属性以指定值结尾的所有元素 | Font[color$="00"] |
| [attr* = "val"] | 匹配元素中attr属性中包含指定值的所有元素 | Font[color*="00"] |
继承性
<!-- 快捷键div>h2+p Tab -->
<div>
<h2></h2>
<p></p>
</div>
特点：
- 外层元素身上的样式会被内层元素所继承
- 如果内层元素与外层元素身上的样式相同时，外层元素的样式会被内层元素所覆盖。
并不是所有的样式都能够被继承，只有文本与字体样式属性能够被继承。
优先级
行内样式 > id选择器 > 类选择器 > 标签选择器
标签选择器 1
类选择器 10
id选择器 100
行内样式 1000
不管是单个还是多个选择器组合，他们之间的优先级都可以通过上面的公式进行计算。我们将其值称之为权重值。权重值越大就表示其优先级越高。
!important属性
主要是用来提升属性的权重。其属性的权重值无穷大
语法格式
属性:值 !important;
p{
color: #f00 !important;
}
.p1{
color: #0f0;
}
#p2{
color: #00f;
}
注意：
- !important是提升属性权重，而不是提升选择器的权重
- !important它不能提升继承过来的权重
div{
color: #f00 !important; /*不能提升继承过来的权重！*/
}
p{
color: #00f;
}
<body>
<div>
<p>显示文本</p>
</div>
</body>
一个标签内可以携带多个类名
类名：指的是class的属性值
一个标签内可以携带多个类名，指的是class的属性值可以有多个，每一个属性值之间使用空格分隔。
举例：
<标签名 class=“值1 值2 值3”></标签名>
多个类名的优点：
- 减少CSS的代码量
- 多个类名的样式会叠加到当前元素上面
<!-- 快捷键div.div${创建的内容$}*3 +tab -->
<div class="div1">创建的内容1</div>
<div class="div2">创建的内容2</div>
<div class="div3">创建的内容3</div>
<div class="div1">创建的内容1</div>
<div class="div2">创建的内容2</div>
<div class="div1 div2">创建的内容3</div>
- 多个类名可以同时具备div1和div2设置的CSS内容
- 如果说一个标签内的多个类名上面设置的样式一样的话就会出现样式冲突，那么是以CSS中的代码作为标准，谁写在后面就以谁作用标准和HTML中的class的属性值的顺序没有关系
背景样式属性
| 属性 | 值 | 含义 |
|---|---|---|
| background-color | #ff0000、red、rgb(255,0,0) | 背景颜色 |
| background-image | url(图像路径和名称) | 背景图像 |
| background-repeat | repeat、repeat-x、repeat-y、no-repeat | 背景图像是否重复 |
| background-position | center center或x% y%或xpos ypos | 背景图像起始位置 |
| background-attachment | scroll(滚动)、fixed(固定) | 设置背景图像是否固定或者随着页面的其余部分滚动 |
| background | url(1.jpg) no-repeat center center | 设置背景的简写形式 |
- background-color：用于给元素设置背景颜色 但是前提这个元素要么有内容，要么有宽度和高度才可以
- background-image：默认背景图片是平铺的
- background-repeat：设置平铺样式
- background-position：水平位置 垂直位置 这两个位置表示方法有三种 英文单词 固定值 百分比 这三种方式可以混合使用
- 英文单词的表示方式
- 水平位置：left、center、right
- 垂直位置：top、center、bottom
- 英文单词的表示方式
背景样式属性综合案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>背景样式属性综合案例</title>
<!-- <link rel="stylesheet" type="text/css" href="../css/test.css"> -->
<style type="text/css">
/*body{
filter:grayscale(1);
}*/
body{
font-size: 12px;
color: #f60;
}
.box{
width: 450px;
border: 1px solid #00f;
margin-left: auto;
margin-right: auto;
}
.box h2{
height: 35px;
line-height: 35px;
color: gold;
}
.box ul li{
list-style: none;
height: 30px;
line-height: 30px;
border: 1px solid #ccc;
background-image: url(./icon/1.png);
background-repeat: no-repeat;
background-position: left center;
background-size: 25px;
padding-left: 25px;
}
/*对超级链接进行美化*/
a:link,a:visited{
color: #444;
text-decoration: none;
}
a:hover{
color: #f00;
}
</style>
</head>
<body>
<div class="box">
<h2>新闻列表</h2>
<ul>
<li><a href="">从拿地规划条件看，包括将建商业综合体、超高层</a></li>
<li><a href="">从拿地规划条件看，包括将建商业综合体、超高层</a></li>
<li><a href="">从拿地规划条件看，包括将建商业综合体、超高层</a></li>
<li><a href="">从拿地规划条件看，包括将建商业综合体、超高层</a></li>
<li><a href="">从拿地规划条件看，包括将建商业综合体、超高层</a></li>
</ul>
</div>
</body>
</html>
标准文档流
网页上的内容从左至右、从上到下的规则
需要注意的事项
1.空白折叠现象
<!-- 有空白现象 -->
<body>
文
本
<img src="" alt="">
<img src="" alt="">
</body>
如何实现文字与图片之间没有空白现在：我们需要将这些元素放在同一行，让他们紧密相连。
<!-- 无空白现象 -->
<body>
文本<img src="" alt=""><img src="" alt="">
</body>
2.高矮不齐，底部对齐
<head>
<style type="text/css">
span{
font-size: 36px;
}
</style>
</head>
<body>
人人人人人人<span>姚明</span>人人人人人<img src="" alt="">
</body>
浮动
标准文档流里的元素只有两种：块级元素和行内元素。
如果想让一些元素既要有块级元素的特点也要有行内元素的特点，只能让这些元素脱离标准文档流。
浮动元素特点
- 脱离标准文档流，不再占用空间
- 我们可以把浮动元素理解为“漂”
- 浮动元素的层级要比标准文档流里面的元素层级要高，它会将标准文档流中的元素给压盖住
- 浮动元素它会向左或者向右进行浮动
- 浮动元素遇到父元素边框就停止了浮动
- 浮动元素遇到上一个浮动元素后就停止了浮动
- 浮动元素浮动以后 其父元素不会再包裹着浮动元素
- 我们将行内元素进行浮动以后 那么这个行内元素他会变成块级元素
float:right; /*向右浮动*/
行内元素变成块级元素
.s1{
width: 100px;
height: 100px;
background-color: #f00;
float: left;
}
<span class="s1">文本<span>
浮动案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>浮动案例之网站导航栏</title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
.nav {
width: 960px;
height: 40px;
margin-left: auto;
margin-right: auto;
}
.nav ul {
list-style-type: none;
}
.nav ul li {
float: left;
width: 120px;
height: 40px;
line-height: 40px;
text-align: center;
background-color: darkorange;
}
a:link,
a:visited {
color: #fff;
text-decoration: none;
}
a:hover {
color: #f00;
text-decoration: underline;
}
</style>
</head>
<body>
<input type="button" value="按钮" onclick="alert(123)">
<div class="nav">
<ul>
<li><a href="#">网站栏目</a></li>
<li><a href="#">网站栏目</a></li>
<li><a href="#">网站栏目</a></li>
<li><a href="#">网站栏目</a></li>
<li><a href="#">网站栏目</a></li>
<li><a href="#">网站栏目</a></li>
<li><a href="#">网站栏目</a></li>
<li><a href="#">网站栏目</a></li>
</ul>
</div>
<script src="../js/1.js"></script>
</body>
</html>
清除浮动
只要有浮动 那么必须有清除浮动
为什么要清除浮动？
因为经过浮动元素 它会影响到它下面的元素的排版布局 还有浮动元素的父元素没有将浮动元素包裹着
只要清除了浮动 不会影响到浮动元素的下面进行排版布局 浮动元素的父元素会将浮动元素从视觉上包裹着
清除浮动有以下三种方法：
- 给浮动元素的父元素设置一个固定的高度（但是这个方法不建议使用 因为一个元素的高度一般情况下不是手动设置的 它应该是由其自身的内容来撑高的！）
- 使用清除浮动的样式属性 clear（有三个值left,right,both 这个属性一般是用在最后一个浮动元素的下面 在最后一个浮动元素的下面新建一个空白的div 这个div什么都要放 不要给这个div里面放置内容 它只做一件事就是清除浮动）
- 使用 overflow:hidden 这个属性来清除浮动（它原意是用来将溢出的部分进行隐藏 但是它还可以用于清除浮动）
第二个方法示例
<!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 type="text/css">
*{
margin: 0px;
padding: 0px;
}
.box{
width: 600px;
border: 1px solid #000;
margin-left: auto;
margin-right: auto;
}
.clear{
clear: both;
}
.div1{
width: 100px;
height: 100px;
background-color: #f00;
float:left;
}
.div2{
width: 100px;
height: 100px;
background-color: #0f0;
float:left;
}
.div3{
width: 100px;
height: 100px;
background-color: #00f;
float:right;
}
</style>
</head>
<body>
<div class="box">
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="clear"></div>
</div>
<h2>浮动与清除浮动</h2>
</body>
</html>
第三个方法示例
<!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 type="text/css">
*{
margin: 0px;
padding: 0px;
}
ul{
list-style-type: none;
overflow: hidden;
}
ul li{
float: left;
border: 1px solid #000;
}
</style>
</head>
<body>
<ul>
<li>栏目管理</li>
<li>栏目管理</li>
<li>栏目管理</li>
</ul>
</body>
</html>
盒子模型
主要属性：width、height、padding、border、margin
盒子高度一般不用设定，而是由内容决定
padding
简写属性：
-
padding:20px; (上右下左)
-
padding:10px 20px; (上下 左右)
-
padding:10px 20px 30px; (上 左右 下)
-
padding:10px 20px 30px 40px; (上 右 下 左)
margin
简写属性：
-
margin:20px; (上右下左)
-
margin:10px 20px; (上下 左右)
-
margin:10px 20px 30px; (上 左右 下)
-
margin:10px 20px 30px 40px; (上 右 下 左)
margin坍塌现象
什么是margin坍塌现象
- 在标准的文档流中 竖直方向的margin值不会叠加 它会取较大的值
- 横着方向是没有margin的坍塌现象
- 浮动元素它是没有margin的坍塌现象的
浮动元素如果宽度加起来超过父元素，超过部分会垂直排列
margin居中
margin-left: auto;
margin-right: auto;
因为行内元素无法设置宽度，也就是说行内元素实现不了水平居中，若要实现需外面包裹块级元素
浮动元素也不能设置margin来居中，只有标准文档流中的盒子才可以通过margin来居中
- margin 属性是用来实现盒子的水平居中 而不是文本的水平居中
- text-align 这个属性它是用于实现文本的对齐方式 如果其值为center就表示文本水平居中
善于使用父元素的padding而不使用子元素的margin
子块元素直接设置margin-top父元素会和子元素同样效果，没有空出距离
第一种方法：给父元素设置一个边框线
第二种方法：不使用子元素的margin而是使用父元素的padding
说明：margin这个属性它本意是用于来描述兄弟与兄弟元素之间的关系，不是用于描述父子元素之间的关系的。如果是父子元素的关系，最好给其父元素设置padding属性
<!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 type="text/css">
*{
margin: 0px;
padding: 0px;
}
.box1{
width: 300px;
height: 500px;
background-color: #f00;
padding-top: 100px;
}
.box2{
width: 100px;
height: 100px;
background-color: #0f0;
/* margin-top: 100px; */
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
border属性
粗细 线型 颜色
div{
border: 1px solid #000;
}
display属性
display 它是“显示”的意思，它就是用来进行行内元素与块级元素之间的相互转换！将隐藏的元素显示或者是将显示的元素进行隐藏。
display 这个属性取值：inline（行内）、block（块级）、none（无）
这两个功能主要是 JavaScript 来使用：
-
display: none(将一个显示的元素进行隐藏)
-
display: 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 type="text/css">
* {
margin: 0px;
padding: 0px;
}
.nav {
width: 960px;
height: 40px;
margin: 100px auto;
}
.nav ul {
list-style-type: none;
}
.nav ul li {
float: left;
width: 120px;
height: 40px;
line-height: 40px;
text-align: center;
}
.nav ul li a{
width: 120px;
height: 40px;
/* a标签转换为块元素 */
display: block;
}
a:link,
a:visited {
color: #444;
text-decoration: none;
}
a:hover {
/* color: #f00; */
text-decoration: underline;
background-image: url(./images/1.png);
}
</style>
</head>
<body>
<div class="nav">
<ul>
<li><a href="#">网站栏目1</a></li>
<li><a href="#">网站栏目2</a></li>
<li><a href="#">网站栏目3</a></li>
<li><a href="#">网站栏目4</a></li>
<li><a href="#">网站栏目5</a></li>
<li><a href="#">网站栏目6</a></li>
<li><a href="#">网站栏目7</a></li>
<li><a href="#">网站栏目8</a></li>
</ul>
</div>
</body>
</html>
position
position 在英文中表示“位置”的意思 它主要是用于实现对元素的定位
在CSS中定位分为三种：
- position:fixed 固定定位
- position:relative 相对定位
- position:absolute 绝对定位
注意：
在使用定位属性时，一定要配合定位的坐标来使用！
left：表示定位的元素离左边多远
right：表示定位的元素离右边多远
top：表示定位的元素离上边多远
bottom：表示定位的元素离下边多远
固定定位
position:fixed
固定定位，它是相对于浏览器窗口来进行定位。不管页面如何滚动，固定定位元素显示的位置不会改变！
特点：
- 固定定位元素它脱离了标准文档流
- 固定定位元素的层级比标准文档流里面的元素要高 所以固定定位元素它会压盖住标准文档流里面的元素
- 固定定位元素它不再占用空间
- 固定定位元素它显示的位置不会随着浏览器滚动而滚动
案例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 type="text/css">
* {
margin: 0px;
padding: 0px;
}
a{
width: 60px;
height: 60px;
/*将行内元素转换为块级元素*/
display: block;
background-color: #ccc;
text-align: center;
line-height: 30px;
text-decoration: none;
color: white;
font-weight: bold;
/*使用固定定位*/
position: fixed;
right: 30px;
bottom: 100px;
}
a:link,
a:visited {
color: #444;
text-decoration: none;
}
a:hover {
/* color: #f00; */
text-decoration: underline;
background-image: url(./images/1.png);
}
</style>
</head>
<body>
<a href="#">返回<br/>顶部</a>
</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>Document</title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
body{
padding-top: 60px;
}
.nav{
width: 100%;
height: 60px;
background-color: #222222;
position: fixed;
left: 0px;
top: 0px;
}
.nav .inner_c{
width: 1000px;
height: 60px;
margin: 0px auto;
/* background: #f00; */
}
ul{
list-style: none;
}
ul li{
float: left;
width: 100px;
height: 60px;
line-height: 60px;
text-align: center;
}
ul li a{
display: block;
width: 100px;
height: 60px;
color: white;
font-weight: bold;
}
a:link,
a:visited {
/* color: #444; */
text-decoration: none;
}
a:hover {
/* color: #f00; */
text-decoration: underline;
background-color: gold;
/* background-image: url(./images/1.png); */
}
</style>
</head>
<body>
<div class="nav">
<div class="inner_c">
<ul>
<li><a href="">网站栏目</a></li>
<li><a href="">网站栏目</a></li>
<li><a href="">网站栏目</a></li>
<li><a href="">网站栏目</a></li>
<li><a href="">网站栏目</a></li>
<li><a href="">网站栏目</a></li>
<li><a href="">网站栏目</a></li>
<li><a href="">网站栏目</a></li>
<li><a href="">网站栏目</a></li>
<li><a href="">网站栏目</a></li>
</ul>
</div>
</div>
</body>
</html>
相对定位
position:relative;
特点：
- 相对定位元素它没有脱离标准文档流
- 相对定位元素如果没有设置定位的坐标，那么相对定位元素它还在原来的位置
- 相对定位元素设置了定位的坐标以后，那么它会在老家留下一个坑
- 相对定位元素它会将标准文档流中的元素压盖住
- 相对定位元素的定位坐标值可以是负数
注意：
相对定位元素它会在老家留下一个坑，所以一般情况下它很少单独使用，相对定位元素它主要是用来配合“绝对定位”元素来使用的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>相对定位案例</title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
input[type="text"]{
font-size: 36px;
}
input[type="button"]{
position: relative;
top: 5px;
}
</style>
</head>
<body>
<input type="text"><input type="button" value="检测用户名">
</body>
</html>
第二个input如果换行，页面上会显示一个空格
绝对定位
position:absolute
绝对定位元素是相对于“祖先定位元素”来进行定位
祖先定位元素：绝对定位会先查找父级元素是否有定位属性，如果有就会相当于父元素来进行定位，如果没有就会查找父元素的上一级，上一级没有设置还会继续往上一级查找，如果其祖先元素都没有设置定位属性，那么它就会相对于“浏览器窗口”来进行定位！
body元素就是指的浏览器窗口
特点：
- 绝对定位元素它脱离了标准文档流
- 绝对定位元素它不再占用空间
- 绝对定位元素它会压盖住标准文档流中的元素
- 一般只会给祖先元素设置相对定位属性，“子绝父相”
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>绝对定位案例</title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
.box{
width: 240px;
height: 320px;
margin: 100px auto;
border: 1px solid #000;
position: relative;
}
.box span{
position: absolute;
left: 20px;
top: -20px;
}
</style>
</head>
<body>
<div class="box">
<span><img src="./icon/1.png"></span>
<div><img src="./icon/cat.jpg"></div>
</div>
</body>
</html>
z-index属性
- z-index表示谁压盖着谁，数值大的会压盖住数值小的
- 只有定位的元素才有z-index值 只有设置了固定定位、相对定位、绝对定位了的元素它们才会拥有z-index
- z-index的值是没有单位的 值是一个正整数 默认的z-index的值是0
- 如果多个定位元素没有设置z-index属性 或者z-index值设置一样 那么写在HTML后面的定位元素就会压盖住前面的定位元素
div{
width: 200px;
height: 200px;
}
.div1{
background-color: #f00;
position: absolute;
left: 100px;
top: 100px;
z-index: 2;
}
.div2{
background-color: #00f;
position: absolute;
left: 200px;
top: 200px;
z-index: 1;
}
结构伪类
CSS3
CSS3与CSS2之间的区别
css3=css2+新语法+新的属性
就是对css2进行扩充 删减 优化
| 选择器 | 功能 |
|---|---|
| E:first-child | 匹配第一个孩子 |
| E:last-child | 匹配最后一个孩子 |
| E:nth-child(n) | 匹配第n个孩子 |
| E:nth-child(2n) | 匹配偶数的孩子 |
| E:nth-child(even) | 匹配偶数的孩子 |
| E:nth-child(2n+1) | 匹配奇数的孩子 |
| E:nth-child(odd) | 匹配奇数的孩子 |
| E:only-child | 匹配有且只有一个孩子 |
.box ul li:first-child{
color: #f00;
width: 100px;
height: 30px;
line-height: 30px;
}
border-collapse
这个属性主要是用于来合并表格的边框线 其值为：collapse
border-collapse:collapse; //边框线变细
伪元素
| 选择器 | 功能 |
|---|---|
| :first-letter | 操作当前元素中第一个字 |
| :first-line | 操作当前元素中第一行 |
| ::before | 在之前插入，在一个盒子内部的最前面 |
| ::after | 在之后插入，在一个盒子内部的最后面 |
.box::before{
content: "要插入文字的内容";
}
阴影
文本阴影
text-shadow:水平阴影 垂直阴影 模糊距离 阴影颜色
注释：text-shadow 属性向文本添加一个或多个阴影。该属性是逗号分隔的阴影列表，每个阴影有两个或三个长度值和一个可选的颜色值进行规定。省略的长度是0。
| 值 | 描述 |
|---|---|
| h-shadow | 必须。水平阴影的位置。允许负值。 |
| v-shadow | 必须。垂直阴影的位置。允许负值。 |
| blur | 可选。模糊的距离。 |
| color | 可选。阴影的颜色。 |
描述：
- 文字阴影可以有多组值，多组之间用逗号隔开就可以
- 水平阴影正值阴影在右边，负值在左边
- 垂直阴影正值在下边，负值在上边
- 模糊强度，值越大越模糊
.box{
text-shadow: 3px 3px 3px #CD5C5C;
}
多组阴影
.box{
text-shadow: 3px 3px 3px #CD5C5C, -4px -4px 3px #FFD700;
}
盒子阴影
box-shadow:水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色 内/外阴影
水平阴影和垂直阴影必须得写，其余的可以省略不写
| 值 | 描述 |
|---|---|
| h-shadow | 必须。水平阴影的位置。允许负值。 |
| v-shadow | 必须。垂直阴影的位置。允许负值。 |
| blur | 可选。模糊的距离。 |
| spread | 可选。阴影的尺寸。 |
| color | 可选。阴影的颜色。 |
| inset | 可选。将外部阴影（outset）改为内部阴影。 |
圆角矩形
border-radius:左上 右上 右下 左下
img{
border-radius: 50%; //圆形
}
透明度
只要是颜色，都可以用透明度
rgba(红色,绿色,蓝色,透明度)
a：表示透明度的意思 透明度取值：0~1之间 0表示完全透明 1表示不透明
- 背景颜色透明
- Background-color:rgba(255,255,255,0.3)
- 文本颜色透明
- Color:rgba(255,255,255,0.3)
- 边框颜色透明
- Border:1px solid rgba(255,255,255,0.5)
div{
width: 100px;
height: 100px;
background: rgba(28, 219, 140, 0.3);
position: fixed;
}
