css简介
# 层叠样式表： 就是给HTML标签修改样式，对文档进行格式化(渲染)
语法结构
选择器 {
属性名1：属性值1；
属性名2：属性值2
}
css注释语法
/*注释内容*/
css引入方式
1.style内部直接编写css代码
格式如下：
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{
background-color: #2b99ff;
}
</style>
</head>
2.link标签引入外部css文件
<link href="mystyle.css" rel="stylesheet" type="text/css"/>
3.标签内直接书写
一般情况下不推荐使用，容易造成冗余现象
"""
单独开设的css文件内代码也是非常多的，可以借助于注释管理
/*导航条样式*/
/*侧边栏样式*/
"""
基本选择器
"""
css是用来调节标签样式的
因为同一个页面上又很多像是的标签，并且这些标签在不同的位置又不同的样式，所以为了能够区分，需要学习如何查找指定的标签
"""
1. 标签选择器：通过标签名直接查找
/*查找所有的div标签*/
div {
color:red;
}
2. 类选择器（关键符号为句点符.）：通过class值查找标签
/*查找所有含有c1样式类的标签*/
.c1 {
color:red;
}
'''
注意：
样式类名不要用数字开头(有的浏览器不认)。
标签中的class属性如果有多个，要用空格分隔。
'''
3. id选择器（关键符号为警号#）：通过id值查找标签
/*查找id为d1的标签*/
#d1 {
color:orange;
}
4. 通用选择器
/*body内所有的标签*/
* {
color:darkgray;
}
组合选择器
"""
为了区分分嵌套标签之间的关系
<div>
<p>
<span></span>
</p>
</div>
span是p的儿子，是div的孙子也可以说是div的后代
p是div的儿子也是div后代，是span的父亲
div是p的父亲是span的爷爷，也可以说是他们的祖先
"""
1. 后代选择器（特征为空格）
/*查找div内部所有的后代span*/
div span {
color:red;
}
2. 儿子选择器（特征为>）
/*查找div内部所有的儿子span*/
div > span {
color:greenyeellow;
}
3.毗邻选择器（特征为+）
/*查找同级别下面紧挨着的第一个span(不能有其他标签间隔)*/
div + span {
color:pink;
}
3. 弟弟选择器（特征为~）
/*查找同级别下面所有的span(不需要紧挨着)*/
div ~ span {
color:deeppink;
}
属性选择器
# 标签可以有默认的属性也可以自定义属性
<p id="d1" class="c1" name="qq" pwd="123">123</p>
[name] { /*查找含有name属性名的标签*/
color:red;
}
[name="qq"] { /*查找含有name属性名并且值为qq的*/
color:red;
}
p[name="qq"] { /*查找含有name属性名并且值为qq的p*/
color:red;
}
分组与嵌套
# 多个相同选择器并列使用
div,span,p { /*查找div或者span或者p*/
color:red;
}
# 多个不同选择器并列使用
div,#d1,.c1 { /*标签查找div id查找d1 类查找c1*/
color:red;
}
# 不并列同样可以使用组合选择器
.c1 p { /*查找class为c1的后代p标签*/
color:red;
}
# 直接筛选
div#d1 { /*查找id为d1的div标签*/
colot:red;
}
div.c1 { /*查找class为c1的div标签*/
color:red;
}
伪类选择器
/*鼠标悬浮在上面*/
a:hover {
color:orange;
}
'''a标签默认的颜色会变化'''
input:focus {
background-color:red;
}
'''我们将input框被用户点击即将录入数据的过程看成是focus状态(聚焦状态)'''
伪元素选择器
# 首字调整：是一种文档布局的方式
p.first-letter {
font-size:48px; /*字体大小*/
color:red;
}
# 在文本面前通过css动态渲染文本：特殊文本无法选中
p.before {
content:'哈哈'；
color:red;
}
<p>::before言而有信</p>
# 在文本的后面通过css动态渲染文本：特殊文本无法选中
p:after {
content:'呵呵';
color:greenyellow;
}
<p>言而有信::after</p>
"""
在编写爬虫程序爬取页面内容的时候如果没有正常文本
可能是因为伪元素选择器的问题
before和after多用于清除浮动。
"""
选择器的优先级
# 相同选择器不同导入方式
选择器系统遵循就近原则 从上往下谁离标签更近谁说了算
# 不同选择器不遵循就近原则：优先级
行内选择器 > id选择器 > 类选择器 > 标签选择器
字体相关
1. 宽和高
只有块级表亲啊可以设置 行内标签无法设置
p {
height: 1000px;
width: 50px;
}
2.字体大小
font-size: 99px; # 字体大小一般有固定的大小参考
3.粗细
font-weight: bolder;
font-weight: lighter;
4.文本颜色
color:red; # 第一种
color:#4e4e4e; # 第二种
color:rgb(88,88,88) # 第三种
rgb(88,88,88,0.2) #最后一个参数指定调整透明度(0-1)
5.文字对齐
text-align:center; # 居中展示
text-align:justify; # 两端对齐
6.文字装饰
text-decoration:none; # 主要用于去除a标签默认的下划线
7.首行缩进
text-indent:32px; # 默认文字大小是16px
背景属性
background-color:orange; # 背景颜色
background-image:url('url'); # 背景图片
background-repeat:no-repeat; # 是否铺满
background-position:左右 上下； # 图片位置
""" 多个属性名前缀相同 可以简写 """
background:orange url('url'); # 一个个编写即可 不写则默认
# 如何实时修改图片位置
浏览器找到标签的css代码 然后方向键上下按住即可动态调整
边框属性
值 描述
none 无边框
dotted 点状虚线边框
dashed 矩形虚线边框
solid 实线边框
p {
/*border-left-color: red;*/
/*border-left-style: solid;*/
/*border-left-width: 3px;*/
/*多个属性有相同的前缀 一般都可以简写*/
/*border-left: 5px red solid; !*没有顺序*!*/
/*border-top:orange 10px dotted;*/
/*border-right: black dashed 5px;*/
/*border-bottom: deeppink 8px solid;*/
/*多个属性有相同的前缀 一般都可以简写*/
border: 5px red solid; /*上下左右一致*/
}
border-radius设置为长或高的一半即可得到一个圆形。
div {
height: 500px;
width: 500px;
border: 5px solid red;
/*画圆*/
border-radius: 50%;
}
display属性
div {
display:inline; /*行内*/
}
span {
/*display:block; !*块级*!*/
display:none;
/*
隐藏标签 页面上看不见也不再占用页面位置
但是通过浏览器查找标签是可以看到的
*/
}
p {
display:inline-block;
/*
具备块级标签可以修改长宽的特性
也具备行内标签文本多大就占多大的特性
*/
}
盒子模型
- margin(外边距): 用于控制元素与元素之间的距离；margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的。
- padding(内边距): 用于控制内容与边框之间的距离。
- Border(边框): 围绕在内边距和内容外的边框。
- Content(内容): 盒子的内容，显示文本和图像。
"""
以快递盒为例
1. 快递盒与快递盒之间的距离 外边距(标签之间的距离)
2. 快递盒的厚度 边框
3. 内部物品到盒子的距离 内边距(文本内容到边框的距离)
4. 物品本身的大小 文本大小
"""
# body标签默认自带8px的外边距 在编写的时候应该提前去掉
body {
margin:0;
}
1. 外边距(标签之间的距离)
margin简写
margin:0px; # 上下左右都一致
margin:10px 10px; # 第一个控制上下 第二个控制左右
margin:20px 10px 20px; # 上 左右 下
margin:20px 2px 3px 5px;# 上 右 下 左
# 推荐使用简写：
.margin-test {
margin:20px 2px 3px 5px;# 上 右 下 左
}
# 常见居中：
.mycenter {
margin: 0 auto;
}
2. 内边距(文本内容到边框的距离)
padding简写
padding:0px; # 上下左右都一致
padding:10px 10px; # 第一个控制上下 第二个控制左右
padding:20px 10px 20px; # 上 左右 下
padding:10px 2px 3px 5px; # 上 右 下 左
# 推荐使用简写：
.padding-test {
padding:10px 2px 3px 5px; # 上 右 下 左
}
浮动float
在css中，任何元素都可以浮动，主要是用于页面布局。
浮动元素会生成一个块级框，不论本身是何种元素。
关于浮动的特点:
①.浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
②.由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
三种取值
left:向左浮动
right:向右浮动
none:默认值，不浮动
clear
clear属性规定元素的哪一侧不允许其他浮动元素。
注意：clear属性只会对自身起作用，而不会影响其他元素。
清除浮动
# 浮动带来的负面影响
"""会造成父标签塌陷"""
解决浮动的负面影响，主要有三种方式：
1.再写一个div撑场面(不可取)
2.关键字clear(可以使用)
3.通用解决策略(推荐使用)：只要父标签塌陷就使用
.clearfix:after {
content: '';
clear:both;
display:block;
}
# 谁塌陷就给谁加class属性
# 浏览器默认都是文本优先展示
overflow溢出属性
# 圆形头像
#d1 {
width: 200px;
height: 200px;
border: 3px solid darkgray;
border-radius: 50%;
overflow: hidden;
}
#d1 img {
/*max-width: 100%;*/
width: 100%;
}
圆形头像示例
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>圆形的头像示例</title>
<style>
* {
margin: 0;
padding: 0;
background-color: #eeeeee;
}
.header-img {
width: 150px;
height: 150px;
border: 3px solid white;
border-radius: 50%;
overflow: hidden;
}
.header-img>img {
width: 100%;
}
</style>
</head>
<body>
<div class="header-img">
<img src="https://pic.cnblogs.com/avatar/1342004/20180304191536.png" alt="">
</div>
</body>
</html>
定位(position)
如何使用css完成定位
定位关键字position
位置关键字left、right、top、bottom
1. 静态定位 static
所有的标签默认都是静态定位即不能改变位置
2. 相对定位 relative
相对标签原来的位置做定位
注意：position：relative的一个主要用法：方便绝对定位元素找到参照物。
3.绝对定位 absolute
相对已经定位过的父标签做定位(没有则参考body标签)
绝对定位示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>绝对定位</title>
<style>
.c1 {
height: 100px;
width: 100px;
background-color: red;
float: left;
}
.c2 {
height: 50px;
width: 50px;
background-color: #ff6700;
float: right;
margin-right: 400px;
position: relative;
}
.c3 {
height: 200px;
width: 200px;
background-color: green;
position: absolute;
top: 50px;
}
</style>
</head>
<body>
<div class="c1"></div>
<div class="c2">
<div class="c3"></div>
</div>
</body>
</html>
4.固定定位 fixed
相对浏览器窗口做定位
返回顶部按钮样式示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>返回顶部示例</title>
<style>
* {
margin: 0;
}
.d1 {
height: 1000px;
background-color: #eeee;
}
.scrollTop {
background-color: darkgrey;
padding: 10px;
text-align: center;
position: fixed;
right: 10px;
bottom: 20px;
}
</style>
</head>
<body>
<div class="d1">111</div>
<div class="scrollTop">返回顶部</div>
</body>
</html>
是否脱离文档流
相对定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.c1 {
height: 50px;
width: 100px;
background-color: dodgerblue;
}
.c2 {
height: 100px;
width: 50px;
background-color: orange;
position: relative;
left: 100px;
}
</style>
</head>
<body>
<div class="c1"></div>
<div class="c2"></div>
<div style="height: 100px;width: 200px;background-color: black"></div>
</body>
</html>
绝对定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.c1 {
height: 50px;
width: 100px;
background-color: red;
position: relative;
}
.c2 {
height: 50px;
width: 200px;
background-color: green;
position: absolute;
left: 50px;
}
</style>
</head>
<body>
<div class="c1">购物车
<div class="c2">空空如也~</div>
<div style="height: 50px;width: 100px;background-color: deeppink"></div>
</div>
</body>
</html>
固定定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="c1" style="height: 50px;width: 500px;background-color: black"></div>
<div class="c2" style="height: 50px;width: 100px;background-color: deeppink;position: fixed;right: 10px;bottom: 20px"></div>
<div class="c3" style="height: 10px;width: 100px;background-color: green"></div>
</body>
</html>
根据上述例子可知：
# 标签位置改变之后，原来的位置是否会空出来
如果空出来了被其他标签自动占有，那么表示脱离否则不脱离
浮动、定位
脱离文档流
浮动、绝对定位、固定定位
不脱离文档流
相对定位
z-index
#i2 {
z-index: 999;
}
设置对象的层叠顺序。
1.z-index 值表示谁压着谁，数值大的压盖住数值小的，
2.只有定位了的元素，才能有z-index,也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index，而浮动元素不能使用z-index
3.z-index值没有单位，就是一个正整数，默认的z-index值为0如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁在上面压着别人，定位了元素，永远压住没有定位的元素。
4.从父现象：父亲怂了，儿子再牛逼也没用
自定义模态框示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>自定义模态框</title>
<style>
.cover {
background-color: rgba(0,0,0,0.65);
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 998;
}
.modal {
background-color: white;
position: fixed;
width: 600px;
height: 400px;
left: 50%;
top: 50%;
margin: -200px 0 0 -300px;
z-index: 1000;
}
</style>
</head>
<body>
<div class="cover"></div>
<div class="modal"></div>
</body>
</html>
透明度
rgba(124,124,124,0.5)
影响颜色
opacity
定义透明效果。取值范围是0~1，0是完全透明，1是完全不透明。
综合示例
顶部导航菜单示例
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>li标签的float示例</title>
<style>
/*清除浏览器默认外边距和内填充*/
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none; /*去除a标签默认的下划线*/
}
.nav {
background-color: black;
height: 40px;
width: 100%;
position: fixed;
top: 0;
}
ul {
list-style-type: none; /*删除列表默认的圆点样式*/
margin: 0; /*删除列表默认的外边距*/
padding: 0; /*删除列表默认的内填充*/
}
/*li元素向左浮动*/
li {
float: left;
}
li > a {
display: block; /*让链接显示为块级标签*/
padding: 0 15px; /*设置左右各15像素的填充*/
color: #b0b0b0; /*设置字体颜色*/
line-height: 40px; /*设置行高*/
}
/*鼠标移上去颜色变白*/
li > a:hover {
color: #fff;
}
/*清除浮动 解决父级塌陷问题*/
.clearfix:after {
content: "";
display: block;
clear: both;
}
</style>
</head>
<body>
<!-- 顶部导航栏 开始 -->
<div class="nav">
<ul class="clearfix">
<li><a href="">玉米商城</a></li>
<li><a href="">MIUI</a></li>
<li><a href="">ioT</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>
1573
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
