第8讲使用CSS样式表设置图片效果-课件
合集下载
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设置图片样式
用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课件
<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>
这种样式表只会对使用它的元素起作用，而不会影响 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
创建
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课件
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="类名">
< 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)初中信息技术八年级上册
修改样式表里的属性和属性参数，观察网页外观变化，尝试其他样式的设置。
三、样式表的基本结构
<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降低网页代码耦合度所带来的便捷。
你浏览过的网页中，看到过哪些网页效果?你知道网页中的文字效果是如何实现的？
三、样式表的基本结构
<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模板
第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层叠样式表用于实现网页的表现层，本任务通过为任务一中创建的网页设置 样式（效果如图），让读者简单了解网页样式的设置方法。
（二）行内样式表
行内样式表是直接对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
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 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 及其更早版本 */ }
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 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
/* 左边框 */ /* 右边框 */ /* 上边框 */ /* 下边框 */
图片的剪切-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
/* 左边框 */ /* 右边框 */ /* 上边框 */ /* 下边框 */