css网页页面合理布局汉语字排版的特性和用法

日期:2020-08-26 类型:科技新闻 

关键词:html网页制作,php网页制作,网页设计稿,网页编辑工具,学生网页设计模板

前段時间,学习培训了几个大的网站的图文混排的方式。今日总结下,css网页页面合理布局汉语字排版的有关特性和用法。包含:设置字体样式、色调、尺寸、段成空白,首字下沉、首行缩进、汉语字的断开、固定不动宽度词内折行(word-wrap和word-break)等。

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;(这是通用性的写法)
    上面是常见的特性,更多参照css手册。

2、段落排版:应用margin、padding和text-align。

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

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


文本的对齐方法用text-align,例如:

p{
text-align: center; /*垂直居中对齐*/
text-align: justify/*两边对齐*/
}


对齐方法也有left、right。
有许多初学者对margin、padding并不是很熟习,看下面照片的表明。


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(“照片详细地址”)便可以了。但不倡导这样的方法。提议您设定照片为li 的情况。

5、首字下沉实际效果

伪目标: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个字尺寸的两倍*/
}


7、固定不动宽度中国汉字断开:应用text-overflow(显示信息省略号实际效果)

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

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


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

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

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