回顾 CSS 选择符, 学习接入样式的更多方式.
一, 选择符
1. 种类
1 类型选择符: 直接的 html 标签名, 例如: body,p,div 等;
2 后代选择符: 空格, 例如: div p 选择 div 中的所有 p 元素后代;
3 ID 选择符: 形如 "#id", 例如 #introduction 选择 id 为 introduction 的元素(注: 理论上说 id 必须要唯一定义, 但浏览器为了向下兼容不好好写 HTML 代码的人, 会将所有使用此 ID 的元素都添加上该样式);
4 类选择符: 形如 ".class", 例如 .latest 选择所有 class 为 latest 的元素;
5 子选择符: 形如 ">", 例如 div> p 选择 div 中的第一个 p 元素直接后代;
6 相邻同辈选择符: 形如 "+", 例如 h2 + p 选择位于 h2 后面, 且与 h2 有相同的父元素的第一个 p 元素;
7 一般同辈选择符: 形如 "~", 例如 h2 ~ p 选择位于 h2 后面, 且与 h2 有相同的父元素的所有 p 元素;
8 通用选择符:"*", 表示选择全部元素(类比其他例如 SQL 语言的通配符);
9 属性选择符: 形如 "input[type="email"]", 例如 abbr[title] 选择所有拥有 title 属性的 abbr 元素 (注: 其中[] 中填入的属性值可以用类似 RegExp 的语法匹配, 例如: a[href^="http:"] 表示选择所有 href 开头为 http: 的 a 元素);
10 伪元素: 带有双冒号 "::" 的选择器, 例如 p::first-letter 选择 p 元素中的第一个字符(谨慎地使用伪元素, 因为如果用它们插入一些有实质性交互意义的内容时, 如果 CSS 加载不正确就会产生很大的麻烦, 而且屏幕阅读器没有统一方法解释它们);
101 伪类: 带有单冒号 ":" 的选择器, 例如 div:hover 表示当鼠标在 div 上移动时给 div 应用上这个样式(同样, 由于键盘, 移动端等不一定真的有悬停状态, 请也不要将有实质性交互意义的内容添加到: hover 的元素中).
二, 层叠与继承
1. "层叠" 样式表
之所以 CSS(Cascading Style Sheet)要叫 CSS, 是因为它具有层叠的特点. 这似乎是废话, 但 CSS 中层叠的特性保证了它在代码多次复用时正常地执行. 所谓的层叠, 实际上就是根据代码的前后顺序, 优先级等因素来最终确定哪些样式被覆盖掉, 哪些被应用上.
2. 继承
有些属性, 会被应用它们的元素后代继承, 例如文本颜色, 字体大小等. 继承使 CSS 代码被复用, 而层叠保证了复用状态下样式能按照期望正常显示.
3. 优先级
简单地说, 优先级分成几个等级, 相同优先级的选择器相连会使优先级更高, 但在 CSS 内部的实现中, 低优先级的选择器无论有多少个连在一起, 最终的组成的选择器优先级也不会比一个高优先级的选择器高.
1 最高优先级: 内联样式;
2 排名第二: ID 选择器;
3 排名第三: class 选择器, 伪类选择器以及属性选择器(三者相等);
4 排名第四: 类型选择器, 伪元素选择器(二者相等);
5 排名第五: 继承父元素而得到的样式.
三, 应用样式, 提升性能
1. 应用样式的方法:1 在 <style></style> 中定义;2 使用 <linkhref="xxx.css" /> 标签从外部引入;3 @import 'xxx.css' 从外部引入.
2. 提升性能
要想减少页面的 "上屏速度", 一是从网络上优化, 二是从减小文件大小上做文章, 三是从页面自身加载顺序上想办法. 因此:
1 减少 HTTP 请求
我们知道, 每一个文件的请求都会单独发送 HTTP 请求, 然后浏览器花一定的时间进行下载, 并渲染页面. 因此, 我们要尽量少地使用 @import , 并将 CSS 文件数量尽可能减少至一两个;
2 压缩文件
写过 CSS 的都知道, CSS 的很多属性和值都是重复的, 因此它压缩的比率很高, 一个 CSS 文件压缩后会减少 70%~80% 的大小. 这显然可以减少带宽的占用, 很多 web 服务器会在浏览器的支持下启用自动压缩线上资源. 同时, 要让服务器帮你设置较长的 CSS 文件缓存时间. 压缩文件和合理缓存内容是提升网站性能最重要的两件事;
3 老生常谈, 不让 JavaScript 脚本加载阻塞页面渲染
初学时常常看到网络上大家的代码中, <script> 标签都会放在 HTML 中 body 元素的末尾, 很多人只是说这样可以提升页面加载速度却没有讲清楚为什么. JavaScript 的下载与执行过程是比较缓慢的, 而浏览器在解释 HTML 的过程中, 加入将脚本放在了位于首部的 <head> 标签中, 就会先忽视下面 body 部分的渲染, 在白屏状态下先下载执行 JavaScript, 如此用户的体验极差. 因此古典的做法是将 <script> 标签往后摆. HTML5 中 <script> 标签加上了两个属性: async 和 defer, 它们的作用分别是 1. 使脚本异步加载, 完毕时阻塞 HTML 解析并执行脚本 2. 使脚本异步加载, 等 HTML 加载完毕后执行脚本. 但这两个属性是 HTML5 的属性, 意味着 IE10 以及更早不会支持.
总结: 我们认识了常用的 CSS 选择符和一些新颖的便于操作的选择符, 另外梳理了不同选择符之间的优先级关系, 最后探讨了该如何提升网站页面加载的速度.
来源: https://www.cnblogs.com/BlogOfMotherLyn/p/11421101.html