精通CSS[1].DIV网页样式与布局.doc资源-CSDN文库

需积分: 3 196 浏览量 2010-03-05 23:25:30 上传评论收藏 1.67MB DOC 举报

**CSS（层叠样式表）**是Web开发中不可或缺的一部分，它允许开发者通过分离样式信息与内容来增强网页的外观和布局。CSS的核心概念在于控制网页元素的样式，包括颜色、字体、布局以及更多视觉效果。 ### CSS的引入方式 1. **链入外部样式表文件**：这是最常见的方法，通过`<link>`标签将HTML文档与单独的CSS文件关联起来。例如： ```html <head> <title>网页标题</title> <link rel="stylesheet" href="styles.css" type="text/css"> </head> ``` 在XML文档中，可以使用`<?xml-stylesheet>`指令来链接样式表。 2. **定义内部样式块对象**：在HTML文档的`<head>`标签内，使用`<style>`标签包含CSS代码，如： ```html <html> <head> <style type="text/css"> /* 样式规则 */ </style> </head> <body>  </body> </html> ``` 3. **内联定义**：直接在HTML元素中使用`style`属性来指定样式，例如： ```html <p style="color: red; font-size: 18px;">这是一个带有内联样式的段落。</p> ``` ### CSS语法 CSS的语法规则非常直观，由选择器（Selector）和声明块（Declaration Block）组成。选择器指定了要应用样式的元素，声明块包含了属性（property）和对应的值（value）。例如： ```css p { color: blue; font-size: 14px; } ``` 在这个例子中，`p`是选择器，`color: blue;`和`font-size: 14px;`是声明，属性和值之间用冒号分隔，多个声明用分号结束。 ### 样式表的层叠和优先级 CSS的“层叠”特性意味着当同一个元素有多个样式定义时，会按照优先级决定哪个样式生效。优先级由以下规则决定： - **内联样式**（inline styles）具有最高优先级。 - **内部样式表**（embedded styles）次之。 - **外部样式表**（linked stylesheets）优先级最低，但如果有多个外部样式表，遵循层叠规则。此外，使用`!important`声明可以强制提高某个样式优先级，如`color: red !important;`。 ### 继承 CSS中的某些属性支持**继承**，这意味着子元素可以从父元素那里继承属性值，如`color`、`font`等。但是，并非所有属性都支持继承，比如`border`、`padding`、`margin`等布局属性。 ### CSS属性参考 - **字体属性**：包括`font-family`、`font-size`、`font-weight`、`font-style`等，用于设置文本的字体、大小、粗细和倾斜。 - **文本属性**：如`text-align`、`text-decoration`、`text-indent`等，控制文本的对齐、装饰和缩进。 - **背景属性**：如`background-color`、`background-image`，用于设置元素的背景颜色和图片。 - **布局属性**：如`margin`、`padding`、`display`，控制元素的位置和空间。 - 更多属性如`vertical-align`、`text-transform`、`line-height`等，提供了丰富的设计可能性。了解和熟练掌握这些知识点，将有助于创建出美观且响应式的网页。通过灵活运用CSS，开发者能够实现复杂的网页布局和设计，同时保持内容和表现的分离，提升网站的可维护性和可访问性。

资源推荐

资源详情

资源评论

什么是样式表

 是 的缩写。译作「层叠样式表单」。是用于（增强）控制网页样式并允许将样

式信息与网页内容分离的一种标记性语言。

如何将样式表加入您的网页

你可以用以下三种方式将样式表加入您的网页。而最接近目标的样式定义优先权越高。高优先权样式将继承低

优先权样式的未重叠定义但覆盖重叠的定义。例外请参阅 



声明。

链入外部样式表文件 

你可以先建立外部样式表文件（），然后使用  的  对象。示例如下：





 !!!"



而在 # 中，你应该如下例所示在声明区中加入：

$"%" !!!$

定义内部样式块对象 

