CSS样式与HTML元素详解

需积分: 0 195 浏览量更新于2024-07-28 收藏 78KB DOC 举报

"这篇文档介绍了HTML基础和CSS样式在网页布局中的应用，特别是关于`DIV+CSS`布局的介绍。" HTML（HyperText Markup Language）是网页内容的基础构造语言，而CSS（Cascading Style Sheets）则用于控制网页的样式和布局。在`DIV+CSS`布局中，`<div>`元素作为容器，可以用来组织和分组HTML内容，实现更灵活的页面布局。标题`<h#>`标签是HTML中用于创建标题的元素，从`<h1>`到`<h6>`，数字越大，标题的级别越低，字号也相应变小。这些标签有助于提高页面的可读性和结构化。段落`<p>`标签用于定义文本的段落，它将文本内容包裹起来，浏览器会自动在段落前后添加一些空白。链接`<a>`元素用于创建超链接，通过`href`属性指定链接的目标URL。例如：`<a href="http://example.com">链接文字</a>`。图像`<img>`标签用于插入图片，`src`属性指定了图片的URL，`width`和`height`分别定义图片的宽度和高度。例如：`<img src="image.jpg" width="100" height="100">`。注释``是HTML中的注释标记，用于添加不被浏览器解析的说明性文字。平行线`<hr>`标签创建一条水平线，常用于区分内容区块。换行`<br>`标签用于插入一个单行的断行，连续使用两个`<br>`可以增加空行。在HTML样式中，可以使用`<style>`标签来定义内联样式，比如`<style>``font-family: verdana;color:red;``</style>`，这样可以设置字体为Verdana，文字颜色为红色。同时，也可以在`<body>`标签中直接设置全局样式，如`<body bgcolor="red">`，使整个页面背景变为红色。 CSS样式提供了丰富的属性来控制页面布局，例如： - `font-family`定义字体类型，如`verdana`。 - `color`设置文本颜色，如`red`。 - `font-size`设定字体大小，如`10px`。 - `text-align`用于文本对齐，如`center`居中对齐。 - `bgcolor`设置背景颜色，如`red`。 - `background`设置背景图像，如`URL`。 - `<img src="图形文件名">`插入图片。 - `<table>`定义表格，`<caption>`定义表格标题，`<tr>`定义行，`<th>`定义表头，`<td>`定义表格数据，`align`属性用于设置单元格内容的对齐方式。此外，`<meta>`标签用于提供元信息，例如刷新页面或设置默认的基准路径。`<base href="放置文件的主机之URL">`设定所有相对链接的基础URL。`<meta http-equiv="refresh" content="时间;URL">`可以用来设置页面自动刷新或跳转。 `<isindex>`标签是HTML4中的一个元素，用于创建简单的输入字段，但在HTML5中已被废弃。 `<table>`元素及其相关属性如`border`定义表格的边框，`cellpadding`和`cellspacing`分别定义单元格内部的填充和单元格之间的间距。通过`<div>`配合CSS样式，我们可以创建复杂的网页布局，实现灵活的内容定位和视觉设计。理解并熟练运用这些基础知识是构建现代网页的关键步骤。

0* 2! $%不重复排列%

0* 2!$%在  轴重复排列%

0* 2!$%在  轴重复排列%

指定背景位置

0* 2 1 !#-.#-.$%背景图片  与  轴的位置%

0* 2 1 ! $%向上对齐%

0* 2 1 !02) &$%向下对齐%

0* 2 1 !3$%向左对齐%

0* 2 1 !*$%向右对齐%

0* 2 1 !$%居中对齐%

五、CSS 连接属性：

%所有超链接%

!%超链接文字格式%

!%浏览过的链接文字格式%

!1%按下链接的格式%

! %鼠标转到链接%

鼠标光标样式：

链接手指;<=<!

十字体2 ! 

箭头朝下2 !(

十字箭头2 !& 

箭头朝右2 !& 

加一问号2 !

箭头朝左2 !/(

箭头朝上2 !(

箭头朝右上2 !(

箭头朝左上2 !/(

文字 > 型2 !

箭头斜右下2 !(

箭头斜左下2 !/(

漏斗2 !/

光标图案5>9?62 !25光标文件名26'$

六、CSS 框线一览表：

0  !+ "??##$%上框线%

0 0 ) &!+ "??##$%下框线%

0 3!+ "??##$%左框线%

0 *!+ "??##$%右框线%

以上是建议书写方式'但也可以使用常规的方式如下!

0    !"@?#%设置上框线   颜色%

0  /!+%设置上框线   宽度%

0  ! %设置上框线   样式%

剩余16页未读，继续阅读

lesslen

粉丝: 0
资源: 3

CSS样式与HTML元素详解

DIV+CSS页面布局

DIV+CSS布局方法

DIV+CSS几个经典布局

div+css布局规划

使用div+css布局

div+css的布局较table布局有什么优点

div +css的布局方式较table布局有什么优点

网页设计基础：Div+CSS布局入门教程

DIV+CSS布局的图，类似下图 红色及表格删掉，改成你自己的表格

编写样式表reservation.css，利用DIV+CSS布局对机房预约页面（reservation .jsp)进行美化；

最新资源

DIV+CSS布局的图，类似下图红色及表格删掉，改成你自己的表格