css设计引言,HTML5与CSS3设计模式 引言（3）

引言(3)

2. 代码清单2. 浮动下沉首字示例

HTML〈pclass="hanging-indent"〉

〈spanclass="hanging-dropcap"〉H〈/span〉anging Dropcap.

〈/p〉

CSS.hanging-indent { padding-left:50px; text-indent:-50px; margin-top:-25px; }

.hanging-dropcap { position:relative; top:0.55em; left:-3px; font-size:60px;

line-height:60px;}

本书约定

本书中每一个设计模式都采用以下约定。

所有大写符号都必须用实际值替换。(注意：代码清单1的大写符号在代码清单2中都被替换为了具体的值。)

大写的元素必须相应地替换成所选择的元素。除非确定修改后仍然能产生相同的框模型，否则不要修改写元素名。下面是常用的元素占位符。

ELEMENT　表示任意类型的元素。

INLINE　表示行内元素。

INLINE_TEXT　表示〈span〉、〈em〉或〈code〉等包含文件内容的行内元素。

BLOCK　表示块级元素。

TERMINAL_BLOCK　表示终止块元素。

INLINE_BLOCK　表示行内块级元素。

HEADING　表示〈h1〉、〈h2〉、〈h3〉、〈h4〉、〈h5〉和〈h6〉。

PARENT　表示可作为子元素有效父级的元素。

CHILD　表示可以作为父级元素有效子级的元素。

LIST　表示任意的列表元素，包括〈ol〉、〈ul〉和〈dl〉。

LIST_ITEM　表示列表项，包括〈li〉、〈dd〉和〈dt〉。

需要替换的选择器也是大写的。除非是同时对HTML模式进行了修改(如修改了类名)，否则不要修改选择器中的小写符号。下面是常用的占位符。

SELECTOR {}　表示任意的选择器。

INLINE_SELECTOR {}　表示用于选择行内元素的选择器。

INLINE_BLOCK_SELECTOR {}　表示用于选择行内块级元素的选择器。

BLOCK_SELECTOR {}　表示用于选择块级元素的选择器。

TERMINAL_BLOCK_SELECTOR {}　表示用于选择终止块元素的选择器。

SIZED_BLOCK_SELECTOR {}　表示用于选择设定尺寸块元素的选择器。

TABLE_SELECTOR {}　表示用于选择表格元素的选择器。

CELL_SELECTOR {}　表示用于选择表格单元格元素的选择器。

PARENT_SELECTOR {}　表示用于选择设计模式中父级元素的选择器。

SIBLING_SELECTOR {}　表示用于选择模式中子元素的选择器。

TYPE {}　表示一种按类型(如h1或span)选择元素的选择器。

*.CLASS {}　表示按类名选择元素的选择器。

#ID {}　表示按ID进行选择的元素选择器。

所有需要替换的值都用大写符号表示。如果一个值包含小写符号，那么不要修改这部分值。下面是常用的值占位符。

一些值是字面值，不需要替换，如0、-9999px、1px、1em、none、absolute、relative和auto。这些值总是小写的。

+VALUE　表示大于或等于0的非负度量值，如0、10px或2em。

-VALUE　表示小于或等于0的非正度量值，如0、-10px或-2em。

±VALUE　表示任意度量值。

VALUEem　表示em度量值。

VALUEpx　表示像素度量值。

VALUE%　表示百分数比度量值。

VALUE_OR_PERCENT　表示一个度量值或百分比值。

WIDTH STYLE COLOR　表示多个属性值，如border值。每一个值都用大写符号表示。

url("FILE.EXT")　表示背景图像，请将FILE.EXT替换为图像的URL。

CONSTANT　表示有效的常量值。例如，white-space支持3个常量值：normal、pre和

nowrap。为了方便起见，我们通常用大写字母列举有效的常量值，每个值之间用下划线连接，如NORMAL_PRE_NOWRAP。

【责任编辑：book TEL：(010)68476606】

点赞 0