林大妈的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知识记录,不做详细铺开, ...
随机推荐
- Python学习3——Python的简单推导
列表推导是一种从其他列表创建列表的方式,类似于数学中的集合推导,列表推导的工作原理非常简单,类似于for循环.(以下代码均在IDLE实现) 最简单的列表推导: >>>[x*x for ...
- 基于 HTML5 WebGL 的民航客机飞行监控系统
前言 前些日子出差,在飞机上看到头顶的监控面板,除了播放电视剧和广告之外,还会时不时的切换到一个飞机航行的监控系统,不过整个监控系统让人感到有一点点的简陋,所以我就突发奇想制作了一个采用 HT for ...
- Sublime Text 格式化代码
1.添加快捷键 其实在sublime中已经自建了格式化按钮: Edit -> Line -> Reindent 只是sublime并没有给他赋予快捷键,所以只需加上快捷键即可 Prefer ...
- c++语言常用转义序列符号
\a 响铃 \n 换行符 \r 回车符 t 水平制表符(Tab键) \b 退格符(BackSpace键) \\ 反斜线 \' ...
- MySql(Linux)
百度云:链接:http://pan.baidu.com/s/1jHQtPau 密码:elr8 官方下载网址:http://dev.mysql.com/downloads/mysql/
- CentOS 下配置JDK
从官网上下载jdk到系统中,并解压好 tar –axvf jdk.tr.gz 1. PATH环境变量.作用是指定命令搜索路径,在shell下面执行命令时,它会到PATH变量所指定的路径中查找看是否能找 ...
- IntelliJ IDEA 2019.2最新解读:性能更好,体验更优,细节处理更完美!
idea 2019.2 准备 idea 2019.2正式版是在2019年7月24号发布的,本篇文章,我将根据官方博客以及自己的理解来进行说明,总体就是:性能更好,体验更优,细节处理更完美! 支持jdk ...
- JDK容器类Map源码解读
java.util.Map接口是JDK1.2开始提供的一个基于键值对的散列表接口,其设计的初衷是为了替换JDK1.0中的java.util.Dictionary抽象类.Dictionary是JDK最初 ...
- http协议(一):http协议基础知识
1 协议类型 l HTTP 超文本传输协议 通过浏览器和服务器进行数据交互,进行超文本(文本.图片.视频等)传输的规定 l HTTPS 安全超文本传输协议 l FTP 文本传输协议 l ...
- Spring 源码学习(一)-容器的基础结构
关注公众号,大家可以在公众号后台回复“博客园”,免费获得作者 Java 知识体系/面试必看资料 展示的代码摘取了一些核心方法,去掉一些默认设置和日志输出,还有大多数错误异常也去掉了,小伙伴想看详细代码 ...