web技术与网页制作6

第六章CSS层叠样式表内容提要6.1CSS的基本概念6.2如何使用DreamweaverCS3建立CSS6.3CSS滤镜6.1CSS的基本概念6.1.1样式和规则6.1.2层叠和顺序6.1.1样式和规则CSS样式选择符（selector）属性（properties）属性值（value）格式：选择符{属性:值}选择符{属性1:值1;属性2:值2}基本格式：复合样式：6.1.1样式和规则（1）单个“HTML标签”作为选择符单个“HTML标签”：body、table、p等等例：body{color:black}body是指页面主体部分color是控制文字颜色的属性black是颜色的值效果：页面主体（body）中的文字为黑色。6.1.1样式和规则属性值由多个单词组成，必须在值上加引号。例1：p{font-family:sansserif}效果：定义了段落字体为sansserif需要对一个选择符指定多个属性时，注意使用分号将所有的属性和值分开。例2：p{text-align:center;color:red}效果：定义了段落居中排列，并且段落中的文字为红色6.1.1样式和规则为了使所定义的样式表易读，可以采用分行的书写格式。效果：段落排列居中，段落中文字为黑色，字体是arial例3：p{text-align:center;color:black;font-family:arial}6.1.1样式和规则（2）选择符组把具有相同属性和值的选择符组合起来书写，用逗号将选择符分开，以减少重复定义。例：h1,h2,h3,h4,h5,h6{color:green}效果：组里包括所有的标题元素，每个标题元素的文字都为绿色。p,table{font-size:9pt}p{font-size:9pt}table{font-size:9pt}效果：段落和表格里的文字尺寸为9号字。例2：6.1.1样式和规则（3）类选择符把相同的元素分类定义不同的样式，定义类选择符时，在自定类的名称前面加一个点号。类名为英文单词或以英文开头与数字的组合例1：定义两个不同的段落，一个段落向右对齐，一个居中，可先为段落定义两个类。p.right{text-align:right}p.center{text-align:center}应用在不同的段落里，在HTML标签里加入class类参数：pclass=right这个段落向右对齐的/ppclass=center这个段落是居中排列的/p6.1.1样式和规则类选择符的另一种用法，在选择符中省略HTML标签名，这样可以把几个不同的元素定义成相同的样式。例2：.center{text-align:center}效果：定义了.center的类选择符，其表示文字居中排列。h1class=center这个标题是居中排列的/h1pclass=center这个段落也是居中排列的/p可应用到任何元素上。如：使h1元素（标题1）和p元素（段落）都归为“center”类，于是这两个元素的样式都可以随着类选择符“.center”而定：6.1.1样式和规则（4）ID选择符ID参数指定了某个单一元素，ID选择符用来对这个单一元素定义单独的样式。方法一：以标签跟“#ID名称”开头，使该ID代表的样式属性只用于该标签（比如段落标签p）。p#intro{font-size:110%;font-weight:bold;color:#0000ff;background-color:transparent}例1：pid=intro这个段落应用ID选择符p#intro的样式规则。/p应用：6.1.1样式和规则方法二：直接以“#”开头，使该ID代表的样式属性可用于各种网页元素。#intro{font-size:110%;font-weight:bold;color:#0000ff;background-color:transparent}例2：效果：定义了一条id=intro的CSS规则：字体尺寸为默认尺寸的110%；粗体；蓝色；背景颜色透明。整个网页文档中的每个ID名称必须是唯一的，其必须以一个字母开头，紧跟字母、识字或连字符组成。字母限于A-Z和a-z。注：6.1.1样式和规则（5）包含选择符可以单独对元素1里包含的元素2定义样式表。例：对表格元素table里包含的链接元素a定义样式表：tablea{font-size:12px}此定义对表格内的链接改变了样式，文字大小为12象素，而表格外的链接的文字仍为默认大小。这种方式只对在元素1里的元素2定义，对单独的元素1或元素2无定义。注：6.1.2层叠和顺序（1）内联样式（Inlinestyles）在HTML标签内使用style属性定义的，适用于该标签的个别样式。htmlhead/headbodypstyle=”color:red”内联样式举例。/p/body/html例1：使用内联样式，必须使用Content-Style-Type和text/css对整个文档进行单独的样式表语言声明所以，使用内联CSS的网页设计者必须在head部分包括以下标签：meathttp-equiv=Content-Style-Typecontent=text/css6.1.2层叠和顺序pstyle=color:red;font-family:'NewCenturySchoolbook',serif这段的样式是红色的NewCenturySchoolbook字，如果字体可用的话。/Pstyle属性可以应用于任意body元素(包括body本身)，除了basefont、param和script。style属性可以将任何数量的样式属性声明当作自己的值，而每个声明用分号隔开。6.1.2层叠和顺序（2）内部样式（Embeddedstyles）在head与/head之间用style标签加入css样式定义。适用于指定该网页的样式。htmlheadstyletype=”text/css”!--p{color:red}--/style/headbodyp内部样式举例。/p/body/html例：type属性是指使用何种语法，”text/css”表示使用CSS语法6.1.2层叠和顺序（3）链接样式（Linkedstyles）事先建立外部样式表文件（.css），然后在网页文件的head与/head之间用link标签链接该样式表文件。此法使页面内容与版面设计分开，易于管理整个网站的网页风貌。htmlheadlinkrel=”stylesheet”type=”text/css”href=”my.css”/headbodyp链接样式举例。/p/body/htmlrel属性是指在页面中使用外部样式表文件type属性是指使用何种语法href属性是指样式表文件的URL地址样式表文件可使用任何文本编辑器打开并编辑，内容是具体的CSS样式定义，不包括标签。例如my.css文件的内容如下：p{color:red}例：6.1.2层叠和顺序（4）导入样式（Importedstyles）导入样式是指在内部样式定义里，使用@import命令引用事先建立的外部样式表文件。htmlheadstyletype=”text/css”!--@import“my.css”--/style/headbodyp导入样式举例。/p/body/html例：6.1.2层叠和顺序5）缺省浏览器样式（Defaultbrowserstyles）浏览器一般按照上述顺序，由内到外，依次地，继承式地（层叠式地）执行样式表的指令。CSS的妙趣在于能够利用CSS样式规则有效地控制页面对象。如下图，从样式(左)和标签(右)两个角度可见CSS定义的层叠性：从外到内均可定义CSS，并且内层能够继承外层的CSS。6.1.2层叠和顺序CSS三级别外部样式：应用于多个页面，可使用扩展名为.css的外部样式文件（用记事本建立）内部样式：应用于单个页面，可在网页的head与/head之间定义一个样式代码块style……/style；内置样式：应用于页面内部明确的标签，可在标签内部添加style=...属性CSS三级别6.2如何使用DreamweaverCS3建立CSS6.2.1用“CSS面板”建立CSS6.2.2用“页面属性”新建内部样式6.2.3用“属性面板”新建内部样式6.2.4套用CSS6.2.1用“CSS面板”建立CSS“CSS面板”可以为当前网页新建、管理、编辑和套用内部样式，以及附加外部样式表。[例6-1]DreamweaverCS3新建一个HTML网页，标题为“在线图书”。htmlxmlns==Content-Typecontent=text/html;charset=utf-8/title在线图书/title/headbodyp1.《网络安全技术与应用》br/imgsrc=..\images\book1.jpgwidth=107height=150/br/HTML代码(1)：6.2.1用“CSS面板”建立CSS2.《网络安全基础与应用》br/imgsrc=..\images\book2.jpgwidth=107height=150/br/畅销指数：★★★★br/①详细论述网络安全的基础理论br/②认真总结作者多年来的网络安全建设经验br/③准确介绍网络安全的应用技术及前沿成果br//p/body/html畅销指数：★★★★br/①作者多年教学与科研工作总结br/②概念明晰，实例丰富，注重技能训练br/③适合作为网络安全应用课程的教材br/④简明易懂的写作风格，方便读者自学/ppbr/HTML代码(2)：6.2.1用“CSS面板”建立CSS“修改”--“CSS样式”“窗口”--“CSS样式”“CSS”1)打开CSS面板6.2.1用“CSS面板”建立CSS2)“新建CSS规则”“删除CSS规则”可以删除当前选定的CSS规则。“显示列表视图”可按字母序显示属性，并把已设置的属性显示在前；“只显示设置属性”仅显示已设置的属性；“附加样式表”可以链接或导入事先建立的外部样式表文件；“新建CSS规则”可以新建一条CSS规则；“显示类别视图”可以按照8个类别显示属性；“编辑样式”可以修改当前选定的CSS规则；“标签”--输入“p”--选择“仅对该文档”--“确定”6.2.1用“CSS面板”建立CSS3)设置此条CSS规则“p的CSS规则定义”4)“确定”后编辑p6.2.1用“CSS面板”建立CSS在“确定”之后，新建的CSS样式自动应用到当前的网页。在[例6-1]的网页代码里，自动添加了内部样式定义：styletype=text/css……/style。至此，可以使用“CSS面板”管理已经建立的CSS。既可以直接修改属性，也可以使用其下边的按钮，或者右键单击其已有的样式名称，执行快捷菜单里的命令。6.2.2用“页面属性”新建内部样式1)“页面属性”2)确定后嵌入内部样式定义6.2.3用“属性面板”新建内部样式“属性面板”用于设置当前选定对象的内部样式属性例：对于“在线图书”网页，选定其中的文本“1.《网络安全技术与应用》”，设置其字体为“华文隶书”，即可自动新建内部样式STYLE1。6.2.3用“属性面板”新建内部样式对所选定的文本“1.《网络安全技术与应用》”，一方面应用.STYLE1定义的“华文隶书”字体属性，另一方面继承了外层标签p和bo