python前端3
一.伪元素选择器
1.修改了首个字体的样式--- h1:first-letter
2.文本开头添加内容--- .c1:before
3.在文结尾添加内容--- .c1:after
二.选择器的优先级
1.相同选择器
'就近原则'谁离标签越近就听谁的
2.不同选择器
行内选择器 > id选择器 > 类选择器 > 标签选择器
实验调整css优先级 第二优先 精确查找id
实验调整css优先级 第三优先 范围查找
实验调整css优先级 第一优先 离得最近在内部
# 三.字体的样式
1.文字字体
font-family: "Microsoft Yahei"
2.字体大小
font-size: 24px
3. 字体粗细
font-weight: lighter\bolder
观看字体大小
观看字体粗细
观看字体粗细
可以通过css方法修改颜色 # rgb color
1.1代码展示
显示不出用图片代替
点击查看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
h1:first-letter {
color: #932AA5;
font-size: 30px;
}
p2 {
color: #ff0026;
}
.c1:before{
content: '2.文本开头';
color: #932AA5;
font-size: 18px;
}
.c2:after {
content: '内容---';
color: #932AA5;
font-size: 18px;
}
.w1 {
font-size: 20px;
color: #a1666b;
}
.w2 {
font-weight: lighter;
color: rgb(161 103 247);
}
.w3 {
font-weight: bolder;
color: darkblue;
}
</style>
</head>
<body>
<h1>一.伪元素选择器</h1>
<p1>1.修改了首个字体的样式---</p1>
<p2>h1:first-letter</p2>
<p><p1 class="c1">添加内容---</p1>
<p2>.c1:before</p2></p>
<p>
<p1 class="c2">3.在文结尾添加</p1>
<p2>.c1:after</p2>
</p>
<h1>二.选择器的优先级</h1>
<p id="d1">实验调整css优先级 第二优先 精确查找id</p>
<p class="q1">实验调整css优先级 第三优先 范围查找</p>
<p style="color: darkblue">实验调整css优先级 第一优先 离得最近在内部</p>
<p>行内选择器 > id选择器 > 类选择器 > 标签选择器</p>
<h1>三.字体的样式</h1>
<p class="w1">观看字体大小</p>
<p class="w2">观看字体粗细</p>
<p class="w3">观看字体粗细</p>
<p>可以通过css方法修改颜色 # rgb color</p>
</body>
</html>
四.文字属性
1.文字的左右对齐
text-align:center/left/right
2.文字装饰
使用a标签
'a标签默认带下划线 并且有颜色(没有点击过是蓝色 点击过是紫色 可以通过伪类选择器 鼠标悬浮 hover 更改颜色)'
text-decoration: none; 主要就是用于去除a标签的下划线
text-decoration: line-through; 删除线
text-decoration: overline; 上边线
text-decoration: underline; 下划线
五.背景属性
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: rgb(161 103 247) url('555.png') no-repeat left top;'
六.边框
1.自定义调整每个边框
border-left-color: black; # 调整左边边框颜色
border-left-width: 5px; # 调左边边框的宽度
border-left-style: solid; # 左边边框的样式
left/top/right/bottom
左侧边框/顶部边框/右侧边框/地步边框
2.统一调整每个边的边框
border: 5px solid black # 和上方一致
3.边框的样式
dotted # 点状虚线边框
dashed # 矩形虚线边框
solid # 实线边框
点击查看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p {
background-color: coral;
border-left-color: crimson;
border-left-width: 6px;
border-left-style: solid;
}
</style>
</head>
<body>
<p>
什么是边框
</p>
</body>
</html>
4.边框该为圆形
border-radius: 50%
设置的长宽必须一致
'只要块儿级标签可以设置长宽 行内标签是不可以的(长宽有内部文本决定)'
点击查看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
background-color: coral;
height: 50px;
width: 50px;
border-radius: 50%;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
七.display属性
# 1.div块儿标签span行内标签特性
display:inline 让标签具备行内标签的特性(不能设置长宽)
display:block 让标签具备块儿级标签的特性(可以设置长宽)
# 2.# 1.div块儿标签span行内标签特性
display:inline-block 使元素同时具有行内元素和块级元素的特点
# 3.display:none隐藏标签
页面上不会保留位置也不显示
# 4visibility:hidde
隐藏标签 但是位置会保留比较明显
点击查看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
转账的账号:<input type="text">
转账的金额:<input type="text" name="money">
<p style="visibility: hidden"><input type="text" name="username" value="thn"></p>
</body>
</html>
八.盒子模型
'所有的标签其实都有一个盒子模型'
盒子模型的组成部分
1.content # 盒子的内容
2.padding # 内容与盒子的间距
3.border # 盒子的边框厚度
4.margin # 盒子与盒子的间距
'两个标签之间的距离 有时候可以用margin也可以用padding'
'margin也可以用padding 用法是一致的'
1.1盒子演示
body标签默认自带8px的margin值 我们在编写页面之前应该去掉
margin-left: 0; 设置margin值 把0 修改成需要修该的数值就可以
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
简写方式
margin: 1px 1px 1px 1px 修改 上下左右 间距为 1px margin
margin: 1px 1px 1px 修改 上 左右 下 间距为 1px margin
margin: 1px 1px 修改 上下 左右 间距为 1px margin
margin: 1px 修改 上下左右 统一间距为 1px margin
下图是margin 间距 与 修改完后的间距
九.浮动
怎么设置浮动
float: left/right; 向左浮动 或 向右浮动
"""
浮动是所有网站页面布局必备的 可以将块儿级标签浮动起来脱离正常的文档流
是多个块儿级标签可以在一行显示
"""
点击查看代码
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.q1 {
height: 100px;
width: 100px;
background-color: darksalmon;
float: left;
}
.q2 {
height: 100px;
width: 100px;
background-color: cyan;
float: left;
}
</style>
</head>
<body>
<div class="q1"></div>
<div class="q2"></div>
</body>
</html>
1.1浮动的影响
浮动会造成父标签塌陷(类似于将口袋里面的东西拿到了口袋的外面)
点击查看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.q1 {
height: 100px;
width: 100px;
background-color: darksalmon;
float: left;
}
.q2 {
height: 100px;
width: 100px;
background-color: cyan;
float: left;
}
.q3 {
border: 10px solid blueviolet;
}
.q4 {
height: 300px;
width: 300px;
background-color: chocolate;
}
</style>
</head>
<body>
<div class="q3">
<div class="q1"></div>
<div class="q2"></div>
<div class="q4"></div>
</div>
</body>
</html>
' 浮动的元素有时候也会遮挡住底下的区域 如果区域内有文本内容
那么浏览器会遵循文本内容优先展示的原则 会想法设法让文本展示出来'
十.解决浮动的方法
# 1.方式1 clear: left; 用来清除左侧浮动
# 2.方式2 .clearfix:after{ # 伪元素选择器
content: ''; # 在标签的末尾 为空
clear: both; # 左右两侧都不能有浮动的元素
display: block;}
哪个块儿层 塌陷了 加上 clearfix 即可
点击查看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.q1 {
height: 100px;
width: 100px;
background-color: darksalmon;
float: left;
}
.q2 {
height: 100px;
width: 100px;
background-color: cyan;
float: left;
}
.q3 {
border: 10px solid blueviolet;
}
.clearfix:after {
content: '';
clear: both;
display: block;
}
</style>
</head>
<body>
<div class="q3 clearfix">
<div class="q1"></div>
<div class="q2"></div>
</div>
</body>
</html>
简易头像
点击查看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
background-image:url("111.jpg");
height: 300px;
width: 300px;
border-radius: 50%;
background-position:left top;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
浮动分屏
点击查看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.q1 {
height: 515px;
width: 270px;
background-color: darksalmon;
float: left;
}
.q2 {
height: 515px;
width: 790px;
background-color: cyan;
float: left;
}
</style>
</head>
<body>
<div>
<div class="q1"></div>
<div class="q2"></div>
</div>
</body>
</html>
浙公网安备 33010602011771号