昨日内容回顾
'''获取用户数据并发送给后端服务器'''
1.form标签中的重要属性
action 控制数据的提交路径
method 控制数据的提交方式
enctype 控制携带文件数据
2.input标签
type属性参数不同 效果不同
text 普通文本
password 密文展示
date 日历展示
email 邮箱格式
radio 单选(默认选中checked)
file 获取文件(multiple)
submit 提交按钮
reset 重置按钮
button 普通按钮(后期可以绑定自定义功能)
3.select标签(multiple)
option标签 一个个选项
4.textarea标签
获取一大段文本
获取用户输入的标签 必须要有name属性 就相当于字典的key
如果该标签是选择类型的标签 还需要自行添加value属性
# 层叠样式表
作用：给HTML标签修改样式
1.语法结构：
选择器 {
属性名1:属性值1;
属性名2:属性值
}
2.注释语法
/*注释内容*/
3.三种引入方式
01 style标签内直接编写
02 link标签引入外部css文件
03 标签内部用过style属性直接编写
"""
学习css为什么先学如何查找标签？
因为一个页面上有很多相同的标签 但是需要有不同的样式
所以需要先学会如何区分和查找标签
"""
1.标签选择器
标签名 {color:red}
2.类选择器
.类名 {color:red}
3.id选择器
#id值 {color:red}
4.通用选择器
* {color:red}
"""
标签的嵌套可以使用特定的称呼来比喻:
父标签、儿子标签、祖先标签、后代标签、哥哥标签、弟弟标签
"""
1.后代选择器
div span {color: red} # 查找div内部所有的span标签
2.儿子选择器
div>span {color:red} # 查找div内部第一层级的span标签
3.毗邻选择器
div+span {color:red} # 同级别下面紧挨着的span标签
4.弟弟选择器
div~span {color:red} # 同级别下面所有的span标签
div,p,span {color:red}
#id,.c1,div {color:red}
div.c1>p#d1>span
"""
html标签可以有自己默认的属性也可以自定义属性
<a id='d1' class='c1' name='jason' pwd=123></a>
"""
[name]
[name='jason']
div[name='jason']
1.鼠标悬浮变色
a:hover {color:red}
2.input框聚焦(用户输入框变色)
input:focus {color:red}
今日内容概要
- 伪元素选择器
- 字体样式
- 颜色
- 背景、边框
- 盒子模型
内容详细
1、伪元素选择器
# 1.首字调整(也是一种文档布局的方式)
<style>
p:first-letter {
font-size: 48px; /*首字字体大小*/
color: #ff2f27;
}
</style>
# 2.在正常文本的前面通过css动态渲染文本(添加的特殊文本是无法直接选中的)
<style>
p:before {
content: '嘿嘿嘿';
color: red;
}
</style>
# 3.在文本的后面通过css动态渲染文本(添加的特殊文本是无法直接选中的)
<style>
p:after {
content: '嘿嘿嘿';
color: red;
}
</style>
"""
以后我们在编写爬虫程序爬取页面内容的时候如果没有正常文本
那么可能是因为伪元素选择器的问题
"""
# HTML文本内容：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>这个网站很牛逼</title>
<style>
p:after {
content: '嘿嘿嘿';
color: red;
}
</style>
</head>
<body>
<p>好好学习 天天向上</p>
</body>
</html>
2、选择器的优先级
"""
我们学习了三种css引入方式并且学习了很多选择器
那么如果出现多个选择器修改同一个标签样式 会优先参考谁的
研究基本选择器即可
标签选择器 类选择器 id选择器 行内选择器
"""
# 1.相同选择器不同导入方式
选择器系统遵循 就近原则
从上往下谁离标签更近谁说了算
# 2.不同选择器不遵循就近原则(是有优先级的)
行内选择器 > id选择器 > 类选择器 > 标签选择器
# HTML文本内容：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>这个网站很牛逼</title>
<style>
.c1 {
color: aqua;
}
#d1 {
color: blue;
}
p {
color: red;
}
</style>
<link rel="stylesheet" href="03%20first%20css%20file.css">
</head>
<body>
<p id="d1" class="c1" style="color: yellow">好好学习 天天向上</p>
</body>
</html>
3、字体相关
# 1.宽和高
height: 100px; # 高度
width: 200px; # 宽度
'''只有块儿级标签可以设置 行内标签无法设置'''
<style>
p {
height: 100px;
width: 200px;
}
span {
height: 50px;
width: 50px;
}
</style>
# 2.字体大小
font-size: 99px; # 字体大小一般有固定的大小参考(肉眼适应)
<style>
p {
font-size: 100px;
}
</style>
# 3.粗细
font-weight: bolder; # 字体加粗
font-weight: lighter; # 字体变细
<style>
p {
font-weight: lighter;
}
</style>
# 4.文本颜色
color:red; # 第一种
color:#4e4e4e; # 第二种
color:rgb(88,88,88) # 第三种
color:rgba(88,88,88,0.2) # 最后一个参数调整透明度(0-1 越小越透明)
<style>
p {
color:rgba(88,88,88,5)
}
</style>
# 5.文字对齐
text-align: center; # 居中展示
<style>
p {
text-align: center;
}
</style>
# 6.文字装饰(很常用!!!)
text-decoration: none; # 主要用于去除a标签默认的下划线
<style>
a {
text-decoration: none;
}
</style>
# 7.首行缩进
text-indent: 32px; # 默认文字大小是16px
<style>
p {
text-indent: 32px;
}
</style>
# HTML文本内容：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>这个网站很牛逼</title>
<style>
p {
text-indent: 32px;
}
</style>
</head>
<body>
<p>这城市那么大 孤独的人总是很晚回家</p>
<span>生活再苦 也要开开心心每一天</span>
<a href="https://fanyi.baidu.com/">点我</a>
</body>
</html>
4、背景属性
<style>
p {
background-color: red;
}
div {
background-color: yellow; # 背景颜色
height: 1000px; # 背景高度
width: 1000px; # 背景宽度
background-image: url("https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c583f2edc613f1be20fa415910b13ce3.jpg?thumb=1&w=234&h=614&f=webp&q=90"); # 背景图片
/*background-repeat: no-repeat;*/ # 是否平铺
/*background-repeat: repeat-x;*/ # 横向平铺
/*background-repeat: repeat-y;*/ # 纵向平铺
background-position:50px 50px; # 图片位置
}
</style>
"""多个属性名前缀相同 那么可以简写"""
background:orange url('url'); # 一个个编写即可 不写就默认
# 如何实时修改图片位置
浏览器找到标签的css代码 然后方向键上下按住即可动态调整
# HTML文件内容:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>这个网站很牛逼</title>
<style>
p {
background-color: red;
}
div {
background-color: yellow;
height: 1000px;
width: 1000px;
background-image: url("https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c583f2edc613f1be20fa415910b13ce3.jpg?thumb=1&w=234&h=614&f=webp&q=90");
/*background-repeat: no-repeat;*/
/*background-repeat: repeat-x;*/
/*background-repeat: repeat-y;*/
background-position:50px 50px;
}
</style>
</head>
<body>
<p>这城市那么大 孤独的人总是很晚回家</p>
<div></div>
</body>
</html>
5、边框属性
<style>
p {
/*border-left-color: red;*/
/*border-left-style: solid;*/
/*border-left-width: 50px;*/
/*多个属性有相同的前缀 一般都可以简写*/
/*border-left: 5px red solid;*/
/*border-top:orange 10px dotted;*/
/*border-right: black dashed 5px;*/
/*border-bottom: deeppink 8px solid;*/
/*多个属性有相同的前缀 一般都可以简写 再次简写*/
border: 5px red solid; /*上下左右一致*/
}
div {
height: 500px;
width: 500px;
border: 5px solid red;
border-radius: 50%; /*画圆*/
}
</style>
# HTML文件内容:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>这个网站很牛逼</title>
<style>
p {
/*border-left-color: red;*/
/*border-left-style: solid;*/
/*border-left-width: 50px;*/
/*多个属性有相同的前缀 一般都可以简写*/
/*border-left: 5px red solid;*/
/*border-top:orange 10px dotted;*/
/*border-right: black dashed 5px;*/
/*border-bottom: deeppink 8px solid;*/
/*多个属性有相同的前缀 一般都可以简写 再次简写*/
border: 5px red solid; /*上下左右一致*/
}
div {
height: 500px;
width: 500px;
border: 5px solid red;
border-radius: 50%;
}
</style>
</head>
<body>
<p>这城市那么大 孤独的人总是很晚回家</p>
<div></div>
</body>
</html>
6、display属性
<style>
div {
display: inline; /*块儿级转行内*/
}
span {
display: block; /*行内转块儿级*/
display: none; /*隐藏标签 页面上看不见也不再占用页面位置 但是通过浏览器查找标签是可以看到的 到后面学习django会讲跨站请求伪造(钓鱼网站)*/
}
p {
display: inline-block; /*具备块级标签可以修改长宽的特性 也具备行内标标签文本多大就占多大的特性*/
}
</style>
# HTML文件内容:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>这个网站很牛逼</title>
<style>
div {
display: inline;
}
span {
/*display: block;*/
display: none;
}
p {
display: inline-block;
}
</style>
</head>
<body>
<div>000</div>
<div>111</div>
<span>222</span>
<span>333</span>
<p>555</p>
<p>666</p>
</body>
</html>
7、盒子模型
"""
以快递盒为例
1.快递盒与快递盒之间的距离 外边距(标签之间的距离)
2.快递盒的厚度 边框
3.内部物品到盒子的距离 内边距(文本内容到边框的距离)
4.物品本身的大小 文本大小
"""
<style>
body {
margin: 0; /*body标签默认自带8px的外边距 在编写的时候应该提前去掉*/
}
div {
border: 5px solid black;
margin-top: 200px; /*距离浏览器页面上边框200px*/
margin-left: 200px;
margin-top: 200px;
margin-right: 200px;
margin-bottom: 2000px;
}
</style>
# 1.外边距(标签之间的距离 margin简写)
margin:0px; # 上下左右都一致
margin:10px 10px; # 第一个控制上下 第二个控制左右
margin:20px 10px 20px; # 上 左右 下
margin:10px 2px 3px 5px; # 上 右 下 左
# 2.内边距(文本内容到边框的距离 padding简写)
padding:0px; # 上下左右都一致
padding:10px 10px; # 第一个控制上下 第二个控制左右
padding:20px 10px 20px; # 上 左右 下
padding:10px 2px 3px 5px; # 上 右 下 左
# HTML文件内容:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>这个网站很牛逼</title>
<style>
body {
margin: 0;
}
div {
border: 5px solid black;
/*margin-left: 200px;*/
/*margin-top: 200px;*/
/*margin-right: 200px;*/
/*margin-bottom: 2000px;*/
padding-top: 50px;
padding-left: 50px;
padding-bottom: 500px;
padding-right: 500px;
}
</style>
</head>
<body>
<div>即使全世界都背弃了你 我依然坚定不移的站在你身后</div>
</body>
</html>
