2019.09.16 CSS选择器和引入方式

时间:2019-09-16
本文章向大家介绍2019.09.16 CSS选择器和引入方式,主要包括2019.09.16 CSS选择器和引入方式使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

1、CSS三种引入方式怎么使用?

  CSS三种引入方式是:

    1:内联样式,又有人称行内样式、行间样式、内嵌样式。是通过标签的style属性来设置元素的样式

<div>
    <p style="color: green">我是一个段落</p>
</div>

    2:内接样式,又称内嵌式,是将CSS代码集中写在HTML文档的head头部标签中,并且用style标签定义

<style type="text/css">
    /*写我们的css代码*/
    span{
    color: yellow;
    }
</style>

    3:外接样式,外接样式分两类,一类是链接式,第二类是导入式(具体看第二个代码)。链入式是将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中,通过link标签将外部样式表文件链接到HTML文档中,而导入式是通过将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中,通过CSS中的import将外部样式表文件链接到HTML文档中;

<link rel="stylesheet" href="./index.css">

    

<style type="text/css">
        @import url('./index.css');
</style> 

2、CSS引入方式 @import 和 link 的区别?

   区别:

    1.从属关系区别

     @import 是 CSS 提供的语法规则,只有导入样式表的作用; link 是HTML提供的标签,不仅可以加载 CSS 文件,还可以定义 RSS、rel 连接属性等。

    2.加载顺序区别
    加载页面时, link 标签引入的 CSS 被同时加载; @import 引入的 CSS 将在页面加载完毕后被加载。

    3.兼容性区别
     @import 是 CSS2.1 才有的语法,故只可在 IE5+ 才能识别; link 标签作为 HTML 元素,不存在兼容性问题。

    4.DOM可控性区别
    可以通过 JS 操作 DOM ,插入 link 标签来改变样式;由于 DOM 方法是基于文档的,无法使用 @import 的方式插入样式。

    5.权重区别
    link引入的样式权重大于 @import 引入的样式

3、解释回流重绘和重排?

  回流/重排:渲染树的一部分必须要更新且节点的尺寸发生了变化,会触发重排操作。每个页面至少在初始化的时候会有一次重排的操作;

  重绘:部分节点需要更新,但没有改变其形状,会触发重绘操作;

4、基础选择器的优先级?

  CSS的基础选择器有类选择器、id选择器、标签选择器。优先级是:id选择器  > 类选择器 >  标签选择器;在基础选择器的基础上,每个页面都有默认样式,并在特殊情况下会使用的继承和通配符,所以具体的优先级是:id选择器  > 类选择器 >  标签选择器  > 通配符 > 继承 > 默认样式;(特别注意的是:如果选择器后面如果写上最高优先级的!important则这个选择器的优先级最高,并且不能修改;)

5、层级选择器的使用?

   后代选择器:使用 空格 表示后代选择器。顾名思义,父元素的后代(包括儿子,孙子,重孙子) 

.container p{
    color: red;        
}
.container .item p{
    color: yellow;
}

  子代选择器:使用 > 表示子代选择器。比如div>p,仅仅表示的是当前div元素选中的子代(不包含孙子....)元素p。

.container>p{
     color: yellowgreen;
}

  相邻兄弟选择器:找的是紧挨着class属性为c1的标签的下面的标签

.c1+p{
    color:green;
}

  通用兄弟选择器:找的是class属性为c1的标签的下面的标签

.c1~p{
    color: green;
}

6、选择器权重的计算?

  由于CSS具有两大特性:继承性和层叠性; 

  继承性:给父级设置一些属性,子级继承了父级的该属性,这就是继承;

  层叠性:权重大的标签覆盖掉了权重小的标签,谁的权重大,浏览器就会显示谁的属性;所以要想优先显示某些样式就必须使用权重来显示属性:

  行内样式 1000> id选择器 100 > 类选择器 10 > 标签选择器 1 > 继承样式 0

    

原文地址:https://www.cnblogs.com/ranfon/p/11529588.html