你可以在你的  文档的和&'()标记之间插入一个)*)*块对象。定义方

式请参阅样式表语法。示例如下：



"

+%%

,- ./01

.- .2.304%! ,4 1

5- .6.204%! ,4 ,71

- ./.504 ,1

%%



,

请注意，这里将  对象的  属性设置为"，是允许不支持这类型的浏览器忽略样式表单。

内联定义 

内联定义即是在对象的标记内使用对象的  属性定义适用其的样式表属性。示例如下：

% /24% /2这一行被增加了左右的外补丁

样式表语法 

- 871

参数说明：

Selector9%%9选择符

property:value9%%9样式表定义。属性和属性值之间用冒号: ;隔开。定义之间用分号:4;隔开

继承的值 

每个属性都有一个指定的值：<。它的意思是：将父对象的值等同为计算机值得到。这个值通常仅仅是备
用的。显式的声明它可用来强调。
=>9999样式表属性
9
字体 
 
%%?%?%@7%%%!"%
"%7%"%!%8"%%%
!%
文本 

"%"%8A!8%"%7%A!!%7%
,!%,%,!%!%!"%7"%%"%
@77,%7,%7,%8%7%7%%7%
%%7%%7%%7%%
背景 

,7,7%,7%,7%,7%
,7%#,7%),7%%,7%%
,7%
定位 
!
?%",
尺寸 
"
"%%!"%!%!
布局 

A8A!8A!%"8A!%8,
外补丁 
#
%%%,%
轮廓 
$
77%7%7%! 
边框 

,,%,%,%!,%,%%,%%
,%%!,%,%%,%%,%%!,%
,,%,%,%,%,%,%!,%,%%
,%%,%%!
2

内容 %

7%7B77%7% 
内补丁 
!
%%%,%
列表项目 

%%%%%%%%C
表格 

,%,%%%,%7
% 
滚动条 

,%6%%,%%,%%,%!%
,%!%,%%!%,%,%
打印 
!
%,%%,%,%,%
?!!
声音 
&
8%878?7%
77%7%,77%7%,
%%7%7%77 
其它属性 
'
,8?7D
99
说明：这种颜色是 5 标准属性。这种颜色是 <* 建议样式表属性。这种颜色
是 E 私有属性。这种颜色是目前尚无浏览器支持的属性。
F=9999字体属性

 !(
属性


版本
"(
简介
 .5
复合属性。设置或检索对象中的文本特性
 .
检索或设置对象的文本颜色
3

% .
设置或检索用于对象中文本的字体名称序列
%? .
设置或检索对象中的字体尺寸
%?%@7 5
设置或检索用于对象中文本的字体名称序列
是否强制使用同一尺寸
% 5
设置或检索用于对象中文本的文字是否横向
的拉伸变形
% .
设置或检索对象中的字体样式
%! .
设置或检索对象中的文本字体的粗细
"% .
检索或设置对象中的文本的装饰，如下划
线、闪烁等
"%7%
<* 专有属性
设置或检索 "%

属性定义的下
划线的位置
"%!
5
设置或检索对象中文本的文字是否有阴影及
模糊效果
%8 .
设置或检索对象中的文本是否为小型的大写
字母
"% .
检索或设置对象中的文本的大小写
% .
检索或设置对象的行高。即字体最底端与字
体内部顶端之间的距离
% .
检索或设置对象中的文字之间的间隔
!% .
检索或设置对象中的单词之间插入的空格
数。对于 <*GH而言仅在 0 平台上可用
 版本：.5　 兼容性：<*GHEGH　继承性：有
9
语法： 
9
) * )+ II )+, II )+- II )+. II
+II)+)
)*( I  I  I + I +( I
+
9
参数： 
9
该属性是复合属性。第一种声明方式请参阅各参数对应的属性。
第二种声明方式中的参数属于 5。 
(*使用有标题的系统控件的文本字体（如按钮，菜单等） 
4