SlideShare a Scribd company logo
1 of 111
Download to read offline
CSS,[object Object],CASCADE,[object Object],[译],[object Object]
CSS规则的,[object Object],背景资料,[object Object]
CSS规则 告诉HTML如何,[object Object],渲染元素,[object Object],h2,[object Object],{,[object Object],color: blue;,[object Object],margin: 1em;,[object Object],},[object Object]
选择器"选择" HTML 中将,[object Object],被定义样式的元素.,[object Object],h2,[object Object],选择器,[object Object],{,[object Object],	color: blue;,[object Object],	margin: 1em;,[object Object],},[object Object]
声明告诉浏览器,[object Object],如何定义元素的样式.,[object Object],h2,[object Object],{,[object Object],color: blue;,[object Object],margin: 1em;,[object Object],声明,[object Object],},[object Object]
属性是元素样式的,[object Object],各个角度,[object Object],h2,[object Object],{,[object Object],color: blue;,[object Object],属性,[object Object],margin: 1em;,[object Object],},[object Object]
属性值是属性对应的,[object Object],具体样式,[object Object],h2,[object Object],{,[object Object],color:        blue;,[object Object],margin:     1em;,[object Object],属性值,[object Object],},[object Object]
样式表的,[object Object],类型,[object Object]
HTML 文档可以应用,[object Object],三种样式,[object Object]
浏览器样式,[object Object],浏览器给所有页面应用的样式, ,[object Object],也称浏览器"默认"样式.,[object Object]
用户定义样式,[object Object],大部分现代浏览器允许用户,[object Object],在浏览器中应用他们自定义,[object Object],的样式,[object Object]
作者样式,[object Object],站点作者可以对HTML文档,[object Object],应用一个或多个样式,[object Object]
作者样式,[object Object]
作者可以通过三种方法给,[object Object],HTML文档添加样式,[object Object]
内联样式通过HTML代码的,[object Object],style属性应用到元素,[object Object],使用style属性的内联样式,[object Object],<body>,[object Object],<h2 style=“color: red;”>,[object Object],Heading here,[object Object],</h2>,[object Object],<p>,[object Object]
头部样式位于文档的头部,[object Object],的style元素里,[object Object],<style>元素里的头部样式,[object Object],<head>,[object Object],<title>Document title</titl,[object Object],<style type="text/css" medi,[object Object],h2 { color: blue; },[object Object],</style>,[object Object]
外部样式通过link或者,[object Object],@import实现,[object Object],使用link元素的外部样式,[object Object],<title>Document title</titl,[object Object],<link rel="stylesheet",[object Object],href=”my-styles.css”,[object Object],type=”text/css",[object Object],media="screen” />,[object Object]
CSS 规则,[object Object],超负荷了!,[object Object]
浏览器需要处理来自浏览器, ,[object Object],用户和作者样式的CSS规则.,[object Object]
浏览器还需要处理来自各种,[object Object],作者样式(外部, 头部和内联),[object Object],的CSS规则.,[object Object]
某些时候, 浏览器还需要处理,[object Object],冲突的CSS规则.,[object Object]
“冲突”是什么,[object Object],意思?,[object Object]
冲突指的是多个CSS规则作,[object Object],用在相同的元素和属性上.,[object Object],h2 { color: blue; },[object Object],h2 { color: red; },[object Object],冲突的CSS 规则,[object Object]
冲突可以发生在不同类型样式的CSS规则上.,[object Object],浏览器样式,[object Object],h2 { color: blue; },[object Object],作者样式,[object Object],h2 { color: red; },[object Object]
冲突也可以发生在单个或多,[object Object],个作者样式的CSS规则里.,[object Object],作者样式1,[object Object],h2 { color: blue; },[object Object],作者样式2,[object Object],h2 { color: red; },[object Object],h2 { color: green; },[object Object]
那哪条CSS规则,[object Object],“赢”了呢?,[object Object]
需要四个步骤,[object Object],来决定哪条CSS规则,[object Object],“赢了”(即被应用到HTML文档),[object Object]
第一步,[object Object]
收集所有应用到元素和属性,[object Object],的来自于浏览器, 作者,[object Object],和用户的样式声明,[object Object]
比如, 找到所有符合,[object Object],以下条件的声明:,[object Object],元素 = h2,[object Object],属性 = color,[object Object]
收集到的声明,[object Object],h2 { color: black; },[object Object],h2 { color: green; },[object Object],h2 { color: blue; },[object Object],#nav h2 { color: lime; },[object Object],Browser style sheet,[object Object],		User style sheet,[object Object],	Author style sheets,[object Object]
如果中有声明的来源超过三个来源中的一个, 进入步骤二.,[object Object]
第二步,[object Object]
将收集到的声明按来源(浏览器, ,[object Object],作者, 用户样式) 和重要性,[object Object],(normal 或 !important) 分类.,[object Object]
什么是,[object Object],!important?,[object Object]
作者可以指定任何声明为,[object Object],“!important” .,[object Object],h2 { color: red !important;},[object Object],!important,[object Object]
“!important”声明可以,[object Object],覆盖普通声明,[object Object],(普通声明指的是不包含,[object Object],!important的声明).,[object Object]
那么, 声明如何,[object Object],分类?,[object Object]
优先级由低到高,[object Object],1  浏览器样式,[object Object],2  用户样式里的普通声明,[object Object],3  作者样式里的普通声明,[object Object],4  作者样式里的!important声明,[object Object],5  用户样式里的!important声明,[object Object]
1. 浏览器样式,[object Object],h2 { color: black; },[object Object],如果不存在其他声明,,[object Object],浏览器声明获胜,[object Object],Browser style sheet,[object Object],		User style sheet,[object Object],	Author style sheets,[object Object]
2. 普通用户样式,[object Object],h2 { color: black; },[object Object],Browser style sheet,[object Object],普通用户声明胜过浏览器声明,[object Object],h2 { color: green; },[object Object],User style sheet,[object Object],Author style sheets,[object Object]
3. 普通作者样式,[object Object],h2 { color: black; },[object Object],Browser style sheet,[object Object],普通作者声明胜过浏览器声明和普通用户声明,[object Object],h2 { color: green; },[object Object],h2 { color: blue; },[object Object],User style sheet,[object Object],Author style sheets,[object Object]
4. !important作者样式,[object Object],h2 { color: black; },[object Object],Browser style sheet,[object Object],!important 作者声明胜过所有普通声明,[object Object],h2 { color: green; },[object Object],h2 { color: blue; },[object Object],h2 { color: lime !important; },[object Object],User style sheet,[object Object],Author style sheets,[object Object]
5. !important用户样式,[object Object],h2 { color: black; },[object Object],Browser style sheet,[object Object],!important 用户声明胜过 !important 作者声明,[object Object],和所有普通声明,[object Object],h2 { color: green; },[object Object],h2 { color: red !important;},[object Object],h2 { color: blue; },[object Object],h2 { color: lime !important; },[object Object],User style sheet,[object Object],Author style sheets,[object Object]
那如果两条声明的来源或重要性,[object Object],相同,该怎么办呢?,[object Object]
有两条匹配的声明,[object Object],h2 { color: black; },[object Object],h2 { color: green; },[object Object],Browser style sheet,[object Object],	User style sheet,[object Object],两条来源和重要性相同的声明,[object Object],h2 { color: blue; },[object Object],h2 { color: lime; },[object Object],Author style sheets,[object Object]
如果声明的来源或重要性相同, ,[object Object],进入步骤三.,[object Object]
第三步,[object Object]
如果声明的来源和重要性都相同,,[object Object],需要对声明的选择器进行评分,,[object Object],来决定是哪条声明“赢了”.,[object Object]
选择器,[object Object],#nav h2 { color: blue; },[object Object],h2.intro { color: red; },[object Object],选择器,[object Object]
四个分数连在一起(像链条一样) ,[object Object],得到最终的评分.,[object Object],a,b,c,d,[object Object]
得分取决于选择器的优先级. ,[object Object]
那优先级是如何,[object Object],计算的?,[object Object]
A. 是不是内联样式?,[object Object],<h2 style=“color: red;”>,[object Object],This is a heading,[object Object],a = 1 x   </h2>,[object Object],inline styles,[object Object],b = 0 x ID<p>,[object Object],c = 0 x classes Here is a paragraph of,[object Object],d = 0 x element,[object Object],Specificity = 1,0,0,0,[object Object]
B. 统计选择器中ID的数量.,[object Object],#nav{ color: red; },[object Object],a = 0 x inline styles,[object Object],b = 1 x ID,[object Object],c = 0 x classes,[object Object],d = 0 x element,[object Object],Specificity = 0,1,0,0,[object Object]
C. 统计class,属性和,[object Object],伪类的数量.,[object Object],   .main { color: red; },[object Object],a = 0 x inline styles,[object Object],b = 0 x ID,[object Object],c = 1 x classes,[object Object],d = 0 x element,[object Object],Specificity = 0,0,1,0,[object Object]
 D. 统计元素名和伪元素的数量.,[object Object],h2 { color: red; },[object Object],a = 0 x inline styles,[object Object],b = 0 x ID,[object Object],c = 0 x classes,[object Object],d = 1 x element,[object Object],Specificity = 0,0,0,1,[object Object]
