基础篇CSS你知道多少？

标签：顺序   type   tee   加载   不容易   影响   href   link   分享图片   

前言

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世界把它读懂、学精。

基础篇CSS你知道多少？

标签：顺序   type   tee   加载   不容易   影响   href   link   分享图片   

原文地址：https://www.cnblogs.com/xiaoxiaokun/p/9011800.html