当前位置：文档之家 › 第8讲使用CSS样式表设置图片效果-课件

第8讲使用CSS样式表设置图片效果-课件

  • 格式：ppt
  • 大小：401.00 KB
  • 文档页数：14

下载文档原格式

  / 14

合集下载

CSS的样式PPT课件

CSS的样式PPT课件


知识点精讲
知识点分析 CSS文字样式的常用属性 设置字体： 基本语法为font-family:字体1，字体2，字体3。 例如：h1{font-family:宋体，楷体，隶书;}。 设置文字大小 基本语法为font-size:尺寸|百分比|关键字。 设置斜体 基本语法为font-style:normal|italic|oblique。 设置文字粗细 基本语法为font-weight:normal|bold|bolder|lighter|number。 设置变体 基本语法为font-variant:normal|small-caps。
网站建设与管理
CSS的样式
考纲解读
1 掌握CSS的基础知识。 2 掌握CSS的属性。
考点解读
重难点分析：CSS样式表、样式选择器及CSS的属性。
知识点精讲
知识点1 CSS的基础知识 例题精讲 请输入正确的代码
【解析】外部链接样式表的声明方法为<link rel=″stylesheet″ type=″text/css″ href=″样式 表文件的地址″>
知识点精讲
巩固提高
在Dreamweaver软件中，给网站首页设置“页面属性”的具体要求如下:
网站首页中文字大小设置为12 px，文字颜色设置为“#000”。
设置网页背景颜色为“#CCC”。 设置“链接（CSS） ”中“下划线样式”为“始终无下划线”。 设置“链接（CSS）”中“链接颜色”为“#000”。 下面是网站首页的部分源代码，请从选项A~N中将正确的内容填入相应位置。
知识点精讲
CSS段落和其他文字样式属性 修饰文字 基本语法为text-decoration:underline|overline|line-through|blink|none。 设置段落的水平对齐方式 基本语法为text-align:left|right|left|justify。 颜色及背景 设置文字颜色 基本语法为color：颜色的名称|RGB值|十六进制数。 设置背景 基本语法为background:背景颜色|背景图像|背景重复|背景附件|背景位置。 设置背景颜色属性 基本语法为background-color:颜色|transparent（透明）。 设置背景图像属性 基本语法为background-image:url（背景图片的路径和名称）。
第6章 用CSS设置图片样式

第6章 用CSS设置图片样式

用CSS设置图片样式在网页中插入图片：在标准XHTML文档中嵌入图片的方式和传统的HTML嵌入图片的方式一样，都是使用img标签。

使用img标签嵌入图片的语法：<img src=”picture.jpg” />其中，src属性是指要插入的图片所在文件夹的位置，可以是相对地址，也可以是绝对地址。

控制图片的大小：CSS提供的width和height属性用于控制图片的宽度和高度。

使用width和height属性的语法：width:picwidth;height:picheigth;其中，picwidth和picheight可以用任何长度单位进行设置。

通常情况下使用像素为单位。

使用像素控制图片宽高：img{width:150px;height:150px;} /*设置图片宽为150像素，高为150像素*/使用百分比控制图片宽高：img{width:50%,height:50%;} /*使用百分比设置图片宽高。

*/单独设置图片的宽度或高度：单独设置图片的宽度后，图片就按照宽度缩放，而高度是按照宽度的缩放比例自动变化。

整张图片在缩放后比例不变。

单独设置图片的高度，得到的结果也一样。

如：img{width:200px;} /*设置图片的宽度为200像素*/img{height:200px;} /*设置图片的高度为200像素*/给图片添加边框：为放置在网页上的图片增加边框可以使图片的边界清晰，排布整齐，也可使图片更美观。

CSS提供的border属性为图片添加边框。

使用border属性的语法：border-width:width; /*设置边框的宽度*/border-style:style; /*设置边框的样式*/border-color:color; /*设置边框的颜色*/其中border-width是指边框的宽度，width可以用任何长度单位设置；border-style是指边框的样式，style指的是设置边框样式；border-color是指边框的颜色，color可以用任何颜色单位设置。

CSS样式代码基础教程 ppt课件

CSS样式代码基础教程 ppt课件

