CSS基础入门：定义网页布局与格式的关键

需积分: 4 123 浏览量更新于2024-07-30 1 收藏 168KB DOC 举报

CSS（层叠样式表，Cascading Style Sheets）是Web开发中的关键组件，由W3C组织制定，用于增强HTML文档的呈现效果，提供丰富的布局控制和视觉设计能力。它弥补了HTML标记对样式有限控制的不足，使得开发者能够精细地定义网页元素的字体、大小、颜色、布局和特效等。 CSS的基础包括理解样式表的工作原理和使用不同的方法将其应用到HTML文档中。主要有以下几点： 1. **HTML与CSS的链接方式：** - **内联样式**：在HTML元素的`style`属性中直接定义样式，如例子中的`<p style="color:red;">文字颜色为红色</p>`。这种方法简洁，但不够灵活，且不易维护。 - **内部样式表**：在HTML文档的`<head>`部分使用`<style>`标签定义，如例中 `<style type="text/css">...</style>`，这些样式只对当前页面有效。 - **外部样式表**： - **@import**：在HTML的`<head>`通过`<link rel="stylesheet" href="file.css">`导入外部CSS文件，如例子中的`<link rel="stylesheet" href="body.css">`，使样式定义更便于管理和复用。 - **<link>标签**：与`@import`类似，使用`<link>`标签指定CSS文件，区别在于`@import`仅在IE浏览器支持。 2. **浏览器兼容性**：早期版本的浏览器对CSS的支持度不高，例如IE3.0和Netscape Navigator 4.0，因此在实际开发中，可能需要使用条件注释或前缀来处理不同浏览器的兼容问题。 3. **样式选择器与声明**：CSS通过选择器（如`body`、`h1`、`.class`或`#id`）指定要应用样式的元素，并通过声明（如`font-family`、`font-size`、`color`）设置具体样式。如例子中`<style>body{font-family:"宋体";font-size:14px;color:#0000FF;}</style>`，规定了整个页面的字体、字号和颜色。掌握CSS样式表基础对于Web开发至关重要，它提供了强大的页面定制能力，同时需注意不同浏览器间的兼容性问题。通过合理运用CSS的选择器、继承、优先级规则，以及组合各种链接方式，可以创建出美观且功能丰富的网页布局。

ASP 网络编程讲稿

一个选择器，所代表的意义为段落。

声明（Declaration）：指的是 HTML 组件的样式，例如颜色、字体、对体方式等。

例如 P{color:”blue”}的意义是声名段落文字为蓝色（Blue）。请注意：若设置由英文字

母、数字（0~9）、减号（ -）或小数点（.）所组成，那双引号可以省略。

类别（Class）：指的是对 HTML 文件中某些组件所特别设计的样式定义，例如，

P.green{color:”blue”}的意义声名一个 Class 样式类别，这个样式类别会将段落的文字颜

色设置为绿色（green）。

技巧 1：

如果您所定义的选择器拥有一个以上的声明，那么这些声明放在{}之间，而且声

明之间用分号“;”隔开，例如 P{text-indent:50;line-height:150%}是声明一个选择器 P，使

段落的首行缩排 50 像素、行距 1.5 行。

技巧 2：

如果您定义的选择器不止一个，那么建议您将每个选择器的定义放在不同的行中，

以便阅读，例如：

P{text-indent:50;line-height:150%}

H1{color:blue;background:yellow}

Address{color:green }

在前面的例子中，我们都使用颜色名称来设置颜色，事实上，您也可以使用

#RRGGBB、rgb(RR,GG,BB)等方式来制定颜色。举例如下：

H1{color:green}

H1{color:#00ff00 }

H1{color:rgb(0,255,0)}

H1{color: rgb(0%,100%,0%)}

此外，我们使用了如像素点等度量单位，事实上，除了像素点之外，样式表还提

供如表所示的度量单位。

单位说明

所使用的字体的大写英文字母 M 的宽度。

所使用的字体的小写英文字母 x 的高度

英寸

厘米

毫米

像素点（pixel）

第 4 页共 16 页

<style>

<!—

P{color:”blue”}

P.green{color:”green”}



</style>

选择器

（ Selector ）

类别

（ Class ）

样式区块

声明

（ Declaration ）

剩余15页未读，继续阅读

zhaoqiang2008030357

粉丝: 0
资源: 2

CSS基础入门：定义网页布局与格式的关键

CSS样式表基础：text-indent属性详解

CSS样式表基础：id选择符与网页设计

CSS样式表基础：打造精美网页设计

CSS 样式表基础教程

网页设计CSS样式表基础.ppt

CSS样式表基础规范帮助.pdf

yhyyhy#javascript#02-CSS样式表基础1

CSS样式表基础与应用

CSS样式表基础与优势详解

CSS样式表基础与简写规则详解

最新资源