dijiuzu

 

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

 

 

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

  今天的天气有些下小雨,天气很凉快,所以更应该好好学习,向着更好地自己前进!!!

posted on   于芮  阅读(49)  评论(0编辑  收藏  举报

相关博文:
阅读排行:
· 单线程的Redis速度为什么快?
· 展开说说关于C#中ORM框架的用法!
· Pantheons:用 TypeScript 打造主流大模型对话的一站式集成库
· SQL Server 2025 AI相关能力初探
· 为什么 退出登录 或 修改密码 无法使 token 失效

导航

统计

点击右上角即可分享
微信分享提示