<p style="color：#ff0000">内联式样式表</p>
这种样式表只会对使用它的元素起作用，而不会影响 HTML文档中的其他元素。也正因为如此，内联式样式表 通常用在需要特殊格式的某个网页对象上。本案例就一个 应用内联式样式表的一个网页实例，在这个实例中，各段 文字都定义了自己的内联式样式表：
3．CSS的分类
一般情况下，层叠样式表可以分为三种：内联式样 式表、嵌入式样式表和外部样式表。下面我们就分别来看 看这三种样式表。
内联式样式表 嵌入样式表 外部样式表
❖内联式样式表
内联式样式表是在现有HTML元素的基础上，用style属 性把特殊的样式直接加入到那些控制信息的标记中，比如 下面的例子：
2．组合规则 在定义样式的时候，有很多不同的元素需要使用相同
的样式。此时没有必要逐一定义样式规则，可以将他们组 合，并用分号将各个声明隔开即可。如：
h1,h2,p{ font-family:楷体_gb2312;text-align:center } 这样定义之后，在页面中所有使用h1、h2和p的对象
h2 b{ color:#0000FF}/*具有上下文关系的html标记选择器*/
.water{ font-family:"隶书"; font-size:24px; text-align:right}/*类 选择器*/
h3.hello{ font-family:"隶书"; text-align:center; font-size:36px}/* 指定的类选择器*/
<p style="color:#ff0000">这段文字将显示为红色</p>
DW第八讲CSS样式.ppt

DW第八讲CSS样式.ppt


创建
1. 打开CSS样式面板(Shift+F11) 2. 单击”新建”按钮
(1). 自定义样式: 作用: – 定义某个特定对象的样式,如一段文本的大小,首行缩进,行距,光标 样式,滤镜效果等. 步骤: – 在名字输入框中输入.name – 在弹出的样式表属性定义对话框中设置. – 设置完成后在样式面板上会出现此样式名称. – 应用: 选中要应用样式的对象,单击面板上的样式名即可. 掌握： – 文字常用9pt大小,20px间距(类型/大小、行高) – 精确首行缩进(区块/文字缩进) • 注意:只能在一个具体空间内部(如在一个单元格或层内)的全体 文本上,或者是一段文本(<p>…</p>)才能应用. – 光标/滤镜(扩展/光标、过滤器)
元素 BODY
说明 网页文档的主体元素，所有的可见范围都在元素内
BUTTON
DIV IMG INPUT MARQUEE SPAN TABLE TD TEXTAREA TFOOT TH THEAD TR
表单域的按钮，可以有“发送(submit)”、“重置(reset)”等形式
定义了网页上的一个区域，这个区域的高度、宽度或者绝对位置都是以知的 图片元素，通过指定“src"属性来指定图片的来源 输入表单域 移动字幕效果 定义了网页上的一个区域，这个区域的高度、宽度或者绝对位置都是以知的 表格 表格数据单元格 文本区域 多行输入文本框 表格标题单元格 表格标题 表格行
（2）重定义HTML标签： 作用： – 对HTML标签的重新定义。 步骤： – 在标签列表中选择要重新定义的标签 – 在弹出的样式表属性定义对话框中设置. – 设置完成后自动应用。名称不会出现在样式面板上。 掌握： – 背景图像平铺问题（重定义<body>标签） – 表单元素样式（<input>) – 表格<table>(<td>)、图像<img>等。
css教程 ppt课件

css教程 ppt课件

2.放到 < HEAD> 和 < /HEAD> 中去。 3.整个页面中产生作用，
< 2021/3/26 /HTML>
css教程 ppt课件
5
注意，
1. < STYLE> 标记中包括了 TYPE ＝ “text/css” ， 这是让浏览器知道你是使用 CSS1 样式规则。 2. 加入 < !-- 和 --> 这一对注释标记是防止有些老式 的浏览器不认识样式表规则，可以把该段代码忽略 不计。
少了 < STYLE> 和注释标记。 保存为 example.css 。
2021/3/26
css教程 ppt课件
9
有两种办法可以实现引用外部样式表。 （一）使用 < LINK> 标记链接外部样式表
< LINK REL=STYLESHEET HREF="example.css">
HREF 中应包含路径信息。
2021/3/26
css教程 ppt课件
6
在使用样式表时，经常会有多标志用同一个属性
比如：
B { color: red} I { color: red} H1 { color: red} 用逗号分隔各个 HTML 标志，把三行代码合并成一行，我们可以写成： B,I,H1 {color: red}
同一个 HTML 标志，可能定义到多种属性，例如，我们规定把 从 H1 到 H6 各级标题定义为红色黑体字，带下划线，则应写为：
定义语法为：
标志.类名 {标志属性：属性值；
标志属性：属性值； …… 标志属性：属性值}
引用方法是： < 标志 CLASS="类名">
第8课网页的数据呈现课件(共18张PPT)浙教版(2023)初中信息技术八年级上册

