码迷,mamicode.com
首页 > Web开发 > 详细

浏览器+css基础+选择器+权重+匹配规则

时间:2021-04-07 11:06:40      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:end   适用于   mic   image   cad   render   外部   从右到左   层叠   

浏览器的组成:

shell+内核

shell:用户能看得到的界面就叫shell

内核:渲染rendering引擎和js引擎

现在主流拥有自己开发内核的浏览器:opera现在属于360和昆仑万维

技术图片

 

 CSS(cascading style sheet)层叠样式表

内联样式写法:

技术图片

 

 内部样式表:

 技术图片

 外部样式表:

 技术图片

 

 href:typertext reference:针对外部的引用

src:source:加载资源

 

这三种方式有权重的问题:分别是内联样式的优先级>内部样式的优先级>外部样式的优先级

 

在输入网址的那一刻,浏览器就在寻找相应的目的地下载相应的东西,加载的是html,css,javascript,图片

流程图:

可以看到浏览器会在加载的时候分别进行html下载和css样式的下载,

html会先形成dom树,而css会形成css规则树,当dom树和css规则树合并的时候就会形成渲染树;

渲染树进行布局,当进行页面动态交互就会重写渲染树,渲染树在重新布局

技术图片

 

id选择器和类选择器就不讲了,基本都会

 通配符选择器:适用于所有的标签:这其实不是很好 因为我们有时候需要p和h标签的外边距,这样写了就表示所有标签的外边距都没了,所以在定义的时候需要谨慎

技术图片

 

 属性选择器:[标签里面的属性]

技术图片

 

 

 !import:在css样式里面权重是最高的

 

技术图片

 class类选择器和属性选择器是同级的,谁在后面引用谁

正常选择器的权重比较:

技术图片

 

 

 派生选择器: 类与标签,类与类,标签与标签,id和标签,id和类,id不能和id

技术图片

 

 

 在企业里面不推荐这样写:因为id本来就唯一了,这样写渲染是没问题的,但是没什么意义

技术图片

 

 

 权重:*通配符的权重为0,标签/伪元素的权重为1,class/属性/伪类的权重值为10,id 的权重值是100,

内联样式的权重值是1000,!import的权重为正无穷

 

并列选择器:

技术图片

 

 

 

一个简单的样式案例:

 

 

 

 技术图片技术图片

 

 

 

今天学习第一个属性:outline:轮廓

聚焦的时候就不会有蓝色的轮廓了

技术图片

 

 

 设置outline的属性:

outline-color:轮廓颜色, 

outline-width:轮廓宽度:单位是px

去除轮廓:outline:none 现在企业开发只需要这个去除轮廓

outline-style:轮廓样式:

技术图片

 

浏览器对父子选择器的匹配规则:(算法里面树寻找规则:从右到左,从下到上)

技术图片

 

 

作业:

技术图片

 

浏览器+css基础+选择器+权重+匹配规则

标签:end   适用于   mic   image   cad   render   外部   从右到左   层叠   

原文地址:https://www.cnblogs.com/mahuablog/p/14619637.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有
迷上了代码!