选择显示字体大小

中文排版css心得

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;(这是通用的写法)

以上都可以写在一行font属性里(除了color属性需要单独写):

运行代码框

[ctrl+a 全部选择 提示:你可先修改部分代码,再按运行]

2、如何控制段落排版 —— 使用margin,text-align

中文段落使用<p>标签,左右(相当于缩进)、段前段后的空白,都可以用margin。比如:

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

文字的对齐方式用text-align,比如:

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

对齐方式还有left、right和justify(两端对齐)

运行代码框

[ctrl+a 全部选择 提示:你可先修改部分代码,再按运行]

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

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

比如:

p{
 writing-mode: tb-rl;
}

可以结合direction排版。

运行代码框

[ctrl+a 全部选择 提示:你可先修改部分代码,再按运行]

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)的项目符号不会显示。可惜的是上述的项目符号似乎并不能设定大小,圆点和方块始终是那么点。并且不能设定垂直方向上的对齐。

出处:meidengyin的blog
责任编辑:moby

上一页 下一页 中文排版css心得 [2]

◎进入论坛网站综合、网页制作版块参加讨论

相关文章 更多相关链接
css 菜单举一反三
中英文、数字混合效果
好玩的样式—放大效果
css制作星级评分
javascript实现base64编码
idea.com" method=get style="margin:0px; padding:0px;">idea.com">idea.com/img/google_search_title.gif;s:http://www.blueidea.com;forid:1;">
全网 idea.com';this.form.bisearch.value='cms';form.searchby.style.display='';document.getelementbyid('keyword').style.width='70px';">本站 idea.com';this.form.bisearch.value='bbs';form.searchby.style.display='none';document.getelementbyid('keyword').style.width='132px';">论坛
热门搜索:css fireworks 设计比赛 网页制作 dreamweaver studio8 flash
站点最新 站点最新列表
保持清晰的文档结构
月亮图腾教程ⅴ—最后一战
x-sapce使用系列教程
x-space安装系列教程
抽线以及虚线画法简明教程
创新设计 百万格子大楼
discuz!转换系列教程
世界杯足球的32个变种
易上手简单图层样式扣图
一封写给mm学习linux的信
栏目最新 栏目最新列表
保持清晰的文档结构
月亮图腾教程ⅴ—最后一战
x-sapce使用系列教程
x-space安装系列教程
抽线以及虚线画法简明教程
discuz!转换系列教程
易上手简单图层样式扣图
十分钟学会 xajax
css 菜单举一反三
利用照片制作版画简明教程
>> 分页 首页 前页 后页 尾页 页次:1/21个记录/页 转到 页 共2个记录

蓝色理想版权申明:除部分特别声明不要转载,或者授权我站独家播发的文章外,大家可以自由转载我站点的原创文章,但原作者和来自我站的链接必须保留(非我站原创的,按照原来自一节,自行链接)。文章版权归我站和作者共有。

转载要求:转载之图片、文件,链接请不要盗链到本站,且不准打上各自站点的水印,亦不能抹去我站点水印。

特别注意:本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

本文现有 2 条评论 暂时没有人参于评分


comfill publish at 2006-6-21 10:04:07
3、竖排文字 —— 使用writing-mode

这个好像是ie专有的
追逐 publish at 2006-6-21 9:12:39
很好,学了几招不知道的
asp" method="post" onsubmit="submit.disabled=true;">
您的评论
用户名:  口令:
说明:输入正确的用户名和密码才能参与评论。如果您不是本站会员,你可以注册 为本站会员。
注意:文章中的链接、内容等需要修改的错误,请用报告错误,以利文档及时修改。
不评分12345
注意:请不要在评论中含与内容无关的广告链接,违者封id
请您注意:
·不良评论请用报告管理员,以利管理员及时删除。
·尊重网上道德,遵守中华人民共和国的各项有关法律法规
·承担一切因您的行为而直接或间接导致的民事或刑事法律责任
·本站评论管理人员有权保留或删除其管辖评论中的任意内容
·您在本站发表的作品,本站有权在网站内转载或引用
·参与本评论即表明您已经阅读并接受上述条款
推荐文档 打印文档 评论文档 报告错误  
专业书推荐 更多内容
flash第一步系列》
《交互设计之路》
dreamweaver 从基础到实践》
《色彩管理》
网页设计专家门诊》
《情感化设计》
gui设计禁忌》
html>


 


关键字 本文所属关键字

相关 与本文相关文章

分类 所有文章关键字导航

源码编程相关

Java   Asp   PHP   .Net   XML   C/C++   CGI   VB   Jsp   J2ee   J2se   J2me   EJB   Servlet   Tomcat   Resin   Struts   Weblogic   Eclipse   ANT   GUI   JMS   Web servise   IDEA   Webphere   Hibernate   Spring   Jboss   Applet   Swing   Socket   Javamail   Perl   Ajax   P2P   安全   模式   框架   测试   开源   游戏

SQL数据库相关

My-SQL   Ms-SQL   Access   DB2   Oracle   Sybase   SQLserver   索引   存储过程   加密   数据库   分页   视图  

手机无线相关

3G   Wap   CDMA   GRPS   GSM   IVR   彩信   短信   无线   增值业务

网页设计制作相关

HTML   CSS   网页配色   网页特效   Javascript   VBscript   Dreamweaver   Frontpage   JS   Web   网站设计

网站建设推广相关

建站经验   网站优化   网站排名   推广   Alexa

操作系统/服务器相关

Windows XP   Windows 2000   Windows 2003   Windows Me   Windows 9.x   Linux   UNIX   注册表   操作系统   服务器   应用服务器

图形图像多媒体相关

Photoshop   Fireworks   Flash   Coreldraw   Illustrator   Freehand   Photoimpact   多媒体   图形图像

标准 网站致力的规范

Valid CSS!

无不良内容,无不良广告,无恶意代码

Valid XHTML 1.0 Transitional

creativecommons