《CSS教程》11章 其他内容的设定

---

本章内容的关键是要结合第1章的Box的示意图，正确理解Margin、border、Padding、Context的概念。

鼠标形状的设定

不同的浏览器可能有部分不能正确显示

cursor:形状
cursor:url(URL)
       形状:auto.crosshair.default.pointer.move.text.wait.help.
            e-resize.ne-resize.nw-resize.n-resize.se-resize.
            sw-resize.s-resize.w-resize
       URL: 光标的图象文件的地址

s11_01.htm

【CSS】
p {
	text-align: center;
	font-weight: bold;
	padding-top: 0.2em;
	padding-bottom: 0;
	color: #000000;
	background: #ffcc00
}

【HTML】
<p style="cursor: auto">auto</p>
<p style="cursor: crosshair">crosshair</p>
<p style="cursor: default">default</p>
<p style="cursor: pointer">pointer</p>
<p style="cursor: move">move</p>
<p style="cursor: text">text</p>
<p style="cursor: wait">wait</p>
<p style="cursor: help">help</p>

<p style="cursor: e-resize">e-resize</p>
<p style="cursor: ne-resize">ne-resize</p>
<p style="cursor: nw-resize">nw-resize</p>
<p style="cursor: n-resize">n-resize</p>
<p style="cursor: se-resize">se-resize</p>
<p style="cursor: sw-resize">sw-resize</p>
<p style="cursor: s-resize">s-resize</p>
<p style="cursor: w-resize">w-resize</p>

<p style="cursor: i11_01.cur">i11_01.cur</p>

分页符号的设定

控制某一段、某一图或表格等打印在一页上。例子中意思是h1标题另起一页打印，而表格则在同一页打印完再分页。

page-break-before: always
page-break-after: always

【CSS】
h1 {page-break-before: always}
table {page-break-after: always}

【HTML】
(略)

元素前后文本或图象的插入

元素名: before {content: "Text"}
元素名: before {content: url(URL)}
元素名: after {content: "Text"}
元素名: after {content: url(URL)}

s11_03.htm

【CSS】
body { margin: 2em}

.note:before { content: url(hand.gif) }
.warning:before {
  content: "【注意】";
  color: #ff0000;
  background-color: #ffffff
}
div.info {
  border: dotted 3px #ff9900;
  padding: 0.2em 1.2em
}

【HTML】
<div class="info">
<p class="note">
本行开头插入"手"的图象，在ie浏览器有可能无效，在Netscape一定可以看见。
</p>
<p class="warning">
本行开头插入"【注意】"的文字，在ie浏览器有可能无效，在Netscape一定可以看见。
</p>
</div>

引用文符号的改变

q {quote: "符号1" "符号2"}           左右括号的替换符号
q:before {content: open-quote}       左括号的替换符号
q:after {content: close-quote}       右括号的替换符号

s11_04.htm

【CSS】
body {
  margin: 2em;
  line-height: 1.5
}
q { quotes: "「" "」" }

【HTML】
<p>
子在川上曰：<q>逝者如斯乎。</q>时光真是一去不复返啊！
</p>

注释

只适用于CSS部分，HTML部分用<!-- 注释内容 -->

/* 注释内容 */

【CSS】
(略)

【HTML】
(略)