网站建设_专题—CSS.pptVIP

网页设计与Dreamweaver专题 CSS层叠样式表 用表格制作圆角栏目框 网页中经常可以看到漂亮的圆角栏目框，下面是制作一个固定宽度的圆角栏目框的例子 制作出如图的网页效果： 本章内容 1. CSS样式表的定义 2. 选择器的分类√ 3. 在HTML中引入CSS的方法√ 4. DW中CSS的可视化编辑 √ CSS是Cascading Styles Sheets的缩写，中文译名为层叠样式表，是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言 HTML和CSS的关系就是“内容”和“形式”的关系，由HTML组织网页的结构和内容，而通过CSS来决定页面的表现形式 选择器的分类（重点） CSS的语法 CSS样式表由一系列样式规则组成，浏览器将这些规则应用到相应的元素上，下面是一条样式规则。 h1{ color: red; font-size: 25px; } CSS样式规则的组成－选择器 一条CSS样式规则由选择器(selector)和声明(declarations)组成。 选择器是为了选中网页中某些元素，选择器可以是一个标签名，叫标签选择器。 选择器也可以是一个自定义的类名，表示将自定义的一类元素全部选中，称为类选择器。 选择器还可以是一个自定义的id名，表示选中网页中某一个唯一的元素，称为ID选择器。 CSS选择器的分类 标签选择器 类选择器 id选择器 伪类选择器 1、标签选择器 标签是元素固有的属性，CSS标签选择器用来声明哪种标记签用哪种CSS样式，因此，每一种html标签的名称都可以作为相应的标签选择器的名称。如： 标签选择器示例 2、类选择器 类选择器 标记选择器一旦声明，那么页面中所有该标记的元素都会产生相应的变化。 例如当声明p标记为红色时，页面中所有的p元素都将显示为红色 但是如果希望其中某一些p元素不是红色，而是蓝色，就需要将这些p元素自定义为一类，用类选择器来选中它们； 或者希望不同标记的元素应用同一样式，也可以将这些不同标记的元素定义为同一类，如下所示的一个p元素和一个h3元素被定义为了同一类。类选择器以半角“.”开头，且类名称的第一个字母不能为数字 style type=text/css .one{ color: red; /* 红色 */ } .two{ font-size:20px; /* 文字大小 */ } /style p选择器之标记选择器1/p p class=one应用第一种class选择器样式/p p class=two应用第二种class选择器样式/p h3 class=twoh3同样适用/h3 h3 class=“one two”应用两种样式/h3 3、ID选择器 id选择器的使用方法与class选择器基本相同，不同之处是一个id选择器只能应用于html文档中的一个元素，而class选择器可以应用于多个元素。id选择器以半角“#”开头，且id名称的第一个字母不能为数字 style type=text/css #one{ font-weight:bold; /* 粗体 */ } #two{ font-size:30px; /* 字体大小 */ color:#009900; /* 颜色 */ } /style body p id=oneID选择器1/p p id=twoID选择器2/p h3 class=“two”h3同样适用/h3 h3 class=“one two”应用两种样式/h3 ID选择器 上例中，第一行应用了#one的样式，一个id选择器只能应用在一个元素上（但即使真的违规，浏览器也显示了CSS样式风格且不会报错。 在编写CSS代码时，还是应该养成良好的编码习惯，一个id最多只能赋予一个html元素，因为每个元素定义的id不只是CSS可以调用，JavaScript等脚本语言也可以调用，如果一个html中有两个相同id属性的元素，那么将导致JavaScript在查找id时出错。 类名和ID名的大小写 关于类名和id名的大小写：CSS大体上是不区分大小写的语言，但是对于标签实体的类名和id名是否区分大小写取决于标记语言是否区分大小写，如果使用XHTML，那么类名和id名是区分大小写的；如果是HTML，则不区分大小写 4、伪类选择器 伪类选择器可以看成是一种特殊的标记选择器，它用来选中在某种状态下的标记 。 网页中的链接标签能响应浏览者的点击。a标签有四种状态能描述这种响应，分别是a:link、a:visited、a:hover、a:active，a标记在这几种状态下的样式能够通过伪类选择器来分别定义，伪类选择器的标记和伪类之间用“:”隔开。其格式为 通过伪类选择器制作