CSS 网页页面合理布局汉语排版的9则技能

2020-10-26 16:10 jianzhan
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;(这是通用性的写法) 

  以上都可以以写在1行font特性里(除color特性必须独立写): 
  font: italic bold 12px/150% "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; 

2、怎样操纵段落排版 — 应用margin,text-align 

  汉语段落应用<p>标识,上下(非常于缩进)、段前段后的空白,都可以以用margin。例如: 

p{ 
margin: 18px 6px 6px 18px; /*各自是上、右、下、左,102点刚开始的顺时针方位*/ 

  文本的对齐方法用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(无)。例如设置1个目录(ul或ol)的新项目标记为方块,如: 

li{ 
list-style: square; 

  此外list-style也有1些值,例如能够选用1些小照片做为新项目标记,在list-style下立即写url(“照片详细地址”)便可以了。留意假如1个新项目目录的左外补钉(margin-left)设为零的情况下,list-style-position: outside(默认设置是outside)的新项目标记不容易显示信息。可是的是上述的新项目标记好像其实不能设置尺寸,圆点和方块自始至终是那末点。而且不可以设置竖直方位上的对齐。 

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

  伪目标:first-letter相互配合font-size、float能够制做首字下沉实际效果。 
  例如: 

p:first-letter{ 
padding: 6px; 
font-size: 32pt; 
float: left; 

6、首行缩进 — 应用text-indent 

  text-indent可使得器皿内首行缩进1订单位。例如汉语段落1般每段前空两个中国汉字。能够这么写: 

p{ 
text-indent: 2em; /*em是相对性企业,2em即如今1个字尺寸的两倍*/ 

  假如font-size是12px的话,那末text-indent: 2em则缩进24px。 

7、有关中国汉字注音 — 应用ruby标识和ruby-align特性 

  例如说<ruby>注音<rt style="font-size: 11px;">zhu yin</rt></ruby>,能够运用ruby-align设定对齐方法。这是在CSS手册里边看到的,实际能够自主查阅ruby-align项。 

8、固定不动宽度中国汉字断开 — 应用text-overflow 

  用后台管理語言能够对从数据信息库里的字段內容做断开解决,例如说截12个中国汉字(以后用省略号)。可是有时还必须html标识的过虑等,而用CSS来操纵则沒有这个难题。例如对目录运用下列款式: 

li{ 
overflow:hidden; 
text-overflow:ellipsis; 
white-space:nowrap; 

  但是只能解决文本在1行上的断开,不可以解决多行。 

9、固定不动宽度中国汉字(词)折行 — 应用word-break 

  举个事例,例如说要在1个固定不动宽度器皿里边显示信息许多地名(假定以空格隔开),以便防止地名正中间断掉(即1个字在上面而另外一个字折断到下1行去了)。则可使用word-break。例如: 

<div style="width:210px;height: 200px;background: #ccc;word-break:keep-all"> 
南京上海市 上海市上 南 上海市上海市 南京 上海市上海市上海市 南京上海市 上海市 南京上海市 上海市 南京 上海市 南京 上海市 南京 上海市 南京 上海市 南京 上海市 南京上海市 上海市 南京上海市 上海市 
</div> 

  值得留意的是里边的空格不可以以 替代(至少要有1个软空格)。