第7讲css样式-上海财经大学.ppt

《Web应用开发》 上海财经大学信息管理与工程学院 第七讲：CSS样式 电子商务网站开发 第*页 本讲内容 什么是CSS样式？ 如何使用CSS样式表？ 第*页 7.1 什么是CSS样式表？ 层叠样式表（Cascading Style Sheets)可以统一设置各种文本格式。 内部样式表：仅对某个页面文档适用的CSS样式 外部样式表：其所包含的样式可以被多个页面文档应用 CSS样式规则由两部分组成： 选择器：表示样式名称 声明：用于定义样式元素。由两部分组成： 属性和值。术语“级联”是指对同一个网页应用多个样式表的能力。例如，可以创建一个样式表来应用颜色，创建另一样式表来应用边距，然后将两者应用于同一个网页以创建所需的设计。 CSS样式表的主要优点是提供便利的更新功能；更新CSS样式时，使用该样式的所有文档的格式都自动更新为新样式。 第*页 7.2 创建内部CSS样式表 打开一个页面，单击“窗口”菜单的“CSS样式”命令，显示“CSS样式”面板 单击“CSS样式”面板上的“新建CSS样式”图标，出现“新建CSS样式”对话框 在“新建CSS样式”对话框的“名称”文本框中输入样式名称，如text-1；在“类型”框加选中“创建自定义样式”单选钮；在“定义在”框中选中“仅对该文档”单选钮 说明：若要将样式定义在当前的页面文档中，选中“仅对该文档”单选钮；若要定义外部样式表文件，则应选中“新建样式表文件”单选钮，具体方法参见后面的“创建和链接外部样式表文件”内容。 单击“新建CSS样式”对话框的“确定”按钮，出现“CSS样式定义”对话框，在该对话框中可以完成对CSS样式文字格式、CSS样式背景格式、CSS样式区块格式、CSS样式盒子格式、CSS样式边框格式、CSS样式列表格式、CSS样式定位格式和CSS样式扩展格式的设置 完成相应设置后，单击“确定”按钮后，新定义的样式text-1就会出现在“CSS样式面板”中。 第*页 创建外部样式表文件 有两种方法创建外部样式表 方法一 利用“文件”菜单的“新建”命令 方法二 先打开一个页面文档，然后利用“CSS样式”面板上的“新建CSS样式”图标，新建一个外部样式表文件。用这种方法创建好外部样式表文件后，该样式表文件就自动链接到原页面文档中了。 第*页 链接外部样式表的步骤 单击“CSS样式”面板上的“附加样式表”图标，出现“链接外部样式表”对话框 单击“链接外部样式表”对话框中的“浏览”按钮，在随后出现的“选择样式表文件”对话框中选择要链接的样式表文件“Style-1.css”，单击“确认”按钮，返回“链接外部样式表”对话框 单击“链接外部样式表”对话框的确定按钮，即可将文档链接到“Style-1.css”样式表文件，此时在“样式”面板中可以看到“Style-1.css”样式表文件 说明：将某个页面文档链接到一个外部样式表文件后，就可以使用该外部样式表文件中定义的样式来格式化页面上的元素了。 第*页 文字格式 用来定义文字的相应格式（也包括超级链接的文字） 第*页 背景格式 用来定义网页元素背景（如文字的背景、表格的背景、层的背景、）的相应格式。 固定：指背景图像不随网页内容的滚动 滚动：背景图像随着网页内容的滚动而滚动。 第*页 区块 用来定义网页元素的内容在其所处的区域内的对齐方式。 第*页 盒子 用来定义网页元素背景（如文字的背景、表格的背景、层的背景、）的相应格式。 边界（与外部其他内容之间的距离） 填充（指的是内部） 第*页 边框 用来定义网页元素边框线条的样式（虚线、实线等）、宽度及颜色 第*页 列表 用来定义列表元素的外观 第*页 定位 用来定义层的一些特性 第*页 7.3 应用CSS样式 应用CSS样式的方法很简单，只要先选择要应用样式的文字部分，然后单击“样式”面板中相应的样式名称即可。 结束 第*页 作用在已有的标签上，如H1、Body等 创建出一种样式，该样式可以用在网页元素上 用来修改超级链接所对应的显示样式 新建的CSS样式为内部样式，将包含在网页的内部 新建的CSS样式将以独立的文件存在，它也可以被其他网页文件所使用。 返回 《Web应用开发》