CSS
CSS层叠样式表
- CSS主要用来调节HTML标签的各种样式。
页面都是HTML构成的，页面上有相同的HTML标签，标签在不同的位置需要有不同的样式。怎么更改样式？ CSS就是专门干这个的。
但是 前提是我们可以分辨出标签，学会区分标签
区分标签的两大重要属性
1. 标签内含有class 属性
该属性用来分类，便于批量查询
2. 标签内含有 id 属性
该属性用于精确定位 方便精确查找
学习css的方法
需要掌握如何去查找标签，学习查找标签后学习调整样式才能进行调整样式的操作。
CSS常识
想掌握一门技术必须先了解它的构造。
1. css的注释语法
/*注释内容*/
2. CSS的语法结构
选择器 {
样式名:样式值;
样式名1:样式值1
}
3.引入css的多种方式
1.head内的 style 标签可以内部填写
<style> css语法 </style>
2.head内的 link 标签可以引入css文件
<link rel="stylesheet" href="css文件">
3.标签内部通过style属性
<lable style="样式名:样式值">性别:</lable>
CSS选择器
CSS选择器可以帮助我们快速找到标签修改样式
css基本标签
1.标签选择器
# 按照标签名直接查找标签
div {
color:rod;
}
2.类选择器
# 按照标签的ckass 值查找标签
.就是class的意思
.c1{
color:green;
}
类选择器可以批量查找相同class值的标签
3. id选择器
# 根据标签的id值精确查找标签
前面+井号d1 {
color:样式值;
}
4.通用选择器
# 直接选择页面所有的标签
* {
color:样式值:
}
CSS组合选择器
想要使用组合选择器先要理清楚选择器之前的关系与嵌套选择器中的关系
<div>div1
<div>div2
<p>p1</p>
</div>
<p>p2
<span>span1</span>
</p>
<span>span2</span>
</div>
1.对于div1来说 div2、p2、span2都是儿子
2.对于div2、p2、span2来说div1就是父亲
3.对于p1来说div2是父亲 div1是爷爷
4.对于span2来说div2、p2是哥哥
5.对于div2来说 p2、span2是弟弟 p1是儿子
6.对于p2来说 div2 是哥哥 span2 是弟弟 span1 是儿子
7.div1内部所有的标签无论层级都可以称之为是div1的后代
后代选择器
# 查找div标签的所有后代
div span {
样式名:样式值;
}
儿子选择器
# 查找div标签的所有名为span的儿子标签
"关键字 > 号"
div>span {
样式名:样式值;
}
毗邻选择器
# 查找div标签附近的span
"紧挨着的 不是紧挨的不行"
div+span {
样式名:样式值;
}
弟弟选择器
# 查找div标签的弟弟
div~span {
样式名:样式值;
}
组合使用
# 查找多个选择器
div,p,span {
样式名:样式值;
}
# 查找id值是d1的 或者class值是c1的，或者是span的
#d1,.c1,span{
样式名:样式值;
}
# 查找class值含有 c1 的div
div.c1 {
样式名:样式值;
}
# 查找id是d1的div
div#d1 {
样式名:样式值;
}
# 查找class c1类后代里面 含有c2 样式值的p标签
"注意空格 代表后代"
.c1 p.c2 {
样式名:样式值;
}
属性选择器
按照属性名查找
[username] {
样式名:样式值;
}
[username='jason'] {
样式名:样式值;
}
# 查找div标签内含有属性的
div[username='jason'] {
样式名:样式值;
}
伪类选择器
鼠标移动到标签上方，字体颜色修改成我们设定的颜色
a:hover {
样式名:样式值;
}
注意: a标签 点击过的为紫色，没点击过的默认是蓝色
a:visited 修改跳转字符颜色
a:active 修改点击瞬间的颜色
# 修改 input 输入框的颜色
input:focus {
background-color:样式值;
}
伪元素选择器
# 修改文本首个字符的大小
p:first-letter {
font-size: 48px;
color: red;
}
# 在文本开头添加内容 添加的内容无法被选中
p:before {
content:'思念';
color;blue;
}
# 在文本结尾添加内容
p:after {
content:'家乡';
color: red;
}
选择器之间的优先级
选择器之间是有优先级的。
# 选择器相同 导入方式不同
按照就近原则
# 选择器不同 导入方式相同
标签内部样式 > id选择器 > 类选择器 > 标签选择器
CSS样式调节
# 字体修改
font-family
p {
font-family:华文楷体；
}
# 字体大小
font-size
p {
font-size:30px;
}
# 字体粗细
font-weight: lighter; 变细
font-weight: bolder; 加粗
# 字体颜色
方式一: color
p {
color:brown;
}
------------------------------------------------------------------------------------
方式二： rgb
p {
color:rgb(128,0,128);
}
可以在128后面+ 0.1~1.0 代表颜色深度
# 可以根据色卡自行查看
------------------------------------------------------------------------------------
方式三:
p {
color:#bd961a; 十六进制
}
# 可以根据色卡自行查看
pycharm 有提供的取色器
截图也有
CSS修改文字的属性
# 文字对齐
text-align: center; 居中
text-align: left; 左对齐
text-align: right; 右对齐
text-indent: 20px; 首行缩进
# 文字装饰(重点)
"""
a标签默认带下划线， 并且还有颜色(没有点击时为蓝色， 点击之后为紫色)
"""
# 去除下划线
text-decoration: none;
# 删除线
text-decoration: line-through;
# 上边线
text-decoration: overline;
# 下边线
text-decoration: underline;
"""
可以使用浏览器做样式的动态调整
查找标签的css， 然后左键选中，通过方向键上下动态修改数值
"""
CSS修改背景样式
# 背景颜色
background-color: 颜色;
#背景图片
background-image:url("图片地址");
background-repeat:no-repeat; 不填充
background-repeat-x; 横向填充
background-repeat-y; 纵向填充
# 图片位置设置
background-position: top; 朝上
background-position; bottom; 最下
background-position: center center; 在浏览器中手动输入 px 方向键上下操作
left 左 right右
# 控制背景附着
background-attachment: fixed; 背景附着
"""
当多个属性名具有相同的后缀，我们就可以整合在一起， 写一个前缀名就可以
background: darkslategray url('1.png') no-repeat left top;
"""
