2022-07-10 第二小组 张宁杰 学习笔记

  1. 学习收获
    今日学习了CSS基础,通过一天的学习,我明白了对于前端来说,HTML好比建造一座房子的架构,CSS就好比为房子粉刷墙壁(即为美化)。没有CSS,HTML页面毫无美观性。如何在众多样式中找到目标样式加以应用,是学习CSS的重中之重。

  2. 知识点
    什么是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、百分比:相对于父级元素的比例

  1. 掌握情况
    能看懂基本的CSS样式表,但是对CSS的标签和属性的运用需要大量实践和练习;对盒子模型和块级元素的定位和浮动不够熟练
posted @   贵妃就是贵妃  阅读(23)  评论(1编辑  收藏  举报
努力加载评论中...
点击右上角即可分享
微信分享提示