第8课网页的数据呈现课件(共18张PPT)浙教版(2023)初中信息技术八年级上册

修改样式表里的属性和属性参数，观察网页外观变化，尝试其他样式的设置。
三、样式表的基本结构
<style>标签表示要定义的样式，type="text/css"用于说明这是一段CSS规则代码，选择符可以使用HTML标签的名称。可以对HTML标签设置样式，也可以对网页上的文本、图像等来设置样式。 样式表的基本结构如下： <style type="text/css"> 选择符{样式属性1：属性值1；样式属性2：属性值2；样式属性……} </style>
二、 CSS样式
CSS全称为层叠样式表(Cascading Style Sheets)，也是一种标识语言，CSS样式可以方便地设置网页效果。如网页中文字的字号、字体、颜色、位置以及图片的大小等，都涉及网页显示信息的样式。如图8-1和图8-2所示，是添加了样式表的网页效果的前后对比图。
图8-2所示的网页是在<body>标签之 以下CSS字体、颜色等样式的代码。<style type="text/css"> h1{nt-family：黑体} P{color:white;font-size:25px;font-family:隶书} Body{ background-image:url(bj.jpg)}</style>
信息科技
七年级上册
浙江教育出版社（2023）
目录
第8课 网页的数据呈现
通过体验CSS样式设置的效果，认识CSS样式表，了解样式表的作用；通过网页中添加样式，掌握样式表的基本结构；能理解使用CSS降低网页代码耦合度所带来的便捷。
你浏览过的网页中，看到过哪些网页效果?你知道网页中的文字效果是如何实现的？
CSS样式基础PPT模板

CSS样式基础PPT模板

第5 页
（二）行内样式表
行内样式表是直接对HTML标签使用style属性，然后将CSS代码作为属性 值写在其中，其格式如下。
<body> <HTML标签 style="样式属性:取值;样式属性:取值;…"></HTML标签> </body> （1）HTML标签就是页面中HTML元素的标签，例如<body>，<p>， <div>等。 （2）style参数后面引号中的内容相当于样式表大括号里的内容。
例如： *{margin:0; padding:0; }
第 14 页
网络信息编辑
第 11 页
（二）类选择器和id选择器
2．id选择器 id选择器用来对单个元素设置单独的样式，在同一 个HTML文件中，id名不能重复。id选择器的使用方法 与类选择器相似，先在HTML中为希望单独设置样式的 标签定义id名（使用标签的id属性），然后在CSS中定义 id选择器。定义id选择器时，需要在id名称前面加一个 “#”号，语法如下。 #id名{样式属性:取值;样式属性:取值;……}
第8 页
第9 页
二、选择器的类型
•（一）标签选择器 •（二）类选择器和id选择器 •（三）伪类选择器 •（四）通用选择器
（一）标签选择器
一个HTML文件由很多不同的标签组成， 利用标签选择器可以统一设置使用某类标签 定义的元素外观。例如：希望1号标题标签 <h1>的文本有以下效果。
（1）标题文字居中对齐。 （2）字体大小为42像素。 （3）字体颜色为橙色。
网络信息编辑
任务描述
CSS层叠样式表用于实现网页的表现层，本任务通过为任务一中创建的网页设置 样式（效果如图），让读者简单了解网页样式的设置方法。
CSS教学课件PPT

CSS教学课件PPT

