图3.8 对段落进行不同的设置
使用Dreamweaver进行CSS Dreamweaver进行CSS设置 3.2 使用Dreamweaver进行CSS设置 3.2.1 创建页面
图3.9 在Dreamweaver中输入文本段落 中输入文本段落
新建CSS CSS规则 3.2.2 新建CSS规则 编辑CSS CSS规则 3.2.3 编辑CSS规则 3.2.4 为图像创建CSS规则 为图像创建CSS规则 CSS
id=“p1”>1969年 <p id=“p1”>1969年，为了保障通信 联络，美国国防部高级研究计划署ARPA ARPA资 联络，美国国防部高级研究计划署ARPA资 助建立了世界上第一个分组交换试验网 ARPANET，连接美国四个大学。 ARPANET，连接美国四个大学。 ARPANET的建成和不断发展标志着计算 ARPANET的建成和不断发展标志着计算 机网络发展的新纪元。 机网络发展的新纪元。</p>
图3.4 修改标题样式
3.1.3 控制图片
img{ float:left; border:1px #9999CC dashed; margin:5px; }
图3.5 图文混排
3.1.4 设置正文
p{ fontfont-size:12px; texttext-indent:2em; lineline-height:1.5; padding:5px; }
图3.6 修改正文样式
3.1.5 设置整体页面
body{ margin:0px; backgroundbackground-color:#CCCCFF; }
图3.7 设置页面的整体效果
3.1.6 对段落进行分别设置
上面设置CSS样式使用的都是标记选择 上面设置CSS样式使用的都是标记选择 CSS 为了验证一下其他的选择器的用法， 器，为了验证一下其他的选择器的用法， 这里为两个文本段落分别设置不同的效果。 这里为两个文本段落分别设置不同的效果。 首先，分别给两个段落的<p> <p>标记设置 首先，分别给两个段落的<p>标记设置 一个id属性，代码如下： id属性 一个id属性，代码如下：
本章将分别介绍如何使用手工代码方 以及使用Dreamweaver Dreamweaver软件可视化的方 式，以及使用Dreamweaver软件可视化的方 式分别完成同一个页面。 式分别完成同一个页面。
3.1 手工方式编写页面
体验CSS 图3.1 体验
3.1.1 构建页面框架
考虑到单纯的文字显得贫乏， 考虑到单纯的文字显得贫乏，因此加入 一幅图片作为简单的插图。 一幅图片作为简单的插图。 图片所在的位置与正文一样， 图片所在的位置与正文一样，使用 HTML语言中的<img>标记 此时，<body>部 语言中的<img>标记， HTML语言中的<img>标记，此时，<body>部 分修改后的代码如下， 分修改后的代码如下，源文件参见实例文 03-02.html”。 件“03-02.html”。
CSS网页设计标准教程 CSS网页设计标准教程
第1部分 CSS核心原理 CSS核心原理
第3章 CSS设计实践 CSS设计实践
3.1
手工方式编写页面
3.2ห้องสมุดไป่ตู้
使用Dreamweaver进行 进行CSS设置 使用 进行 设置
上一章介绍了CSS的基本思想和基本使 上一章介绍了CSS的基本思想和基本使 CSS 用方法。 用方法。 在继续深入讲解各种CSS属性之前， CSS属性之前 在继续深入讲解各种CSS属性之前，在 本章先进行一些实际的操作， 本章先进行一些实际的操作，实际编写一 个比较完整的使用CSS的网页， CSS的网页 个比较完整的使用CSS的网页，为后面继续 深入学习HTML CSS打下基础 HTML和 打下基础。 深入学习HTML和CSS打下基础。
20世纪70年代末到80年 世纪70年代末到80 <p id="p2"> 20世纪70年代末到80年 代初，计算机网络蓬勃发展， 代初，计算机网络蓬勃发展，各种各样的 计算机网络应运而生， MILNET、USENET、 计算机网络应运而生，如MILNET、USENET、 BITNET、CSNET等 BITNET、CSNET等，在网络的规模和数量上 都得到了很大的发展。 都得到了很大的发展。
一系列网络的建设， 一系列网络的建设，产生了不同网络 之间互联的需求，并最终导致了TCP/IP TCP/IP协 之间互联的需求，并最终导致了TCP/IP协 议的诞生。 议的诞生。</p>
然后在CSS部分设置如下CSS规则。 然后在CSS部分设置如下CSS规则。 CSS部分设置如下CSS规则 #p1{ borderborder-right:3px red double ; } #p2{ borderborder-right:3px orange double ; }
图3.3 加入图片
3.1.2 设置标题
<html> <head> <title>体验 体验CSS</title> <title>体验CSS</title> <style> h1{
文字颜色* color:white; /* 文字颜色*/ background-color:#0000FF; /* 背景色 */ backgroundtexttext-align:center; /* 居中 */ padding:15px; /* 边距 */ } </style> </head> <body> ……省略 省略…… ……省略……
<html> ……部分代码省略 部分代码省略…… ……部分代码省略…… <body> <h1>互联网发展的起源 互联网发展的起源</h1> <h1>互联网发展的起源</h1> <img src="cup.gif" width="128" height="128"/> <p>1969年 为了保障通信联络， <p>1969年，为了保障通信联络，美国国防部高级研究 计划署ARPA ARPA资助建立了世界上第一个分组交换试验网 计划署ARPA资助建立了世界上第一个分组交换试验网 ARPANET，连接美国四个大学。ARPANET的建成和不断发展 ARPANET，连接美国四个大学。ARPANET的建成和不断发展 标志着计算机网络发展的新纪元。 标志着计算机网络发展的新纪元。</p> ……部分代码省略 部分代码省略…… ……部分代码省略…… </body> </html>
