CSS文字 字体和其他设置属性 浮动
概要
-
伪元素选择器
-
选择器优先级
-
CSS修改文字属性
-
CSS修改字体属性
-
CSS修改其他属性
内容
1、伪元素选择器
作用：通过CSS操作文本内容
1.修改第一个字体样式 通过字体颜色和字体大小设置标签内的第一个字体 让第一个字变成不一样的样式效果
p:first-letter {
color: red;
font-size: 60px;
}
2.通过CSS在标签内文本开头添加内容的效果
你的鼠标对于CSS添加的内容你是选不中它的,并且添加的内容在网页上是不可修改的 因为通过CSS不是正常的文本信息 所以不能修改 可以作为防止爬虫的一种措施
p:before {
content: '@@'; 这里除了可以写符号 也可以写文字信息
color: orange;
}
3.在文本结尾添加内容
你的鼠标对于CSS添加的内容你是选不中它的,并且添加的内容在网页上是不可修改的 因为通过CSS不是正常的文本信息 所以不能修改 可以作为防止爬虫的一种措施
p:after {
content:'哈哈哈';
color:blue;
}
三者的使用场景
1.用于后面清除浮动带来的负面影响 before和after多用于清除浮动
2.用于网站上的内容防止被他人爬取
代码演示
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*修改第一个字体样式*/
p:first-letter {
color: red;
font-size: 60px;
}
/*在文本开头添加内容*/
p:before {
content:'@@';
color: orange;
}
/*在文本结尾添加内容*/
p:after {
content: '哈哈哈';
color: blue;
}
</style>
</head>
<body>
<p>鸡确实会吃石头还会吃土</p>
</body>
2、选择器优先级
因为在CSS里面我们学了很多的选择器 那么我们将会面临一个问题 就是各个选择器之间我们在使用的时候是如何选择一个优先级使用呢？
# 优先级顺序研究方向
1.相同选择器(比如同一个标签选择器)
同在一个选择器下 使用不同的引入方式(第一种直接在选择器内通过标签直接编写设置样式 第二种是通过link外部引入css文件设置样式)
采用的是离标签“就近”原则(谁离标签越近就听谁的)
因为在同一个选择器下 HTML加载执行的顺序也是从上往下 所以离文本标签越近的最后才执行完 后面的样式设置会将前面的样式设置覆盖掉
代码演示:
<head>
<meta charset="UTF-8">
<title>Title</title>
1 <link rel="stylesheet" href="mycss.css">
2 <style>
p {
color: red;
}
</style>
3 <link rel="stylesheet" href="mycss.css">
</head>
<body>
4<p style="color: greenyellow">遇事不决问百度</p>
</body>
所以上面在同一个选择器中优先级顺序是4>3>2>1
2.不同选择器(有标签选择器、类选择器、id选择器)
因为选择器精确度不一样 所以优先级不一样 选择器越精确 优先级越高
行内选择器(类似于标签自带 工作中一般不推荐使用) > id选择器 > 类选择器 > 标签选择器
3、选择器总结
CSS选择器是所有选择器的基础
后期框架提供的、后期爬虫模块提供的 都会用到CSS选择器
所以CSS选择器一定要学好 这样后面学前端框架和爬虫都会轻松不少
4、CSS之设置字体（font）样式
# 文字字体(了解)
font-family:修改当前是属于哪种字体 比如草书、楷书、行楷、微软雅黑等
body {
font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif
}
# 设置字体大小(font-size)(已p标签为例)
p {
font-size:24px;
}
一般会设置16px、24px、28px、36px
# 设置字体粗细(font-weight用来设置字体的字重（粗细）)
值 描述
normal 默认值、标准粗细
bold 粗体
bolder 更粗
lighter 更细
100~900 设置具体粗细 400等同于normal 700等同于bold
inherit 继承父元素字体的粗细值
# 设置字体颜色(小重点)
方式1:直接在标签内写字体颜色 缺陷:有些颜色用英语单词没有描述 比如调出来的颜色
p {
color:red;
}
方式2:使用三基色(RGB(红绿蓝)) 每一个三基色范围:0-255
方式3:字体颜色编号
color:#4f4f4f;
"""
获取颜色的方式有很多
1.截图软件自带取色功能(你一截图下面就会显示rgb和pos 然后鼠标移动到你想要的颜色下面找到颜色rgb的颜色编号)
微信、qq自带颜色编号 #4f4f4f
2.pycharm提供的取色器
你在标签内写好颜色后 左侧会有一个小方块颜色，左侧颜色快你点击打开即可调整你想要的颜色"""
代码演示
设置字体大小和粗细
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p {
font-size: 24px;
}
.c1 {
font-weight: lighter;
}
.c2 {
font-weight: bolder;
}
.c3 {
font-weight: normal;
}
</style>
</head>
<body>
<p class="c1">遇事不决问百度</p>
<p class="c2">棒的一个人天天吃独食</p>
<p class="c3">棒的上海有钱人装逼第一名</p>
</body>
设置字体颜色的三种方式
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p {
font-size: 24px;
}
.c1 {
font-weight: lighter;
color: red;
}
.c2 {
font-weight: bolder;
color: rgb(128,128,128)
}
.c3 {
font-weight: normal;
color: #44ff00;;
}
</style>
</head>
<body>
<p class="c1">遇事不决问百度</p>
<p class="c2">棒的一个人天天吃独食</p>
<p class="c3">棒的上海有钱人装逼第一名</p>
</body>
5、设置文字属性
# 文字对齐
设置文字的位置
左对齐(text-align: left)
右对齐(text-align: right)
居中:(text-align: center)
两端对齐:(text-align: justify)
# 文字装饰(重点 使用频率很高)
"""在使用a标签的时候 a标签会默认自带下划线 并且文字有颜色(没有点击过是蓝色 点击过是紫色(是浏览器会记住你之前已经点击过了))
以后我们自己在写a标签的时候 我们一般都不会使用默认的 都是会自己设置"""
1.text-decoration: none; 主要是用于去除a标签的下划线 移除所有的装饰
<style>
a {
text-decoration: none;
}
</style>
2.text-decoration: line-through;添加删除线
3.text-decoration: overline；在字体上面加一条横线
4.text-decoration: underline；在字体下面加一条横线
# 首行缩进（text-indent）
text-indent: 32px # 首行缩进32px 也可以在浏览器网页上打开检查 然后找到style 然后在右侧找到text-indent 设置你想要的的数值进行直接在网页上进行微调
"补充: 可以使用浏览器做样式的动态调整
查找到标签的css 然后左键选中 通过方向键上下动态修改数值大小"
代码演示：
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p {
text-align: center;
text-decoration: overline;
font-size: 24px;
text-indent: 32px;
}
a {
text-decoration: none;
}
a {
text-decoration: line-through;
}
</style>
</head>
<body>
<p>不要总是做一些自己感动自己的事情 凡是要以结果为导向！！！</p>
<a href="#">线上娱乐</a>
<a href="hettps://www.sogo.com">百万大奖</a>
</body>
6、背景属性
# 1.背景颜色
background-color:red;
# 2.背景图片
background- image:url("https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/418f4cb7536265cd99bdf8b2e88d1f84.png?thumb=1&w=160&h=110&f=webp&q=90")
"""背景图片"""
# 如果背景图片没有设置的区域大时 那么会默认自动填充满
<style>
div {
background-color: #44ff00;
height: 400px;
width: 400px;
background-image: url("https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/418f4cb7536265cd99bdf8b2e88d1f84.png?thumb=1&w=160&h=110&f=webp&q=90");
}
</style>
background-repeat:no-repeat(不填充)
background-repeat:repeat-x(横向填充)
background-repeat:repeat-y(纵向填充)
background-position: left top;图片位置 左边距离 上边距离
background-position: 200px 200px;图片位置(距离左边200px,上面200px)
background-position: center center 背景图片 位置居中
background-attachment:fixed 将图片粘在背景上
"""如果多个属性名具有相同的前缀 那么可以整合到一起编写(前缀名即可)
background:#44ff00 url('图片网址') no-repeat left top"""
代码演示
head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
background-color: #44ff00;
height: 400px;
width: 400px;
background-image: url("https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/418f4cb7536265cd99bdf8b2e88d1f84.png?thumb=1&w=160&h=110&f=webp&q=90");
background-repeat:no-repeat ;
background-repeat:repeat-y;
background-position: 200px 200px
background-position: center center
}
</style>
</head>
<body>
<div>棒的大肥猪</div>
</body>
7、设置边框(上下、左右)
# 1.自定义调整每个边的边框
border-left/right/top/buttom-color:black;边框颜色
border-left/right/top/buttom-width:10px;边框宽度
border-left/right/top/buttom-style:solid;边框样式
# 2.统一调整每个边的边框(我们想让四个边框都是一样的 可以直接简写)
border:black 10px dotted/solid 他们之间是没有顺序的 只要给了三个就行
边框样式:
none 无边框
dotted 点状虚线边框
dashed 矩形虚线边框
solid 实线边框
# 3.画圆形
div {
background-color: red;
height: 200px;
width: 200px;
border-radius: 50%;
}
border-radius:50%
如果长宽一样 那么就是圆形 如果长宽不一致就是椭圆形
div {
border-radius: 50%;
background-image:url("https://img1.baidu.com/it/u=831785897,1909435537&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=522");
background-position: center center;
}
8、display属性
1."""只要块儿级标签可以设置长宽 行内标签是不可以的(长宽有内部文本决定 你设置了跟没设置是一样的)"""
div {
background-color: red;
height: 250px;
width: 250px;
}
span {
background-color: blue;
height: 250px;
width: 250px;
}
</style>
</head>
<body>
<div class="c1"></div>
<span></span>
</body>
2.现在再写一个div标签 这样就有两个div标签 但是我们在div下面写一个display:inline; 就可以将两个块级标签改成一个行内标签
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
background-color: red;
height: 250px;
width: 250px;
display: inline;
}
</style>
</head>
<body>
<div class="c1"></div>
<div class="c2"></div>
</body>
display:inline 让标签具备行内标签的特性(不能设置长宽)
display:block 让标签具备块二级标签的特性(可以设置长宽)
display:inline-block 使元素同时具备行内元素和块级元素的特点
display:none 隐藏标签(重点 使用频率很高) 页面上不会保留位置也不会显示
visibility:hidde 也是隐藏标签 但是在网页面位置会保留
<body>
转账的账号:<input type="text">
转账金额:<input type="text" name="money">
<input type="text" name="username" style="display: none" value="tony">
<div class="c1"></div>
<div class="c2"></div>
</body>
display:"none"与visibility:hidden的区别：
visibility:hidden: 可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。
display:none: 可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。
9、盒子模型
# 所有的标签其实都有一个盒子模型
学习盒子模型可以将标签看成是一个个快递盒
"""
快递盒组成部分
盒子模型
内部物品 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; 水平方向上的居中
10、浮动(重要)
# 1.浮动的作用 浮动是页面布局必备的技术点
float: left/right# 1.浮动的作用
float: left/right;
"""
浮动是所有网站页面布局必备的 可以将块儿级标签浮动起来脱离正常的文档流
是多个块儿级标签可以在一行显示(全部飘在了空中)
"""
# 2.浮动的影响
浮动会造成父标签塌陷(类似于将口袋里面的东西拿到了口袋的外面)
补充说明:
浮动的元素有时候也会遮挡住底下的区域 如果区域内有文本内容
那么浏览器会遵循文本内容优先展示的原则 会想法设法让文本展示出来
11、解决浮动造成的影响
clear: left; 规定元素的哪一侧不允许其他浮动元素
推导流程
1.直接写div然后写对应的长宽
2.写div然后添加clear属性 避免去查找长宽
3.万能公式(固定搭配 记住就可以)
clearfix:after {
content: '';
clear: both;
display: block;
}
"""
以后写网页 提前写好上面的代码取消浮动
然后哪个标签塌陷了就给谁添加上clearfix类名即可
很多前端页面框架使用的也是clearfix类名
浙公网安备 33010602011771号