特别致谢 ![]() 本教程选自清华大学出版社2008年2月出版的《Dreamweaver网页制作实用教程》一书。《Dreamweaver网页制作实用教程》是“21世纪师范院校计算机实用技术规划教材”中的一本教材。由于教材内容新颖、实用,深受广大读者的欢迎,目前全国已有多所中、高等院校和IT培训学校选择本书作为正式的网页制作教材。 朋友们可以在全国各新华书店购买此书,或者在当当网、互动出版网邮购此书。
第四课 CSS基本应用(一)前面学习了创建CSS样式的基本方法以及CSS样式的类型,本节将分门别类地对CSS样式提供的各类属性进行讨论,并通过一些实例讲解CSS在网页制作中的基本应用。 4.1.1 课堂实例――用CSS格式化文本1.创建内部CSS规则 (1)打开示例文件C:\ part6\4.1.1.html,切换到设计视图,示例文件中包含一些文本,如图4-1所示。下面将通过CSS样式对文本格式进行控制。 图4-1 示例文件中包含的文本 (2)选择命令【窗口】|【CSS样式】命令,打开【CSS样式】面板(快捷键Shift+ F11 )。单击【CSS样式】面板右下角的【新建CSS规则】按钮 图4-2 【新建CSS规则】对话框 (3)在弹出的【.textCSS的规则定义】对话框中直接单击【确定】按钮,在左侧的【分类】列表中选择【类型】,然后到右侧窗格中进行设置,这里的设置和字体相关。这里对这些参数进行一些任意设置,设置完成后单击【确定】按钮,如图4-3所示。 图4-3 【.textCSS的规则定义】对话框 (4)再来看一下CSS样式在代码视图中的情况。单击【文档】工具栏中的【代码】按钮 图4-4 代码视图中看到的CSS规则 2.应用CSS规则 (1)进入设计视图,选择一部分文本,如图4-5所示。 图4-5 选择需要使用CSS样式的文本 (2)进入【属性】面板,展开【样式】后面的下拉列表,选择“textCSS”,如图4-6所示。 图4-6 为文字指定样式 (3)按下键盘上的快捷键F12打开浏览器进行预览可以看到CSS作用于文本的效果,如图4-7所示。 图4-7 CSS样式在浏览器中的显示效果
|