信息发布与网页设计-Dreamweaver-11CSS.pptVIP

属性值的设定 Display 属性 Block 块 Inline 字符显示在同一行 list-item 列表显示 None 不显示的内容 background-color 属性 设定背景颜色 rgb指定法 Border 属性 「top」、「bottom」、「left」、「right」。 CSS样式单的使用 绝对 英寸（in） 1 in = 2.54 cm 厘米（cm） 1 cm = 0.3937 in 毫米（mm） 1 mm = 0.1 cm 磅 （pt） 1 pt = 1/72 in = 0.3528 mm 派卡（pc） 1 pc = 12 pt = 1/6 in * * 信息发布与网页设计 DREAMWEAVER 11 CSS 信息学院 《信息发布与网页设计》课题组 * 11.1 样式表的内嵌、外连 11.2 创建样式表 11.3 创建外部样式表 11.4 CSS编辑器 11.5 应用CSS样式表 11.6 管理CSS样式表 第11章 主要内容 11.1 CSS介绍 什么是CSS？ Cascading Style Sheets，层叠样式表 CSS的好处 扩展了HTML的显示样式； 显示样式与数据内容分离，便于修改样式或数据； 可共享，以统一显示风格。 当前版本： W3C制定的两个版本：CSS1、CSS2 。 CSS语法 选择符 {属性名1:属性值1;…属性名n:属性值n} 选择符一般是: 标记名称：如h1、h2、…p等 类名称：英文句点开始，以英文字符命名，如.abc 扩展：filter CSS语句样例： p {font-size:40pt; font-family:隶书;color:green} CSS中的注释 /*这是CSS中的注释*/ CSS的使用 两种应用：外联、内嵌 内嵌 style type=text/css 。。。/style 外联 HEAD link href=new.css rel=stylesheet type=text/css /HEAD 文件名.扩展名 CSS的使用 导入 在HTML中用@import命令导入样式表 style type=text/css @import url( style.css ) /style CSS内嵌样例 html headTITLECSS 样例/TITLE style type=text/css p {font-size:12pt; font-family:隶书} p:first-letter{font-size:400%; float:left} /style /head bodyp惠园是我们共同的家/body /html 用style标记内嵌样式单 定义P标记、首字母大小 CSS的代码输入 在DW中输入代码的技巧 在代码视图状态下 、 、{、ㄩ、;、 左、右尖括号，大括号、空格、分号的输入均可触发供选择的下拉列表。双击其中的列表项，即可择其自动填入。 11.2 DW中创建CSS 方法一: “窗口” → “CSS样式”面板上单击鼠标右键，选择“新建”； 方法二: 通过“CSS样式”面板上的带+的按钮，打开“新建CSS样式”对话框。 11.3 选用外部CSS样式 方法一: “窗口” → “CSS样式”，打开“CSS样式”面板； 单击右上角的下拉菜单； 选择“附加样式表”； 单击“预览”，选择外部样式表文件。 方法二: 通过“CSS样式”面板上的“附加样式表”按钮，打开“附加外部样式表”对话框。余同方法一。 CSS中的类：CLASS及ID CSS的类class和标识id选择符 class可有区别的表现相同的HTML元素； id可有区别的表现相同的HTML元素，内容必须唯一； class类由半角英文句点(.)开始； 标识id由半角英文井号(#)定义之前。 .intro { color: red; font-weight: bold; } #studentid {background-color: silver} CSS中的类CLASS及ID HTML中应用如下： p class=intro网页制作/p div id= studentid id和class不同之处在于： id用在内容唯一的元素上， class可用在多个元素上。 11.4 CSS编辑器-1 类 字体 字号 样式 行高 粗细 变量 大、小写 颜色 修饰 11.4 CSS编辑器-2 背景 body、table、td。。。 可通过添加BGCOLOR属性，来设置不同区域的背景颜色或图象。 设置 重复 水平位置