- 伪元素选择器
- 选择器的优先级
- 字体相关
- 背景属性
- 边框属性
- display属性
- 盒子模型
<head>
<meta charset="UTF-8">
<title>梨园</title>
<style>
p:first-letter{
color: red;
font-size: 36px;
}
</style>
</head>
1-2 给段落最前边/最后边添加内容,并设置内容的样式 a) 给段落最前边添加内容,并设置内容的样式(如字体颜色)
<head>
<meta charset="UTF-8">
<title>梨园</title>
<style>
p:before {
content: '前缀内容';
color: orange;
}
</style>
</head>
b) 给段落最后边添加内容,并设置内容的样式
<head>
<meta charset="UTF-8">
<title>梨园</title>
<style>
p:after{
content:"后缀内容";
color: blue;
}
</style>
</head>
2 选择器的优先级 即多个选择器修改同一标签样式,最终会选择谁的? 答: 情况1 相同选择器不同导入方式 就近原则(从上往下,谁离标签近谁说了算) 情况2 不同选择器修改同一标签 行内选择器(实际中几乎不用)>id选择器>类选择器>标签选择器 3 字体相关设置 代码演示
<head>
<meta charset="UTF-8">
<title>梨园</title>
<style>
p{
/*height: 1000px;*/
/*width: 20px;*/
/*font-size: 18px;*/
/*font-weight: bolder;*/
/*font-weight: lighter;*/
/*color: rgba(57, 80, 111,0.1)*/
/*color: #7DEC70;*/
/*color: red;*/
/*text-align: center;*/
/*text-align: right;*/
/*text-indent: 32px;*/
}
a {
text-decoration: none;
}
</style>
</head>
对代码解释
3.1 设置p标签的宽和高
~注:只有块儿级标签可以设置, 行内标签无法设置
height: 1000px;
width: 50px;
background-color: red;
3.2 字体大小
font-size: 99px;
3.3 字粗/细
font-weight: bolder;
font-weight: lighter;
3.4 文本颜色
color:red; # 第一种
color:#4e4e4e; # 第二种
color:rgb(88,88,88) # 第三种
rgba(88,88,88,0.2) # 最后一个参数调整透明度(0-1)
~注:
颜色来源
1)pycharm提供的取色器
2)qq或者微信的截图中有对应颜色
3.5 对其方式
text-align: center; # 居中
3.6 首行缩进
text-indent: 32px; # 默认文字大小是16px
关于a标签(经常用!!!)
去掉a标签默认的下划线
text-decoration: none;
4 "块儿级标签"的背景属性
代码演示->以p标签为例
<head>
<meta charset="UTF-8">
<title>梨园</title>
<style>
p{
height: 1000px;
width: 2000px;
/*background-color: red;*/
/*background-image: url("https://img0.baidu.com/it/u=2194400789,1673482086&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500");*/
/*background-repeat: no-repeat;*/
/*background-position: center;*/
background: orange no-repeat center url("https://img0.baidu.com/it/u=2194400789,1673482086&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500");
}
</style>
</head>
代码解释 background-color: orange; # p标签的背景颜色 background-image: url('url'); # p标签的背景图片 background-repeat: no-repeat; # 是否铺满p标签 background-position:左右 上下; # 图片在p标签的位置 """多个属性名前缀相同 那么可以简写""" background:orange url('url'); # 一个个编写即可 不写就默认 # 如何实时修改图片位置 浏览器找到标签的css代码 然后方向键上下按住即可动态调整 5 边框属性 代码演示
<head>
<meta charset="UTF-8">
<title>梨园</title>
<style>
p{
height: 100px;
width: 200px;
/*border-left-style: solid;*/
/*border-left-color: red;*/
/*border-left-width: 3px;*/
/*border-left: 5px red solid; !*没有顺序*!*/
/*border-right: 5px orange dashed;*/
/*border-top: 5px green solid;*/
/*border-bottom: 5px blue double;*/
border: 5px red solid; /*上下左右一致*/
}
div{
/*height: 700px;*/
height: 500px;
width: 500px;
background-color: orange;
border: 5px dashed red;
/*边框设置成圆形->半径为50%; 若height与width不一致, 则为椭圆*/
border-radius: 50%;
}
</style>
</head>
代码解释 /*border-left-color: red;*/ /*border-left-style: solid;*/ /*border-left-width: 3px;*/ /*多个属性有相同的前缀 一般都可以简写*/ /*border-left: 5px red solid; !*没有顺序*!*/ /*border-top:orange 10px dotted;*/ /*border-right: black dashed 5px;*/ /*border-bottom: deeppink 8px solid;*/ /*多个属性有相同的前缀 一般都可以简写*/ border: 5px red solid; /*上下左右一致*/ 6 display属性 设置标签->块儿级标签还是行内标签(独占一行还是文本多大占多大空间) 代码演示
<head>
<meta charset="UTF-8">
<title>梨园</title>
<style>
/*p {*/
/* display: inline;*/
/*}*/
/*span {*/
/* display: block;*/
/* display: none;*/
/*}*/
#d1{
/*display: inline;*/
display: inline-block;
height: 100px;
width: 100px;
background: blue;
text-align: center;
}
#d2 {
display: inline-block;
height: 100px;
width: 100px;
background:orange ;
text-align:center;
}
</style>
</head>
代码解释: 6.1 将行内标签改为块级标签及掩藏标签 <这两种用法后边相对用的多> span { /*display: block; !*将行内标签改为块级标签*!*/ display: none; /* 隐藏标签 页面上看不见也不再占用页面位置 但是通过浏览器查找标签是可以看到的 到后面学习django会讲跨站请求伪造(做钓鱼网站) */ } 6.2 将块级标签改为行内标签 div { display: inline; /*将块级标签改为行内标签*/ } 6.3 让标签既可以在一行显示又可以设置长宽 p { display: inline-block; } 7 盒子模型 为便于理解: 把一个标签比喻成一个快递盒 1) 快递盒与快递盒之间的距离 外边距margin(标签之间的距离) 2) 快递盒的厚度 边框border 3)内部物品到盒子之间的距离 内边距padding(文本内容到边框之间的距离) 4) 物品本身大小 文本大小 7.1 body标签自带8px外边框, 在实际中应去掉 body { margin: 0; } 7.2 外边距margin margin:0px; # 上下左右都一致 margin:10px 10px; # 第一个控制上下 第二个控制左右 margin:20px 10px 20px; # 上 左右 下 margin:10px 2px 3px 5px; # 上 右 下 左 7.3 内边距(文本内容到边框的距离) padding:0px; # 上下左右都一致 padding:10px 10px; # 第一个控制上下 第二个控制左右 padding:20px 10px 20px; # 上 左右 下 padding:10px 2px 3px 5px; # 上 右 下 左