来谈谈：网页制造技能:CSS网页结构中文排版心得
更好的控制页面布局。不用多说。网页制造Poluoluo文章简介：网页制造技能:CSS网页结构中文排版心得.
CSS网页结构中文排版有别于外洋所先容的英文排版，因为汉字的特别性，以是有一些中央是必要人人注重的。明天Poluoluo.com的这个文章也许对人人对排版的把持有所匡助。
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:"LucidaGrande",Verdana,Lucida,Arial,Helvetica,宋体,sans-serif;（这是通用的写法）
以上都能够写在一行font属性里（除color属性必要独自写）：
font:italicbold12px/150%"LucidaGrande",Verdana,Lucida,Arial,Helvetica,宋体,sans-serif;
2、怎样把持段落排版—利用margin，text-align
中文段落利用<p>标签，摆布（相称于缩进）、段前段后的空缺，都能够用margin。好比：
p{
margin:18px6px6px18px;/*分离是上、右、下、左，十二点入手下手的顺时针偏向*/
}
笔墨的对齐体例用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、float能够制造首字下沉效果。
好比：
p:first-letter{
padding:6px;
font-size:32pt;
float:left;
}
6、首行缩进—利用text-indent
text-indent可使得容器内首行缩进必定单元。好比中文段落一样平常每段前空两个汉字。能够这么写：
p{
text-indent:2em;/*em是绝对单元，2em即如今一个字巨细的两倍*/
}
假如font-size是12px的话，那末text-indent:2em则缩进24px。
7、关于汉字注音—利用ruby标签和ruby-align属性
好比说<ruby>注音<rtstyle="font-size:11px;">zhuyin</rt></ruby>，能够使用ruby-align设置对齐体例。这是在CSS手册内里看到的，详细能够自行查阅ruby-align项。
8、流动宽度汉字截断—利用text-overflow
用背景言语能够对从数据库里的字段内容做截断处置，好比说截12个汉字（以后用省略号）。可是偶然还必要html标签的过滤等，而用CSS来把持则没有这个成绩。好比对列表使用以下款式：
li{
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
不外只能处置笔墨在一行上的截断，不克不及处置多行。
9、流动宽度汉字（词）折行—利用word-break
举个例子，好比说要在一个流动宽度容器内里显现良多地名（假定以空格分开），为了不地名两头断开（即一个字在下面而另外一个字折断到下一行往了）。则可使用word-break。好比：
<divstyle="width:210px;height:200px;background:#ccc;word-break:keep-all">
南京上海上海上南上海上海南京上海上海上海南京上海上海南京上海上海南京上海南京上海南京上海南京上海南京上海南京上海上海南京上海上海
</div>
值得注重的是内里的空格不克不及以取代（起码要有一个软空格）。
</p>
业界越来越关注DIV+CSS的标准化设计，大到各大门户网站，小到不计其数的个人网站，在Div+CSS标准化的影响下，网页设计人员已经把这一要求作为行业标准。 由CS4版本开始，则转用WebKit排版引擎（亦即GoogleChrome和AppleSafari浏览器所用的排版引擎）作为网页预览。 滚动条)层属性--溢出(visible/hidden/scroll/auto) Dreamweaver由MX版本开始使用Opera软件公司的排版引擎“Presto”作为网页预览。 以上大概就是文字图片的一些链接方法，通过学习Dreamweaver、练习让我对dreameaver8有了进一步的认识，他其实是一款很好的建立Web站点和应用程序的软件。它将可视布局工具、应用程序开发功能和代码编辑支持组合在一起，其功能强大，使得各个层次的开发人员和设计人员都能够快速创建界面吸引人的基于标准的网站和应用程序。 Dreamweaver由MX版本开始使用Opera软件公司的排版引擎“Presto”作为网页预览。 只要我们努力，无论是怎样的艰难险阻，成功依然会迎面直击。在刚开始时我觉得dreamweaver mx XX很难理解。 Dreamweaver是唯一提供Roundtrip HTML、视觉化编辑与原始码编辑同步的设计工具。它包含HomeSite和BBEdit等主流文字编辑器。
页:
[1]