CSS学习之----CSS的概念_心木吧--程序员自己的家

查看文章

CSS学习之----CSS的概念

2008年10月27日星期一 10:46

1．CSS的概念
1.1 CSS（Cascading Style Sheet）中文译为层叠样式表，是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

CSS是用于布局与美化网页的.
CSS是Cascading Style Sheets的英文缩写,即层叠样式表.
CSS语言是一种标记语言,因此不需要编译,可以直接由浏览器执行(属于浏览器解释型语言).
CSS文件是一个文本文件,它包含了一些CSS标记,CSS文件必须使用css为文件名后缀.
CSS是大小写不敏感的,CSS与css是一样的.
CSS是由W3C的CSS工作组产生和维护的.
1.2 CSS的历史

1996年W3C正式推出了CSS1.
1998年W3C正式推出了CSS2.
CSS2.1是W3C现在正在推荐使用的.
CSS3现在还处于开发中.
1.3 什么是Html

HTML是用来制作网页的标记语言.
HTML是Hypertext Markup Language的英文缩写,即超文本标记语言.
HTML语言是一种标记语言,不需要编译,直接由浏览器执行.
HTML文件是一个文本文件,包含了一些HTML元素,标签等.HTML文件必须使用html或htm为文件名后缀.
HTML是大小写不敏感的,HTML与html是一样的.
HTML是由W3C的维护的.
1.4 什么是XHtml

XHTML是EXtensible HyperText Markup Language的英文缩写,即可扩展的超文本标记语言.
XHTML语言是一种标记语言,它不需要编译,可以直接由浏览器执行(属于浏览器解释型语言).
XHTML是用来代替HTML的, 是2000年w3c公布发行的.
XHTML是一种增强了的HTML,它的可扩展性和灵活性将适应未来网络应用更多的需求.
XHTML是基于XML的应用.
XHTML更简洁更严紧.
XHTML也可以说就是HTML一个升级版本.(w3c描述它为'HTML 4.01')
除此之外XHTML和HTML基本相同.
参见:w3c的XHTML与HTML常见问题.http://www.w3.org/MarkUp/2004/xhtml-faq
在w3c(www.w3.org)网站上校验XHTML的正确性http://validator.w3.org/
XHTML是大小写敏感的,HTML与html是不一样的.标准的XHTML标签应该使用小写.
1.5 HTML与XHTML的区别

XHTML文档必须具有良好完整的排版(well-formed)
编排良好性(Well-formedness)是XML引入的一个新概念.从本质上说,元素必须有结束标签,或者必须以特殊方式书写,而且元素必须嵌套.

尽管SGML规定重叠(overlapping)是非法的,但现有的浏览器普遍允许重叠.

正确:嵌套元素(nested elements)

<p>梦之都 <em>XHTML教程</em>.</p>
不正确:层叠元素(overlapping elements)

<p>梦之都 <em>XHTML教程</p>.</em>
元素和属性名必须小写
对于所有HTML元素和属性名, XHTML文档必须使用小写. 因为XML是大小写敏感的.如 <li> 和 <LI> 是不同的标签.

对非空元素,必须使用结束标签
在基于SGML的HTML4中的一些隐含结束意义的元素允许忽略结束标签.XML不允许忽略结束标签.除了在DTD中被声明为空的元素,所有元素必须有结束标签.

正确:结束的元素(terminated elements)

<p>梦之都的XHTML教程.</p><p>梦之都的CSS教程.</p>
不正确:未结束的元素(unterminated elements)

<p>梦之都的XHTML教程.<p>梦之都的CSS教程.
属性值必须在引号中
所有的属性值必须在引号中,即使是以数字形式的属性值

正确:在引号中的属性值(quoted attribute values)

<table rows="3">
不正确:不在引号中的属性值(unquoted attribute values)

<table rows=3>
属性最小化
XML不支持属性最小化.属性-属性值必须完整成对的写出.像disabled,checked这样的属性名不能在不指定属性值的情况下出现.

正确:非最小化属性(unminimized attributes)

<input checked="checked">
不正确:最小化属性(minimized attributes)

<input checked>
空元素
空元素必须有结束标签,或者起始标签必须以/>结束.例如,<br/>或<hr></hr>.参看HTML兼容性指导HTML Compatibility Guidelines中的信息,以保证向后兼容HTML 4用户代理程序.

正确:结束的空元素(terminated empty elements)

<br/><hr/>
错误:未结束的空标签(unterminated empty elements)

<br><hr>
属性值中的空白字符处理
用户代理处理属性值时将根据XML的下面方法操作Section 3.3.3:

