2022-07-10 第二小组 张宁杰 学习笔记
-
学习收获
今日学习了CSS基础,通过一天的学习,我明白了对于前端来说,HTML好比建造一座房子的架构,CSS就好比为房子粉刷墙壁(即为美化)。没有CSS,HTML页面毫无美观性。如何在众多样式中找到目标样式加以应用,是学习CSS的重中之重。 -
知识点
什么是CSS?
CSS层叠样式表:网页美化
如何嵌入?
样式如何显示html元素?样式通常是存储在样式表中,美化的过程就是把样式表添加到html元素中
定义CSS样式的方法:
(1)行内样式(好不好?)
如果当前样式不需要重复使用,可以用行内样式
(2)网页样式(嵌入样式)
CSS选择器
(1)标签选择器
(2)类选择器:声明样式的时候需要用一个英文的,选择样式通过class属性,不需要书写,一个标签元素是可以选择多个样式
(3)id选择器:声明样式需要用一个#号,对应元素的id要匹配
(4)并列选择器
(div,p)选中div和p;
(div p)后代选择器div和里的p都被选中,无论嵌套多少层都能找到;
(div>p)直接子标签p,只要p的上一级是div就能选中
(div+p)选中紧跟着div的p
[type]:选中页面上所有带有type属性的标签
[type=text]:选中页面上所有带有type=text属性的标签
[type~=t]:选中页面上type属性包含单词的所有元素
伪类选择器::link,:hover,:active,:vistited,:
nth-child(x):选中第几个元素
checked:选中所有被选中的元素
......
CSS层叠样式表:
层叠性:
1.如果样式冲突,遵循的是就近原则,哪个样式离结构近,就选哪个
2.如果样式不冲突,就不层叠
继承性:子标签会继承父标签的某些样式,文本的颜色,字号,背景颜色…
优先级:类>标签>id
权重:
1.继承的样式权重为最低
2.行内样式权重最高
3.如果权重相同,就近原则
4.!important权重为无限大
CSS常用的单位:
1、px像素:绝对单位,一个像素代表一个点。例如:100px*100px的正方形,宽和高度为100个点。
2、em是相对单位。它会参考他的父级元素。字体,父级元素的字体是16px,要设置元素的字体大小为2em,当前元素的字体大小就是32Px。
3、rem相对单位。由页面决定。当我们改变了浏览器的字号设置,页面的字体也会随之发生改变。应用在老人版。
4、百分比:相对于父级元素的比例
- 掌握情况
能看懂基本的CSS样式表,但是对CSS的标签和属性的运用需要大量实践和练习;对盒子模型和块级元素的定位和浮动不够熟练
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步