信息发布与网页设计-Dreamweaver11CSS

《信息发布与网页设计-Dreamweaver11CSS》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、信息发布与网页设计DREAMWEAVER11CSS-层叠样式表信息学院《信息发布与网页设计》课题组18七月202111.1样式表应用：内嵌、外连11.2创建样式表11.3创建外部样式表11.4CSS编辑器11.5应用CSS样式表11.6管理CSS样式表第11章主要内容2021/7/1823基本概念HTML有两种样式：HTML样式、CSS样式。HTML样式是通过HTML标识符，对段落或选择的文本进行格式化，是一系列HTML格式化标记的组合，用于对文本对象进行设置。CSS样式的优点：网页维护方便：将网页内容和显示方式分开设计缩短下载时间：只下载一次声明标

2、记格式的CSS样式，供网站的所有网页使用；文件易读性好：.css文件独立存在，以链接方式供多个网页使用。2021/7/1834基本概念在网页中应用样式的3种方法使用HTML标记符的STYLE属性嵌套样式信息通过在网页的HEAD标记中使用STYLE标记符嵌套样式信息通过在网页的HEAD标记中使用LINK标记符链接外部样式表文件（.css文件）2021/7/1845在网页上应用HTML样式如在网页中已有文本是所需要的格式，而这个格式需要经常使用，可基于该文本，创建新的HTML格式，然后将这个样式应用到本文档的其它文本中，也可以应用到整个站点的其它文档中。

3、2021/7/18511.1CSS介绍什么是CSS？CascadingStyleSheets-层叠或级联样式表CSS的好处扩展了HTML的显示样式；显示样式与数据内容分离，便于修改样式或数据；可共享，便于统一和修改显示风格。当前版本：W3C制定的两个版本：CSS11996、CSS21998，CSS31998-正处于开发之中。2021/7/186CSS语法构成三部分：选择符、属性、属性值选择符{属性名1:属性值1;…属性名n:属性值n}选择符一般是:标记名称：如h1、h2、…p等类名称：英文句点开始，以英文字符命名，如.abc扩展：filterCSS语

4、句样例：p{font-size:40pt;font-family:隶书;color:green}CSS中的注释/*这是CSS中的注释*/2021/7/187CSS的使用三种应用：内嵌、外联、导入内嵌。。。外联文件名.扩展名2021/7/188CSS的使用3、导入*(不要求)在HTML中用“@import”命令，导入样式表@

5、importurl(style.css)2021/7/189CSS内嵌样例p{font-size:12pt;font-family:隶书}p:first-letter{font-size:400%;float:left}

惠园是我们共同的家

6、→“CSS样式”面板上单击鼠标右键，选择“新建”样式；方法二:通过“CSS样式”面板上的带+的按钮，打开“新建CSS样式”对话框。2021/7/181111.3选用外部CSS样式方法一:“窗口”→“CSS样式”，打开“CSS样式”面板；单击右上角的下拉菜单；选择“附加样式表”；单击“预览”，选择外部样式表文件。方法二:通过“CSS样式”面板上的“附加样式表”按钮，打开“附加外部样式表”对话框。余同方法一。2021/7/1812CSS中的类：CLASS及IDCSS的类有2种:class、idclass、id均可有区别的表现相同HTML元素；但id的内容

7、必须唯一；类的定义class类由半角英文句点(.)开始；id类由半角英文井号(#)开始。.intro{color:red;font-weight:bold;}#studentid{background-color:silver}类的引用2021/7/1813CSS中的类CLASS及IDHTML中应用如下：网页制作