第03章-层叠样式表.pptx

《商务网站设计与开发》温浩宇西安电子科技大学第3章层叠样式表

内容3.1CSS简介3.2选择符3.3CSS的层叠性与优先次序3.4常用属性及其应用实例3.5CSS盒子模型和网页布局方式3.6思考题

3.1CSS简介层叠样式表〔CascaingStyleSheet，简称为CSS〕是W3C组织所拟定出的一套标准的样式语言标准。随着CSS技术技术的使用，HTML页面真正“活动”了起来。而在HTML5中，一些纯粹用作显示效果的元素将取消，因为它们显示效果的工作更适合由CSS来担当。作为一种用于网页展示的样式语言，CSS增加了更多的样式定义方式来辅助HTML语言。通过CSS样式表的定义，只要设定某种元素〔如：表格、背景、连结、文字、按钮、滚动条等〕的样式，那么各网页相同种类的元素将会呈现出相同的风格。这种方式不仅加快了网站开发的进度，而且便于建立一个风格统一的网站。

3.1CSS简介CSS的定义可以直接放在HTML元素中，称为内联样式。形式如下：pstyle=color:sienna;margin-left:20pxThisisaparagraph./pCSS的定义可以放在HTML文件的style元素中，称为内部样式表。形式如下：headstylebody{background-color:yellow;}/style/headCSS的定义也可以独立保存在一个扩展名为.css的文件中，通过链接的方式包含入网页中，称为外部样式表。形式如下：headlinkrel=stylesheettype=”text/css”href=”foo.css”/head

3.2选择符一条CSS规那么中包括两个局部：一个选择符〔selector〕和一个或多个描述〔declaration〕，描述之间用分号隔开。每一个描述中又包含属性名〔property〕和属性值〔value〕。语法如下：selector{property:value;property:value;....}下面的CSS规那么中声明了段落元素p的显式方式，包括文本居中、黑色、arial字体。CSS中的注释在“/*”和“*/”之间。p{text-align:center;color:black;font-family:arial;}在这个例子中，p是选择符，text-align、color和font-family是属性，并为这些属性设置了相应的属性值。

3.2选择符〔1〕类选择符选择符可以是一种HTML元素，例如“p”、“table”等，这些可以看作是HTML预定义的类。例如下面的CSS规那么：body{background:#fff;margin:0;padding:0;}p{color:#ff0000;}应用了上述CSS的HTML文档中所有的body元素〔虽然只可能有一个〕和所有的p元素都将无需声明而自动遵守上述的CSS规那么。

3.2选择符〔2〕子类选择符选择符可以是一种HTML元素的一局部实例，可以理解为基于该类元素〔基类〕的一个子类。例如下面的CSS规那么：td.fancy{background:#666;}p.rchild{text-align:right}在HTML应用上述CSS规那么时，必须声明元素的class为某个子类。例如下面代码：tdclass=fancyABCtdpclass=rchildp标记中的内容/p如果在定义子类时没有给出基类的名称，那么可认为它是任何基类的子类。例如下面的CSS规那么：.cchild{text-align:center}

3.2选择符〔3〕嵌套类选择符选择符可以是根据元素之间的嵌套关系而确定的类，嵌套关系也可以理解为上下文关系。例如下面的CSS规那么和相应的HTML代码：tda{text-align:center;}tableborder=1trtdahref=a.htmFileA/a/tdtdahref=b.htmFileB/a/td/tr/tableahref=c.htmFileC/a上述CSS规那么意味着：只有在单元格中的超链接才会应用文字居中的样式，而其它的超链接那么会忽略这一规那么。

3.2选择符〔4〕id选择符选择符可以是HTML文档中的一个特定元素，例如用“id”属性标识的某一个段落。这些可以看作是HTML元素类的实例对象。例如下面的CSS规那么和相应的HTML代码：#red{color:red;}#green{color:green;}pid=red这个段落是红色。/p