HTML图像与CSS样式应用：浮动窗体和外部样式表

需积分: 9 129 浏览量更新于2024-08-23 收藏 1.75MB PPT 举报

本文将介绍如何使用HTML的`<link>`元素链入外部样式表，以及图像的插入、CSS样式定义和应用以及浮动窗体的基本概念。通过学习，您可以更好地掌握网页设计的基础知识。首先，链入外部样式表是提高网页维护效率的重要方法。外部样式表（如`stylesmine.css`）保存了所有样式的定义，然后通过`<link>`标签将其引用到HTML文档的`<head>`区域。示例代码如下： ```html <!DOCTYPE html> <html> <head> <title>设置属性</title> <link rel="stylesheet" href="stylesmine.css" type="text/css"> </head> <body>  </body> </html> ``` 关于HTML图像的插入，我们可以使用`<img>`标签，并指定`src`属性为图像的URL。例如： ```html <body> <img src="liwupu.jpg"> </body> ``` 为了自定义图像的显示，我们可以添加`width`和`height`属性来调整尺寸，`border`属性设置边框厚度，`align`属性控制图像相对于文本的位置。例如： ```html <body> <img src="liwupu.jpg" width="120" height="160" border="5" align="left"> <h3 align="center">标题</h3> <p>文本内容...</p> </body> ``` `alt`属性用于提供图像的替代文本，这对于使用文本浏览器或者无法显示图像的用户非常重要： ```html <body> <img src="image.jpg" alt="替代文字描述"> </body> ``` 接下来，我们讨论CSS样式定义和应用。CSS允许我们更精确地控制网页的布局和外观。例如，可以定义类选择器来设置特定元素的样式： ```css .myClass { color: red; font-size: 18px; } ``` 然后在HTML中应用这个类： ```html <p class="myClass">这是一段红色、18像素字体大小的文本。</p> ``` 浮动窗体（Floating Frames）是HTML布局的一种技术，主要用于创建多列布局。`float`属性可以设置为`left`或`right`，使元素浮动到相应的一侧，允许其他内容环绕它： ```css .leftColumn { float: left; width: 30%; } .rightColumn { float: right; width: 70%; } ``` ```html <div class="leftColumn">  </div> <div class="rightColumn">  </div> ``` 最后，复习一下相关HTML标签：`<h1>`到`<h6>`用于设置标题，`<p>`用于段落，`<font>`（虽然现在不推荐使用）和`<style>`可以用来设置文本字体；`<marquee>`控制滚动字符，其默认方向是从右到左；无序列表`<ul>`和有序列表`<ol>`用于清单分类；控制图片显示的标签是`<img>`；CSS样式表的引入方式包括行内样式（使用`style`属性），内部样式（在`<head>`中的`<style>`标签内）和外部样式（通过`<link>`标签）。通过以上内容，您应该对HTML图像处理、CSS样式应用和浮动窗体有了基本了解，这将帮助您更好地创建和设计美观的网页。

韩大人的指尖记录

粉丝: 27
资源: 2万+

HTML图像与CSS样式应用：浮动窗体和外部样式表

CSS-行内-内部-外部样式表

DreamWeaver中应用CSS样式表

在html中引入外部样式表

html链接外部css样式表

如何引用外部样式表中定义的class

html+Css+外部样式表

使用 <link> 元素引入外部样式表

css 怎么使用外部样式表

最新资源