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
今天的的学习内容就是这些了,学习最重要的就是温故而知新,日积月累,才会有提升,今天的自己永远会比昨天的自己更棒一些哦!看看今天的成果吧!
今天的天气有些下小雨,天气很凉快,所以更应该好好学习,向着更好地自己前进!!!
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 单线程的Redis速度为什么快?
· 展开说说关于C#中ORM框架的用法!
· Pantheons:用 TypeScript 打造主流大模型对话的一站式集成库
· SQL Server 2025 AI相关能力初探
· 为什么 退出登录 或 修改密码 无法使 token 失效