专业汇报PPT.ppt

研究HTML/CSS中的CSS、CSS3、TCP/IP第二组04171825Page4目录Contents12347CSSCSS3TCP/IPENDCSSCSS 概述CSS 指层叠样式表(Cascading Style Sheets) 样式定义如何显示HTML 元素样式通常存储在样式表中把样式添加到HTML 中,是为了解决内容与表现分离的问题外部样式表可以极大提高工作效率外部样式表通常存储在CSS 文件中多个样式定义可层叠为一下面这行代码的作用是将h1 元素内的文字颜色定义为红色,同时将字体大小设置为14 像素。在这个例子中,h1 是选择器,color 和font-size 是属性,red 和14px 是值。h1 {color:red; font-size:14px;}?CSS 语法?CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明。?选择器通常是您需要改变样式的HTML 元素。?每条声明由一个属性和一个值组成。?属性(property)是您希望设置的样式属性(style attribute)。每个属性有一个值。属性和值被冒号分开。下面的示意图为您展示了上面这段代码的结构:?如果要定义不止一个声明,则需要用分号将每个声明分开。下面的例子展示出如何定义一个红色文字的居中段落。最后一条规则是不需要加分号的,因为分号在英语中是一个分隔符号,不是结束符号。然而,大多数有经验的设计师会在每条声明的末尾都加上分号,这么做的好处是,当你从现有的规则中增减声明时,会尽可能地减少出错的可能性。就像这样:?p {text-align:center; color:red;} 派生选择器?通过依据元素在其位置的上下文关系来定义样式,你可以使标记更加简洁。?在CSS1 中,通过这种方式来应用规则的选择器被称为上下文选择器(contextual selectors),这是由于它们依赖于上下文关系来应用或者避免某项规则。在CSS2 中,它们称为派生选择器,但是无论你如何称呼它们,它们的作用都是相同的。?派生选择器允许你根据文档的上下文关系来确定某个标签的样式。通过合理地使用派生选择器,我们可以使HTML 代码变得更加整洁。?比方说,你希望列表中的strong 元素变为斜体字,而不是通常的粗体字,可以这样定义一个派生选择器:?li strong { font-style: italic; font-weight: normal; } id 选择器?id 选择器可以为标有特定id 的HTML 元素指定特定的样式。id 选择器以“#”来定义。?下面的两个id 选择器,第一个可以定义元素的颜色为红色,第二个定义元素的颜色为绿色:?#red {color:red;} #green {color:green;} 类选择器?在CSS 中,类选择器以一个点号显示:?.center {text-align: center} 在上面的例子中,所有拥有center 类的HTML 元素均为居中。?在下面的HTML 代码中,h1 和p 元素都有center 类。这意味着两者都将遵守".center" 选择器中的规则。?<h1 class=“center”> This heading will be center-aligned </h1> <p class=“center”> This paragraph will also be center-aligned. </p> 注意:类名的第一个字符不能使用数字!它无法在Mozilla 或Firefox 中起作用。?注意:类名的第一个字符不能使用数字!它无法在Mozilla 或Firefox 中起作用。?和id 一样,class 也可被用作派生选择器: