前端之 CSS 知识点回顾

前言

总结收集CSS的一些关键知识点

设置样式的方式有几种

3种

  • 外部样式表,使用link引入一个外部css文件。
  • 内部样式表,在head标签中使用style标签设置样式。
  • 内联样式,在HTML元素中使用style属性定义样式

选择器都有哪些

  • 派生选择器(根据文档的上下文关系来确定某个标签的样式。li strong {font-style: italic;font-weight: normal;})
  • id选择器(id)
  • 类选择器(class)
  • 属性选择器(用DOM的属性进行声明)
  • 后代选择器(使用空格间隔,div p{})
  • 群组选择器(使用逗号分隔,div,p,a{})

选择器的优先级

  • 当同一个元素有多个声明的时候,优先级才会有意义。因为每一个直接作用于元素的CSS规则总是会接管/覆盖(take over)该元素从祖先元素继承而来的规则。
  • 当优先级与多个CSS声明中任意一个声明的优先级相等的时候,CSS中最后的那个声明将会被应用到元素上。
<style>
.classA{ color:blue;}

.classB{ color:red;}
</style>

<body>
<p class='classB classA'> 123 </p>
</body>

<p>标签内的文字的颜色是red,优先级相等的时候与文件中样式定义的先后顺序有关,即是后面的覆盖前面的,与在class定义中的先后关系无关。

  • 一般而言,选择器越特殊,它的优先级越高。也就是选择器指向的越准确,它的优先级就越高。

下面列表中,选择器类型的优先级是递增的:

  1. 派生选择器(例如, h1)和伪元素(例如, ::before
  2. 类选择器(例如,.example),属性选择器(例如, [type="radio"]),伪类(例如, :hover
  3. ID选择器(例如, #example
  4. 通配选择符(*), 关系选择符 (+, >, ~, ' ') 和否定伪类(:not()) 对优先级没有影响。(但是,在:not()内部声明的选择器是会影响优先级)。
  5. 给元素添加的内联样式 (例如, style="font-weight:bold") 总会覆盖外部样式表的任何样式 ,因此可看作是具有最高的优先级

例外的!important规则

  • 当在一个样式声明中使用一个!important规则时,此声明将覆盖任何其他声明。
  • 当两条相互冲突的带有 !important 规则的声明被应用到相同的元素上时,拥有更大优先级的声明将会被采用。
  • 使用 !important 是一个坏习惯,应该尽量避免,因为这破坏了样式表中的固有的级联规则 使得调试找bug变得更加困难了。

一些经验法则

  • 一定要优化考虑使用样式规则的优先级来解决问题而不是!important
  • 只有在需要覆盖全站或外部 css(例如引用的 ExtJs 或者 YUI )的特定页面中使用!important
  • 永远不要在全站范围的 css 上使用!important
  • 永远不要在你的插件中使用!important

木已成舟!怎样覆盖!important

  • 再添加一条带!important的CSS规则
  • 给选择器更高的优先级
  • 添加一样选择器,把它的位置放在原有声明的后面,让其覆盖
  • 干脆改写原来的规则,以避免使用!important

什么是CSS Hack

由于不同厂商的浏览器或某浏览器的不同版本(如IE6-IE11,Firefox/Safari/Opera/Chrome等), 对CSS的支持、解析不一样,导致在不同浏览器的环境中呈现出不一致的页面展现效果。 我们为了获得统一的页面效果,就需要针对不同的浏览器或不同版本编写特定的CSS样式, 我们把这个针对不同的浏览器/不同版本写相应的CSS的过程,叫做CSS Hack。

分类

  • 属性前缀法(即类内部Hack):例如 IE6能识别下划线_和星号*,IE7能识别星号*,但不能识别下划线_,IE6~IE10都认识\9,但firefox前述三个都不能认识。
  • 选择器前缀法(即选择器Hack):例如 IE6能识别*html .class{},IE7能识别*+html.class{}或者*:first-child+html .class{}
  • IE条件注释法(即HTML条件注释Hack):针对所有IE(注:IE10+已经不再支持条件注释): <!--[if IE]>IE浏览器显示的内容 <![endif]-->,针对IE6及以下版本:<!--[if lt IE 6]>只在IE6-显示的内容 <![endif]-->。这类Hack不仅对CSS生效,对写在判断语句里面的所有代码都会生效。

一般情况下,我们尽量避免使用CSS hack,但是有些情况为了顾及用户体验实现向下兼容,不得已才使用hack。

使用hack虽然对页面表现的一致性有好处,但过多的滥用会造成html文档混乱不堪,增加管理和维护的负担。

display:none与visibility:hidden的区别

  • display:none元素完全从渲染树中消失,渲染的时候不占据任何空间。
  • visibility: hidden不会让元素从渲染树消失,渲染师元素继续占据空间,只是内容不可见。
  • display: none是非继承属性,子孙节点消失由于元素从渲染树消失造成,通过修改子孙节点属性无法显示。
  • visibility: hidden是继承属性,子孙节点消失由于继承了hidden,通过设置visibility: visible;可以让子孙节点显示。
  • 修改常规流中元素的display通常会造成文档重排。修改visibility属性只会造成本元素的重绘。
  • 读屏器不会读取display: none;元素内容;会读取visibility: hidden;元素内容。

Sass、LESS、Stylus是什么

Sass、LESS、Stylus均是CSS预处理器。

CSS 预处理器用一种专门的编程语言,进行 Web 页面样式设计,然后再编译成正常的 CSS 文件,以供项目使用。CSS 预处理器为 CSS 增加一些编程的特性,无需考虑浏览器的兼容性问题。 它支持嵌套、变量、混入、继承、函数等。

优势

  • 结构清晰,便于扩展。
  • 可以方便地屏蔽浏览器私有语法差异。封装对浏览器语法差异的重复处理,减少无意义的机械劳动。
  • 可以轻松实现多重继承。
  • 完全兼容 CSS 代码,可以方便地应用到老项目中。

CSS的content属性

CSS的一个重要优势是它可以帮助你将文档内容和其样式分离。但是有时候在样式而非文档中定义一些内容也是很有用的。

CSS可以在元素的前后插入文本:在选择器的后面加上::before或者::after。在声明中,指定 content 属性,并设置文本内容。

可以通过将content 属性值设置为某个图片的URL,可以将图片插到元素的前面或后面。

rgba()和opacity的透明效果有什么不同

  • rgba()和opacity都能实现透明效果,但最大的不同是opacity作用于元素,以及元素内的所有内容的透明度,
  • rgba()只作用于元素的颜色或其背景色。(设置rgba透明的元素的子元素不会继承透明效果!)

原文发布于微信公众号 - AiSmart4J(smart4j)

原文发表时间:2019-06-23

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券