20220709 第九小组于芮 css学习笔记（第三天）

小白成长日记——第三天

如果说成功有捷径，那一定是努力，努力不一定有结果，但不努力一定没有结果，今天也是需要努力的一天哦！

今天的学习内容主要是css层叠样式表，主要可以通过css对html做出更多好看的样式，分享一下今天的学习笔记吧，赶紧来看看吧！

css层叠样式表
样式是如何显示html元素，通常存储在样式表中，
行内样式（内联样式）当前样式不需要重负使用，优先级
style层叠样式表《background改变背景颜色，span一行标签，div一块》
内页样式（嵌入样式）
style标签中声明样式，根据标签命名，标签选择器（样式名字与标签名字一样）
声明一个样式并取名，（style中声明前面加一个. 需要样式的使用class类选择器，可以使用多个，样式名用空格隔开）
id选择器（style中不能重复，前面加上#，需要样式中使用id匹配）
外部样式——推荐使用（创建文件.css，不用写style html，head 中使用link rel=stylesheet,href=链接地址）

css选择器
并列选择器（style中写，后边加上,）
后代选择器（div里边的p,div p {} 无论嵌套多少层，都可以找到）
子类选择器（div>p 直接子标签 div里边的直接子元素，div里的其他标签）
跟着选择器（身后下边 div+p）
属性选择器（style中【属性名】{} 选中所有带有属性的标签还可【属性名=值】可具体选中【属性名~=值】选中页面上属性包含某个单词的所有元素）
伪类选择器（多用于超连接， :link{} :hover{} 鼠标悬停样式 :active{} 元素被激活，点击一瞬间的效果 :visited{}点过的）
重要—————— ：nth-child(数字){}选中当前的第几个（ul无序列表 ol有序列表）隔行变色：nth-child(2n){}
：checked{}（所有被选中的元素）

层叠性
类选择器优先级（style中排序，样式冲突，最终显示后一个，就近原则，如果样式不冲突，就不层叠，即样式都显示）>标签优先级>id优先级
继承性
子标签记成父标签的某些样式，例如文本颜色，背景颜色
优先级
权重：继承的权重为0，行内样式权重最高，如果权重相同，就近原则，！important更改权重，最大，大于行内样式
css常用单位
px像素（绝对单位，一个像素代表一个点，）
em(相对单位，参考她的父级元素。字体)
rem相对单位，由页面决定，改变浏览器页面的字号设置，页面的字号也会随之变化
%百分比，相对父级元素的比例

字体大小：font-size
字体样式：font-style 例如：微软雅黑
行高：line-height（字体大小是行高的一半，垂直居中）
粗细：font-weight
字体修饰：text-decoration（underline下划线 overline 上线 line-through 删除线）
字体颜色：color
字体倾斜：font-style：italic

背景
宽height
高width
background-color背景颜色（rgb三原色，可调色 rgba 三原色家加透明度（0-1）十六进制）
background-image背景图片url（链接地址）
background-repeat平铺，背景图片显示方式
background-size背景大小
background可简写

英文字
间距：letter-spacing

列表
无序列表 circle空心圆 lower-roman小写罗马数字（类型）
list-style-image：自定义类型
位置list-style-position

边框
边框线样式 border-style：solid（实线） double（双线） dotted()虚线
边框线的宽border-width
边框线颜色border-color
border可简写、border-bottom线面的边框线
border-radius半径（可分别设置）border-top-left-radius左上圆的半径
border-collapse折叠

区块属性
display：inline显示方式为行级
display：block显示方式为块级
display：none 隐藏
display：inline-block内联块（行级块）

盒子模型

width，height表示内容区的宽和高

内边距padding：本元素内部空出的距离
边框线border
外边距margin：距离上一个元素的距离
box-sizing设置盒子模型的尺寸计算方式：border-box

定位（父相子绝）
position：absolute绝对定位（当前文档流飘起来了，参照物是父级元素） left：距离左边多少 top：距离上边多少
relative相对定位（当前文档流不会飘起来，占有原有位置，参照物还是父级元素）
static（文档流【默认】）
fixed 浮动（漂浮，定住）
元素隐藏：visibility：hidden

overflow溢出样式
overflow：hidden超出部分影藏
overflow：scroll滚动条
overflow：visible显示
overflow：auto自动

浮动（浮动元素脱离原本的文档流，造成父元素的高度坍塌，包围图片，文本的div不占据空间，后面紧跟的元素会错乱）
float：left左浮动
style=“clear ：both”清除浮动

鼠标样式
cursor：pointer

今天的的学习内容就是这些了，学习最重要的就是温故而知新，日积月累，才会有提升，今天的自己永远会比昨天的自己更棒一些哦！看看今天的成果吧！