20
CSS Float(浮动)
什么是 CSS Float（浮动）？
CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。 Float（浮动），往往是用于图像，但它在布局时一样非常有用。 元素怎样浮动 元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。 一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。 浮动元素之后的元素将围绕它。 浮动元素之前的元素将不会受到影响。 彼此相邻的浮动元素 如果你把几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻。 清除浮动 - 使用 clear 元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。 clear 属性指定元素两侧不能出现浮动元素。
padding-top:25px;
padding:25px 50px 75px 100px;
padding-bottom:25px;
padding:25px 50px 75px;
padding-right:50px;
padding:25px 50px;
padding-left:50px;
padding:25px;
CSS 图像透明/不透明 使用CSS很容易创建透明的图像。 CSS3中属性的透明度是 opacity。 首先，我们将向您展示如何用CSS创建一个透明图像。
img { opacity:0.4; filter:alpha(opacity=40); /* IE8 及其更早版本 */ }
img { opacity:0.4; filter:alpha(opacity=40); /* IE8 及其更早版本 */ } img:hover { opacity:1.0; filter:alpha(opacity=100); /* IE8 及其更早版本 */ }
CSS代码学习入门.ppt

CSS代码学习入门.ppt


test.htm
方法三：导入外部样式表文件
<head> <style type="text/css"> <!-@import "style.css"; 其它CSS样式定义 --> </style> </head>
方法四：定义内联CSS样式
内联CSS样式是在某个HTML标记内使用style属 性定义适用于该标签的个别样式。
第六章 使用CSS样式
6.1 CSS样式的基本使用方法 6.2 设置CSS样式属性 6.3 CSS滤镜
退出
CSS（Cascading Style Sheet）样式是 一系列格式设置规则，是用于（增强） 控制网页样式并允许将样式信息与网 页内容分离的一种标记性语言。使用 CSS样式可以非常灵活并更好地控制具 体的页面外观，从精确的布局定位到 特定的字体和样式等。
• Dreamweaver的CSS样式提供了丰富的滤镜 效果，使用这些滤镜能够创建出文本和图像 的3D、阴影和淡入淡出等效果。
例子
CSS滤镜属性只能用在HTML控件元素上。
所谓的HTML控件元素就是它们在页面上定义了 一个矩形空间，浏览器窗口可以显示这些空间。
HTML控件元素包括<body>、<button>、<div> 、<img>、<input>、<marquee>、<span>、 <table>、<tr>、<td>、<th>、<tfoot>、<thead> 和<textarea>。
设置CSS样式属性（类型）
CSS教程PPT

CSS教程PPT


在上面的例子中，只有 li 元素中的 strong 元素的样式为斜体字，无需为 strong 元 素定义特别的 class 或 id，代码更加简洁。
CSS基础
CSS 简介 CSS 基础语法 CSS 高级语法 CSS 派生选择器 CSS id 选择器 CSS 类选择器 CSS 属性选择器 CSS 创建
派生选择器 通过依据元素在其位置的上下文关系来定义样式，你可以使标记更加简洁。在
CSS1 中，称为上下文选择器 (contextual selectors)，这是由于它们依赖于上下文关 系来应用或者避免某项规则。在 CSS2 中，它们称为派生选择器，但作用都是相同的。
比方说，你希望列表中的 strong 元素变为斜体字，而不是通常的粗体字，可以这样 定义一个派生选择器：
一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数 字 4 拥有最高的优先权。 1，浏览器缺省设置 2，外部样式表,内部样式表（位于 <head> 标签内部） 3，内联样式（在 HTML 元素内部）
因此，内联样式（在 HTML 元素内部）拥有最高的优先权，这意味着它将优先 于以下的样式声明：<head> 标签中的样式声明，外部样式表中的样式声明，或者浏 览器中的样式声明（缺省值）。
在这里，与页面中的其他 p 元素明 显不同的是，sidebar 内的 p 元素得到 了特殊的处理，同时，与页面中其他所 有 h2 元素明显不同的是，sidebar 中 的 h2 元素也得到了不同的特殊处理。
注意：id 属性只能在每个 HTML 文档中出现一次。
CSS基础
CSS 简介 CSS 基础语法 CSS 高级语法 CSS 派生选择器 CSS id 选择器 CSS 类选择器 CSS 属性选择器 CSS 创建
第八讲CSS模板和库项目

第八讲CSS模板和库项目


