- 浏览: 665437 次
- 性别:
- 来自: 广州
文章分类
- 全部博客 (173)
- ajax (4)
- ant (4)
- css (14)
- eclipse (1)
- exe4j (0)
- hibernate (7)
- html (29)
- http (2)
- install4j (0)
- java (35)
- javascript (31)
- jdbc (1)
- jquery (2)
- jsp (15)
- linux命令 (8)
- ooad (2)
- properties (3)
- servlet (1)
- spring (3)
- struts (6)
- swing (4)
- thread (2)
- version_control (1)
- webservice (4)
- xml (4)
- 数据库 (19)
- 正则表达式 (5)
- 其他 (16)
- 面试题 (1)
- 框架 (9)
- maven (1)
- util (29)
- 设计模式 (1)
最新评论
-
herodie4444:
看起来好像不难。
Java Struts2创建Excel文件并实现文件下载 -
心轨翼:
Java遍历Set集合方法 -
魔鬼的献祭:
...
java的web开发分页工具类 -
Nmxszxsl:
能发一个没有被墙的代码到我的邮箱吗?万分感谢。54365156 ...
Google翻译post提交无长度限制的在线翻译例子 -
782763595:
...
jar包混淆器介绍
引子:
今天在蓝点看了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
发表评论
-
转 js中数据类型判断(转)
2012-11-05 11:07 1143转载自: http://www.cnblogs.com/yjh ... -
包含日期和时间的选择器(转)
2012-09-27 16:11 1101转载自: http://www.cnblogs.com/swe ... -
jsp通用分页实现脚本
2012-09-26 17:12 1706工具脚本使用时只需替换url的问号前半部分即可。 此页面需要j ... -
Java过滤html标签
2012-09-21 09:54 1814方法一: String oldStr="< ... -
Web项目设置页面不缓存
2012-08-04 19:55 2896htm网页 <meta http-equiv=&qu ... -
JS动态创建表格(转)
2012-01-06 18:40 1181目标:生成一个2000*5的表格,每个单元格的内容是行号+逗号 ... -
ajax请求带中文url的参数转码解码
2011-12-13 10:56 3741js提交ajax请求,默认编码方式是ISO-8859-1,此编 ... -
html框架页面文档声明
2011-12-06 10:55 2206通俗地讲,文档类型声明(Document Type Decl ... -
本地、远程图片上传预览
2011-11-24 11:00 1912本地、远程图片上传预览,带文件类型检查等功能,更多功能等待仔细 ... -
图片上传预览
2011-11-23 18:31 1410支持IE和FireFox,动态添加图片。 <!DOC ... -
修改 input file 的按钮值
2011-11-23 14:32 3924在网页中修改头像功能时需要把文件框给隐藏掉,网上找到如下方法解 ... -
Struts2中表单与Action传递数据三种方式(转)
2011-11-18 09:51 17971.Action中的属性与表单中的属性一致就可以 JSP ... -
HTML4和HTML5之间的10个主要不同
2011-11-17 13:04 845cnbeta.com上看到的文章, ... -
浏览器对js支持的差异
2011-11-16 17:31 972document.all firefox不支持,IE支持 -
键盘与ASCII对应值
2011-11-16 11:35 1250还未进行仔细编辑,待有空编辑成表格展示。 ASCII 表 及 ... -
表格测试
2011-11-16 11:27 887abccde -
网页iframe标签使用
2011-11-04 10:50 1455iframe使用很简单,使用src属性指向另一个你需要包含的另 ... -
js去除前后空格方法
2011-10-26 14:34 1189js去除前后空格方法 //去除前后空格方法 String ... -
js获取下拉列表选中项的值和文本(select)以及获取单选按钮(radio)组的值和修改选中项[转]
2011-10-25 15:59 1278一、获取下拉列表选中 ... -
div+css+ul+li表格
2011-08-10 18:48 3618<!DOCTYPE html PUBLIC &quo ...
相关推荐
《CSS高效开发实战——CSS 3、LESS、SASS、Bootstrap、Foundation》内容精练、重点突出、实例丰富、讲解通俗,是广大CSS设计人员和前端开发人员必备的参考书,同时也非常适合大中专院校师生学习阅读,也可作为高等...
DIV是HTML中一个非常重要的结构元素,它能帮助创建模块化的布局,通过CSS进行样式化。 【压缩包子文件的文件名称列表】: 1. **templatemo_style.css**:这可能是一个模板样式表文件,包含了一系列预定义的CSS规则。...
【HTML+CSS大作业——vivo官方商城】这个项目是一个基于HTML和CSS技术构建的模拟vivo官方网站的页面设计。这个任务旨在让学生掌握基础的网页布局、元素样式控制以及响应式设计等关键技能。 HTML(HyperText Markup ...
根据提供的文件内容,我们可以整理出以下Web前端设计基础的知识点: 1. HTML5、CSS3、JavaScript概述 - HTML5是最新版本的超文本标记语言,用于创建网页的标准标记语言。它具有更快的访问速度、更好的搜索引擎优化...
### 前端体验设计——HTML5+CSS3终极修炼 #### 一、书籍概述 《前端体验设计——HTML5+CSS3终极修炼》是一部针对Web前端开发领域的重磅力作,由知名设计师Andy Clarke撰写,腾讯FERD团队精心翻译审校。本书聚焦于...
11. **CSS预处理器**:像Sass、Less和Stylus这样的预处理器允许编写更模块化、可维护的CSS代码,支持变量、嵌套规则、函数和混合模式等功能。 12. **浏览器兼容性**:了解不同浏览器对CSS特性的支持程度很重要。...
Yaml 是一个模块化的 CSS 框架,可以用来构造灵活,可访问和响应式的页面。YAML 提供一系列完整的匹配构建模块来创建复杂的网页界面。网格,导航,表格,字体排版模块和所有附件都能进行无缝的协同合作。所有的布局...
1. **模块化**:YAML的核心是其模块化的结构。它将CSS代码分解成可重用的组件,如网格系统、导航栏、表单等,这使得开发者可以轻松地组合和定制布局,同时保持代码的整洁。 2. **响应式设计**:随着移动设备的普及...
网页设计与开发——HTML、CSS、JavaScript实例教程网页设计与开发——HTML、CSS、JavaScript实例教程网页设计与开发——HTML、CSS、JavaScript实例教程网页设计与开发——HTML、CSS、JavaScript实例教程网页设计与...
CSS模块化方案是一种提高代码可维护性和复用性的方法,其目标是使样式代码更易于理解和管理。在JavaScript中,模块化已经相当成熟,而CSS的模块化也日益受到重视。以下将详细介绍几种主要的CSS模块化方案。 1. OO...
html css js网页设计——基于HTML+JS+CSS开发的页面小游戏(高分课设)。个人经导师指导并认可通过的98分大作业设计项目,适用人群:计算机,电子信息工程、数学等专业的大学生课程设计、期末大作业或毕业设计,作为...
- **页面布局**: 采用DIV+CSS布局,确保页面的响应式设计和良好的用户体验。 - **色彩搭配**: 使用鲜明且活力四射的颜色,使页面更具吸引力。 - **内容丰富**: 包括多个页面,每个页面都有不同的功能和设计,如首页...
特别是针对餐饮行业的特点,设计师通过CSS3实现了动态的食物图片滤镜效果,仿佛能闻到美食的香气。 模板名为“Deliccio”,意在激发用户的食欲,这表明它在色彩搭配和元素布局上有着独特的考量。暖色调的配色方案让...
#### 1.2 CSS3样式设计与布局技巧 - **盒模型**: 理解CSS盒模型的基本概念,包括`content`, `padding`, `border`, `margin`等属性。 - **响应式设计**: 利用媒体查询(Media Queries)实现不同屏幕尺寸下的布局调整...
《HTML+CSS网页设计与布局从入门到精通》紧密围绕网页设计师在制作网页过程中的实际需要和应该掌握的技术,全面介绍了使用HTML和CSS进行网页设计和制作的各方面内容和技巧。 《HTML+CSS网页设计与布局从入门到精通》...
这是网页开发中最常见的做法之一,有助于保持代码的清晰性和模块化。 3. **JavaScript库**: - 使用了jQuery库,这是一种轻量级的JavaScript库,简化了HTML文档遍历、事件处理、动画以及Ajax交互等操作,极大地...
在本“Web课程设计——明星网站设计”项目中,我们将深入探讨Web前端开发的核心技术和实践应用,特别是关于CSS样式表和HTML5的使用。这个课程旨在帮助学生掌握创建吸引人的、响应式的明星网站所需的技能。 首先,让...
### 基于HTML电商购物项目的设计与实现——html+css+javascript+jquery+bootstrap响应式图书商城 #### 一、项目概述 本项目旨在通过HTML、CSS、JavaScript、jQuery以及Bootstrap等技术来构建一个完整的响应式电子...