CSS
层叠样式表：给html标签添加样式的，让它变得更加好看
注析
/*单行注析*/
/*
多行注析
多行注析
多行注析
*/
通常我们在css样式的时候也会用注析来划定样式区域（因为HTML代码多所以对应的css代码也很多）
css语法结构
选择器 { 属性：值 }
css的三种引入方式
1style标签内部直接书写
<style>
h1{
color:red
}
</style>
2link标签引入外部css文件：(最正规的方式)
<link rel='stylesheet' href='mycss.css'>
3行内式（一般不用）
<h1 style=' color:green '>你好</h1>
css学习流程
1先学如何查找标签
css查找标签的方式你一定要学会
因为之后所有的框架封装的查找语句都是基于css来的
css选择器很简单很好学
2之后最学如何添加样式
css选择器
基本选择器
id选择器 #d1
类选择器 .c1
元素/标签选择器
通用选择器
组合选择器
后代选择器
div span {
color:red
}
儿子选择器
div>span{
color:red
}
毗邻选择器
div+span{ 同级别紧挨着的下面的第一个
color:red
}
弟弟选择器
dvi~span{ 同级别的下面所有
color:red
}
属性选择器
1含有某个属性
2含有某个属性并且有某个值
3含有某个属性并且有某个值的某个标签
属性选择器是以[ ]作为标志
分组与嵌套
div,p,span { 逗号表示并列关系
color:red
}
伪类选择器
link
hover悬浮态
active
visited
focus input框获取焦点
伪元素选择器
before和after通常都是用来浮动带来的影响
选择器的优先级
id选择器
类选择器
标签选择器
1选择器相同，书写顺序不同
就近原则
2选择器不同
行内 > id > 类 > 标签
精确度越高越有效
css属性相关
长宽
height
width
行内标签无法设置长宽
字体属性
font-family 字体
font-size 字体大小
font-weight
color
1直接写颜色英文
2写颜色编号
3写颜色的三基色rgb
4可以给颜色加透明度rgba
当你想要一些颜色的时候，可以利用现成的工具
1利用pycharm提供的取色器
2qq或者微信的截图功能
文字属性
文字对齐
text-align
文字装饰
text-decoration 用于给a标签去掉下划线
首行缩进
text-indent
背景属性
background-color: 指定填充背景的颜色
background-image: 引用图片作为背景
background-position: 指定元素背景图片的位置
background-repeat: 决定是否重复背景图片
background-attachment: 决定背景图是否随页面滚动
背景色
background-color
背景图片
当多个属性名前缀都是相同的情况下，一般都支持简写
边框
1、四个边框
border-left
border-right
border-top
border-bottom
2、四边相同边框border缩写
div{
border: 1px solid;
}
3、边框样式
边框颜色：border-color
边框厚度：border-width
边框样式：border-style
任何一个便签都有上下左右四个方向的边框
border-width
border-style
border-color
border-radius 50% 画圆
display属性
能够让标签具有自身没有的属性和特征
display
none 隐藏并且原来的位置也没了
inline
block
inline-block
盒子模型
margin外边距
border边框
padding内边距
content 内容
浏览器会自带8px的margin，一般情况下我们写页面的时候，上来就先将body的margin去掉
浮动
只要是前期页面布局一般都是用浮动来设计页面
能够让标签脱离正常的文档流漂浮到空中
浮动的元素没有块行内一说，标签多大浮动起来就占多大
float
浮动带来的影响
会造成父标签塌陷的问题
解决浮动带来的影响，推到步骤
1给自己加一个div设置高度
2利用clear属性
#d4{
clear : left 该标签的左边不能有浮动的元素
}
3通用的解决浮动带来的影响方法
在写html页面之前，先提前写好处理浮动带来影响的css代码
.clearfix:after {
content : ' ';
display : block;
clear : both;
}
之后只要标签出现了塌陷的问题就给该塌陷的标签加一个clearfix属性即可
溢出属性
overflow
visible 默认就是可见，溢出还是展示
hidden 溢出部分直接隐藏
scroll 设置上下滚动条形式
auto
定位(position)
静态：static
所有的标签默认都是静态的static，无法改变位置
相对定位：relative
如果你讲标签的position由static变成relative，那么标签就会由没有定位过的标签变成
已经定位过的标签，性质就改变了
绝对定位：absolute
相对于已经定位过的父标签做移动(如果没有父标签那么就以body为参照)
当你不知道页面其他标签的位置和参数，只给了你一个父标签的参数，让你基于该标签
左右定位
固定定位：fixed
相对于浏览器窗口固定在某个位置
浏览器是会优先展示文本内容，如果它发现文本内容被挡住了，会想方设法的找个位置展示出来
验证浮动和定位是否脱离文档流(原来的位置是否还保留)
脱离文档流：
浮动
绝对定位
固定定位
不脱离文档流：
相对定位
z-index模态框
百度登录页面，其实是三层结果
1底层是正常内容
2黑色透明区
3白色注册区域
透明度opacity
它不单单可以修改颜色的透明度还可以修改字体的透明度
rgba只能影响颜色
而opacity可以改变颜色和字体
当你在设计页面的时候，先用div划分区域，之后最填写基本内容，最后调试样式
在书写html代码的时候，class、id等属性最好起的见名知意
