理解CSS：样式表的使用与网页布局

需积分: 9 67 浏览量更新于2024-07-29 收藏 1.3MB PDF 举报

"精通CSS.DIV网页样式与布局.pdf" CSS（层叠样式表）是一种标记性语言，用于控制网页的样式，使内容与表现分离，增强了网页设计的灵活性和可维护性。通过使用CSS，开发者可以更方便地管理页面布局、颜色、字体等视觉元素，同时保持内容的清晰性和独立性。将样式表添加到网页主要有三种方法： 1. **链入外部样式表文件**：创建一个扩展名为.css的外部样式表文件，然后在HTML文档的<head>部分使用<link>标签引用该文件。例如： ```html <head> <title>titleofarticle</title> <link rel="stylesheet" href="http://www.dhtmlet.com/rainer.css" type="text/css"> </head> ``` 在XML文档中，可以通过XML声明区引用样式表： ```xml <?xml-stylesheet type="text/css" href="http://www.dhtmlet.com/rainer.css"?> ``` 2. **定义内部样式块对象**：在HTML文档的<head>和<body>标签之间插入<STYLE>...</STYLE>块来定义样式。例如： ```html <html> <style type="text/css">  </style> <body> ``` 注意，使用`type="text/css"`是为了确保不支持CSS的浏览器忽略样式表。 3. **内联定义**：直接在HTML元素内部使用`style`属性来指定特定样式。例如： ```html <p style="margin-left: 0.5in; margin-right: 0.5in">这一行被增加了左右的外补丁</p> ``` 样式表的优先级是根据定义的位置决定的，内联样式优先级最高，其次是内部样式块，最后是外部样式表。如果存在相同的选择器和属性，优先级高的样式会覆盖优先级低的。但`!important`声明可以改变这个规则，它会使某个样式具有最高的优先级，无论其位置在哪里。 CSS的语法包括选择器（如元素选择器、类选择器、ID选择器等）和声明块，声明块由一对大括号 `{}` 包裹，包含属性和值，如 `font-size: 12px`。多个声明之间用分号 `;` 分隔。通过这种语法，开发者可以精确控制每个元素的外观和布局。在实际的网页设计中，CSS不仅可以用于文本样式，还可以处理盒模型（包括边距、填充、边框和内容区域）、定位（相对、绝对、固定等）、浮动、响应式设计、动画和过渡效果等方面，极大地丰富了网页的表现力。掌握CSS和DIV布局是现代前端开发者的必备技能，能够创建美观且功能丰富的网页。

说明：

如使用该复合属性定义其单个参数，则其他参数的默认值将无条件覆盖各自对应的单个属性设置

。

默认值为： transparent none repeat scroll 0% 0% 。

尽管该属性不可继承，但如果未指定，其父对象的背景颜色和背景图将在对象下面显示。

对应的脚本特性为 background 。请参阅我编写的其他书目。

示例：

div { background: red no-repeat scroll 5% 60%; }

body { background: url("images/aardvark.gif") repeat-y; }

pre { background: url("images/aardvark.gif") top; }

caption { background: fuchsia; }

background-color 版本： CSS1 兼容性： IE4+ NS4+ 继承性：无

语法：

background-color : transparent |

color

参数：

transparent : 背景色透明

color :

指定颜色。请参阅颜色单位和附录：颜色表

说明：

设置或检索对象的背景颜色。

对应的脚本特性为 backgroundColor 。请参阅我编写的其他书目。

示例：

p { background-color: silver }

div { background-color: rgb(223,71,177) }

body { background-color: #98AB6F }

pre { background-color: transparent; }

剩余175页未读，继续阅读

yinzi225

粉丝: 7
资源: 7

理解CSS：样式表的使用与网页布局

精通CSS.DIV网页样式与布局17-20

精通CSS.DIV网页样式与布局_00002.pdf

《精通CSS.DIV网页样式与布局》光盘实例源码

精通CSS.DIV网页样式与布局17

精通CSS.DIV网页样式与布局(代码）

精通CSS.DIV网页样式与布局_00004.pdf

精通CSS.DIV网页样式与布局18视频+1-20源码

精通CSS.DIV网页样式与布局配套视频教程 14

《精通CSS.DIV网页样式与布局》示例汇总

精通CSS.DIV网页样式与布局_00003.pdf

最新资源