删去引导和后序空白符
将一个或多个空白符(包括换行)转换成单个字符间空间
Script and Style 元素
XHTML中,script和style元素被声明为#PCDATA内容形式,因此,<和&被看作是标识的开始,&lt和&amp等HTML实体将被XML处理器看作为实体引用而分别被认为是<和&.将script和style元素的内容隐蔽在CDATA标记中避免了这些实体的扩张.

替代的方式是使用外部script和style文档.

SGML排斥
SGML给作者的DTD可以指定在一个元素内部禁止出现的元素.这样的禁止在XML中是不可能的.

例如,严格的HTML 4 DTD"禁止"任何深度的'a'元素对另一'a'元素的嵌套.在XML中无法写出这些的"禁止".虽然这些禁止不能被定义在DTD中,但是一些元素不应该被嵌套.对不能被嵌套的元素Element Prohibitions的总结.

具有'id'和'name'属性的元素
HTML4定义了name属性的元素有a,applet,form,frame,iframe,img and map.HTML4还引入了id属性.这两个属性都是被设计用为片段标识符.

在XML中,片段标识符是ID,每个元素只能有一个ID类型的属性.因此,在XHTML1.0中,id属性被定义为ID类型.为保证XHTML1.0文档是结构良好(well-structured)的XML文档,在定义一个片段标识符时,XHTML文档必须使用id属性,即使是对那些以前用name属性的元素.参看 HTML Compatibility Guidelines,确保XHTML文档以text/html媒体类型使用时,这些"锚(anchors)"能向后兼容.

注意,在XHTML 1.0中,name属性是不赞成使用的,在以后的XHTML版本中将被删除.

最后,梦之都做个总结:
标签不能重叠,可以嵌套
标签与属性都要小写
标签都要有始有终,要么以</p>形式结束,要么以<br />形式结束
每个属性都要有属性值,并且属性值要在双引号中
别用name用id :)

1.6 标记的概念

如下列出常用的Html标记：

<head>

</head>

<body>

<p>这是一个段略！</p>

</body>

</html>

1.7 Html标记的缺陷

修改和维护都比较困难！

1.8CSS的引入

<head>

{

font-family:隶书;

color:Red;

}

</style>

</head>

<body>

<p>这是一个段略！</p>

<p>这是一个段略！</p>

<p>这是一个段略！</p>

<p>这是一个段略！</p>

<p>这是一个段略！</p>

</body>

</html>

1.9 使用CSS优势

内容与表现分离,有了CSS,网页的内容(XHMTL)与表现就可以分开了.
表现的统一,可以使网页的表现非常统一,并且容易修改.
CSS可以支持多种设备,比如手机,PDA,打印机,电视机,游戏机等.
使用CSS可以减少网页的代码量,增加网页的浏览速度,减少硬盘容量.
2．使用CSS控制页面
2.1 行内样式

用Style属性，将CSS样式嵌套在后台Html标记中。

<head>

</head>

<body>

<p style="color:Blue; font-size:12pt;">这是一个段略！</p>

</body>

</html>

2.2 内嵌式

如下：

<head>

{

font-family:隶书;

color:Red;

}

</style>

</head>

<body>

<p>这是一个段略（一）！</p>

<p>这是一个段略（二）！</p>

<p>这是一个段略（三）！</p>

</body>

</html>

2.3 链接式

将CSS样式写到单独得文件中：

CSS文件，1.css

body

{

background-color:Maroon;

font-size:9pt;

}

{

color:Red;

}

{

color:Black;

text-decoration:underline;

}

页面文件：

<head>

</head>

<body>

<p> 这是一个段略（一）！</p>

<p> 这是一个段略（二）！</p>

<p> 这是一个段略（三）！</p>

</body>

</html>

2.3 导入样式

将CSS样式写到单独得文件中：

CSS文件，1.css

body

{

background-color:Maroon;

font-size:9pt;

}

{

color:Red;

}

{

color:Black;

text-decoration:underline;

}

页面文件：导入式，不用<link>标记，而是用 @import url(1.css);

<head>

<!--

@import url(1.css);

-->

</style>

</head>

<body>

<p> 这是一个段略（一）！</p>

<p> 这是一个段略（二）！</p>

<p> 这是一个段略（三）！</p>

</body>

</html>

类别：html知识|

|添加到搜藏 |分享到i贴吧|浏览(680)|评论 (0)

姓　名：	*姓名最长为50字节

网址或邮箱：	(选填)

内　容：

	取消回复