BOOKING

显示标签为“CSS”的博文。显示所有博文
显示标签为“CSS”的博文。显示所有博文

2013年2月11日星期一

CSS学习笔记(一)


第一章 Web标准布局的本质
一、什么是Web标准
  Web标准可以分为3个方面:结构标准语言(主要包括XHTML和XML)、表现标准语言(主要包括CSS)和行为标准(主要包括对象模型、ECMAScript)等。
1. 结构标准语言
  结构标准语言包括两个部分:XML和XHTML。其具体区别如下:
  XML是The Extensible Markup Language 的简写,是一种扩展式标识语言。XML设计的目的是对HTML的补充,它具有强大的扩展性,可以用于网络数据的转换和描述。同时XML具有简洁有效、易学 易用、具有开放的国际化标准、高效可扩充等特点。XHTML是The Extensible HyperText Markup Language(可扩展标识语言)的缩写。XHML是基于XML的标识语言,是在HTML 4.01 的基础上,用XML的规则对其进行扩展建立起来的,它是HTML向XML 的过渡。
2. 表现标准语言
  CSS是Cascading Style Sheets(层叠样式表)的缩写。目前推荐遵循的是W3C于1998年5月12日推出的CSS 2。CSS标准建立的目的是以CSS进行网页布局,控制网页的表现。CSS标准布局与XHTML结构语言相结合,可以实现表现与结构相分离,提高网站的使 用性和可维护性。
3. 行为标准
  行为标准也包括两个部分:DOM 和ECMAScript,其具体区别如下:
  DOM是Document Object Model(文档对象模型)的缩写。W3C建立的W3C DOM是建立网页与Script或程序语言沟通的桥梁。它实现了访问页面中标准组件的一种标准方法。ECMAScript是ECMA(European Computer Manufacturers Association)制定的标准脚本语言。
  使用Table的传统布局和使用CSS的标准布局有着截然不同的思考方式。在传统布局中,页面的结构部分和表现部分混杂在一起。而在标准布局中,结构部分由XHTML 控制,表现部分由CSS 控制,实现了表现和结构相分离。
  语义清楚的XHTML和合理的CSS,使得网站的改版非常容易。页面的结构和表现相分离后,带来的好处主要体现在以下几个方面:
1. 由于内容可以使用不同的样式文件,所以可以使内容适应各种设备。
2. 由于页面的表现部分由样式文件独立控制,所以网站改版变得更加容易。
3. 由于XHTML有清晰的结构,所以使得数据的处理更加简单。
4. 由于XHTML有明确的语义性,所以使得搜索变得更加容易。
  使用CSS 的标准布局,并不是简单地用div 等元素代替table 元素,而是要从根本上改变对页面
的理解方式,达到结构和表现相分离。
  以后的一段时间如果没有特别的事,都会继续学习CSS。笔记持续更新中...

CSS学习笔记(三)


XHTML 代码规范
1.区分大小写
XHTML对大小写是敏感的。在XHTML文档中,使用相同字母大写和小写定义的元素是不同的。例如,<h>和<H>表示的是不 同的元素(在HTML中却代表相同的元素)。在XHTML中,规定使用小写字母定义页面中的元素和属性(包括CSS 样式表定义中也要使用小写字母)。
2.正确嵌套所有元素
XHTML 中规定当元素进行嵌套时,必须按照打开元素的顺序进行关闭。正确嵌套元素的代码示例如下:
<ul><li></li></ul>
错误的嵌套元素的代码示例如下:
<ul><li></ul></li>
XHTML 中还有一些严格强制执行的嵌套限制。这些限制包括以下几点:
(1)<a>元素中不能包含其他的<a>元素。
(2)<pre>元素中不能包含<object>、<big>、<img>、<small>、<sub>或<sup>元素。
(3)<botton>元素中不能包 含<input>、<textarea>、<label>、<select>、<botton>、<form>、<iframe>、<fieldset> 或<isindex>元素。
(4)<label>元素中不能包含其他的<label>元素。
(5)<form>元素中不能包含其他的<form>元素。
3.元素必须要结束
在XHTML中,所有的页面元素都要有相应的结束元素。例如,<body>对应的结束元素是</body>。其中独立的元素,例 如<br>等也必须要结束。方法是,在元素的右尖括号前加入一个“/”来结束元素,例如<br />就是<br>结束后的写法。如果元素中含有属性则“/”出现在所有属性的后面。示例代码如下:
<img src="pic.jpg" />
4.属性必须加上双引号
XHTML中所有的属性,包括数字值都必须加上双引号。其示例代码如下:
<table width="400">
5.明确所有属性的值
XHTML中规定每一个属性都必须有一个值,没有值的属性也必须用自己的名称作为值。例如,在HTML 中,checked 属性是可以不取值的,但在XHTML 中必须用它自身名称作为值。其示例代码如下:
<input type="checkbox" name="box1" value="abc" checked="checked" / >
6.特殊字符要用编码表示
在XHTML中,页面内容含有的特殊字符都要用编码表示。例如,“&”必须要用“&amp;”的形式。例如,下面的HTML代码:
<img src="pic.jpg" src="abc & def">,在XHTML中必须要写成<img src="pic.jpg" src="abc &amp def" />
7.使用页面注释
XHTML中使用<!--和-->作为页面注释,其示例代码如下:
<!--这是一个注释 -->
说明:在页面相应的位置使用注释,可以使文档结构更加清晰。
8.推荐使用外部链接来调用脚本
HTML一般在<!--和-->注释中插入脚本,但是在XML 浏览器中会被简单地删除,导致脚本或样式失效。推荐使用外部链接来调用脚本。调用脚本的代码如下:
<script language="JavaScript1.2" type="text/javascript" src="scripts/menu.js"></script>
说明:language 是指所使用的语言的版本,type 是指所使用脚本语言的种类,src 是指脚本文件所在
路径。

CSS学习笔记(二)

1.文档结构
XHTML 的文档结构和HTML 是一样的,定义文档开始和结束时使用html 元素。页面分为head和body 两个部分,其中head 部分的内容是不显示在页面上的。其文档结构的代码如下所示:
<html>
<head>
</head>
<body>
</body>
</html>
2.文本基础元素
文本基础元素包括 div、p、标题、strong、b、span、br 等元素,主要用来容纳文本等内容。
(1)div元素:块元素。可以使用class 和id 属性进一步控制页面表现。div 元素是CSS 布局中使用最多的元素。
(2)p元素:块元素,表示一个文本段落。
(3)标题元素:块元素,用来定义文本中的各种标题。其包括一系列的元素:h1、h2、h3、h4、h5、h6,其中每个元素都对应有默认的字体样式。
(4)strong 元素:内联元素,使文本以粗体显示。
(5)b 元素:内联元素,显示效果为文本加粗。
(6)span 元素:内联元素,用来区分文本中的一个部分。
(7)br 元素:使文本换行显示。
3.分隔线,图像等修饰元素
(1)hr 元素:块元素,用来分隔页面的各个部分。
(2)img 元素:内联元素,用来插入图像文件。
(3)bgsound 元素:用来添加背景音乐。
4.链接元素
(1)a 元素:内联元素,用来定义页面中的超级链接。
5.列表元素
(1)ul 元素:块元素,定义一个无序列表。
(2)li 元素:块元素,定义列表中具体的条目。
6.表单元素
(1)form 元素:用来定义一个表单,同时定义处理表单的服务器等。
(2)input 元素:用来定义通常的表单控件,例如输入文本等。
7.表格元素
(1)table 元素:用来定义一个表格。
(2)tr 元素:定义表格中的行。
(3)td 元素:定义表格中单元格。