《商务网站设计与开发》课件第03章 层叠样式表.pptx

内容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这个段落是红色。/ppid=green这个段落是绿色。/pid属性为red的p元素显示为红色，而i