css样式引入有哪几种方式,优先级是怎么样的?

html-css021

css样式引入有哪几种方式,优先级是怎么样的?,第1张

按优先级:前端优先读取正序。正规规范优先倒序。style= 这样肯定是最优的,但也是最不推荐的。前端标签直接写入。延伸阅读:读取优先,灵活使用,如大量页面,每页面都要设置。工作繁琐,大量写入增加代码量。不利优化。<style type="text/css">这样属于第二读取方式。直接写在对应的页面。延伸阅读:每页面都要设置。工作繁琐,大量写入增加代码量。不利优化。<link type="text/css" href=" 引用CSS文件 第三级。这全局引入.延伸阅读:全局CSS。可以分离代码及外部引入,简单快捷。也是现在都在用的。

两列布局(一侧固定宽度,一侧自适应),在工作中应该是经常使用到,可以说是前端基础了。这种两列布局的样式是我们在平时工作中非常常见的设计,同时也是面试中要求实现的高频题。很有必要掌握以备不时之需。这里总结了几种布局方式,欢迎大家补充。

修改 css 就可实现 位置调换 ,如下:

优点 : 交换 <div class="sidebar">固定</div> 、 <div class="main">自适应</div>顺序 ,实现主要内容优先加载渲染。

缺点 :absolute 定位,脱离文档流,当 sidebar 列的高度,超过 main 列的高度,会遮住下面的元素。需要给父盒子设置 overflow 属性。

也支持位置调换:

缺点 :不能实现主要内容优先加载渲染。

位置调换:

这里有一点需要注意: .sidebar 没有设置高度,会和 .container 保持一样的高度。 .container 的高度是被 .main 撑开的,也就是和 .main 高度一样。

位置调换:

这里 .main 和 .sidebar 高度不单独设置的话,也是同样的高度。

位置调换:

位置调换:

这里让 .main 成为 BFC 主要是消除 .sidebar 因 float 带来的影响,只要能让 .main 成为 BFC 就行。

此外留给大家一个思考题,还有没有其他方式呢?

css最好写在head头部里,也可以写在body里,写在头部的好处是先加载css,之后再body内容,不会使内容变形,如果放在body里,尤其放在body底部,那会让加载的内容无样式,等待css加载才显示样式,很不美观。