canvas教程

简单实用的CSS网页布局中文排版技巧

字号+ 作者:H5之家 来源:H5之家 2017-09-04 09:02 我要评论( )

课课家:由于汉字的特殊性,在css网页布局中,中文排版有别于英文排版。排版是一个麻烦的问题,小编认为,作为一个优秀的网页设计师和网页制作人员,掌握一些简

IT培训>新闻资讯>Web开发教程>简单实用的CSS网页布局中文排版技巧

简单实用的CSS网页布局中文排版技巧作者:课课家教育 点击数:5396发布时间:2016-10-16 13:06:42

       由于汉字的特殊性,在css网页布局中,中文排版有别于英文排版。排版是一个麻烦的问题,小编认为,作为一个优秀的网页设计师和网页制作人员,掌握一些简单的中文排版技巧是不可或缺的,所以今天特意总结了几个简单实用的技巧,希望对大家有所帮助。

简单实用的CSS网页布局中文排版技巧_css布局_CSS排版_排版技巧_课课家

(中文排版图)

  一、如何设定文字字体、颜色、大小等

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

  font-weight设定文字粗细,比如font-weight:bold 

  font-size设定文字大小,比如font-size:12px

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

  color设定文字颜色,注意不是font-color喔,比如color:red 

  font-family设定字体,比如font-family:"LucidaGrande",Verdana,Lucida,Arial,Helvetica,宋体,sans-serif

  二、使用margin,text-align 控制段落

  中文段落使用p标签,左右、段前段后的空白,都可以通过margin来控制。

  比如

  p{ 

  margin:18px 6px 6px 18px;/*分别是上、右、下、左,十二点开始的顺时针方向*/ 

  }

  而text-align则用于文字的对齐方式。

  比如 

  p{ 

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

  }

  除了居中对齐之外,对齐方式还有左对齐、右对齐和两端对齐,对应的属性值分别为left、right、justify。

  提示:由于默认的margin值会导致页面排版出现问题,特别是ul、ol、p、dt、dd等标签。小编的解决之道就是把所有标签的margin值定义为0。

  三、竖排文字—使用writing-mode 

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

  写法如 

  p{ 

  writing-mode:tb-rl; 

  }

  四、使用list-style美化列表

  如果我们的排版涉及到列表,不妨考虑为它添加些项目符号进行美化。

       在CSS里,项目符号包括disc(实心圆点)、circle(空心圆圈)、square(实心方块)、decimal(阿拉伯数字)、lower-roman(小写罗马数字)、upper-roman(大写罗马数字)、lower-alpha(小写英文字母)、upper-alpha(大写英文字母)、none(无)。

  嘿嘿!我们可用的项目符号数量不少喔,但美中不足的是我们不能为它们设定大小,也不能设定垂直方向上的对齐。

  如果我们想设定一个列表的项目符号为方块,可以这样写: 

  li{ 

  list-style:square; 

  }

  小编在这里提醒大家一下:当一个项目列表的左外边距设为零的时候,list-style-position:outside的项目符号不会显示。

  五、使用text-overflow 实现固定宽度汉字截断

  用后台语言可以对从数据库里的字段内容做截断处理,如果想对列表应用该样式,我们可以这样写: 

  li{ 

  overflow:hidden; 

  text-overflow:ellipsis; 

  white-space:nowrap; 

  }

  六、首字下沉

  如果你想制作首字下沉效果,不妨考虑伪对象:first-letter并配合font-size、float属性。

  p:first-letter{ 

  padding:6px; 

  font-size:32pt; 

  float:left; 

  }

  七、首行缩进—使用text-indent 

  text-indent可以使得容器内首行缩进一定单位。比如中文段落一般每段前空两个汉字。

       可以这么写

  p{ 

  text-indent:2em;/*em是相对单位,2em即现在一个字大小的两倍*/ 

  }

  注意:如果font-size是12px的话,那么text-indent:2em则代表缩进24px。 

  八、固定宽度汉字(词)折行—使用word-break 

  在排版的时候,你是否为一个词组,其中一个字出现在上面而另一个字折断到下一行去而发愁呢?不用愁,这时使用word-break就可以轻松解决问题了。

  九、关于汉字注音—使用ruby标签和ruby-align属性 

  最后小编向大家介绍一下ruby标签和ruby-align属性 。这是一个比较冷门的技巧,可能平时使用不多,但小编觉得不妨提供给大家预防不时之需。

  如果我们想为汉字注音就可以这样写

  <ruby>注音<rt>zhuyin</rt></ruby>

  然后通过ruby-align设置其对齐方式。

  以上就是小编要跟大家分享的9个CSS网页布局中文排版技巧,虽然很简单,但简单的过程中其实暗藏玄机,如果大家喜欢还请记得收藏哦!

赞(

最新评论

暂无评论~

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 广州UI设计:教你一些网页设计的排版技巧

    广州UI设计:教你一些网页设计的排版技巧

    2017-06-27 17:04

网友点评