伪元素选择器
"""通过css操作文本内容"""
1.修改首个字体样式
p:first-letter {
color: red;
font-size: 48px;
}
2.在文本开头添加内容
p:before {
content: '哈哈';
color: blue;
}
3.在文本结尾添加内容
p:after {
content: '嘿嘿';
color: yellow;
}
使用场景
1.用于后面清除浮动带来的负面影响
2.用于网站的内容防爬
选择器优先级
1.相同选择器
'就近原则':谁离标签越近就听谁的!!!
2.不同选择器
行内选择器 > id选择器 > 类选择器 > 标签选择器
CSS选择器是所有选择器的基础
后期框架提供的、后期爬虫模块提供的
所以CSS选择器一定要学好 这样后面学前端框架和爬虫都会轻松不少
CSS字体样式修改
# 文字字体
font-family: "Microsoft Yahei"
# 字体大小
font-size: 24px
# 字体粗细
font-weight: lighter\bolder
# 字体颜色
方式1:
color: red;
方式2:
color: rgb(128, 128, 128);
方式3:
color: #4f4f4f;
"""
获取颜色的方式有很多
1.截图软件自带取色功能
微信、qq自带颜色编号 #4f4f4f
2.pycharm提供的取色器
左侧颜色块点击即可
"""
文字属性的修改
# 文字对齐
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 然后左键选中 通过方向键上下动态修改数值
"""
背景属性
# 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;
边框
# 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%
如果长宽一样那么就是圆 不一样就是椭圆
display属性
只要块儿级标签可以设置长宽 行内标签是不可以的(长宽有内部文本决定)
display:inline 让标签具备行内标签的特性(不能设置长宽)
display:block 让标签具备块儿级标签的特性(可以设置长宽)
display:inline-block 使元素同时具有行内元素和块级元素的特点
display:none 隐藏标签(重点) 页面上不会保留位置也不显示
visibility:hidde 也是隐藏标签 但是位置会保留
盒子模型
学习盒子模型可以将标签看成是一个个快递盒
快递盒组成部分 盒子模型
内部物品 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;
浮动
# 1.浮动的作用
float: left/right;
"""
浮动是所有网站页面布局必备的 可以将块儿级标签浮动起来脱离正常的文档流
是多个块儿级标签可以在一行显示(全部飘在了空中)
"""
# 2.浮动的影响
浮动会造成父标签塌陷(类似于将口袋里面的东西拿到了口袋的外面)
补充说明:
浮动的元素有时候也会遮挡住底下的区域 如果区域内有文本内容
那么浏览器会遵循文本内容优先展示的原则 会想法设法让文本展示出来
浮动影响的解决
clear: left; 规定元素的哪一侧不允许其他浮动元素
推导流程
1.直接写div然后写对应的长宽
2.写div然后添加clear属性 避免去查找长宽
3.万能公式(固定搭配 记住就可以)
.clearfix:after {
content: '';
clear: both;
display: block;
}
"""
以后写网页 提前写好上面的代码
然后哪个标签塌陷了就给谁添加上clearfix类名即可
很多前端页面框架使用的也是clearfix类名
"""
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0
}
#d3 {
width: 100%;
height: 500px;
background: url("https://img1.baidu.com/it/u=2364599438,612325272&fm=253&fmt=auto&app=138&f=JPEG?w=451&h=920") center center;
background-attachment: fixed;
}
p[id='d1'] {
margin: 5px;
/*修改字体大小*/
font-size: 38px;
/*修改字体粗细*/
font-weight: bold;
/*修改背景颜色*/
/*background: hotpink;*/
/*修改字体*/
font-family: 楷体;
/*调整缩进量*/
text-indent: 114px;
/*添加边框*/
/*border-top\right\bottom\left--上\右\下\左*/
/*border-color: green 颜色;*/
/*border-width: 5px 宽度;*/
/*border-bottom-style: dashed; 虚线*/
/*border-bottom-style: dotted; 点状*/
/*border-bottom-style: solid; 实线*/
/*border-bottom-style: double; 双实线*/
/*总体统一调整*/
border: deepskyblue 5px solid;
/*添加背景图片*/
/*background-image: url("https://t9.baidu.com/it/u=3894005035,1050175395&fm=218&app=126&size=f242,150&n=0&f=JPEG&fmt=auto?s=41B580715B2B53341AB023FA0300E036&sec=1651078800&t=02c84a0ac7f64ece4694d42f4920cc17");*/
/*背景图片是否填充*/
/*background-repeat: repeat; */
/*background-repeat: no-repeat; 不填充*/
/*background-repeat: repeat-x; 横向填充*/
/*background-repeat: repeat-y; 纵向填充*/
/*调整背景图片位置*/
/*background-position: center center;*/
/*统一调整*/
background: hotpink url("https://t9.baidu.com/it/u=3894005035,1050175395&fm=218&app=126&size=f242,150&n=0&f=JPEG&fmt=auto?s=41B580715B2B53341AB023FA0300E036&sec=1651078800&t=02c84a0ac7f64ece4694d42f4920cc17") repeat center center;
} /*修改第一个文字*/
p[id='d1']:first-letter {
background: beige;
color: purple;
font-size: 38px;
font-weight: lighter;
}
/*文本前面加信息*/
h1:before {
content: '问';
color: mediumspringgreen;
/*margin: 22px 33px 44px 55px; 上、右、下、左*/
/*margin: 22px 33px 44px; 上、左右、下*/
/*margin: 22px 33px; 上下、左右*/
/*margin: 22px; 上下左右统一*/
}
/*文本后面加信息*/
h1:after {
content: '啊';
color: gold;
}
body {
/*修改文字对齐方式左\中\右--left\center\right*/
text-align: center;
/*文字装饰:删除线\下划线\上边线--line-through\underline\overline*/
text-decoration: greenyellow underline;
/*background: pink url("https://img.ivsky.com/img/tupian/t/201707/30/xingganyoumeilidemeinvtupian-005.jpg") center center;*/
/*background-repeat: repeat;*/
/*background-position: center center;*/
/*float: left;*/
}
.c2 {
/*display: inline; 让块儿级标签具有行级标签的特性（不能自定义长宽）*/
/*display: block; 让行级标签具有块儿级标签的特性（能自定义长宽）*/
/*display: inline-block; 让标签具有块儿级标签和行级标签的特性*/
/*display: none; 隐藏标签*/
/*visibility:hidde 隐藏标签 但是位置会保留*/
width: 200px;
height: 200px;
/*画圆*/
border-radius: 50%;
background: deepskyblue;
background-image: url("https://t9.baidu.com/it/u=3894005035,1050175395&fm=218&app=126&size=f242,150&n=0&f=JPEG&fmt=auto?s=41B580715B2B53341AB023FA0300E036&sec=1651078800&t=02c84a0ac7f64ece4694d42f4920cc17");
background-repeat: no-repeat;
background-position: center center;
/*标签水平居中*/
margin: 0 auto;
}
h1 {
display: block;
width: 100%;
height: 100px;
}
.c1 {
margin: 12px;
}
.c4 {
width: 200px;
height: 200px;
float: left;
background-color: red;
border: green 5px solid;
margin-right: 2px;
}
div[class='c4'] {
margin: 5px 11px;
background: deepskyblue url("https://img2.baidu.com/it/u=1453015798,3922096350&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=385") center center;
}
#id1 {
/*width: 700px;*/
/*height: 220px;*/
border: mediumspringgreen 20px solid;
background: pink url("https://img0.baidu.com/it/u=1393217030,2306235902&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=413") center center repeat;
}
#d5 {
clear: right;
}
.clearfix {
content: '';
clear: both;
display: block;
}
div[class='c7'] {
clear: both;
}
</style>
</head>
<body>
<p id="d1">谁能凭爱意将富士山拥有</p>
<div>
<h1 class="c1">谁能凭爱意将富士山拥有</h1>
<div class="c1" id="d3"></div>
<h2 class="c1">谁能凭爱意将富士山拥有</h2>
<h3 class="c1">谁能凭爱意将富士山拥有</h3>
<h4 class="c1">谁能凭爱意将富士山拥有</h4>
<h5 class="c1">谁能凭爱意将富士山拥有</h5>
<h6 class="c1">谁能凭爱意将富士山拥有</h6>
</div>
<div class="c2">
谁能凭爱意将富士山拥有
</div>
<div class="c6 clearfix" id="id2">
<div class="c4" id="d2" title="美女"></div>
<div class="c4" id="d4"></div>
<div class="c4" id="d5"></div>
</div>
<div class="c7">
<a href="https://www.baidu.com/" class="'c5">百度</a>
<a href="#" class="'c5">啥都没有</a>
</div>
</body>
</html>
