`

CSS模块化设计——从空格谈起

阅读更多


引子:
今天在蓝点看了Yang的博客《CSS样式表中继承关系的空格与不空格》,思考了一下,本来想写《CSS样式的复合定义与复合调用及简单的模块化设计》,但是内容太大,还是来点简单的实惠。所以改叫《CSS样式——从空格谈起》吧。
一、空格运算符
(1)CSS语言
简单地说,CSS语言类似JS语言,是通过客户端下载后,通过本地浏览器解析。而CSS语言又是非常低级的“弱类型”语言,离JS这种基于对象的比较完善的“弱类型”语言,还差相当一段距离。要知道CSS样式是定义出来的,而样式的呈现是根据文档流顺序和CSS优先级别,浏览器自己识别计算后显示出来的。而浏览器又有忽略和纠错功能(尤以IE为甚),所以样式定义的语法有错误,并不影响浏览器正常工作,只不过显示不出应有的效果罢了。在我们设计定义样式的时候,排错是比较令人苦恼的,其本质原因是于这种弱类型CSS语言本身的不严禁性有关系的,所以我们就更应该注重CSS定义的严禁,才能出较少的错误,较快更好的完成工作。
(2)CSS的运算符
首先说,CSS语言的运算符就不多,有.#{}:";还有一个非常重要的空格。这几个运算符,都是常用的定义声明符号。而在CSS样式定义中,空格就有点特殊,我们可以把它视为在.Net或Java中命名空间或类包定义中的 . 运算符。换句话说,我们可以把空格视为路径指向的箭头,表明HTML标签的父子级别关系。CSS是与HTML想关联的,也就是说,CSS的每一个定义都与“某个HTML标签”或“某段模块化HTML代码”相对应,而HTML可以调用多个样式类。一个CSS样式类可以根据HTML代码来“复合定义”;一个HTML标签也可以“复合调用”多个样式类。所以说,CSS样式定义的复杂性与关联的HTML是密不可分。
(3)实例说明
<style type="text/css">
td .b {
color:#00ff00;
}
th.b {
color:#ff0000;
font-family:黑体;
font-size:20px;
}
.b {
color:#0000ff;
font-size:12px;
}
</style>
<table>
<tr>

<td><div class="b">第一个类b的类路径是th .b</div></td>
<th class="b">第二个类b的类路径是th.b</td>
<td class="b">第三个类b的类路径是 .b</th>
</tr>
</table>
<div class="b">第三个类b的类路径是 .b</div>

讲解:
1、第一个类b的类路径是td .b,定义该HTML文档内所有的td标签内的带class="b"的标签的样式 。
也就是说,
td .b {
color:#00ff00;
}
定义的是
<td><div class="b">text</div></td>这组代码块中的b类,class="b"是包含在td标签内的,是td的子级,所以在这里要用“空格”指向明确表明父子级别关系。
2、第二个类b的类路径是th.b,定义的是该HTML文档内所有的带class="b"的th标签的样式。
也就是说,
th.b {
color: #FF0000
}
定义的是<th class="b">text</td>,在这里的代码中,th和class='b'是平级的,先th后.b组成一个同级类路径th.b,所以没有空格代表“HTML类”和“自定义类”具有同级路径!

3、第三个类b的类路径是 .b,定义该HTML文档内所有的td标签的样式,它是该文档的一个全局样式,是body .b的简写。
也就是说,
.b {
color:#0000ff;
font-size:12px;
}
定义了
<td class="b">第三个类b的类路径是td.b</th>

<div class="b">第三个类b的类路径是 .b</div>
这两处的b类没有明确的路径指向,优先级别要比有明确路径的低。
4、大家可以看到,在HTML代码中,同样都是class="b",但是在CSS定义时,采用的类路径不同,作用就不同了。类路径越完整,优先级越高。在具体应用的时候,我们可以,使用完整类路径来定义某HTML代码块某一些特殊地方,做异化处理。例如本例表头th的黑体字显示效果。
二、HTML中复合调用样式类
(1)在一个HTML标签内,可以复合调用多个样式类,也是用空格做运算符,复合类名总字符不能超过256。
(2)示例:
<style type="text/css">
.myTxt {
font-size:50px;
font-family:Arial Black;
}
.txtRed {
color:red;
}
.txtOrange {
colorrange;
}
.txtGreen {
color:green;
}
.txtBlue {
color:blue;
}
</style>
<ul>
<li class="myTxt txtRed">123</li>
<li class="myTxt txtOrange">Text</li>
<li class="txtGreen">Text</li>
<li class="myTxt txtBlue">Text</li>
</ul>
(3)应用:
对于某些多数样式属性累同,仅有几个不同样式属性的定义,可以用这个方法来缩写。
也可以在某个不改变某个通用样式类的同时,用HTML调用复合类,突出局部特例。
三、CSS HTML的模块化设计
(1)举个简单例子:
.classNameA .classNameB .classNameC
就是一个类包路径,A包含B,B包含C.
意思就是,在A块内的全部HTML代码(包括B块、C块),先应用样式classNameA;
然后,在B块内的全部HTML代码(包括C块),先应用样式classNameA,之后再先应用样式classNameB;
最后,在C块内的全部HTML代码,先应用样式classNameA,再先应用样式classNameB,最后应用样式classNameB;
(2)在样式表中,关于类包的路径,对于某些复杂的HMTL代码,最后写绝对路径,就是每一个类名都不要拉下。这样可读性更强,错误率更小;当然,宽容度就越低。
例如
<style type="text/css">
/*控制 li 的样式*/
.a1 ul li {
color:red;
}
/*控制class="a"的div块内,全部连接 a 的样式*/
.a1 a {
font-size:20px;
}
/*控制class="a"的div块内,一个一个为 class="mylink"的样式*/
.a1 .myLink {
font-size:12px;
}
/*控制 li 内连接a的样式*/
.a1 ul li a {
font-size:40px;
}
/*控制名 li 内,一个为 class="mylink"的连接的样式 */
.a1 ul li .myLink {
font-size:60px;
font-family:黑体;
}
/*b1样式*/
.b1 {
color:blue;
}
/*控制 li 内 b1 的样式*/
.a1 ul li .b1 {
color:green;
}
</style>
<div class="a1">
<a href="#">linkText</a>
<a href="#" class="myLink">titleText</a>
<div class="b1">b11111111</div>
<ul>
<li>
<a href="#">titleText</a>
<div class="b1">nameCN</div>
</li>
<li>
<a href="#" class="myLink">titleText</a>
<div class="b1">nameCN<span class="c1">nameEN</span></div>
</li>
<li>titleText</li>
<li>titleText</li>
<li>titleText</li>
</ul>
</div>

样式,按*.HTML从内层到外层;按*.CSS上下文,从下文到上文;按内联样式表上下文,从下文到上文;按内嵌>内联>外联的优先级;
叠加覆盖计算最终显示效果。
CSS语句,严格说是JS代码的一类,换句话说,CSS语句也是“弱类型”的,空格是一个“运算符”,由于“弱类型”不严谨,所以,没有空格的时候,虽然不报错,也有显示效果,但那是按错误逻辑运算的,有时歪打正着,但确莫名其妙。再加上有很多满足各浏览器的HACK语法,CSS语句就更加零乱不堪。所以,写的时候,尽量在满足宽容度的情况下,严禁一些。
(3)给大家一个案例
模块化设计,要求相对封闭独立性、可重复性、可修改性、统一性等等是比较高的,当然,模块化越高越复杂的,修改起来也要月谨慎,因为牵一发而动全身,这就要求,在开发设计前期要做好详尽的策划,从目录结构、命名规范,到全局和特例的界限划分、后期修改的宽容度估计等等,都要有个把握。
下面就给一个我做的网站的地址:http://www.51youcai.com
1、样式表是按类路径来模块化定义的,有中文注释;
2、由于加了jsp程序,代码格式有变动,也许会有不少垃圾代码;
3、在FireFox下,有几处显示不当、JS未做相应优化,请用IE6 浏览;
4、感兴趣者可以当HTML和CSS来,做参考。

参考:
http://www.jb51.net/css/6909.html
分享到:
评论

相关推荐

    小程序模块化开发——模板.zip

    本压缩包“小程序模块化开发——模板.zip”显然是为了提供一套小程序模板,用于实现模块化的开发流程。下面将详细探讨小程序模块化开发的核心概念、方法以及模板的应用。 首先,我们要理解什么是模块化。模块化是将...

    CSS高效开发实战——CSS 3、LESS、SASS、Bootstrap、Foundation

    《CSS高效开发实战——CSS 3、LESS、SASS、Bootstrap、Foundation》内容精练、重点突出、实例丰富、讲解通俗,是广大CSS设计人员和前端开发人员必备的参考书,同时也非常适合大中专院校师生学习阅读,也可作为高等...

    web设计——CSS模板打包下载

    "detachable"可能指的是模板的模块化设计,允许用户自由组合和拆分不同的页面元素。"Design_Gallery"可能是一个包含多种设计样式的集合,供用户选择最适合他们项目的设计。 "abrasive_download_free_css_templates....

    HTML+CSS大作业——vivo官方商城

    【HTML+CSS大作业——vivo官方商城】这个项目是一个基于HTML和CSS技术构建的模拟vivo官方网站的页面设计。这个任务旨在让学生掌握基础的网页布局、元素样式控制以及响应式设计等关键技能。 HTML(HyperText Markup ...

    css/js文件模块化组件

    在现代Web开发中,CSS和JavaScript的模块化组件已经成为提高效率、优化性能和维护代码质量的重要手段。"css/js文件模块化组件"的概念旨在解决传统开发模式中的问题,如文件冗余、依赖混乱以及HTTP请求过多等。通过将...

    《Web前端设计基础——HTML5、CSS3、JavaScript》课后答案整理.pdf

    根据提供的文件内容,我们可以整理出以下Web前端设计基础的知识点: 1. HTML5、CSS3、JavaScript概述 - HTML5是最新版本的超文本标记语言,用于创建网页的标准标记语言。它具有更快的访问速度、更好的搜索引擎优化...

    前端体验设计——HTML5+CSS3终极修炼

    ### 前端体验设计——HTML5+CSS3终极修炼 #### 一、书籍概述 《前端体验设计——HTML5+CSS3终极修炼》是一部针对Web前端开发领域的重磅力作,由知名设计师Andy Clarke撰写,腾讯FERD团队精心翻译审校。本书聚焦于...

    css教程————快速掌握css

    11. **CSS预处理器**:像Sass、Less和Stylus这样的预处理器允许编写更模块化、可维护的CSS代码,支持变量、嵌套规则、函数和混合模式等功能。 12. **浏览器兼容性**:了解不同浏览器对CSS特性的支持程度很重要。...

    模块化的 CSS 框架

    Yaml 是一个模块化的 CSS 框架,可以用来构造灵活,可访问和响应式的页面。YAML 提供一系列完整的匹配构建模块来创建复杂的网页界面。网格,导航,表格,字体排版模块和所有附件都能进行无缝的协同合作。所有的布局...

    CSS帮助文档——汉化版

    在【标题】"CSS帮助文档——汉化版"中,我们可以推断这是一个针对CSS的中文教程或参考手册,旨在帮助中文使用者更方便地学习和理解CSS语言。这个汉化版文档可能是由一位正在学习CSS的个人或团队翻译并整理的,旨在...

    CSS经典框架——YAML

    1. **模块化**:YAML的核心是其模块化的结构。它将CSS代码分解成可重用的组件,如网格系统、导航栏、表单等,这使得开发者可以轻松地组合和定制布局,同时保持代码的整洁。 2. **响应式设计**:随着移动设备的普及...

    css模块化方案

    CSS模块化方案是一种提高代码可维护性和复用性的方法,其目标是使样式代码更易于理解和管理。在JavaScript中,模块化已经相当成熟,而CSS的模块化也日益受到重视。以下将详细介绍几种主要的CSS模块化方案。 1. OO...

    计算机毕业设计HTML+CSS+JavaScript——基于HTML花店购物网站项目与实现.md

    - **页面布局**: 采用DIV+CSS布局,确保页面的响应式设计和良好的用户体验。 - **色彩搭配**: 使用鲜明且活力四射的颜色,使页面更具吸引力。 - **内容丰富**: 包括多个页面,每个页面都有不同的功能和设计,如首页...

    CSS 模块化 实现方法

    总之,CSS模块化是一个系统性的工程,涉及到设计、开发和维护的全过程。通过合理的模块化设计,我们可以创建出更加高效、可维护的前端项目。然而,实现CSS模块化并非易事,需要持续学习和实践,以不断优化和完善。在...

    经典简洁的HTML5 & CSS3 网站模板—— Deliccio

    特别是针对餐饮行业的特点,设计师通过CSS3实现了动态的食物图片滤镜效果,仿佛能闻到美食的香气。 模板名为“Deliccio”,意在激发用户的食欲,这表明它在色彩搭配和元素布局上有着独特的考量。暖色调的配色方案让...

    用HTML+CSS做一个漂亮简单的旅游网站——旅游网页设计与实现(6页)HTML+CSS+JavaScript

    #### 1.2 CSS3样式设计与布局技巧 - **盒模型**: 理解CSS盒模型的基本概念,包括`content`, `padding`, `border`, `margin`等属性。 - **响应式设计**: 利用媒体查询(Media Queries)实现不同屏幕尺寸下的布局调整...

    HTML+CSS网页设计与布局从入门到精通

    《HTML+CSS网页设计与布局从入门到精通》紧密围绕网页设计师在制作网页过程中的实际需要和应该掌握的技术,全面介绍了使用HTML和CSS进行网页设计和制作的各方面内容和技巧。 《HTML+CSS网页设计与布局从入门到精通》...

    web课程设计——明星网站设计

    在本“Web课程设计——明星网站设计”项目中,我们将深入探讨Web前端开发的核心技术和实践应用,特别是关于CSS样式表和HTML5的使用。这个课程旨在帮助学生掌握创建吸引人的、响应式的明星网站所需的技能。 首先,让...

    基于HTML电商购物项目的设计与实现——html+css+javascript+jquery+bootstarp响应式图书商城

    ### 基于HTML电商购物项目的设计与实现——html+css+javascript+jquery+bootstrap响应式图书商城 #### 一、项目概述 本项目旨在通过HTML、CSS、JavaScript、jQuery以及Bootstrap等技术来构建一个完整的响应式电子...

Global site tag (gtag.js) - Google Analytics