前端开发(三)
前端开发(三)
伪元素选择器
"""通过css操作文本内容"""
1.修改首个字体样式
p:first-letter {
color: red;
font-size: 48px;
}
2.在文本开头添加内容
p:before {
content: '哈哈';
color: blue;
}
3.在文本结尾添加内容
p:after {
content: '嘿嘿';
color: yellow;
}
使用场景
1.用于后面清除浮动带来的负面影响
2.用于网站的内容防爬
代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*操作首个字符*/
p:first-letter{
color: red;
font-size: 30px
}
/*操作开头*/
p:before{
content: '开头';
color: blue;
font-size: 30px;
}
/*操作结尾*/
p:after{
content: '结尾';
color: blue;
font-size: 30px;
}
</style>
</head>
<body>
<p>天王盖地虎，宝塔镇河妖</p>
</body>
</html>
效果展示
选择器优先级
# 研究方向
1.相同选择器
'就近原则':谁离标签越近就听谁的!!!
2.不同选择器
行内选择器 > id选择器 > 类选择器 > 标签选择器
选择器总结
CSS选择器是所有选择器的基础
后期框架提供的、后期爬虫模块提供的
所以CSS选择器一定要学好 这样后面学前端框架和爬虫都会轻松不少
字体样式
# 文字字体
font-family: "Microsoft Yahei"
# 字体大小
font-size: 24px
# 字体粗细
font-weight: lighter\bolder
# 字体颜色
方式1:
color: red;
方式2:
color: rgb(128, 128, 128);
'''三个参数取值均在0-255'''
方式3:
color: #4f4f4f;
'''每一位都是十六进制数，取值在0-f之间，大小写无所谓'''
"""
获取颜色的方式有很多
1.截图软件自带取色功能
微信、qq自带颜色编号 #4f4f4f
2.pycharm提供的取色器
左侧颜色块点击即可
"""
代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*修改字体*/
#p1{
font-family: "Adobe 仿宋 Std R";
}
/*修改字体大小*/
#p2{
font-size: 30px;
}
/*修改字体粗/细:lighter/bolder*/
#p3{
font-weight: lighter;
}
/*字体颜色方式一:英文单词*/
#p4{
color: red;
}
/*字体颜色方式二:rgb值*/
#p5{
color: rgb(0,255,0);
}
/*字体颜色方式三:十六进制式*/
#p6{
color: #0000FF;
}
</style>
</head>
<body>
<p>原文:天王盖地虎</p>
<p id="p1">天王盖地虎</p>
<p id="p2">天王盖地虎</p>
<p id="p3">天王盖地虎</p>
<p id="p4">天王盖地虎</p>
<p id="p5">天王盖地虎</p>
<p id="p6">天王盖地虎</p>
</body>
</html>
效果展示
文字属性
# 文字对齐
text-align:center/left/right
# 文字装饰(重点)
"""a标签默认带下划线 并且有颜色(没有点击过是蓝色 点击过是紫色)"""
text-decoration: none; 主要就是用于去除a标签的下划线
text-decoration: line-through; 删除线
text-decoration: overline; 上边线
text-decoration: underline; 下划线
# 首行缩进
text-indent: 32px; # 首行缩进32px
"""
补充:可以使用浏览器做样式的动态调整
查找到标签的css 然后左键选中 通过方向键上下动态修改数值
"""
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
background: aqua;
width: 300px;
}
/*文字居中*/
#p1{
text-align: center;
}
/*去除下划线*/
a{
text-decoration: none;
}
/*文字加上删除线*/
#p2{
text-decoration: line-through;
}
/*文字加上上边线*/
#p3{
text-decoration: overline;
}
/*文字加上下划线*/
#p4{
text-decoration: underline;
}
/*首行缩进*/
#p5{
text-indent: 24px;
}
</style>
</head>
<body>
<div>
<p>原文:天王盖地虎</p>
<p id="p1">天王盖地虎</p>
<a href="#">天王盖地虎</a>
<p id="p2">天王盖地虎</p>
<p id="p3">天王盖地虎</p>
<p id="p4">天王盖地虎</p>
<p id="p5">天王盖地虎</p>
</div>
</body>
</html>
效果展示
背景属性
# 1.背景颜色
background-color: red;
# 2.背景图片
background-image:url("111.png");
"""背景图片如果没有设置的区域大 那么默认自动填充满"""
background-repeat:no-repeat\repeat-x\repeat-y 是否平铺
background-position:left top; 图片位置
background-attachment: fixed; 背景附着
"""
如果多个属性名具有相同的前缀 那么可以整合到一起编写(前缀名即可)
background:#336699 url('1.png') no-repeat left top;
"""
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 300px;
height: 300px;
}
/* 设置背景颜色*/
#d1{
background-color: red;
}
/* 设置图片背景*/
#d2 {
background-image: url("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2F2021%2Fedpic_360_360%2Fce%2F13%2F8b%2Fce138be73678ff2559b8578ff067d0eb_5.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1653559930&t=ff49a403f0892dc18ed40d781d29c36a");
background-repeat: no-repeat; /* 设置不平铺*/
background-position: 0 0; /*设置图片位置 左边距0，上边距0*/
/*background-attachment: fixed; !*背景附着*!*/
}
</style>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
</body>
</html>
效果展示
边框
# 1.自定义调整每个边的边框
border-left/top/right/bottom-color: black;
border-left/top/right/bottom-width: 5px;
border-left/top/right/bottom-style: solid;
# 2.统一调整每个边的边框
border: 5px solid black; 顺序无所谓 只要给了三个就行
"""
dotted 点状虚线边框
dashed 矩形虚线边框
solid 实线边框
"""
# 3.画圆
border-radius: 50%
如果长宽一样那么就是圆 不一样就是椭圆
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 100px;
height: 100px;
}
/* 设置边框 */
#d1{
border: 1px solid black;
/* 边框宽度 线条形状 线条颜色*/
}
/* 设置边框圆角 */
#d2{
border: 1px solid black;
border-radius: 20px;
}
/* 圆边框*/
#d3{
border: 1px solid black;
border-radius: 50%;
/* 随着圆角率加减即可获得椭圆*/
}
</style>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
</body>
</html>
效果展示
display属性
"""
只要块儿级标签可以设置长宽 行内标签是不可以的(长宽有内部文本决定)
"""
display:inline 让标签具备行内标签的特性(不能设置长宽)
display:block 让标签具备块儿级标签的特性(可以设置长宽)
display:inline-block 使元素同时具有行内元素和块级元素的特点
display:none 隐藏标签(重点) 页面上不会保留位置也不显示
visibility:hidde 也是隐藏标签 但是位置会保留
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
span{
display: block; /*使标签具有块标签的特性*/
}
div{
display: inline; /*使标签具有行内标签的特性*/
}
#p1{
display: inline-block; /*使标签具有行内标签和块标签的特性*/
}
#p2{
display:none /*隐藏标签(重点) 页面上不会保留位置也不显示*/
}
#p3{
visibility: hidden /*隐藏标签，保留位置*/
}
</style>
</head>
<body>
<span>span1</span>
<span>span2</span>
<div>div1</div>
<div>div2</div>
<p id="p1">p1</p>
<p id="p2">p2</p>
<p id="p3">p3</p>
<p id="p4">p4</p>
</body>
</html>
效果展示
盒子模型
# 所有的标签其实都有一个盒子模型
学习盒子模型可以将标签看成是一个个快递盒
"""
快递盒组成部分 盒子模型
内部物品 content(内容)
内部物品与盒子内部的距离 padding(内边距、内填充)
盒子的厚度 border\边框
盒子与盒子之间的距离 margin(外边距)
ps:两个标签之间的距离 有时候可以用margin也可以用padding
"""
# 1.body标签默认自带8px的margin值 我们在编写页面之前应该去掉
margin-left: 0;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin: 1px 2px 3px 4px 上 右 下 左
margin: 1px 2px 3px 上 左右 下
margin: 1px 1px 上下 左右
margin: 1px 统一设置一个值
# 2.padding用法与margin一致
同上
盒子模型页面布局
标签的水平居中 可以使用固定搭配
margin: 0 auto;
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
border: 1px solid black;
}
#d1,#d3{
width: 150px;
height: 150px;
background-color: red;
}
#d2,#d4{
width: 100px;
height: 100px;
background-color: green;
}
#d1{
padding: 20px 30px 40px 50px;
}
#d4{
margin: 20px 30px 40px 50px;
}
</style>
</head>
<body>
<div id="d1">
<div id="d2"></div>
</div>
<div id="d3">
<div id="d4"></div>
</div>
</body>
</html>
效果展示
浮动(重要)
# 1.浮动的作用
float: left/right;
"""
浮动是所有网站页面布局必备的 可以将块儿级标签浮动起来脱离正常的文档流
是多个块儿级标签可以在一行显示(全部飘在了空中)
"""
# 2.浮动的影响
浮动会造成父标签塌陷(类似于将口袋里面的东西拿到了口袋的外面)
补充说明:
浮动的元素有时候也会遮挡住底下的区域 如果区域内有文本内容
那么浏览器会遵循文本内容优先展示的原则 会想法设法让文本展示出来
代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#d1{
width: 100px;
height: 100px;
background-color: red;
float: left; /*div1向左浮动*/
}
#d2{
width: 100px;
height: 100px;
background-color: #0000FF;
float: left; /*div2也向左浮动，会跟着前一个标签一起浮动*/
}
</style>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
</body>
</html>
效果展示
解决浮动造成的影响
clear: left; 规定元素的哪一侧不允许其他浮动元素
推导流程
1.直接写div然后写对应的长宽
2.写div然后添加clear属性 避免去查找长宽
3.万能公式(固定搭配 记住就可以)
.clearfix:after {
content: '';
clear: both;
display: block;
}
"""
以后写网页 提前写好上面的代码
然后哪个标签塌陷了就给谁添加上clearfix类名即可
很多前端页面框架使用的也是clearfix类名
"""
浙公网安备 33010602011771号