优先级连接笔记,[object Object]
“A” 始终优先于“B”, ,[object Object],“B”始终优先于“C”, ,[object Object],“C”始终优先于“D”.,[object Object]
不管选择器中有多少个ID , ,[object Object],只要一个内联样式就可以轻松获胜.,[object Object],(除非ID的声明中使用了!important),[object Object]
External style sheets,[object Object],		and header styles,[object Object],			(Author styles),[object Object],HTML document with,[object Object],				inline styles,[object Object],			(Author styles),[object Object],#one #two #three #four #five,[object Object],#six #seven #eight #nine #ten,[object Object],{ color: green; },[object Object],<h2 style=“color: purple;”>,[object Object],高亮的样式胜出因为优先级,[object Object],1,0,0,0 胜过0,10,0,0,[object Object]
不管选择器中有多少个class , ,[object Object],只要一个ID就可以轻松获胜.,[object Object]
External style sheets,[object Object],	and header styles,[object Object],		(Author styles),[object Object],.one .two .three .four .five,[object Object],.six .seven .eight .nine .ten,[object Object],{ color: green; },[object Object],#nav { color: lime; },[object Object],高亮的样式胜出因为优先级,[object Object],0,1,0,0 胜过 0,0,10,0,[object Object]
不管选择器中有多少个元素名, ,[object Object],只要一个class就可以轻松获胜.,[object Object]
External style sheets,[object Object],	and header styles,[object Object],		(Author styles),[object Object],div div div div div form,[object Object],fieldset div label span,[object Object],{ color: green; },[object Object],.intro { color: lime; },[object Object],高亮的样式胜出因为优先级,[object Object],0,0,1,0 胜过 0,0,0,10,[object Object]
优先级的,[object Object],复杂案例,[object Object]
ID和元素,[object Object],#nav h2 { color: red; },[object Object],a = 0 x inline styles,[object Object],b = 1 x ID (#nav),[object Object],c = 0 x classes,[object Object],d = 1 x element (h2),[object Object],Specificity = 0,1,0,1,[object Object]
元素和class,[object Object],h2.intro { color: red; },[object Object],a = 0 x inline styles,[object Object],b = 0 x ID,[object Object],c = 1 x classes (.intro),[object Object],d = 1 x element (h2),[object Object],Specificity = 0,0,1,1,[object Object]
              ID, 元素和伪类,[object Object],#navul li a:hover { color:,[object Object],a = 0 x inline styles,[object Object],b = 1 x ID (#nav),[object Object],c = 1 x pseudo-class (:hover),[object Object],d = 3 x elements (ul, li, a),[object Object],Specificity = 0,1,1,3,[object Object]
              元素和伪元素,[object Object],p:first-line { color: green,[object Object],a = 0 x inline styles,[object Object],b = 0 x ID,[object Object],c = 0 x classes,[object Object],d = 2 x element (p) and pseudo-element (:first-line),[object Object],Specificity = 0,0,0,2,[object Object]
           元素和属性选择器,[object Object],h2[title=“intro”] { color:,[object Object],a = 0 x inline styles,[object Object],b = 0 x ID,[object Object],c = 1 x attribute selector ([title=“intro”]),[object Object],d = 1 x element (h2),[object Object],Specificity = 0,0,1,1,[object Object]
如果还没   ,[object Object],分出胜负?,[object Object]
优先级相同的选择器,[object Object],#nav h2 { color: red; },[object Object],#nav h2 { color: green; },[object Object],优先级 = 0,1,0,1,[object Object]
如果还没分出胜负, ,[object Object],进入步骤四.,[object Object]
第四步,[object Object]
如果两条声明有相同的,[object Object],重要性、来源和优先级, ,[object Object],则后面的声明赢.,[object Object]
             同等的声明,[object Object],#nav h2 { color: green; },[object Object],#nav h2 { color: red; },[object Object],第二条声明获胜,因为他写在,[object Object],第一条后面.,[object Object]
现在…,[object Object],来些猜谜游戏,[object Object]
习题一,[object Object],浏览器, 用户, 作者,[object Object]
Part 1: 哪个赢了?,[object Object]
Browser style sheet,[object Object],				User style sheet,[object Object],	External style sheets,[object Object],			and header styles,[object Object],					(Author styles),[object Object],HTML document with,[object Object],						inline styles,[object Object],					(Author styles),[object Object],h2 { color: black; },[object Object],h2 { color: green; },[object Object]
Browser style sheet,[object Object],	User style sheet,[object Object],h2 { color: black; },[object Object],h2 { color: green; },[object Object],普通用户声明从来源上胜过浏览器声明,[object Object],External style sheets,[object Object],and header styles,[object Object],		(Author styles),[object Object],HTML document with,[object Object],			inline styles,[object Object],		(Author styles),[object Object]
Part 2: 哪个赢了?,[object Object]
Browser style sheet,[object Object],				User style sheet,[object Object],	External style sheets,[object Object],			and header styles,[object Object],					(Author styles),[object Object],HTML document with,[object Object],						inline styles,[object Object],					(Author styles),[object Object],h2 { color: black; },[object Object],h2 { color: green; },[object Object],h2 { color: blue; },[object Object]
Browser style sheet,[object Object],			User style sheet,[object Object],External style sheets,[object Object],		and header styles,[object Object],				(Author styles),[object Object],h2 { color: black; },[object Object],h2 { color: green; },[object Object],h2 { color: blue; },[object Object],作者声明从来源上胜过浏览器和用户声明,[object Object],HTML document with,[object Object],inline styles,[object Object],(Author styles),[object Object]
Part 3: 哪个赢了?,[object Object]
Browser style sheet,[object Object],				User style sheet,[object Object],	External style sheets,[object Object],			and header styles,[object Object],					(Author styles),[object Object],HTML document with,[object Object],						inline styles,[object Object],					(Author styles),[object Object],h2 { color: black; },[object Object],h2 { color: green; },[object Object],h2 { color: blue; },[object Object],<h2 style=“color: purple;”>,[object Object]
Browser style sheet,[object Object],h2 { color: black; },[object Object],User style sheet,[object Object],h2 { color:,[object Object],普通内联声明胜过普通外部和头部声明,因为,[object Object],优先级 1,0,0,0 胜过0,0,0,1,[object Object],External style sheets,[object Object],		and header styles,[object Object],			(Author styles),[object Object],HTML document with,[object Object],				inline styles,[object Object],			(Author styles),[object Object],h2 { color: blue; },[object Object],<h2 style=“color: purple;”>,[object Object]
Part 4: 哪个赢了?,[object Object]
Browser style sheet,[object Object],				User style sheet,[object Object],	External style sheets,[object Object],			and header styles,[object Object],					(Author styles),[object Object],HTML document with,[object Object],						inline styles,[object Object],					(Author styles),[object Object],h2 { color: black; },[object Object],h2 { color: green; },[object Object],h2 { color: blue; },[object Object],h2 { color: lime !important; },[object Object],<h2 style=“color: purple;”>,[object Object]
Browser style sheet,[object Object],	User style sheet,[object Object],h2 { color: black; },[object Object],h2 { color: green; },[object Object],!important 作者样式 胜过普通浏览器、用户,[object Object],和作者样式,[object Object],External style sheets,[object Object],		and header styles,[object Object],			(Author styles),[object Object],HTML document with,[object Object],				inline styles,[object Object],			(Author styles),[object Object],h2 { color: blue; },[object Object],h2 { color: lime !important; },[object Object],<h2 style=“color: purple;”>,[object Object]
Part 5: 哪个赢了?,[object Object]
Browser style sheet,[object Object],				User style sheet,[object Object],	External style sheets,[object Object],			and header styles,[object Object],					(Author styles),[object Object],HTML document with,[object Object],						inline styles,[object Object],					(Author styles),[object Object],h2 { color: black; },[object Object],h2 { color: green; },[object Object],h2 { color: blue; },[object Object],h2 { color: lime !important; },[object Object],<h2 style=“color: purple,[object Object],!important;”>,[object Object]
Browser style sheet,[object Object],h2 { color: black; },[object Object],User style sheet,[object Object],!important 内联作者声明胜过 !important 外部作者,[object Object],声明和头部声明,因为优先级 1,0,0,0 胜过 0,0,0,1,[object Object],External style sheets,[object Object],		and header styles,[object Object],			(Author styles),[object Object],HTML document with,[object Object],				inline styles,[object Object],			(Author styles),[object Object],h2 { color: blue; },[object Object],h2 { color: lime !important; },[object Object],<h2 style=“color: purple,[object Object],!important;”>,[object Object]
Part 6: 哪个赢了?,[object Object]
Browser style sheet,[object Object],				User style sheet,[object Object],	External style sheets,[object Object],			and header styles,[object Object],					(Author styles),[object Object],HTML document with,[object Object],						inline styles,[object Object],					(Author styles),[object Object],h2 { color: black; },[object Object],h2 { color: green; },[object Object],h2 { color: gray !important; },[object Object],h2 { color: blue; },[object Object],h2 { color: lime !important; },[object Object],<h2 style=“color: purple,[object Object],!important;”>,[object Object]
Browser style sheet,[object Object],h2 { color: black;,[object Object],!important 用户声明胜过 !important 作者声明,[object Object],(不管他们是外部、头部还是内联),[object Object],User style sheet,[object Object],	External style sheets,[object Object],		and header styles,[object Object],				(Author styles),[object Object],HTML document with,[object Object],					inline styles,[object Object],				(Author styles),[object Object],h2 { color: green; },[object Object],h2 { color: gray !important; },[object Object],h2 { color: blue; },[object Object],h2 { color: lime !important; },[object Object],<h2 style=“color: purple,[object Object],!important;”>,[object Object]
习题二,[object Object],作者的外部, 头部和内联CSS,[object Object]
Part 1: 哪个赢了?,[object Object]
External style sheets,[object Object],	and header styles,[object Object],		(Author styles),[object Object],h2.news { color: #eee; },[object Object],h2 { color: blue; },[object Object]
高亮的声明胜出,因为优先级,[object Object],0,0,1,1 胜过 0,0,0,1,[object Object],External style sheets,[object Object],	and header styles,[object Object],		(Author styles),[object Object],h2.news { color: #eee; },[object Object],h2 { color: blue; },[object Object]
Part 2: 哪个赢了?,[object Object]
External style sheets,[object Object],	and header styles,[object Object],		(Author styles),[object Object],h2.news { color: #eee; },[object Object],h2 { color: blue; },[object Object],h2.news { color: green; },[object Object]
高亮的声明和第一个声明优先级相同(0,0,1,1).,[object Object],但是他写在后面,所以他胜出!,[object Object],External style sheets,[object Object],	and header styles,[object Object],		(Author styles),[object Object],h2.news { color: #eee; },[object Object],h2 { color: blue; },[object Object],h2.news { color: green; },[object Object]
Part 3: 哪个赢了?,[object Object]
External style sheets,[object Object],	and header styles,[object Object],		(Author styles),[object Object],#nav h2 { color: lime; },[object Object],h2.news { color: #eee; },[object Object],h2 { color: blue; },[object Object],h2.news { color: green; },[object Object]
高亮的选择器胜出, 因为优先级,[object Object],0,1,0,1 胜过 0,0,1,1 和0,0,0,1,[object Object],External style sheets,[object Object],	and header styles,[object Object],		(Author styles),[object Object],#nav h2 { color: lime; },[object Object],h2.news { color: #eee; },[object Object],h2 { color: blue; },[object Object],h2.news { color: green; },[object Object]
Part 4: 哪个赢了?,[object Object]
External style sheets,[object Object],	and header styles,[object Object],		(Author styles),[object Object],#nav h2 { color: lime; },[object Object],h2.news { color: #eee; },[object Object],h2 { color: blue; },[object Object],h2.news { color: green; },[object Object],div#nav h2 { color: lime; },[object Object]
高亮的选择器胜出, 因为优先级,[object Object],0,1,0,2 胜过 0,1,0,1 和 0,0,1,1 和0,0,0,1,[object Object],External style sheets,[object Object],	and header styles,[object Object],		(Author styles),[object Object],#nav h2 { color: lime; },[object Object],h2.news { color: #eee; },[object Object],h2 { color: blue; },[object Object],h2.news { color: green; },[object Object],div#nav h2 { color: lime; },[object Object]
搞定!,[object Object]

More Related Content

Similar to CSS Cascade [译]

Html&css培训 舒克
Html&css培训 舒克Html&css培训 舒克
Html&css培训 舒克jay li
 
页面背景&头部
页面背景&头部页面背景&头部
页面背景&头部Wang shimu
 
Inside the-browser
Inside the-browserInside the-browser
Inside the-browserjy03845581
 
Inside the-browser
Inside the-browserInside the-browser
Inside the-browserjy03845581
 
网页制作基础
网页制作基础网页制作基础
网页制作基础loo2k
 
Css2 伪类选择符和伪元素选择符
Css2 伪类选择符和伪元素选择符Css2 伪类选择符和伪元素选择符
Css2 伪类选择符和伪元素选择符pi cheng
 
20131004 - Css - Basic & Styling by 懿鋆
20131004 - Css - Basic & Styling by 懿鋆20131004 - Css - Basic & Styling by 懿鋆
20131004 - Css - Basic & Styling by 懿鋆LearningTech
 
CSS 培训
CSS 培训CSS 培训
CSS 培训S S
 
程式人雜誌 -- 2014 年9月號
程式人雜誌 -- 2014 年9月號程式人雜誌 -- 2014 年9月號
程式人雜誌 -- 2014 年9月號鍾誠 陳鍾誠
 
Django Girls 2015 - CSS
Django Girls 2015 - CSSDjango Girls 2015 - CSS
Django Girls 2015 - CSSHsuan Fu Lien
 
高效率的、可维护的Css
高效率的、可维护的Css高效率的、可维护的Css
高效率的、可维护的Csssimaopig
 
[译]Efficient, maintainable CSS
[译]Efficient, maintainable CSS[译]Efficient, maintainable CSS
[译]Efficient, maintainable CSSjeannewoo
 
HTML5 介绍
HTML5 介绍HTML5 介绍
HTML5 介绍S S
 
浏览器工作原理浅析
浏览器工作原理浅析浏览器工作原理浅析
浏览器工作原理浅析癸鑫 张
 

Similar to CSS Cascade [译] (17)

CSS 菜鳥救星
CSS 菜鳥救星CSS 菜鳥救星
CSS 菜鳥救星
 
Html&css培训 舒克
Html&css培训 舒克Html&css培训 舒克
Html&css培训 舒克
 
页面背景&头部
页面背景&头部页面背景&头部
页面背景&头部
 
Inside the-browser
Inside the-browserInside the-browser
Inside the-browser
 
Inside the-browser
Inside the-browserInside the-browser
Inside the-browser
 
网页制作基础
网页制作基础网页制作基础
网页制作基础
 
Css2 伪类选择符和伪元素选择符
Css2 伪类选择符和伪元素选择符Css2 伪类选择符和伪元素选择符
Css2 伪类选择符和伪元素选择符
 
Html&css基础
Html&css基础Html&css基础
Html&css基础
 
20131004 - Css - Basic & Styling by 懿鋆
20131004 - Css - Basic & Styling by 懿鋆20131004 - Css - Basic & Styling by 懿鋆
20131004 - Css - Basic & Styling by 懿鋆
 
Css
CssCss
Css
 
CSS 培训
CSS 培训CSS 培训
CSS 培训
 
程式人雜誌 -- 2014 年9月號
程式人雜誌 -- 2014 年9月號程式人雜誌 -- 2014 年9月號
程式人雜誌 -- 2014 年9月號
 
Django Girls 2015 - CSS
Django Girls 2015 - CSSDjango Girls 2015 - CSS
Django Girls 2015 - CSS
 
高效率的、可维护的Css
高效率的、可维护的Css高效率的、可维护的Css
高效率的、可维护的Css
 
[译]Efficient, maintainable CSS
[译]Efficient, maintainable CSS[译]Efficient, maintainable CSS
[译]Efficient, maintainable CSS
 
HTML5 介绍
HTML5 介绍HTML5 介绍
HTML5 介绍
 
浏览器工作原理浅析
浏览器工作原理浅析浏览器工作原理浅析
浏览器工作原理浅析
 

Recently uploaded

买假和真英国驾驶执照买了假的英国驾照,那跟真的有什么区别吗?买假和真正的澳大利亚驾驶执照【微信qoqoqdqd】
买假和真英国驾驶执照买了假的英国驾照,那跟真的有什么区别吗?买假和真正的澳大利亚驾驶执照【微信qoqoqdqd】买假和真英国驾驶执照买了假的英国驾照,那跟真的有什么区别吗?买假和真正的澳大利亚驾驶执照【微信qoqoqdqd】
买假和真英国驾驶执照买了假的英国驾照,那跟真的有什么区别吗?买假和真正的澳大利亚驾驶执照【微信qoqoqdqd】黑客 接单【TG/微信qoqoqdqd】
 
20200808自營電商平台策略討論
20200808自營電商平台策略討論20200808自營電商平台策略討論
20200808自營電商平台策略討論Jamie (Taka) Wang
 
函數畫圖_習題6.pptx 函數畫圖_習題6.pptx 函數畫圖_習題6.pptx
函數畫圖_習題6.pptx 函數畫圖_習題6.pptx 函數畫圖_習題6.pptx函數畫圖_習題6.pptx 函數畫圖_習題6.pptx 函數畫圖_習題6.pptx
函數畫圖_習題6.pptx 函數畫圖_習題6.pptx 函數畫圖_習題6.pptxNCU MCL
 
SymPy 在微積分上的應用_5.pptx SymPy 在微積分上的應用_5.pptx
SymPy 在微積分上的應用_5.pptx SymPy 在微積分上的應用_5.pptxSymPy 在微積分上的應用_5.pptx SymPy 在微積分上的應用_5.pptx
SymPy 在微積分上的應用_5.pptx SymPy 在微積分上的應用_5.pptxNCU MCL
 
函數畫圖_習題7.pptx 函數畫圖_習題7.pptx 函數畫圖_習題7.pptx
函數畫圖_習題7.pptx 函數畫圖_習題7.pptx 函數畫圖_習題7.pptx函數畫圖_習題7.pptx 函數畫圖_習題7.pptx 函數畫圖_習題7.pptx
函數畫圖_習題7.pptx 函數畫圖_習題7.pptx 函數畫圖_習題7.pptxNCU MCL
 
函數微分_習題4.pptx 函數微分_習題4.pptx 函數微分_習題4.pptx
函數微分_習題4.pptx 函數微分_習題4.pptx 函數微分_習題4.pptx函數微分_習題4.pptx 函數微分_習題4.pptx 函數微分_習題4.pptx
函數微分_習題4.pptx 函數微分_習題4.pptx 函數微分_習題4.pptxNCU MCL
 
函數畫圖_習題5.pptx 函數畫圖_習題5.pptx 函數畫圖_習題5.pptx
函數畫圖_習題5.pptx 函數畫圖_習題5.pptx 函數畫圖_習題5.pptx函數畫圖_習題5.pptx 函數畫圖_習題5.pptx 函數畫圖_習題5.pptx
函數畫圖_習題5.pptx 函數畫圖_習題5.pptx 函數畫圖_習題5.pptxNCU MCL
 
20200727_Insight workstation
20200727_Insight workstation20200727_Insight workstation
20200727_Insight workstationJamie (Taka) Wang
 
SymPy 在微積分上的應用_4.pptx SymPy 在微積分上的應用_4.pptx
SymPy 在微積分上的應用_4.pptx SymPy 在微積分上的應用_4.pptxSymPy 在微積分上的應用_4.pptx SymPy 在微積分上的應用_4.pptx
SymPy 在微積分上的應用_4.pptx SymPy 在微積分上的應用_4.pptxNCU MCL
 

Recently uploaded (17)

买假和真英国驾驶执照买了假的英国驾照,那跟真的有什么区别吗?买假和真正的澳大利亚驾驶执照【微信qoqoqdqd】
买假和真英国驾驶执照买了假的英国驾照,那跟真的有什么区别吗?买假和真正的澳大利亚驾驶执照【微信qoqoqdqd】买假和真英国驾驶执照买了假的英国驾照,那跟真的有什么区别吗?买假和真正的澳大利亚驾驶执照【微信qoqoqdqd】
买假和真英国驾驶执照买了假的英国驾照,那跟真的有什么区别吗?买假和真正的澳大利亚驾驶执照【微信qoqoqdqd】
 
20200808自營電商平台策略討論
20200808自營電商平台策略討論20200808自營電商平台策略討論
20200808自營電商平台策略討論
 
函數畫圖_習題6.pptx 函數畫圖_習題6.pptx 函數畫圖_習題6.pptx
函數畫圖_習題6.pptx 函數畫圖_習題6.pptx 函數畫圖_習題6.pptx函數畫圖_習題6.pptx 函數畫圖_習題6.pptx 函數畫圖_習題6.pptx
函數畫圖_習題6.pptx 函數畫圖_習題6.pptx 函數畫圖_習題6.pptx
 
SymPy 在微積分上的應用_5.pptx SymPy 在微積分上的應用_5.pptx
SymPy 在微積分上的應用_5.pptx SymPy 在微積分上的應用_5.pptxSymPy 在微積分上的應用_5.pptx SymPy 在微積分上的應用_5.pptx
SymPy 在微積分上的應用_5.pptx SymPy 在微積分上的應用_5.pptx
 
函數畫圖_習題7.pptx 函數畫圖_習題7.pptx 函數畫圖_習題7.pptx
函數畫圖_習題7.pptx 函數畫圖_習題7.pptx 函數畫圖_習題7.pptx函數畫圖_習題7.pptx 函數畫圖_習題7.pptx 函數畫圖_習題7.pptx
函數畫圖_習題7.pptx 函數畫圖_習題7.pptx 函數畫圖_習題7.pptx
 
20200429_ec
20200429_ec20200429_ec
20200429_ec
 
函數微分_習題4.pptx 函數微分_習題4.pptx 函數微分_習題4.pptx
函數微分_習題4.pptx 函數微分_習題4.pptx 函數微分_習題4.pptx函數微分_習題4.pptx 函數微分_習題4.pptx 函數微分_習題4.pptx
函數微分_習題4.pptx 函數微分_習題4.pptx 函數微分_習題4.pptx
 
函數畫圖_習題5.pptx 函數畫圖_習題5.pptx 函數畫圖_習題5.pptx
函數畫圖_習題5.pptx 函數畫圖_習題5.pptx 函數畫圖_習題5.pptx函數畫圖_習題5.pptx 函數畫圖_習題5.pptx 函數畫圖_習題5.pptx
函數畫圖_習題5.pptx 函數畫圖_習題5.pptx 函數畫圖_習題5.pptx
 
20200727_Insight workstation
20200727_Insight workstation20200727_Insight workstation
20200727_Insight workstation
 
20220113_product_day
20220113_product_day20220113_product_day
20220113_product_day
 
20200607_insight_sync
20200607_insight_sync20200607_insight_sync
20200607_insight_sync
 
20200606_insight_Ignition
20200606_insight_Ignition20200606_insight_Ignition
20200606_insight_Ignition
 
SymPy 在微積分上的應用_4.pptx SymPy 在微積分上的應用_4.pptx
SymPy 在微積分上的應用_4.pptx SymPy 在微積分上的應用_4.pptxSymPy 在微積分上的應用_4.pptx SymPy 在微積分上的應用_4.pptx
SymPy 在微積分上的應用_4.pptx SymPy 在微積分上的應用_4.pptx
 
20200427_hardware
20200427_hardware20200427_hardware
20200427_hardware
 
20200429_software
20200429_software20200429_software
20200429_software
 
20210105_量產技轉
20210105_量產技轉20210105_量產技轉
20210105_量產技轉
 
20200602_insight_business
20200602_insight_business20200602_insight_business
20200602_insight_business
 

CSS Cascade [译]

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  • 52.
  • 53.
  • 54.
  • 55.
  • 56.
  • 57.
  • 58.
  • 59.
  • 60.
  • 61.
  • 62.
  • 63.
  • 64.
  • 65.
  • 66.
  • 67.
  • 68.
  • 69.
  • 70.
  • 71.
  • 72.
  • 73.
  • 74.
  • 75.
  • 76.
  • 77.
  • 78.
  • 79.
  • 80.
  • 81.
  • 82.
  • 83.
  • 84.
  • 85.
  • 86.
  • 87.
  • 88.
  • 89.
  • 90.
  • 91.
  • 92.
  • 93.
  • 94.
  • 95.
  • 96.
  • 97.
  • 98.
  • 99.
  • 100.
  • 101.
  • 102.
  • 103.
  • 104.
  • 105.
  • 106.
  • 107.
  • 108.
  • 109.
  • 110.
  • 111.