理解CSS:外部样式表、内部样式块与内联样式
需积分: 15 120 浏览量
更新于2024-07-30
收藏 1.41MB PDF 举报
"精通CSS.DIV网页样式与布局"
在网页设计中,CSS(层叠样式表)和DIV是两个至关重要的概念,它们共同构成了网页的样式与布局的基础。本资源着重于帮助读者深入理解并掌握这两者,以便创建美观、响应式的网页。
CSS是一种样式表语言,用于描述HTML或XML(包括如SVG、MathML等各种XML方言)文档的呈现。它允许开发者将样式信息(如颜色、字体、布局等)与网页内容分离开来,使得内容与表现形式相分离,有利于代码的维护和网页的可访问性。CSS的名称“层叠”源于其处理样式规则的方式:多个样式表可以应用于同一个元素,最终的样式是这些样式表规则的层叠结果。
1. **样式表的加入方式**
- **链入外部样式表文件**:这是推荐的方法,将样式定义放在单独的.css文件中,通过HTML的`<link>`标签链接到网页。这种方式使得样式易于管理和更新,多个页面可以共享同一份样式表。例如:
```html
<head>
<title>titleofarticle</title>
<link rel="stylesheet" href="http://www.dhtmlet.com/rainer.css" type="text/css">
</head>
```
- **定义内部样式块对象**:在HTML文档的`<head>`部分或者`<body>`之间添加`<style>`标签,直接定义样式。这种方式适用于只影响当前页面的样式,或者需要快速调整样式时。
```html
<html>
<style type="text/css">
body {font:10pt "Arial";}
h1 {font:15pt/17pt "Arial"; font-weight:bold; color:maroon;}
/* ...其他样式定义... */
</style>
<body>
```
- **内联定义**:直接在HTML元素中使用`style`属性指定样式,这种方法优先级最高,但不推荐,因为它将样式与内容混合,不利于维护。
```html
<p style="margin-left:0.5in; margin-right:0.5in">这一行被增加了左右的外补丁</p>
```
2. **样式表语法**
CSS的语法包括选择器(如元素名、类名、ID名等)和声明块。声明块由一对大括号`{}`包围,其中包含了属性和对应的值,如`font:10pt "Arial"`。属性与值之间用冒号`:`分隔,声明之间用分号`;`分隔。CSS还支持选择器的组合、嵌套以及优先级规则。
3. **DIV与布局**
`div`是HTML中的一个通用容器标签,用于组织和划分页面内容。通过CSS,我们可以为`div`设置宽高、边距、内边距、背景色等样式,实现复杂的网页布局。常见的布局模式如流式布局、网格布局、Flexbox布局和CSS Grid布局都可以通过`div`和CSS实现。
4. **优先级与层叠**
当一个元素同时受到多个样式影响时,会根据样式来源的优先级决定最终应用的样式。通常,内联样式 > 内部样式 > 外部样式,但这个顺序可以通过`!important`声明改变。`!important`强制一个属性具有最高优先级,无论其他样式如何。
通过深入学习和实践CSS与DIV,开发者能够创建出具有专业外观和响应式行为的现代网页。此外,随着技术的发展,如CSS3引入的新特性和布局模型,如媒体查询、动画和过渡等,为网页设计提供了更多可能性。
2011-12-27 上传
2011-04-06 上传
2024-06-22 上传
2023-07-14 上传
2023-07-14 上传
2023-06-06 上传
2024-09-25 上传
2023-06-08 上传
ndscsatan
- 粉丝: 0
- 资源: 1
最新资源
- 明日知道社区问答系统设计与实现-SSM框架java源码分享
- Unity3D粒子特效包:闪电效果体验报告
- Windows64位Python3.7安装Twisted库指南
- HTMLJS应用程序:多词典阿拉伯语词根检索
- 光纤通信课后习题答案解析及文件资源
- swdogen: 自动扫描源码生成 Swagger 文档的工具
- GD32F10系列芯片Keil IDE下载算法配置指南
- C++实现Emscripten版本的3D俄罗斯方块游戏
- 期末复习必备:全面数据结构课件资料
- WordPress媒体占位符插件:优化开发中的图像占位体验
- 完整扑克牌资源集-55张图片压缩包下载
- 开发轻量级时事通讯活动管理RESTful应用程序
- 长城特固618对讲机写频软件使用指南
- Memry粤语学习工具:开源应用助力记忆提升
- JMC 8.0.0版本发布,支持JDK 1.8及64位系统
- Python看图猜成语游戏源码发布