Web前端教程
一、如何设定笔墨字体、颜色、大小等
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等标签。
三、竖排笔墨—利用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;
}
五、利用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>注音<rt style="font-size:11px;">zhuyin</rt></ruby>
然后通过ruby-align设置其对齐办法。
以上便是今日整理的“Web前端教程：大略实用的CSS网页布局中文排版技巧”一文，希望为正在学习Web前真个同学供应参考。你记住并理解了吗？往后酷仔逐日均会供应MySQL、Python及Web干系的教程及习题，赶紧学习起来吧。
