林大妈的CSS知识清单（一）添加样式
回顾CSS选择符，学习接入样式的更多方式。
一、选择符
1. 种类
① 类型选择符：直接的HTML标签名，例如： body、p、div 等；
② 后代选择符：空格，例如： div p 选择div中的所有p元素后代；
③ ID选择符：形如“#id”，例如 #introduction 选择id为introduction的元素（注：理论上说id必须要唯一定义，但浏览器为了向下兼容不好好写HTML代码的人，会将所有使用此ID的元素都添加上该样式）；
④ 类选择符：形如“.class”，例如 .latest 选择所有class为latest的元素；
⑤ 子选择符：形如“>”，例如 div > p 选择div中的第一个p元素直接后代；
⑥ 相邻同辈选择符：形如“+”，例如 h2 + p 选择位于h2后面，且与h2有相同的父元素的第一个p元素；
⑦ 一般同辈选择符：形如“~”，例如 h2 ~ p 选择位于h2后面，且与h2有相同的父元素的所有p元素；
⑧ 通用选择符：“*”，表示选择全部元素（类比其他例如SQL语言的通配符）；
⑨ 属性选择符：形如“input[type="email"]”，例如 abbr[title] 选择所有拥有title属性的abbr元素（注：其中[]中填入的属性值可以用类似RegExp的语法匹配，例如： a[href^="http:"] 表示选择所有href开头为http:的a元素）；
⑩ 伪元素：带有双冒号“::”的选择器，例如 p::first-letter 选择p元素中的第一个字符（谨慎地使用伪元素，因为如果用它们插入一些有实质性交互意义的内容时，如果CSS加载不正确就会产生很大的麻烦，而且屏幕阅读器没有统一方法解释它们）；
⑩① 伪类：带有单冒号“:”的选择器，例如 div:hover 表示当鼠标在div上移动时给div应用上这个样式（同样，由于键盘、移动端等不一定真的有悬停状态，请也不要将有实质性交互意义的内容添加到:hover的元素中）。
二、层叠与继承
1. “层叠”样式表
之所以CSS（Cascading Style Sheet）要叫CSS，是因为它具有层叠的特点。这似乎是废话，但CSS中层叠的特性保证了它在代码多次复用时正常地执行。所谓的层叠，实际上就是根据代码的前后顺序、优先级等因素来最终确定哪些样式被覆盖掉，哪些被应用上。
2. 继承
有些属性，会被应用它们的元素后代继承，例如文本颜色、字体大小等。继承使CSS代码被复用，而层叠保证了复用状态下样式能按照期望正常显示。
3. 优先级
简单地说，优先级分成几个等级，相同优先级的选择器相连会使优先级更高，但在CSS内部的实现中，低优先级的选择器无论有多少个连在一起，最终的组成的选择器优先级也不会比一个高优先级的选择器高。
① 最高优先级：内联样式；
② 排名第二：ID选择器；
③ 排名第三：class选择器、伪类选择器以及属性选择器（三者相等）；
④ 排名第四：类型选择器、伪元素选择器（二者相等）；
⑤ 排名第五：继承父元素而得到的样式。
三、应用样式，提升性能
1. 应用样式的方法：① 在 <style></style> 中定义；② 使用 <link href="xxx.css" /> 标签从外部引入；③ @import 'xxx.css' 从外部引入。
2. 提升性能
要想减少页面的“上屏速度”，一是从网络上优化，二是从减小文件大小上做文章，三是从页面自身加载顺序上想办法。因此：
① 减少HTTP请求
我们知道，每一个文件的请求都会单独发送HTTP请求，然后浏览器花一定的时间进行下载，并渲染页面。因此，我们要尽量少地使用 @import ，并将CSS文件数量尽可能减少至一两个；
② 压缩文件
写过CSS的都知道，CSS的很多属性和值都是重复的，因此它压缩的比率很高，一个CSS文件压缩后会减少70%~80%的大小。这显然可以减少带宽的占用，很多Web服务器会在浏览器的支持下启用自动压缩线上资源。同时，要让服务器帮你设置较长的CSS文件缓存时间。压缩文件和合理缓存内容是提升网站性能最重要的两件事；
③ 老生常谈，不让JavaScript脚本加载阻塞页面渲染
初学时常常看到网络上大家的代码中， <script> 标签都会放在HTML中body元素的末尾，很多人只是说这样可以提升页面加载速度却没有讲清楚为什么。JavaScript的下载与执行过程是比较缓慢的，而浏览器在解释HTML的过程中，加入将脚本放在了位于首部的 <head> 标签中，就会先忽视下面body部分的渲染，在白屏状态下先下载执行JavaScript，如此用户的体验极差。因此古典的做法是将 <script> 标签往后摆。HTML5中 <script> 标签加上了两个属性：async和defer，它们的作用分别是1. 使脚本异步加载，完毕时阻塞HTML解析并执行脚本2.使脚本异步加载，等HTML加载完毕后执行脚本。但这两个属性是HTML5的属性，意味着IE10以及更早不会支持。
总结：我们认识了常用的CSS选择符和一些新颖的便于操作的选择符，另外梳理了不同选择符之间的优先级关系，最后探讨了该如何提升网站页面加载的速度。
林大妈的CSS知识清单（一）添加样式的更多相关文章
- 林大妈的CSS知识清单（二）可见格式化模型（内含margin塌陷与浮动闭合的解决方案）
盒模型.浮动和定位是CSS中最重要的三个概念.它们共同决定了一个元素在页面中以怎样的形式进行排布与显示. 一.盒模型 1. 定义 盒模型是CSS的核心概念.一个页面中,所有的元素(不管他最终显示是圆形 ...
- 从零开始学习html（六）开始学习CSS，为网页添加样式
一.认识CSS样式 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type&quo ...
- 林大妈的JavaScript基础知识（一）：JavaScript简史
前言:做一名Web设计师是一件令人兴奋的事.在Web技术中,JavaScript是一个经历从被人误解到万众瞩目的巨大转变,在历史的冲击中被留存下来的个体.因为JavaScript的引导,Web开发也从 ...
- 林大妈的JavaScript基础知识（三）：JavaScript编程（3）原型
在一般的编程语言中,我们使用继承来复用代码,做成良好的数据结构.而在JavaScript中,我们使用原型来实现以上的需求.由于JavaScript专注于对象而摒弃了类,我们要明白原型和继承的确是有差异 ...
- 你该学点HTML/CSS知识的9大理由
每个人都应该学写代码——这一观点简直就是铺天盖地地映入我们眼帘.或许你会莫名其妙,程序员学代码那是理所应当,但是作为一个作家.营销人员.财务工作者甚至是工人,为什么也需要学习代码呢? 好吧,下面我会告 ...
- css知识总结
---# 学习目标:> 1. 学会使用CSS选择器> 2. 熟记CSS样式和外观属性> 3. 熟练掌握CSS各种选择器> 4. 熟练掌握CSS各种选择器> 5. 熟练掌握 ...
- vue实现购物清单列表添加删除
vue实现购物清单列表添加删除 一.总结 一句话总结: 基础的v-model操作,以及数组的添加(push)删除(splice)操作 1.checkbox可以绑定数组,也可以直接绑定值? 绑定数组就是 ...
- 【springboot】给你一份Spring Boot知识清单
目录: 一.抛砖引玉:探索Spring IoC容器 1.1.Spring IoC容器 1.2.Spring容器扩展机制 二.夯实基础:JavaConfig与常见Annotation 2.1.JavaC ...
- CSS知识回顾--读《CSS 那些事儿》笔记
由于之前有了解过CSS的相关知识,有了一定的基础,所以读起<CSS 那些事儿>不是很有难度,况且我现在读起来时,CSS3和HTML5比较流行,这里只是记录一些CSS知识记录,不做详细铺开, ...
随机推荐
- 【MySQL】（二）InnoDB存储引擎
InnoDB是事务安全的MySQL存储引擎,设计上采用了类似于Oracel数据库的架构.通常来说,InnoDB存储引擎是OLTP应用中核心表的首选存储引擎.同时,也正是因为InnoDB的存在,才使My ...
- 《VR入门系列教程》之11---基本几何-材质-光照
网格.多边形.顶点 绘制3D图形有许多方法,用的最多的是用网格绘制.一个网格由一个或多个多边形组成,这些多边形的顶点都是三维空间中的点,它们具有x.y.z三个坐标值.网格中通常采用三角形和四边 ...
- Redis 学习笔记（篇六）：数据库
Redis 是一个使用 C 语言编写的 NoSql 的数据库,本篇就讲解在 Redis 中数据库是如何存储的?以及和数据库有关的一些操作. Redis 中的所有数据库都保存在 redis.h/redi ...
- python课堂整理13---函数的作用域及匿名函数
name = 'alex' def foo(): name = 'jinling' def bar(): print(name) return bar a = foo() print(a) 阅读上述代 ...
- （原创）将Datatable数据按照Excel模板格式导出
最近遇到一个问题,就是导出数据的时候需要自定义的表头,如图 如果自己用代码写表头的话,可能会有点复杂,而且代码量很多,所以我就想了一个办法,直接在Excel里面把表头定义好,然后把数据写入Excel模 ...
- Appium自动化测试环境搭建
前言 Appium是一个开源的自动化测试框架,支持跨平台,支持多种编程语言,可用于原生,混合和移动web应用程序,使用webdriver驱动ios,android应用程序.那么为了学习app自动化测试 ...
- Scrapy框架安装失败解决办法
安装报错信息 正常安装: pip3 install scrapy 出现报错信息如下: 两种解决办法 第一种方法 最根本得解决办法 需要我们安装 Microsoft Visual C++ 14.0 ...
- zmnXAglTcg
#include <map>#include <cmath>#include <stack>#include <queue>#include <l ...
- 初试kafka消息队列中间件二（采用java代码收发消息）
初试kafka消息队列中间件二(采用java代码收发消息) 上一篇 初试kafka消息队列中间件一 今天的案例主要是将采用命令行收发信息改成使用java代码实现,根据上一篇的接着写: 先启动Zooke ...
- Netty学习(四)-TCP粘包和拆包
我们都知道TCP是基于字节流的传输协议.那么数据在通信层传播其实就像河水一样并没有明显的分界线,而数据具体表示什么意思什么地方有句号什么地方有分号这个对于TCP底层来说并不清楚.应用层向TCP层发送用 ...