基础篇CSS你知道多少？

Posted 2020-11-03 小小坤

前言

css就像女人的化妆品一样，化妆前后
对于web 前端来说，书写好css是不容易的一件事情。下面就让我把工作中遇到问题分享给大家。

css优先级

先看下图

优先级

选择器的优先权解释说明

1. 内联样式表的权值最高 1000。

2. ID 选择器的权值为 100。

3. Class 类选择器的权值为 10。

4. html 标签（类型）选择器的权值为 1。

5. !important权重最高 （注意）

例：

//css
#slides{
    color: #8A2BE2;/*权重值100*/
}
.slides{
    color: #000000;/*权重值10*/
}
div{
    color: #F2F2F2;/*权重值1*/
}
//HTML
<div class="slides" id="slides" style="color: red;/*权重值1000*/">
    slides
</div>
//js
setTimeout(function(){
    var d=document.getElementById(‘slides‘);
    d.style.color=‘blue‘;
},500);
//js改变的样式是属于 内联样式。

多重样式

比如页面有【内部样式】、【外联样式】权重相同则【内部样式】优先；
例：

<link rel="stylesheet" href="css/dome.css" />
<style type="text/css">
#slides{
    color: #8A2BE2;/*权重值100*/
}
</style>

注：

1. 如果两个【外联样式】同时含有相同权重class类名,则后者权重优先。
2. 如果两个【内部样式】同时含有相同权重class类名,则后者权重优先。

猜猜渲染结果是什么？

例1：

//css
.bg{
    background-color: #8A2BE2;
}
.slides{
    background-color: #000000;
}
//html
<div class="slides bg">
    slides
</div>
//渲染结果背景颜色是 bg 还是 slides？

//html
<div class=" bg slides">
    slides
</div>
//问：渲染结果背景颜色是 bg 还是 slides？

例2：

//css
.bg{
    background-image: url(img/1.png);
}
.slides{
    background-color: #000000;
}
//html
<div class="slides">
    slides
</div>
//问：（HTML内没有使用 bg  class类名）图片1.png会不会下载？

例3：

//css--内部样式
.slides{
    background-color: #000000;
}
//html
<div class="slides">
    slides
</div>
//js
setTimeout(function(){
    var dom=document,
    head = dom.getElementsByTagName(‘head‘)[0],
    link = dom.createElement(‘link‘);
    link.href = ‘css/dome.css‘;
    link.rel = ‘stylesheet‘;
    link.type = ‘text/css‘;
    head.appendChild(link); /*添加到HTML中*/
},500)
//‘css/dome.css‘的内容为
.slides{
    background-color: red;
}
//问：slides的背景颜色是什么？

例4：

问：css加载会不会影响dom解析？

Da 案

例1：slides  slides
  渲染样式跟<div>标签引用的class 前后顺序不相干，跟css中class 名称的顺序有关
例2：图片1.png会下载
  因为dom解析需要下载css，因此css中图片会下载
例3：red
  因为‘css/dome.css‘是后来使用js加载进去的，渲染引擎会等待加载完毕进行再次渲染。
例4：css加载不会影响dom解析，但它会影响dom渲染。因为只有所有css资源都下载完毕才会进行渲染，不然浏览器会一直重绘。

总结

深入学习css其实我们还需要更加努力，就像张鑫旭大佬一样，探索css世界把它读懂、学精。