|
|
对文字排版样式的一点整理 |
| Author:咖啡虫 PublishTime:2004-8-2 |
CSS中对文字的排版样式很多，用的也相对普遍，这里对常用的样式做了一点整理，希望对各位有用（错误或缺漏的地方大家补充）：
1。文字字体、颜色、大小等：
font:
fontStyle(HTML:font-style):
斜体：normal、italic、oblique
fontVariant(HTML:font-variant):
小标题：normal、small-caps
fontWeight(HTML:font-weight):
加粗：normal、bold、bolder、lighter、100、200……900
fontSize(HTML:font-size):
大小：整数+px、pt、%等单位
fontFamily(HTML:font-family):
字体：各种字体名
color(HTML:color):
颜色：16进制RGB值
example:
<SPAN STYLE="font:italic normal bolder 12pt Arial;color:#ff0000">
注意顺序 注意顺序 注意顺序 注意顺序
</SPAN>
2。对齐：
verticalAlign(HTML:vertical-Align):
垂直对齐： auto（自动）、baseline（基线）、sub（下标）、super（上标）、top（顶部）、bottom（底部）、text-top（文字顶）、text-bottom（文字底）
textAlign(HTML:text-Align):
水平对齐：auto（自动）、left（左）、center（中间）、right（右）
textJustify(HTML- text-justify):
分散对齐：auto、distribute、distribute-all-lines、inter-cluster、inter-ideograph、inter-word、kashida、newspaper
example:
<script language='javascript'>
<!--CodeWrittenByRidincal-->
function fnChangeValign(){
oTd1.style.verticalAlign = oSelValign.options[oSelValign.selectedIndex].text;
}
function fnChangeHValign(){
oTd1.style.textAlign = selHAlign.options[selHAlign.selectedIndex].text;
}
function fnChangeDistr(){
oDiv2.style.textJustify = selDistr.options[selDistr.selectedIndex].text;
}
</script>
<TABLE BORDER width=400 height=200>
<TR>
<TD ID="oTd1" style="vertical-Align:baseline"> text to align<br>
text to align<br>
text to align </TD>
<TD>Vertical:<br>
<SELECT ID = "oSelValign" onchange = "fnChangeValign()">
<OPTION>auto
<OPTION>baseline
<OPTION>sub
<OPTION>super
<OPTION>top
<OPTION>bottom
<OPTION>text-top
<OPTION>text-bottom</SELECT>
<br>
Horizon<br>
<SELECT name="selHAlign" ID = "select2" onchange = "fnChangeHValign()">
<option>left</option>
<option>right</option>
<option>center</option>
<option>justify</option>
</SELECT> </td>
</TR>
</TABLE>
<table cellpadding="2" cellspacing="0" border="1">
<tr>
<td> <DIV ID="oDiv2" style="font-size:14;text-align:justify; text-justify:distribute-all-lines;">
This example demonstrates how to use this property. This is something.
This example demonstrates how to use this property. This is something.
This example demonstrates how to this property. This is something. This
example demonstrates how to use this property. This is something. This
example demonstrates how to use this property. This is something. This
example demonstrates how to use this property. This is something. This
example demonstrates how to use this property. This is something. This
example demonstrates how to use this property. This is something. This
example demonstrates how to use this property. </DIV></td>
</tr>
<tr>
<td><SELECT name="select" ID = "selDistr" onchange = "fnChangeDistr()">
<option>auto </option>
<option>distribute</option>
<option>distribute-all-lines</option>
<option>inter-cluster</option>
<option>inter-ideograph</option>
<option>inter-word</option>
<option>kashida</option>
<option>newspaper</option>
</SELECT></td>
</tr>
</table>
。段落：
字距：
letterSpacing(HTML:letter-spacing)
字母间距：浮点数+cm, mm, in, pt, pc,px
词距(IE6)：
wordSpacing(HTML: word-spacing):
单词间距离：浮点数+cm, mm, in, pt, pc,px
行距：
lineHeight(HTML: line-height):
行间距离：浮点数+cm, mm, in, pt, pc,px
缩进：
textIndent(HTML: text-indent):
段落缩进：浮点数+cm, mm, in, pt, pc,px
example:
<STYLE>
SPAN.spacing{word-spacing: 10;}
SPAN.lspacing {letter-spacing: 10px;}
}
</STYLE>
<script language="javascript">
<!--CodeWrittenByRidincal-->
var indentLen = 1;
function fnChangeIndent(add)
{
if(add)indentLen++;
else indentLen--;
oDiv1.style.textIndent=indentLen+'cm';
}
var indentLH = 10;
function fnChangeLH(add)
{
if(add)indentLH+=3;
else indentLH-=3;
oDiv3.style.lineHeight=indentLH+'mm';
}
function fnChangeSpace(){
oSpan.style.wordSpacing =
oSelSpace.options[oSelSpace.selectedIndex].text;
}
function fnChangeLSpace(){
olSpan.style.letterSpacing =
oSellSpace.options[oSellSpace.selectedIndex].text;
}
</script>
<SELECT ID = "oSelSpace" onchange = "fnChangeSpace()">
<OPTION>10
<OPTION>15
<OPTION>20
</SELECT>
<SPAN ID = "oSpan" CLASS = "spacing">
The quick brown fox jumped over the lazy dog.
</SPAN>
<br>
<SELECT id=oSellSpace onchange=fnChangeLSpace()> <OPTION
selected>10<OPTION>15<OPTION>20</OPTION></SELECT> <SPAN class=lspacing
id=olSpan>The quick brown fox jumped over the lazy dog. </SPAN><br>
<table cellspacing=0 cellpadding=2 border=1>
<tr>
<td width="577">
<DIV STYLE="font-size:14;text-Indent:1cm" ID="oDiv1" ind="1">
<BLOCKQUOTE>
<p>This example demonstrates how to use this property. This is something.
This example demonstrates how to use this property. This is something.
This example demonstrates how to this property. This is something.
This example demonstrates </p>
<p>This example demonstrates how to use this property. This is something.
This example demonstrates how to use this property. This is something.
This example demonstrates how to this property. This is something.
This example demonstrates </p>
</BLOCKQUOTE>
</DIV></td>
<td width="197"><input type="button" value="+" onClick="fnChangeIndent(true)"><input type="button" value="-" onClick="fnChangeIndent(false)"></td></tr>
</table>
<table cellspacing=0 cellpadding=2 border=1>
<tr>
<td width="577"> <DIV STYLE="font-size:14; line-height:10mm" ID="oDiv3">
<BLOCKQUOTE>This example demonstrates how to use this property. This is
something. This example demonstrates how to use this property. This
is something. This example demonstrates how to this property. This is
something. This example demonstrates how to use this property. This
is something. This example demonstrates how to use this property. This
is something. This example demonstrates how to use this property. This
is something. This example demonstrates how to use this property. This
is something. This example demonstrates how to use this property. This
is something. This example demonstrates how to use this property. </BLOCKQUOTE>
</DIV></td>
<td width="197"><input name="button" type="button" onClick="fnChangeLH(true)" value="+">
<input name="button" type="button" onClick="fnChangeLH(false)" value="-"></td>
</tr>
</table>
4。换行
可选的样式较多：
wordBreak:(HTML- word-break)
normal、break-all
wordWrap:(HTML- word-wrap)
normal、break-word
whiteSpace:(HTML- white-space)
normal、nowrap
example:
<script language='javascript'>
<!--CodeWrittenByRidincal-->
function fnChangeWrap(){
if(oTb1.style.wordBreak != "break-all")oTb1.style.wordBreak = "break-all";
else oTb1.style.wordBreak = "normal"
}
</script>
<table cellspacing=0 cellpadding=2 border=1 ID = "oTb1" style="wrod-break:normal">
<tr>
<td>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</td>
</tr>
<tr>
<td>
<input value="changeWrap" type="button" onclick="fnChangeWrap()">
</td>
</tr>
</table>
5。方向
排版方向：
writingMode(HTML:writing-mode)
lr-tb（横排）、tb-lr（竖排）
layoutFlow(HTML:layout-flow)
horizontal（横排）、vertical-ideographic（竖排）
文字方向：
direction(HTML:direction)
ltr（从左往右）、rtl（从右往左） 、inherit（继承）
example:
<script language='javascript'>
<!--CodeWrittenByRidincal-->
function fnChangeWM(b_v)
{
if(b_v)oDiv4.style.writingMode="lr-tb";
else oDiv4.style.writingMode="tb-rl";
}
function fnChangeDir(b_d)
{
if(b_d)oDiv4.style.direction="ltr";
else oDiv4.style.direction="rtl";
}
</script>
<TABLE cellSpacing=0 cellPadding=2 border=1>
<TBODY>
<TR>
<TD width=577> <DIV id=oDiv4 style="FONT-SIZE: 14px; writing-mode: lr-tb">
<BLOCKQUOTE>This example demonstrates how to use this property. This
is something. This example demonstrates how to use this property.
This is something. This example demonstrates how to this property.
This is something. This example demonstrates how to use this property.
This is something. This example demonstrates how to use this property.
这里有一些例子，显示文字的排版技巧。
这里有一些例子，显示文字的排版技巧。
这里有一些例子，显示文字的排版技巧。
这里有一些例子，显示文字的排版技巧。
</BLOCKQUOTE>
</DIV></TD>
<TD width=197><INPUT onclick=fnChangeWM(true) type=button value=横排 name=button2>
<INPUT onclick=fnChangeWM(false) type=button value=树排 name=button2>
<br>
<br>
<INPUT onclick=fnChangeDir(true) type=button value=从左往右 name=button22>
<INPUT onclick=fnChangeDir(false) type=button value=从右往左 name=button23> </TD>
</TR>
</TBODY>
</TABLE>
6。图文混排
styleFloat(HTML:float)
none（默认）、left（左）、right（右）
hspace(HTML:hspace)
水平图文间距
vspace(HTML:vspace)
垂直图文间距
example:
<script language='javascript'>
<!--CodeWrittenByRidincal-->
function fnChangeFloat(b_f)
{
if(b_f)oImg1.style.styleFloat="left";
else oImg1.style.styleFloat="right";
}
var vs=12;var hs=12;
function fnChangePS(sty,b_s)
{
if(sty=='h')
{
if(b_s)hs+=10;
else hs-=10;oImg1.hspace=hs;
}
else
{
if(b_s)vs+=10;
else vs-=10;oImg1.vspace=vs;
}
}
</script>
<TABLE cellSpacing=0 cellPadding=2 border=1>
<TBODY>
<TR>
<TD width=577> <DIV style="FONT-SIZE: 14px;">
<BLOCKQUOTE><img ID='oImg1' src="http://www.blueidea.com/bbs/images/bbtitle.gif" style="float:none;" vspace=12 hspace=12 >This
example demonstrates how to use this property. This is something.
This example demonstrates how to use this property. This is something.
This example demonstrates how to this property. This is something.
This example demonstrates how to use this property. This is something.
This example demonstrates how to use this property. 这里有一些例子，显示文字的排版技巧。
这里有一些例子，显示文字的排版技巧。 这里有一些例子，显示文字的排版技巧。 这里有一些例子，显示文字的排版技巧。 </BLOCKQUOTE>
</DIV></TD>
<TD width=197><INPUT onclick=fnChangeFloat(true) type=button value=left name=button24>
<INPUT onclick=fnChangeFloat(false) type=button value=right name=button24>
<br>
HSpace:
<INPUT onclick=fnChangePS('h',true) type=button value=+ name=button3> <INPUT onclick=fnChangePS('h',false) type=button value=- name=button3>
<br>
VSpace:
<INPUT onclick=fnChangePS('v',true) type=button value=+ name=button4> <INPUT onclick=fnChangePS('v'false) type=button value=- name=button4>
</TD>
</TR>
</TBODY>
</TABLE>
接着来……
7。边距与填充
margin(HTML:margin)
上边距：marginTop(HTML:margin-top)
右边距：marginRight(HTML:margin-right)
下边距：marginBottom(HTML:margin-bottom)
左边距：marginLeft(HTML:margin-left)
padding(HTML:padding)
上填充：paddingTop(HTML:padding-top)
右填充：paddingRight(HTML:padding-right)
下填充：paddingBottom(HTML:padding-bottom)
左填充：paddingLeft(HTML:padding-left)
以上取值皆为浮点数+cm, mm, in, pt, pc, px
example:
<table cellpadding=0 cellspacing=0 border=1>
<tr>
<td>
<IMG src="http://www.blueidea.com/bbs/images/bbtitle.gif" border="0"><BR>
<IMG src="http://www.blueidea.com/bbs/images/bbtitle.gif" border="0">
<IMG src="http://www.blueidea.com/bbs/images/bbtitle.gif" onmouseover="this.style.margin='5mm 5mm 5mm 5mm'"
onmouseout="this.style.margin=''">
<IMG src="http://www.blueidea.com/bbs/images/bbtitle.gif" border="0"><BR>
<IMG src="http://www.blueidea.com/bbs/images/bbtitle.gif" border="0">
</td>
</tr>
<tr>
<TD onmouseover="this.style.padding='0.5cm 0.2cm'"
onmouseout="this.style.padding=''" ALIGN=middle>
<IMG src="http://www.blueidea.com/bbs/images/bbtitle.gif">
</TD>
</tr>
</table>
楼上的，俺还没写完呢……
8。背景
严格说来，背景不算文字排版的一部分，但是对页面设计中常常用的到，一并列上：
background(HTML:background)
backgroundAttachment(HTML:background-attachment)
背景连接方式：scroll（滚动）、fixed（固定）
backgroundColor(HTML:background-color)
背景色：16进制RGB值（或预定义色值）
backgroundImage(HTML:background-image)
背景图片：URL
backgroundRepeat(HTML:background-repeat)
背景图片重复方式：repeat（重复）、no-repeat（不重复）、repeat-x（横向重复）、repeat-y（纵向重复）
backgrounPosition(HTML:background-position):
backgroundPositionX(HTML:background-position-x)
背景水平位置：
1。长度：浮点数+cm, mm, in, pt, pc, px
2。百分比：整数+%
3。对齐方式：left、center、right
backgroundPositionY(HTML:background-position-y)
背景垂直位置：
1。长度：浮点数+cm, mm, in, pt, pc, px
2。百分比：整数+%
3。对齐方式：top、center、bottom
example
<STYLE>
.style1{background:beige url(http://www.blueidea.com/bbs/images/bbtitle.gif) no-repeat top center}
.style2{background:ivory url(http://www.blueidea.com/bbs/images/q1.gif) no-repeat bottom right}
</STYLE>
</HEAD>
<BODY>
<SPAN onmouseover="this.className='style1'"
onmouseout="this.className='style2'">
举个例子 举个例子 举个例子 举个例子 举个例子 <br>
举个例子 举个例子 举个例子 举个例子 举个例子<br>
举个例子 举个例子 举个例子 举个例子 举个例子<br>
举个例子 举个例子 举个例子 举个例子 举个例子<br>
举个例子 举个例子 举个例子 举个例子 举个例子<br>
举个例子 举个例子 举个例子 举个例子 举个例子<br></SPAN>
9。位置
position(HTML:position)
位置：static（默认，无设定位置）、absolute（相对于已经定位的父对象，如果父对象未定位，相对于BODY。使用left、top等样式设定相对位置）、relative（相对于父对象。使用left、top等样式设定相对位置）
left(HTML:left)
左部相对位置：浮点数+cm, mm, in, pt, pc, px；整数+em ,ex；整数+%
right(HTML:right)
右部相对位置：浮点数+cm, mm, in, pt, pc, px；整数+em ,ex；整数+%
top(HTML:top)
顶部相对位置：浮点数+cm, mm, in, pt, pc, px；整数+em ,ex；整数+%
bottom(HTML:bottom)
底部相对位置：浮点数+cm, mm, in, pt, pc, px；整数+em ,ex；整数+%
width(HTML:width)
宽度：浮点数+cm, mm, in, pt, pc, px；整数+em ,ex；整数+%
height(HTML:height)
高度：浮点数+cm, mm, in, pt, pc, px；整数+em ,ex；整数+%
overflow(HTML:overflow):
overflowX(HTML: overflow-x):
横向滚动：visible（默认，不滚动，父对象根据当前内容改变大小）、scroll（滚动）、hidden（隐藏，无滚动，超出部分自动隐藏）、auto（自动）
overflowY(HTML: overflow-y):
纵向滚动：visible（默认，不滚动，父对象根据当前内容改变大小）、scroll（滚动）、hidden（隐藏，无滚动，超出部分自动隐藏）、auto（自动）
pixelBottom(HTML:pixel-bottom):
底部坐标：整数，单位只有像素
pixelTop(HTML:pixel-top):
顶部坐标：整数，单位只有像素
pixelLeft(HTML:pixel-left):
左部坐标：整数，单位只有像素
pixelRight(HTML:pixel-right):
右部坐标：整数，单位只有像素
pixelWidth(HTML:pixel-width):
宽度：整数，单位只有像素
pixelHeight(HTML:pixel-height):
高度：整数，单位只有像素
zIndex(HTML:z-index)
z向坐标：auto、整数
example:
<script language='javascript'>
<!--CodeWrittenByRidincal-->
function fnChangePos(){
oDiv5.style.overflow = selPos.options[selPos.selectedIndex].text;
}
var vp=10;var hp=10;
function fnChangePos2(sty,b_p)
{
if(sty=='h')
{
if(b_p)hp+=10;
else hp-=10;oDiv5.style.pixelLeft=hp;
}
else
{
if(b_p)vp+=10;
else vp-=10;oDiv5.style.pixelTop=vp;
}
}
</script>
<TABLE cellSpacing=0 cellPadding=2 border=1>
<TBODY>
<TR>
<TD> <DIV ID="oDiv5" style="position:relative;background-color:yellow;width:300px;height:160px;FONT-SIZE: 14px; overflow:scroll;">
This example demonstrates how to use this property. This
is something. This example demonstrates how to use this property.
This is something. This example demonstrates how to this property.
This is something. This example demonstrates how to use this property.
This is something. This example demonstrates how to use this property.
这里有一些例子，显示文字的排版技巧。 这里有一些例子，显示文字的排版技巧。 这里有一些例子，显示文字的排版技巧。 这里有一些例子，显示文字的排版技巧。
</DIV></TD>
<TD width=197><SELECT id=selPos onchange=fnChangePos() name=select2>
<option>visible</option>
<option>scroll</option>
<option>hidden</option>
<option>auto</option>
</SELECT>
<br>
pixelX:
<INPUT onclick=fnChangePos2('h',true) type=button value=+ name=button32>
<INPUT onclick=fnChangePos2('h',false) type=button value=- name=button32>
<br>
pixelY:
<INPUT onclick=fnChangePos2('v',true) type=button value=+ name=button322>
<INPUT onclick=fnChangePos2('v',false) type=button value=- name=button322>
</TD>
</TR>
</TBODY>
</TABLE>
|
|
| | |
