标签：repeat center 标签 border background margin 选择器 CSS 属性
伪元素选择器
"""通过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>
标签：repeat,center,标签,border,background,margin,选择器,CSS,属性 来源： https://www.cnblogs.com/Oliver-Chance/p/16197253.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。