快捷搜索:  as  test  1111  test aNd 8=8  test++aNd+8=8  as++aNd+8=8  as aNd 8=8

Ag亚游国际网站:中文排版CSS心得



数月来进修web标准,并遵照标准设计和制作web页面。不停想写点什么,收拾一下自己的心得体会。写这篇文章,主如果针对中文排版设计,英文排版由于很少做,以是不涉及。

先先容若何设定字体、颜色、大年夜小、段掉?缺等对照简单的利用,后面再先容下比如首字下沉、首行缩进。着末讲一些常用的web页面中文排版,比如中翰墨的截断、固定宽度词内折行(word-wrap和word-break)等等。由于只是写一些利用方面的心得,假如必要完备的CSS属性先容,请参考CSS手册。

1、若何设定翰墨字体、颜色、大年夜小 —— 应用font

font-style设定斜体,比如font-style: italic;

font-weight设定翰墨粗细,比如font-weight: bold;

font-size设定翰墨大年夜小,比如font-size: 12px;(或者9pt,不合单位显示问题参考CSS手册)

line-height设定行距,比如line-height: 150%;

color设定翰墨颜色(留意不是font-color),比如color: red;

font-family设定字体,比如font-family : "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif;(这是通用的写法)

以上都可以写在一行font属性里(除了color属性必要零丁写):

font: italic bold 12px/150% "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif;

2、若何节制段落排版 —— 应用margin,text-align

中文段落应用

标签,阁下(相称Ag亚游国际网站于缩进)、段前段后的空缺,都可以用margin。比如:

以下为引用的内容:

p{

margin: 18px 6px 6Ag亚游国际网站px 18px; /*分手是上、右、下、左,十二点开始的顺时针偏向*/

}

翰墨的对齐要领用text-align,比如:

以下为引用的内容:

p{

text-align: center; /*居中对齐*/

}

对齐要领还有left、right和justify(两端对齐)

PS.谈起margin,我习气于在写CSS的时刻为所有的标签定义margin: 0; 由于时而呈现因为默认的margin值导致页面排版问题,而自己找不到缘故原由(分外留意的是ul/ol/p/dt/dd等标签)

3、竖排翰墨 —— 应用writing-mode

writing-mode属性有两个值lr-tb和tb-rl,前者是默认的左-右、上-下,后者是上-下、右-左。

比如:

以下为引用的内容:

p{

writing-mode: tb-rl;

}

可以结合direction排版。

4、项目符号的问题 —— 应用list-style

在CSS里项目符号有disc(实心圆点)、circle(空心圆圈)、square(实心方块)、decimal(阿拉伯数字)、lower-roman(小写罗马数字)、upper-roman(大年夜写罗马数字)、lower-alpha(小写英翰墨母)、upper-alpha(大年夜写英翰墨母)、none(无)。比如设定一个列表(ul或ol)的项目符号为方块,如:

以下为引用的内容:

li{

list-style: square;

}

别的list-style还有一些值,比如可以采纳一些小图片作为项目符号,在list-style下直接写url(“图片地址”)就可以了。留意假如一个项目列表的左外补丁(margin-left)设为零的时刻,list-style-position: outside(默认是outside)的项目符号不会显示。可惜的是上述的项目符号彷佛并不能设定大年夜小,圆点和方块始终是那么点。并且不能设定垂直偏向上的对齐。

5、首字下沉 —— 应用:first-letter

伪工具:first-letter共同font-size、floAg亚游国际网站at可以制作首字下沉效果。

比如:

以下为引用的内容:

p:first-letter{

pAg亚游国际网站addAg亚游国际网站ing: 6px;

font-size: 32pt;

float: left;

}

免责声明:以上内容源自网络,版权归原作者所有,如有侵犯您的原创版权请告知,我们将尽快删除相关内容。

您可能还会对下面的文章感兴趣: