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
- Python多元线性回归-sklearn.linear_model,并对其预测结果评估
- python 聚类分析实战案例:K-means算法(原理源码)
- JAVA面试题解惑——final、finally和finalize的区别
- Java内存管理
- python基础知识——内置数据结构(字典)
- mysql、mongodb、python(dataframe).聚合函数的形式,以及报错解决方案
- JavaScript计算水仙花数【可自定义范围】
- JSP简单入门(1)
- mongodb取出json,利用python转成dataframe(dict-to-dataframe)
- JSP简单入门(2)
- JSP简单入门(3)
- 物化视图相关的性能改进 (r7笔记第58天)
- Maven 核心原理解析(1)
- LeetCode——Two Sum
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- 移动直播集成问题
- TRTC功能咨询
- TKE集群pod镜像拉取失败定位思路
- Android内存管理(JVM 、DVM(dalvik) 、ART简单介绍)
- WordPress 站点地址被恶意篡改的防护方案讨论
- 猿实战06——不一样的地址管理
- Redis常用命令详解
- three.js 制作逻辑转体游戏(下)
- ROS机器人TF基础(坐标相关概念和实践)
- (在模仿中精进数据可视化01) 全国38城居住自由指数可视化
- js字符串/数组常用方法总结
- ThinkPHP5+mpdf 实现富文本生成 PDF文件
- nodejs使用readline逐行读取和写入文件
- go语言逐行读取和写入文件
- SpringBoot中Tomcat是如何启动的