[计算机软件及应用]第3章 CSS技术.pptVIP

第3章 CSS技术 3.1 CSS技术 CSS是Cascading Style Sheets（层叠样式单 ） 的简称，更多的人把它称作样式单。 CSS是由W3C制定，用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。 引入CSS的目的就是把结构与样式分离，网页 的结构用XHTML的标记定义，网页的外观样式用 CSS定义。 W3C简介： W3C是英文 World Wide Web Consortium 的缩写，中文意思是W3C理事会或万维网联盟。W3C于1994年10月在麻省理工学院计算机科学实验室成立。创建者是万维网的发明者Tim Berners-Lee。 W3C组织是对网络标准制定的一个非赢利组织，像HTML、XHTML、CSS、XML的标准就是由W3C来定制。 HTML与XHTML的联系与区别： XHTML是HTML4.0的重新组织。确切的说它是HTML4.01，是一个修正版本的HTML，只不过以XHTML1.0命名发行。 XHTML是一种为了适应XML而重新改造的HTML。 XHTML解决HTML语言所存在的严重制约其发展的问题： (1)不能适应现在越多的网络设备和应用的需要 ; (2)由于HTML代码不规范、臃肿，浏览器需要足够智能和庞大才能够正确显示HTML ; (3)数据与表现混杂，这样你的页面要改变显示，就必须重新制作HTML 于是W3C又制定了XHTML，XHTML是HTML向XML过度的一个桥梁 3.1.1 在网页中加入CSS的方式 当浏览器读取样式单时，要依照文本格式来 读，可以使用3种方法把样式单加入到网页中： 行间样式表、内部样式表、外部样式表。 1.行间样式表 行内样式表指的是CSS编写在XHTML文件 body/body标签的范围内，以style属性的形 式设置某一个标签的样式。 标记 style=属性:属性值; 属性:属性值 ... 例：行间样式表，hangjianCSS.htm html head title行间样式表/title /head body p style=color:red;background-color:blue行间样式表/p /body /html 3.1.1 在网页中加入CSS的方式 2.内部样式表 内部样式表存在于XHTML文件的head /head标签的范围内，CSS代码集中编写在 style/style标签内部。语法形式如下： style type=text/css /style style的type属性设置为“text/css”，说明这是一段 CSS规则代码，允许浏览器忽略它们不支持的样 式表类型。 例：内部样式表，neibuCSS.htm html head title内部样式表/title style type=text/css p{color:red;background-color:blue} /style /head body p内部样式表/p /body /html 3.1.1 在网页中加入CSS的方式 3.1.1 在网页中加入CSS的方式 3.外部样式表 外部样式表是相对于内部样式表而言的，它实际上 是一个后缀名为.css的文件，独立于XHTML页面。 外部样式表通过在某个XHTML页面中添加链接的 方式生效。语法形式如下： link rel=stylesheet type=text/css href=*.css / rel属性用于定义链接的文件和XHTML文档之间的关系。 rel=“stylesheet”表示指定一个首选的样式，href定义所调 用的css文档的路径。 例：外部样式表，waibuCSS.htm html head title外部样式表/title link rel=stylesheet type=text/css href=waibuCSS.css / /head body p外部样式表/p /body /html 代码：waibuCSS.css p{color:red;background-color:blue} 3.1.2 CSS的基本结构 CSS 语法由三部分构成：选择符、属性和值。 语法形式如下： selector{property:value} 选择符 (selector) 通常是定义的 XHTML 元素或标 签，如p、h1、body、td等，属性 (property) 是 CSS所控制对象的样式属性，如文本颜色、背景颜