• 更多的HTML标签的信息请浏览附录:html标 记大全
• 选择高级：重新定义一些标签的特定组 合格式。共有四种:a:link, a:visited, a:hover,a:active
• a:link当文字作为链接时, a:visited当其链 接的网页已被浏览时, a:hover表示光标移 向链接文字时,a:active当超链接文字被选 中时
第八讲 CSS、模板和库项目
本章内容
• CSS样式表是Dreamweaver中的重点和难点，通 过本章的学习，大家要理解CSS样式表的作用。 掌握如何建立CSS样式表，如何运用CSS样式表， 如何设置CSS样式表的各项属性。
• 在Dreamweaver MX中利用模板和库项目能够创 建具有统一风格的网页，同时也能更方便地进行 网站的维护。本章介绍模板与库项目的基础知识 和应用：如何创建模板以及在网页设计中应用模 板，如何创建和设置库项目以及向网页添加库项 目等。
• 在网页中练习这四种的效果
• 外部：将以文件的形式存在。 • 仅对该文档：内嵌式样式。
CSS的属性
• 字体：font-family • 大小：font-size • 粗细：font-weight • 样式：font-style • 行高：line-height • 修饰：text-decoration • 颜色：color
• 在Dreamweaver MX中利用模板和库项目能够创建具 有统一风格的网页，同时也能更方便的进行网站的维 护。
8．1 创建模板
1. 将现有文档存为模板 2. 定义模板的可编辑区 3. 修改模板
1. 将现有文档存为模板
• 实例1 创建模板 ① 建立站点 ② 新建网页
③ 网页另存为模板：

使用CSS美化表格和表单元素 PPT


大家好
27
应用CSS样式的hover伪类
<th>标签与<td>标签的区别？ 行和列的标题应该使用<th>标记而不是<td>标
记，但是如果某些内容既是标题又是数据，那么 它仍然应该使用<td>标记。表格标题可以设置值 为row或col的scope属性，定义它们是行标题还是 列标题。它们还可以设置rowgroup或colgroup， 表示它们与多行或多列相关。
大家好
38
使用CSS定义圆角文本字段 【任务展示】
案例效果图
大家好
39
使用CSS定义圆角文本字段 【任务实现】Leabharlann CSS样式代码大家好
40
使用CSS定义圆角文本字段
【相关知识】
在CSS样式中，圆角文本字段的定义主要是 通过设置类CSS样式，然后再为相应的文本字段 应用该类CSS样式实现的。在该类CSS样式中， 定义了一个圆角文本字段的背景图片，从而使得 文本字段实现圆角文本字段的效果。
通过使用<thead>、<tbody>和<tfood>元素，将 表格行聚集为组，可以构建更复杂的表格。每个标签 定义包含一个或者多个表格行，并且将它们标识为一 个组的盒子。
➢ <thead>标签用于指定表格标题行，如果打印的表格 超过一页纸，<thead>应该在每个页面的顶端重复。
➢ <tfood>是表格标题行的补充，它是一组作为脚注的 行，如果表格横跨多个页面，也应该重复。
大家好
37
使用CSS定义圆角文本字段
【任务描述】
定义CSS属性可以设置表单元素的背景颜色、 边框样式，还可以为文本字段实现圆角的效果，这 种方法的使用进一步增加了网页页面的装饰效果， 从而给浏览者提供一个更加完美、精彩的网页界面。

CSS样式PPT课件



<link href="mycss.css" rel="stylesheet"
type="text/css">
17
5.2.2 链接外部样式表文件
样式表是一个包含样式规则的文本文件，它 的扩展名为*.CSS。它可分为2种类型。一种 是用户自己创建的样式文件，称为内部样式 表；另一种是外部样式表文件，即把现成的 样式表文件链接到页面，直接使用它进行格 式控制。编辑外部样式表将会影响到所有链 接引用它的文件。我们先讲后一种情况。
20
5.2.2 链接外部样式表文件
在Dreamweaver MX 2004中，预先创建了一 些现成的样式文件，我们可以把它链接在当前文档， 直接使用，可以快速进行格式控制。具体操作如下： 选择【窗口】/【CSS样式】命令，打开【CSS样式】 面板。 在【CSS样式】面板中单击右下角的【附加样式表】 按钮，打开【链接外部样式表】对话框。 单击对话框中的【范例样式表】，打开【范例样式 表】对话框，如图5-4所示。
5.2 链接和创建样式表
5.2.1 链接外部样式表文件
5.2.2 创建新的CSS样式
5.2.3 应用类样式
5.2.4 编辑样式
5.3 CSS样式的属性设置
5.3.1 设置类型属性
5.3.2 设置背景属性
5.3.3 设置区块属性
5.3.4 设置方框属性
5.3.5 设置边框属性
5.3.6 设置列表属性
单击【确定】按钮。在【CSS样式】面板中出现了 该样式表，同时，该样式表文件已自动应用到当前 文档。
22
5.2.3 应用类样式
直接通过【属性】面板以手工给文本设置格式，也 会生成样式，该样式只对当前文档起作用。这种操 作会自动在【属性】面板的【样式】文本框中生成 新样式，名称分别为Style1，Style2……等，切换 到代码视图，在<head>……</head>中可以看到样 式文件的内容。
  1. 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
