这是我参与「第五届青训营 」伴学笔记创作活动的第 2 天
CSS是什么? CSS(Cascading Style Sheets)层叠样式表,用来定义页面元素的样式比如:设置字体的颜色、位置、大小或者添加动画效果等。
页面中使用CSS一般有三种方式,第一种是外链通过Link引入一个单独的CSS文件,第二种就是通过style标签直接放到HTML文件里,第三种是内联样式,每个标签都有一个属性叫style属性css可以直接写到style属性里面,不用再去写选择器,写到哪个标签里就是哪个标签的样式。
CSS是如何工作的? 首先页面加载HTML然后解析HTML,再创建DOM树,在解析HTML是如果遇到外链或style标签,页面就会加载CSS,然后解析CSS对DOM节点添加样式,最后渲染成一个页面。 选择器,有通配选择器*{}、标签选择器如h1{}、id选择器id{}、类选择器 .h1{}、属性选择器如[disable]{}、伪类选择器有状态伪类如 :hover、结构伪类如 :first-child。组合选择如直接组合、后代组合、亲子组合、兄弟选择器、相邻选择器。选择器组可以给多个标签设置同一种样式。 rgb可以表示颜色,rgba后面的a表示透明度,当a为1是表示不透明。
字体font-family后面可以跟很多字体,当浏览器没有字体的时候会按照顺序依次使用font-family后面的字体,他们用逗号隔开。一般建议在最后面加一个通用字体族,以防浏览器在匹配字体的时候全部没有的时候页面显示的字体不至于和期望值过大。
在HTML中多个空格或换行会被合并成一个,这样有的时候不利于我们展示页面,所以CSS提供了一个属性叫white-space它有几个值normal表示默认、nowrap表示强制不换行如果超出页面显示范围会出现一个滚动条、pre表示保留所有就是标签里怎么写的页面就怎么展示,pre-wrap一行内显示不出来会自动换行保留空格,pre-line表示合并空格但是保留换行。
选择器的特异度(Specificity)选择器越特殊它的优先级就会越高。样式继承,某些属性会自动继承其父元素的计算值,除非显示指定一个值。一般情况下文字属性可以继承,盒模型的属性不会继承。
css求值过程
布局是什么? 确定内容大小和位置的算法,宜居元素、容器、兄弟节点和内容等信息来计算
display属性的可选值有:block块级盒子、inline行级盒子、inline-block本身是行级,可以放在行盒中,可以设置宽高,作为一个整体不会被拆分成多行、none排班是完全被忽视
行级排版上下文(IFC)
块级排板上下文
Flex Box 是什么?
定位
思考和总结
今天学习了CSS,因为之前已经学习过CSS了今天在听老师讲了一遍还是收获了蛮多的知识,CSS是页面样式的管理者,页面的好看与否都是要看CSS写的是否漂亮,但是CSS的知识点也是非常多的,如果每个都掌握的话要花费的时间是非常庞大的,所以我们要掌握常用的知识点,如IFC、BFC、Flex布局、float、Grid布局等,然后合理利用MDN和W3C CSS标准去查阅知识点。