文档章节

前端开发必须要了解的CSS原理

webxiaohua
 webxiaohua
发布于 2015/04/15 09:29
字数 1912
阅读 19
收藏 1
点赞 0
评论 0
CSS

      一、浏览器的发展与CSS

  网页浏览器主要通过 HTTP 协议连接网页服务器而取得网页, HTTP 容许网页浏览器送交资料到网页服务器并且获取网页。目前最常用的 HTTP 是 HTTP/1.1,这个协议在 RFC2616 中被完整定义。HTTP/1.1 有其一套 Internet Explorer 并不完全支援的标准,然而许多其他当代的网页浏览器则完全支援这些标准。网页的位置以 URL(统一资源定位符)指示,此乃网页的地址;以 http: 开首的便是通过 HTTP协议登陆。很多浏览器同时支援其他类型的 URL 及协议,例如 ftp: 是 FTP(档案传送协议)、gopher: 是 Gopher 及 https: 是 HTTPS(以SSL加密的HTTP)。

  早期的网页浏览器只支援简易版本的HTML。专属软件的浏览器的迅速发展导致非标准的 HTML 代码的产生。但随着 HTML 的成长,为了满足设计师的要求,HTML 获得了很多显示功能。随着这些功能的增加外来定义样式的语言越来越没有意义了。

  1994年哈坤·利提出了 CSS 的最初建议。伯特·波斯(BertBos)当时正在设计一个叫做 Argo 的浏览器,他们决定一起合作设计CSS。

  当时已经有过一些样式表语言的建议了,但 CSS 是第一个含有“层叠”的主意的。在 CSS 中,一个文件的样式可以从其他的样式表中继承下来。读者在有些地方可以使用他自己更喜欢的样式,在其他地方则继承,或“层叠”作者的样式,这种层叠的方式使作者和读者都可以灵活地加入自己的设计,混合各人的爱好。

  1997年初,W3C 内组织了专门管 CSS 的工作组,其负责人是克里斯·里雷。这个工作组开始讨论第一版中没有涉及到的问题,其结果是1998年5月出版的第二版要求。到2007年为止,第三版还未完备。

  二、浏览器是如何渲染页面和加载页面

  为什么有些网站打开的时候会加载会很慢,而且是整个页面同时显示的,而有些网站是从顶到下逐步显示出来的?要搞懂这个可以先从下面这个常规流程开始:

  1. 浏览器下载的顺序是从上到下,渲染的顺序也是从上到下,下载和渲染是同时进行的。

  2. 在渲染到页面的某一部分时,其上面的所有部分都已经下载完成(并不是说所有相关联的元素都已经下载完)。

  3. 如果遇到语义解释性的标签嵌入文件(JS脚本,CSS样式),那么此时IE的下载过程会启用单独连接进行下载。

  4. 并且在下载后进行解析,解析过程中,停止页面所有往下元素的下载。

  5. 样式表在下载完成后,将和以前下载的所有样式表一起进行解析,解析完成后,将对此前所有元素(含以前已经渲染的)重新进行渲染。

  6. JS、CSS中如有重定义,后定义函数将覆盖前定义函数。

  这里关键的是第2-5这三点。渲染效率与下面三点有关:

  1. CSS 选择器的查询定位效率

  2. 浏览器的渲染模式和算法

  3. 要进行渲染内容的大小

  三、什么是 CSS 以及 CSS 的优点

  什么是 CSS?

•CSS 是 Cascading Style Sheets(层叠样式表)的简称。
•CSS 语言是一种标记语言,它不需要编译,可以直接由浏览器解释执行(属于浏览器解释型语言)。
•在标准网页设计中 CSS 负责网页内容 (XHTML)的表现。
•CSS 文件也可以说是一个文本文件,它包含了一些 CSS 标记,CSS 文件必须使用 css 为文件名后缀。
•可以通过简单的更改 CSS 文件,改变网页的整体表现形式,可以减少我们的工作量,所以它是每一个网页设计人员的必修课。
•CSS是由W3C的CSS工作组产生和维护的。
  采用 CSS+DIV 进行网页重构,相对与传统的 TABLE 网页布局而具有以下3个显著优势:

  1. 表现和内容相分离。将设计部分剥离出来放在一个独立样式文件中,HTML文件中只存放文本信息。这样的页面对搜索引擎更加友好。

  2. 提高页面浏览速度。对于同一个页面视觉效果,采用 CSS+DIV 重构的页面容量要比 TABLE 编码的页面文件容量小得多,前者一般只有后者的1/2大小。浏览器就不用去编译大量冗长的标签。

  3. 易于维护和改版。你只要简单的修改几个 CSS 文件就可以重新设计整个网站的页面。

  四、浏览器对 CSS 的匹配原理

  浏览器CSS匹配不是从左到右进行查找,而是从右到左进行查找。比如之前说的 DIV#divBox p span.red{color:red;},浏览器的查找顺序如下:先查找 html 中所有 class=’red’ 的 span 元素,找到后,再查找其父辈元素中是否有p元素,再判断p的父元素中是否有 id 为 divBox 的 div 元素,如果都存在,则 CSS 匹配上。

  浏览器从右到左进行查找的好处是为了尽早过滤掉一些无关的样式规则和元素。Firefox 称这种查找方式为 keyselector(关键字查询),所谓的关键字就是样式规则中最后(最右边)的规则,上面的 key 就是 span.red。

  五、优化你的 CSS

  所谓高效的 CSS 就是让浏览器在查找 style 匹配的元素的时候尽量进行少的查找,下面列出一些我们常见的写 CSS 犯一些低效错误:

  1、不要在ID选择器前使用标签名

  一般写法:

