Enviar pesquisa
Carregar
高效率的、可维护的Css
•
14 gostaram
•
1,677 visualizações
S
simaopig
Seguir
Css 大家可以借鉴一二
Leia menos
Leia mais
Educação
Tecnologia
Denunciar
Compartilhar
Denunciar
Compartilhar
1 de 106
Baixar agora
Baixar para ler offline
Recomendados
[译]Efficient, maintainable CSS
[译]Efficient, maintainable CSS
jeannewoo
深入剖析浏览器
深入剖析浏览器
jay li
Responsive Web UI Design
Responsive Web UI Design
jay li
NextGen
NextGen
potatongy
CSS 語法教學
CSS 語法教學
Shengyou Fan
5.網站設計與前端框架
5.網站設計與前端框架
Nelson Chen
淘宝移动端Web开发最佳实践
淘宝移动端Web开发最佳实践
jay li
Html&css培训 舒克
Html&css培训 舒克
jay li
Recomendados
[译]Efficient, maintainable CSS
[译]Efficient, maintainable CSS
jeannewoo
深入剖析浏览器
深入剖析浏览器
jay li
Responsive Web UI Design
Responsive Web UI Design
jay li
NextGen
NextGen
potatongy
CSS 語法教學
CSS 語法教學
Shengyou Fan
5.網站設計與前端框架
5.網站設計與前端框架
Nelson Chen
淘宝移动端Web开发最佳实践
淘宝移动端Web开发最佳实践
jay li
Html&css培训 舒克
Html&css培训 舒克
jay li
Css命名规范(英文命名)
Css命名规范(英文命名)
ywt0803
十步学会用Css+Div建站
十步学会用Css+Div建站
yiditushe
Exam 98-375 HTML5 Application Development Fundamentals
Exam 98-375 HTML5 Application Development Fundamentals
Chieh Lin
使用kslite支持第三方内容开发
使用kslite支持第三方内容开发
leneli
HTML 語法教學
HTML 語法教學
Shengyou Fan
使用Bigpipe提升浏览速度
使用Bigpipe提升浏览速度
kumawu
移动端Web开发性能优化实践
移动端Web开发性能优化实践
Mingel Zhang
Div+Css布局入门教程
Div+Css布局入门教程
yiditushe
支付宝CSS构架
支付宝CSS构架
Sofish Lin
网易相册前端页面开发规范2010版
网易相册前端页面开发规范2010版
昌里大金猪 Luke
Html&css基础
Html&css基础
KenerLinfeng
淘宝前端技术巡礼
淘宝前端技术巡礼
jay li
Daniel's objective c coding style guidelines
Daniel's objective c coding style guidelines
AVking
漫談 CSS 架構方法 - 以 OOCSS, SMACSS, BEM 為例
漫談 CSS 架構方法 - 以 OOCSS, SMACSS, BEM 為例
Kuro Hsu
View 與 Blade 樣板引擎
View 與 Blade 樣板引擎
Shengyou Fan
View 與 Blade 樣板引擎
View 與 Blade 樣板引擎
Shengyou Fan
网页制作基础
网页制作基础
loo2k
CSS 培训
CSS 培训
S S
Qq.com前端架构实践与思考
Qq.com前端架构实践与思考
greengnn
程式人雜誌 -- 2014 年9月號
程式人雜誌 -- 2014 年9月號
鍾誠 陳鍾誠
网页制作基础
网页制作基础
loo2k
2010 01-07周五分享 前端的那些事儿-小米猪
2010 01-07周五分享 前端的那些事儿-小米猪
小 米猪
Mais conteúdo relacionado
Mais procurados
Css命名规范(英文命名)
Css命名规范(英文命名)
ywt0803
十步学会用Css+Div建站
十步学会用Css+Div建站
yiditushe
Exam 98-375 HTML5 Application Development Fundamentals
Exam 98-375 HTML5 Application Development Fundamentals
Chieh Lin
使用kslite支持第三方内容开发
使用kslite支持第三方内容开发
leneli
HTML 語法教學
HTML 語法教學
Shengyou Fan
使用Bigpipe提升浏览速度
使用Bigpipe提升浏览速度
kumawu
移动端Web开发性能优化实践
移动端Web开发性能优化实践
Mingel Zhang
Div+Css布局入门教程
Div+Css布局入门教程
yiditushe
支付宝CSS构架
支付宝CSS构架
Sofish Lin
网易相册前端页面开发规范2010版
网易相册前端页面开发规范2010版
昌里大金猪 Luke
Html&css基础
Html&css基础
KenerLinfeng
淘宝前端技术巡礼
淘宝前端技术巡礼
jay li
Daniel's objective c coding style guidelines
Daniel's objective c coding style guidelines
AVking
Mais procurados
(13)
Css命名规范(英文命名)
Css命名规范(英文命名)
十步学会用Css+Div建站
十步学会用Css+Div建站
Exam 98-375 HTML5 Application Development Fundamentals
Exam 98-375 HTML5 Application Development Fundamentals
使用kslite支持第三方内容开发
使用kslite支持第三方内容开发
HTML 語法教學
HTML 語法教學
使用Bigpipe提升浏览速度
使用Bigpipe提升浏览速度
移动端Web开发性能优化实践
移动端Web开发性能优化实践
Div+Css布局入门教程
Div+Css布局入门教程
支付宝CSS构架
支付宝CSS构架
网易相册前端页面开发规范2010版
网易相册前端页面开发规范2010版
Html&css基础
Html&css基础
淘宝前端技术巡礼
淘宝前端技术巡礼
Daniel's objective c coding style guidelines
Daniel's objective c coding style guidelines
Semelhante a 高效率的、可维护的Css
漫談 CSS 架構方法 - 以 OOCSS, SMACSS, BEM 為例
漫談 CSS 架構方法 - 以 OOCSS, SMACSS, BEM 為例
Kuro Hsu
View 與 Blade 樣板引擎
View 與 Blade 樣板引擎
Shengyou Fan
View 與 Blade 樣板引擎
View 與 Blade 樣板引擎
Shengyou Fan
网页制作基础
网页制作基础
loo2k
CSS 培训
CSS 培训
S S
Qq.com前端架构实践与思考
Qq.com前端架构实践与思考
greengnn
程式人雜誌 -- 2014 年9月號
程式人雜誌 -- 2014 年9月號
鍾誠 陳鍾誠
网页制作基础
网页制作基础
loo2k
2010 01-07周五分享 前端的那些事儿-小米猪
2010 01-07周五分享 前端的那些事儿-小米猪
小 米猪
浅析浏览器解析和渲染
浅析浏览器解析和渲染
Ailsa126
Css
Css
fzuhua
CSS 入門 - 前端工程開發實務訓練
CSS 入門 - 前端工程開發實務訓練
Joseph Chiang
不一樣的Web server... coServ
不一樣的Web server... coServ
Ben Lue
CSS 菜鳥救星
CSS 菜鳥救星
Ying-Hsiang Liao
网页设计及制作(Div+css)
网页设计及制作(Div+css)
lrk3
2016年逢甲大學資訊系:ASP.NET MVC 4 教育訓練3
2016年逢甲大學資訊系:ASP.NET MVC 4 教育訓練3
Duran Hsieh
Inside the-browser
Inside the-browser
jy03845581
Inside the-browser
Inside the-browser
jy03845581
淘宝移动端Web开发最佳实践
淘宝移动端Web开发最佳实践
Du Yamin
Sencha SDK Tools简介:IE6上也可以用CSS3?
Sencha SDK Tools简介:IE6上也可以用CSS3?
Frank Cheung
Semelhante a 高效率的、可维护的Css
(20)
漫談 CSS 架構方法 - 以 OOCSS, SMACSS, BEM 為例
漫談 CSS 架構方法 - 以 OOCSS, SMACSS, BEM 為例
View 與 Blade 樣板引擎
View 與 Blade 樣板引擎
View 與 Blade 樣板引擎
View 與 Blade 樣板引擎
网页制作基础
网页制作基础
CSS 培训
CSS 培训
Qq.com前端架构实践与思考
Qq.com前端架构实践与思考
程式人雜誌 -- 2014 年9月號
程式人雜誌 -- 2014 年9月號
网页制作基础
网页制作基础
2010 01-07周五分享 前端的那些事儿-小米猪
2010 01-07周五分享 前端的那些事儿-小米猪
浅析浏览器解析和渲染
浅析浏览器解析和渲染
Css
Css
CSS 入門 - 前端工程開發實務訓練
CSS 入門 - 前端工程開發實務訓練
不一樣的Web server... coServ
不一樣的Web server... coServ
CSS 菜鳥救星
CSS 菜鳥救星
网页设计及制作(Div+css)
网页设计及制作(Div+css)
2016年逢甲大學資訊系:ASP.NET MVC 4 教育訓練3
2016年逢甲大學資訊系:ASP.NET MVC 4 教育訓練3
Inside the-browser
Inside the-browser
Inside the-browser
Inside the-browser
淘宝移动端Web开发最佳实践
淘宝移动端Web开发最佳实践
Sencha SDK Tools简介:IE6上也可以用CSS3?
Sencha SDK Tools简介:IE6上也可以用CSS3?
Último
Grade 6 Lesson 7 Environment Protection.pptx
Grade 6 Lesson 7 Environment Protection.pptx
PriscilleXu
我曾试图入侵正方教务系统,但我发现它有一些漏洞找黑客入侵电脑,找黑客入侵服务器,找黑客破解密码,怎么找黑客?【微 tytyqqww 信】
我曾试图入侵正方教务系统,但我发现它有一些漏洞找黑客入侵电脑,找黑客入侵服务器,找黑客破解密码,怎么找黑客?【微 tytyqqww 信】
黑客 接单【TG/微信qoqoqdqd】
加急代办一个日本鹿儿岛纯心女子大学学位记🌈学习成绩单电子版定制🌈仿制荷兰大学毕业证🌈日语JLPT证书定制
加急代办一个日本鹿儿岛纯心女子大学学位记🌈学习成绩单电子版定制🌈仿制荷兰大学毕业证🌈日语JLPT证书定制
bairnshajjes
003 DSKP KSSR SEMAKAN 2017 BAHASA CINA TAHUN 3.pdf
003 DSKP KSSR SEMAKAN 2017 BAHASA CINA TAHUN 3.pdf
shanshanhui1
为了确保自己的安全和合法权益,我选择购买高品質的假护照、身份证明以及结婚证等证件。这些都是真实有效且具有法律效力的文件【微 tytyqqww 信】
为了确保自己的安全和合法权益,我选择购买高品質的假护照、身份证明以及结婚证等证件。这些都是真实有效且具有法律效力的文件【微 tytyqqww 信】
黑客 接单【TG/微信qoqoqdqd】
1.💥黑客接单,挑战你的想象力! 🚀💡从最炫酷的黑科技到神秘莫测的代码世界,这里都是你想要的技术。无论是破解密码、入侵系统还是开发软件,我们都能帮你实现!...
1.💥黑客接单,挑战你的想象力! 🚀💡从最炫酷的黑科技到神秘莫测的代码世界,这里都是你想要的技术。无论是破解密码、入侵系统还是开发软件,我们都能帮你实现!...
黑客 接单【TG/微信qoqoqdqd】
【国外大学文凭样本】多大毕业证认证Q/微:892798920办多伦多大学毕业证留信留服使馆公公证,多大硕士毕业证,U of T研究生毕业证,文凭,改U o...
【国外大学文凭样本】多大毕业证认证Q/微:892798920办多伦多大学毕业证留信留服使馆公公证,多大硕士毕业证,U of T研究生毕业证,文凭,改U o...
ggbob1
1.🔥承接黑客破解任务,你的难题我们来解决! 💡无论你是游戏玩家、企业用户还是个人用户,都能在这里找到满意的解决方案。 💪经验丰富的专业团队为您提供全方位...
1.🔥承接黑客破解任务,你的难题我们来解决! 💡无论你是游戏玩家、企业用户还是个人用户,都能在这里找到满意的解决方案。 💪经验丰富的专业团队为您提供全方位...
黑客 接单【TG/微信qoqoqdqd】
30T.ppt【国外大学文凭样本】TWU毕业证认证Q/微:892798920办西三一大学毕业证留信留服使馆公证,TWU硕士毕业证,TWU研究生毕业证,文凭...
30T.ppt【国外大学文凭样本】TWU毕业证认证Q/微:892798920办西三一大学毕业证留信留服使馆公证,TWU硕士毕业证,TWU研究生毕业证,文凭...
ggbob1
正方教务系统的小漏洞被黑客找到啦~他现在正在偷偷溜进去玩呢!(*^__^*)法国大学挂科改成绩 德国大学挂科改成绩 韩国大学挂科改成绩大学成绩修改,找黑客...
正方教务系统的小漏洞被黑客找到啦~他现在正在偷偷溜进去玩呢!(*^__^*)法国大学挂科改成绩 德国大学挂科改成绩 韩国大学挂科改成绩大学成绩修改,找黑客...
黑客 接单【TG/微信qoqoqdqd】
保分服务在SAT考试作弊问题上的应对策略和措施是否充分,如何确保服务的可靠性??
保分服务在SAT考试作弊问题上的应对策略和措施是否充分,如何确保服务的可靠性??
testhelper Sobrenome
DIGNITAS INFINITA - 人类尊严 - 教区信仰教义宣言.pptx
DIGNITAS INFINITA - 人类尊严 - 教区信仰教义宣言.pptx
Martin M Flynn
【創業簡報練習】當一個人吃飯會想起誰:(A)I-DOLL 陪吃娃娃|科技創業與營運實務
【創業簡報練習】當一個人吃飯會想起誰:(A)I-DOLL 陪吃娃娃|科技創業與營運實務
sardinesaying
未毕业在线购买日本熊本县立大学学位记🏆学习成绩单电子版定制🏆克隆爱尔兰大学文凭🏆CFA证书定制
未毕业在线购买日本熊本县立大学学位记🏆学习成绩单电子版定制🏆克隆爱尔兰大学文凭🏆CFA证书定制
gravestomas0
Último
(14)
Grade 6 Lesson 7 Environment Protection.pptx
Grade 6 Lesson 7 Environment Protection.pptx
我曾试图入侵正方教务系统,但我发现它有一些漏洞找黑客入侵电脑,找黑客入侵服务器,找黑客破解密码,怎么找黑客?【微 tytyqqww 信】
我曾试图入侵正方教务系统,但我发现它有一些漏洞找黑客入侵电脑,找黑客入侵服务器,找黑客破解密码,怎么找黑客?【微 tytyqqww 信】
加急代办一个日本鹿儿岛纯心女子大学学位记🌈学习成绩单电子版定制🌈仿制荷兰大学毕业证🌈日语JLPT证书定制
加急代办一个日本鹿儿岛纯心女子大学学位记🌈学习成绩单电子版定制🌈仿制荷兰大学毕业证🌈日语JLPT证书定制
003 DSKP KSSR SEMAKAN 2017 BAHASA CINA TAHUN 3.pdf
003 DSKP KSSR SEMAKAN 2017 BAHASA CINA TAHUN 3.pdf
为了确保自己的安全和合法权益,我选择购买高品質的假护照、身份证明以及结婚证等证件。这些都是真实有效且具有法律效力的文件【微 tytyqqww 信】
为了确保自己的安全和合法权益,我选择购买高品質的假护照、身份证明以及结婚证等证件。这些都是真实有效且具有法律效力的文件【微 tytyqqww 信】
1.💥黑客接单,挑战你的想象力! 🚀💡从最炫酷的黑科技到神秘莫测的代码世界,这里都是你想要的技术。无论是破解密码、入侵系统还是开发软件,我们都能帮你实现!...
1.💥黑客接单,挑战你的想象力! 🚀💡从最炫酷的黑科技到神秘莫测的代码世界,这里都是你想要的技术。无论是破解密码、入侵系统还是开发软件,我们都能帮你实现!...
【国外大学文凭样本】多大毕业证认证Q/微:892798920办多伦多大学毕业证留信留服使馆公公证,多大硕士毕业证,U of T研究生毕业证,文凭,改U o...
【国外大学文凭样本】多大毕业证认证Q/微:892798920办多伦多大学毕业证留信留服使馆公公证,多大硕士毕业证,U of T研究生毕业证,文凭,改U o...
1.🔥承接黑客破解任务,你的难题我们来解决! 💡无论你是游戏玩家、企业用户还是个人用户,都能在这里找到满意的解决方案。 💪经验丰富的专业团队为您提供全方位...
1.🔥承接黑客破解任务,你的难题我们来解决! 💡无论你是游戏玩家、企业用户还是个人用户,都能在这里找到满意的解决方案。 💪经验丰富的专业团队为您提供全方位...
30T.ppt【国外大学文凭样本】TWU毕业证认证Q/微:892798920办西三一大学毕业证留信留服使馆公证,TWU硕士毕业证,TWU研究生毕业证,文凭...
30T.ppt【国外大学文凭样本】TWU毕业证认证Q/微:892798920办西三一大学毕业证留信留服使馆公证,TWU硕士毕业证,TWU研究生毕业证,文凭...
正方教务系统的小漏洞被黑客找到啦~他现在正在偷偷溜进去玩呢!(*^__^*)法国大学挂科改成绩 德国大学挂科改成绩 韩国大学挂科改成绩大学成绩修改,找黑客...
正方教务系统的小漏洞被黑客找到啦~他现在正在偷偷溜进去玩呢!(*^__^*)法国大学挂科改成绩 德国大学挂科改成绩 韩国大学挂科改成绩大学成绩修改,找黑客...
保分服务在SAT考试作弊问题上的应对策略和措施是否充分,如何确保服务的可靠性??
保分服务在SAT考试作弊问题上的应对策略和措施是否充分,如何确保服务的可靠性??
DIGNITAS INFINITA - 人类尊严 - 教区信仰教义宣言.pptx
DIGNITAS INFINITA - 人类尊严 - 教区信仰教义宣言.pptx
【創業簡報練習】當一個人吃飯會想起誰:(A)I-DOLL 陪吃娃娃|科技創業與營運實務
【創業簡報練習】當一個人吃飯會想起誰:(A)I-DOLL 陪吃娃娃|科技創業與營運實務
未毕业在线购买日本熊本县立大学学位记🏆学习成绩单电子版定制🏆克隆爱尔兰大学文凭🏆CFA证书定制
未毕业在线购买日本熊本县立大学学位记🏆学习成绩单电子版定制🏆克隆爱尔兰大学文凭🏆CFA证书定制
高效率的、可维护的Css
1.
高效的 可维护的, 组件化的
【译】
2.
你对CSS了解多少?
3.
“如何写出更加高效 的CSS呢?
”
4.
让我们来看看 4个关键点
5.
高效的CSS 可维护的CSS 组件化的CSS hack-free CSS
6.
书写高效CSS
7.
使用外联样式替代行间 样式或者内嵌样式.
8.
不推荐使用行间样式::
9.
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <meta http-equiv="content-type" content="text <title>Page title</title> </head> <body> <p style="color: red"> ... </p> </body> </html>
10.
不推荐使用内嵌样式::
11.
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <meta http-equiv="content-type" content="text <title>Page title</title> <style type="text/css" media="screen"> p { color: red; } </style> </head> <body> ... </body> </html>
12.
推荐使用外联样式::
13.
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <meta http-equiv="content-type" content="text <title>Page title</title> <link rel="stylesheet" href="name.css" type="text/css" media="screen" /> < /head> <body> ... </body> </html>
14.
为了兼容老版本的浏览器,建议使 用link引入外部样式表的方来代替 @import导入样式的方式.
译者注: @import是CSS2.1提出的所以老的浏览器不支持,点击查看 @import的兼容性。@import和link在使用上会有一些区别, 利用二者之间的差异,可以在实际运用中进行权衡。 关于@import和link方式的比较有几篇文章可以拓展阅读: @import vs link、don’t use @import 、 Flash of Unstyled Content (FOUC) .
15.
不推荐@import导入方式::
16.
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <meta http-equiv="content-type" content="text <title>Page title</title> <style type="text/css" media="screen"> @import url("styles.css"); </style> </head> <body> ... </body> </html>
17.
推荐引入外部样式表方式::
18.
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <meta http-equiv="content-type" content="text <title>Page title</title> <link rel="stylesheet" href="name.css" type="text/css" media="screen" /> </head> <body> ... </body> </html>
19.
使用 继承
20.
低效率的::
21.
p{ font-family: arial, helvetica,
sans-serif; } #container { font-family: arial, helvetica, sans-serif; } #navigation { font-family: arial, helvetica, sans-serif; } #content { font-family: arial, helvetica, sans-serif; } #sidebar { font-family: arial, helvetica, sans-serif; } h1 { font-family: georgia, times, serif; }
22.
高效的::
23.
body { font-family: arial,
helvetica, sans-serif; }
24.
body { font-family: arial,
helvetica, sans-serif; } h1 { font-family: georgia, times, serif; }
25.
使用 多重选择器
26.
低效率的::
27.
h1 { color:
#236799; } h2 { color: #236799; } h3 { color: #236799; } h4 { color: #236799; }
28.
高效的::
29.
h1, h2, h3,
h4 { color: #236799; }
30.
使用 多重声明
31.
低效率的::
32.
p { margin:
0 0 1em; } p { background: #ddd; } p { color: #666; } 译者注: 对于十六进制颜色值,个人偏向于色值不缩写且英文字 母要大写的方式.
33.
高效的::
34.
p {
margin: 0 0 1em; background: #ddd; color: #666; }
35.
使用 简记属性
36.
低效率的::
37.
body {
font-size: 85%; font-family: arial, helvetica, sans-serif; background-image: url(image.gif); background-repeat: no-repeat; background-position: 0 100%; margin-top: 1em; margin-right: 1em; margin-bottom: 0; margin-left: 1em; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; border-style: solid; border-width: 1px; border-color: red; color: #222222;
38.
高效的::
39.
body {
font: 85% arial, helvetica, sans-serif; background: url(image.gif) no-repeat 0 100%; margin: 1em 1em 0; padding: 10px; border: 1px solid red; color: #222; }
40.
避免使用 !important
41.
慎用写法::
42.
#news { background:
#ddd !important; }
43.
特定情况下可以使用 以下方式提高权重级别::
44.
#container #news {
background: #ddd; } body #container #news { background: #ddd; }
45.
那么,如何让(后续)维护你 站点的人更容易理解你的 样式代码呢?
46.
书写可维护的CSS
47.
在样式表开头添加一个注 释块,用以描述这个样式 表的创建日期、创建者、 标记等备注信息.
48.
/* --------------------------------- Site:
Site name Author: Name Updated: Date and time Updated by: Name --------------------------------- */
49.
包括公用颜色标记
50.
/* --------------------------------- COLORS Body background:
#def455 Container background: #fff Main Text: #333 Links: #00600f Visited links: #098761 Hover links: #aaf433 H1, H2, H3: #960 H4, H5, H6: #000 --------------------------------- */
51.
给ID和Class进行有意义 的命名
52.
不推荐的命名方式::
53.
.green-box { ...
} #big-text { ... }
54.
推荐使用的命名方式::
55.
.pullquote {... } #introduction
{... }
56.
将关联的样式规则进行整 合
57.
#header { ...
} #header h1 { ... } #header h1 img { ... } #header form { ... } #header a#skip { ... } #navigation { ... } #navigation ul { ... } #navigation ul li { ... } #navigation ul li a { ... } #navigation ul li a:hover { ... } #content { ... } #content h2 { ... } #content p { ... } #content ul { ... } #content ul li { ... }
58.
给样式添加清晰的注释
59.
/* --------------------------------- header styles --------------------------------- */ #header {
... } #header h1 { ... } #header h1 img { ... } #header form { ... } /* --------------------------------- navigation styles --------------------------------- */ #navigation { ... }
60.
接下来, 如何管理你整站
的CSS文件呢?
61.
组件化 CSS
62.
举个例子: 你的Html 文档引入了一个主样式表
HTML文档 主样式表
63.
步骤一 将主样式表拆分成独立的样式文件
container.css HTML 文档 header.css content.css
64.
为什么要拆分样式文件?
更易于查找样式规 则.简化维护,方便 管理.还可以针对某 一页面提供特定 的样式.
65.
步骤二 添加一个桥接样式文件 HTML
文档 桥接样式文件
66.
为什么要添加桥接样式? 你可以随时添加或移除样 式而不需要修改 HTML文档.
67.
步骤三 引入桥接样式文件 HTML 文档
桥接样式文件
68.
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <meta http-equiv="content-type" content="text <title>Page title</title> <link rel="stylesheet" href="bridging.css" type="text/css” media="screen, projection"> </head> <body> ... </body> </html>
69.
为什么要定义两种媒体类型? NN4不支持@import,故识别
不到桥接样式.
70.
步骤四 将(分离的)CSS文件导入桥接 样式中 HTML 文档
桥接样式文件
71.
@import ‘header.css’; @import ‘content.css’; @import
‘footer.css’;
72.
@imports 如何工作? 它将所有CSS规则从一个文 件导入到另外一个文件. @import 不能被老的 浏览器所识别.
73.
概述? HTML 文档
桥接样式文件
74.
对于大型站点来 说,这是一个理 想的概念.
75.
header
nav Home bridge1 footer home
76.
header
nav Section 1 bridge2 footer Section 1
77.
header
nav Section 2 bridge3 footer Section 2
78.
Hack-free CSS
79.
处理诸如IE这样烦人的浏 览器的兼容性是我们最头 疼的事儿之一.
80.
很多朋友使用CSS hack来解决这些问题.
81.
问题是当IE版本进行升级 更替,改进对CSS的支持后, 之前使用的hacks将会无效!
82.
你是怎么解决这个问题的呢?
83.
“我们要求你在不使用CSS hacks 的情况下更新你的 页面.假如你想针对IE或 者避开IE,你可以使用条 件注释.”
84.
条件注释如何工作?
85.
步骤一 针对IE,创建一个新的样 式文件
86.
header
nav Home bridge1 footer home IE
87.
步骤二 在HTML文档的开头添加条 件注释代码
88.
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <meta http-equiv="content-type" content="text <title>Page title</title> <link href="css/import1.css" rel="stylesheet" <!--[if IE 5]><link rel="stylesheet" href="ie5.css" type="text/css" media="screen"><![endif]--> </head> <body> ... </body> </html>
89.
只有指定的IE浏览器版本 识别这个心的样式,其它 的浏览器将会彻底忽略它.
90.
header
nav Home bridge1 footer home IE
91.
平常的浏览器识别:
92.
header
nav Home bridge1 footer home IE
93.
特定IE版本识别:
94.
header
nav Home bridge1 footer home IE
95.
举个例子, 大多数浏览器会 将补白加进容器的宽度里, 但是IE5不会.这种情况下, IE5显示的是一个比较小的 容器.
96.
main.css (被包含IE5在内的所有浏览器识别)::
97.
#container {
width: 600px; padding: 100px; }
98.
ie5.css (只有IE5识别)::
99.
#container { width:
800px; }
100.
为什么条件注释是一个好的解决 方案呢?
101.
1. No hacks 特定的CSS规则仅出现在新 的样式表里.
102.
2. 文件分离 针对特定版本的IE定义的 样式脱离了主样式表,可 以在IE浏览器升级更新对 属性支持时轻松移除这些 文件.
103.
3. 针对性 可对不同版本的IE浏览器有 针对性的进行相关属性的定 义。
104.
<!--[if IE]> <!--[if IE
5]> <!--[if IE 6]> <!--[if lt IE 6]> <!--[if lte IE 6]> <!--[if gt IE 6]> <!--[if gte IE 6]>
105.
高效的 CSS 可维护的 CSS 组件化的
CSS hack-free CSS
106.
作者: Russ Weakley
http://www.maxdesign.com.au 翻译: Jeanne http://webteam.tencent.com
Baixar agora