CSS能很好的实现图片的剪切
图片的剪切-2
在此，介绍一个新属性： overflow:hidden （将超出容器的部分隐藏起来的作用）
案例演示
HTML部分：
<div> <img src="proxy.jpg" width="500" height="350" /> </div>
CSS部分：
div { width:300px; height:260px; overflow:hidden; } img { margin-left:-180px; margin-top:-50px; }
案例演示
实现图片水平对齐，不能直接对图片设置text-align属性，而是通过 对父元素添加该属性实现的。
图片的对齐-2
纵向垂直对齐，通过v
图片的剪切-1
在网站设计中，有时候会遇到对一张图片做多处使用的情况。例 如在子页面中以200*200尺寸显示，而在首页由于所给的空间不 够，只允许显示200*100的尺寸，那该怎么办呢？
第二种方式：在CSS布局中，我们采用新的思路实现 ，主要是通过对图片设置float属性。
图文实例：八仙过海
案例演示
谢谢观看
导入
首先，在网络世界中，各种各样的图片组成了丰富多彩的页面， 传达给用户各种信息 。
其次，图片的使用方式大体分为三种： 1、作为单独的图片本身存在； 2、作为背景图片存在； 3、作为浮动元素存在。
本讲中，我们仅涉及到第一种情况，即以<img> 标记的方式存在 于网页中，并且占位。
图片边框-1
<img src="boluo.jpg" border="0" /> <img src="boluo.jpg" border="1" /> <img src="boluo.jpg" border="2" /> <img src="boluo.jpg" border="3" />
图片替代文本
什么时候才会用“图片替代文本”呢？
案例演示
1、使用特殊字体制作的图片作为文章标题更为吸引人，改善阅 读环境；
2、不破坏原有文本结构，不影响搜索引擎的收录。
图文混排
案例演示
文章段落中经常需要插入图片，我们通过两种方式对比进行了解：
第一种方式：传统的表格式布局中，插入一个表格， 在表格的单元格中插入图片，通过对单元格设置 align属性来控制图片居中、居左、居右显示。
如果4个边框都采用右 侧的写法会如何呢？
border-top-color /* 上边框颜色 */ border-top-style /* 上边框类型 */ border-top-width /* 上边框粗细 */
图片的对齐-1
横向水平对齐，分为左、中、右3种
<tr><td style="text-align:left;"> <img src="building.jpg"></td></tr> <tr><td style="text-align:center;"> <img src="building.jpg"></td></tr> <tr><td style="text-align:right;"> <img src="building.jpg"></td></tr>
第 8讲 使 用 CSS样 式 表设置 图片效 果
精品jing
易水寒江雪敬奉
回顾
CSS中如何设置文字样式？从哪些方面？ 在Google公司Logo案例中，它的实现思路是怎样的？ CSS中如何设置段落样式？
本讲目标
会使用CSS对图片边框进行设置 会使用CSS对图片进行对齐 会使用CSS对图片进行剪切 会使用CSS实现图片替代文本 会使用CSS对图文进行混排 图文实例：八仙过海
案例演示1 案例演示2
如上所示，我们发现通过border属性可以为<img>标记的图片添加边框。
问题：边框都是黑色的，风格单一，只能在边框粗细上调整，那 CSS对于图片边框都有哪些属性进行设置呢？
border-style:dotted;
/* 点画线 */
border-color:#FF9900; /* 边框颜色 */
border-width:5px;
/* 边框粗细 */
图片边框-2
CSS还可以分别设置4个边框的不同样式
案例演示1 案例演示2
border
border-left border-right border-top border-bottom
/* 左边框 */ /* 右边框 */ /* 上边框 */ /* 下边框 */