DIV#divBox

  更好写法:

#divBox

  解释:因为ID选择器是唯一的,加上div反而增加不必要的 CSS 匹配。

  2、不要在 class 选择器前使用标签名

  一般写法:

span.red

  更好写法:

.red

  解释:同第一条,但如果你定义了多个.red,而且在不同的元素下是样式不一样,则不能去掉,比如你css文件中定义如下:

p.red{color:red;}  span.red{color:#ff00ff}

  如果是这样定义的就不要去掉,去掉后就会混淆,不过建议最好不要这样写

  3、尽量少使用层级关系

  一般写法:

#divBoxp.red{color:red;}

  更好写法:

.red{..}

  4、使用 class 代替层级关系

  一般写法:

#divBox ul li a{display:block;}

  更好写法:

.block{display:block;}

  5、在 CSS 渲染效率中 id 和 class 的效率是基本相当的

  class 会在第一次载入中被缓存,在层叠中会有更加好的效果,在根部元素采用id会具有更加好(id有微妙的速度优势)。

© 著作权归作者所有

共有 人打赏支持
webxiaohua
粉丝 9
博文 40
码字总数 25880
作品 0
普陀
程序员
WEB前端知识体系

前端简介 Web前端开发工程师是一个很新的职业,在国内乃至国际上真正开始受到重视的时间不超过5年。Web前端开发是从网页制作演变而来的,名称上有很明 显的时代特征。随着人们对用户体验的要...

痕無影 ⋅ 2015/08/31 ⋅ 1

一个初级的前端工程师需要知道些什么?

一个初级的前端工程师需要知道些什么? 按照我的想法,我把前端工程师分为了入门、初级、中级、高级这四个级别入门级别指的是了解什么是前端(前端到底是什么其实很多人还是不清楚的,底什么...

MyDear宸 ⋅ 2017/05/11 ⋅ 0

前端工程师的价值体现在哪里?

个人认为前端工程师正慢慢演变为产品工程师。WAP App,响应性UI等以HTML5技术为基础的开发将成为前端工程师的主要工作内容,解决产品跨平台跨设备的实现问题。Javascript,HTML,CSS这些前端...

web5 ⋅ 2014/06/11 ⋅ 0

2018年web前端学习路线图

前端的的技术一直在变化,更新和变革,现在基本是三驾(vue,angualr,react)主导整个前端框架,但是无论对于新人或者有经验的程序员,这些知识在必须掌握 前端架构 上图罗列了整个前端的一些技...

技术金三胖 ⋅ 01/02 ⋅ 0

各种前端招聘要求

爱前端 W3C标准什么的,必须要精通啊 HTML5、CSS3、JS神马的要熟悉 爱学习,爱分享 工作职责: 负责网站整体视觉感官,以及网站运营活动的创意和展现; 对页面进行优化,使用户操作更趋于人性...

岭南六少 ⋅ 2011/06/07 ⋅ 0

滴滴出行java面试9个问题,你会几个?

此前,w3cschool app开发者头条发布了网易java面经、阿里巴巴java面经、小米java面经。 今天给程序员小伙伴们分享的是滴滴出行java面经。 通常而言,在学习java过程中,首先要学会自己抓住重...

W3Cschool ⋅ 2017/12/08 ⋅ 0

设计师该如何学习前端

背景篇 在这个时代学习新东西,一定要善于使用 Bing/Google 等搜索引擎…网络上的资源非常丰富,自学能力也尤为重要,尤其是对于学习技术! 入门篇(HTML/CSS) 说起设计师希望学前端的初衷,...

Foundation ⋅ 2015/11/09 ⋅ 0

前端的知识体系如上,可以按以下思路进行系统的学习

  前端的知识体系如上,可以按以下思路进行系统的学习,以下是峰峰特别分享:   【基础知识】   1. html + css 这部分可以在w3cschool 在线教程上学习(网址:www.w3cschool.cn),边学边...

尹华峰博客 ⋅ 2017/06/14 ⋅ 0

零基础如何系统地学习前端开发?

原文出处:@张帅在地上 网站开发开发大致分为前端和后端,前端主要负责实现视觉和交互效果,以及与服务器通信,完成业务逻辑。其核心价值在于对用户体验的追求。可以按如下思路学习系统学习:...

@张帅在地上 ⋅ 2015/11/27 ⋅ 0

[Share]2008年国外最佳Web设计/开发技巧、脚本及资源总结

今天是2008年的最后一天,彬Go为大家奉上今年的最后大餐,这篇文章将为大家总结08年国外一些比较不错的前端开发相关的教程、技巧、脚本、实 例及工具资源等,有一些是曾经彬Go发表过的翻译文...

吞吞吐吐的 ⋅ 2017/10/05 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

C++内存映射文件居然是这样?!

内存映射文件大家都时不时听过,但它到底是个什么?赶紧来看看吧 内存映射文件到底是干嘛的呢?让我们先来思考下面几个问题: 如果您想读的内容大于系统分配的内存块怎么办?如果您想搜索的字...

柳猫 ⋅ 26分钟前 ⋅ 0

MySQL 数据库设计总结

规则1:一般情况可以选择MyISAM存储引擎,如果需要事务支持必须使用InnoDB存储引擎。 注意:MyISAM存储引擎 B-tree索引有一个很大的限制:参与一个索引的所有字段的长度之和不能超过1000字节...

OSC_cnhwTY ⋅ 今天 ⋅ 0

多线程(四)

线程池和Exector框架 什么是线程池? 降低资源的消耗 提高响应速度,任务:T1创建线程时间,T2任务执行时间,T3线程销毁时间,线程池没有或者减少T1和T3 提高线程的可管理性。 线程池要做些什...

这很耳东先生 ⋅ 今天 ⋅ 0

使用SpringMVC的@Validated注解验证

1、SpringMVC验证@Validated的使用 第一步:编写国际化消息资源文件 编写国际化消息资源ValidatedMessage.properties文件主要是用来显示错误的消息定制 [java] view plain copy edit.userna...

瑟青豆 ⋅ 今天 ⋅ 0

19.压缩工具gzip bzip2 xz

6月22日任务 6.1 压缩打包介绍 6.2 gzip压缩工具 6.3 bzip2压缩工具 6.4 xz压缩工具 6.1 压缩打包介绍: linux中常见的一些压缩文件 .zip .gz .bz2 .xz .tar .gz .tar .bz2 .tar.xz 建立一些文...

王鑫linux ⋅ 今天 ⋅ 0

6. Shell 函数 和 定向输出

Shell 常用函数 简洁:目前没怎么在Shell 脚本中使用过函数,哈哈,不过,以后可能会用。就像java8的函数式编程,以后获取会用吧,行吧,那咱们简单的看一下具体的使用 Shell函数格式 linux ...

AHUSKY ⋅ 今天 ⋅ 0

单片机软件定时器

之前写了一个软件定时器,发现不够优化,和友好,现在重写了 soft_timer.h #ifndef _SOFT_TIMER_H_#define _SOFT_TIMER_H_#include "sys.h"typedef void (*timer_callback_function)(vo...

猎人嘻嘻哈哈的 ⋅ 今天 ⋅ 0

好的资料搜说引擎

鸠摩搜书 简介:鸠摩搜书是一个电子书搜索引擎。它汇集了多个网盘和电子书平台的资源,真所谓大而全。而且它还支持筛选txt,pdf,mobi,epub、azw3格式文件。还显示来自不同网站的资源。对了,...

乔三爷 ⋅ 今天 ⋅ 0

Debian下安装PostgreSQL的表分区插件pg_pathman

先安装基础的编译环境 apt-get install build-essential libssl1.0-dev libkrb5-dev 将pg的bin目录加入环境变量,主要是要使用 pg_config export PATH=$PATH:/usr/lib/postgresql/10/bin 进......

玛雅牛 ⋅ 今天 ⋅ 0

inno安装

#define MyAppName "HoldChipEngin" #define MyAppVersion "1.0" #define MyAppPublisher "Hold Chip, Inc." #define MyAppURL "http://www.holdchip.com/" #define MyAppExeName "HoldChipE......

backtrackx ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部