`
wdanping
  • 浏览: 22764 次
  • 性别: Icon_minigender_2
  • 来自: 上海
最近访客 更多访客>>
文章分类
社区版块
存档分类
最新评论

css控制文字排版

阅读更多
一、如何设定文字字体、颜色、大小 — 使用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属性需要单独写)
  font: italic bold 12px/150% "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif;

二、如何控制段落排版 — 使用margin,text-align
  中文段落使用标签,左右(相当于缩进)、段前段后的空白,都可以用margin。
    文字的对齐方式用text-align: center、left、right和justify(两端对齐) 。

三、竖排文字 — 使用writing-mode
  writing-mode属性有两个值lr-tb和tb-rl,前者是默认的左-右、上-下,后者是上-下、右-左。
    可以结合direction排版。

四、项目符号的问题 — 使用list-style
  在CSS里项目符号有disc(实心圆点)、circle(空心圆圈)、square(实心方块)、decimal(阿拉伯数字)、lower-roman(小写罗马数字)、upper-roman(大写罗马数字)、lower-alpha(小写英文字母)、upper-alpha(大写英文字母)、none(无)。比如设定一个列表(ul或ol)的项目符号为方块。
    list-style-position: outside(默认是outside)的项目符号不会显示。

五、首字下沉 — 使用:first-letter
  伪对象: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。
    备注:小标题中标题的字体需要缩进,即可使用。尽量不要用padding或者margin,它们容易产生兼容问题。

七、关于汉字注音 — 使用ruby标签和ruby-align属性
  比如说<ruby>注音<rt>zhu yin</rt></ruby>,可以利用ruby-align设置对齐方式。这是在CSS手册里面看到的,具体可以自行查阅ruby-align项。 

八、固定宽度汉字截断 — 使用text-overflow
  用后台语言可以对从数据库里的字段内容做截断处理,比如说截12个汉字(之后用省略号)。但是有时还需要html标签的过滤等,而用CSS来控制则没有这个问题。比如对列表应用以下样式: li{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    不过只能处理文字在一行上的截断,不能处理多行

九、固定宽度汉字(词)折行 — 使用word-break
    比如说要在一个固定宽度容器里面显示很多地名(假设以空格分隔),为了避免地名中间断开(即一个字在上面而另一个字折断到下一行去了)。则可以使用word-break。
分享到:
评论

相关推荐

    CSS教程:CSS控制网页文字排版实例

    有关CSS基本的排版控制虽然已有详细的使用说明和参考教程,但还有许多丰富的CSS排版能力,是很少能查到的。今天的这些实例,为您提供了很多想象和拓展的空间。 CSS功能的强大在jb51.net中早已经展现很多,而有关CSS...

    Web前端开发基础:CSS控制图文混排.ppt

    --*-- 1 单元目标 2 教学内容 3 动手实践 4 课堂小结 单元目标 能使用CSS控制图文混排 能力目标 CSS选择器类型 知识目标 《CSS网页样式设计与制作》 参考资料 2 教学内容 1 单元目标 3 动手实践 4 课堂小结 标签选择...

    ZhuoZhuoCrayon#my-Nodes#7-CSS格式化排版1

    7-CSS格式化排版文字排版字体设置推荐使用前者(左一)用户是否可以看到你设置的字体样式取决于用户本地电脑上是否安装你设置的字体字号、颜色设置设置网页中文字的字

    精通CSS+DIV网页样式与布局

     1.2 使用CSS控制页面   1.3 体验CSS   第2章 CSS的基本语法   2.1 CSS选择器   2.2 选择器声明  2.3 CSS的继承  第3章 用CSS设置丰富的文字效果   3.1 CSS文字样式  3.2 文字实例一:模拟...

    CSS控制表格文字样式的研究

    即使在DIV满天飞的今天,Table在网页的布局中还是少不了的,因为当需要输出数据时,Table布局远远比DIV布局有优势,而且同样的我们可以通过CSS来控制表格样式。要知道WEB标准并非是通篇的DIV CSS,而是倡导采用更...

    《精通CSS+DIV网页样式与布局》光盘源码

     1.2 使用CSS控制页面   1.3 体验CSS   第2章 CSS的基本语法   2.1 CSS选择器   2.2 选择器声明  2.3 CSS的继承  第3章 用CSS设置丰富的文字效果   3.1 CSS文字样式  3.2 文字实例一:模拟...

    精通CSS+DIV网页样式与布局视频教材

    1.2 使用CSS控制页面 1.2.1 行内样式 1.2.2 内嵌式 1.2.3 链接式 1.2.4 导入样式 1.2.5 各种方式的优先级问题 1.3 体验CSS 1.3.1 从零开始 1.3.2 加入CSS控制 1.3.3 控制图片 1.3.4 ...

    精通CSS.DIV.网页样式与布局 源码

     1.2 使用CSS控制页面   1.3 体验CSS   第2章 CSS的基本语法   2.1 CSS选择器   2.2 选择器声明  2.3 CSS的继承  第3章 用CSS设置丰富的文字效果   3.1 CSS文字样式  3.2 文字实例一...

    CSS网站布局实录 (第二版)PDF版

    5.1 文字排版 5.1.1 通栏排版 5.1.2 分栏排版 5.2 图文混合排版 5.2.1 图片基础控制 5.2.2 不规则文字环绕 5.3 全图排版 5.4 表格排版 5.4.1 充分使用表格标签 5.4.2 表格样式控制 5.4.3 表单表格设计 第6章 CSS高级...

    精通CSS+DIV网页样式与布局Part1

     1.2 使用CSS控制页面   1.3 体验CSS   第2章 CSS的基本语法   2.1 CSS选择器   2.2 选择器声明  2.3 CSS的继承  第3章 用CSS设置丰富的文字效果   3.1 CSS文字样式  3.2 文字实例一:模拟...

    精通CSS.DIV网页样式与布局视频01

     1.2 使用CSS控制页面   1.3 体验CSS   第2章 CSS的基本语法   2.1 CSS选择器   2.2 选择器声明  2.3 CSS的继承  第3章 用CSS设置丰富的文字效果   3.1 CSS文字样式  3.2 文字实例一:模拟...

    《脑动力 html+css标签速查效率手册》.(刘丽霞)

     《脑动力:HTMLCSS标签速查效率手册》共分18章,前10章主要介绍了HTML标签和相关属性,包括文字、排版、列表、超链接、多媒体、表格、表单、框架等知识点。后8章介绍了CSS属性的详细用法和示例代码,包括文本显示...

    网页制作中应用CSS控制文本的主要指令

    本章将分两个部份为您介绍,第一部份是字型性质的CSS指 令,用以控制文字字型的各种样式;第二部份介绍的是文字性质的CSS指令,用以控 制文字段落的外观及摆设方式。  新建一个前端学习qun438905713,在群里大多数...

    css-for-fun:有趣的css实践

    开始的时候只是为了排版,控制布局,指定文字、段落、图片和其他元素的样式。 现在,css所能实现的效果已经远远超出最初设计者的想象了吧。 css在人们手中已经不仅仅是排版工具,已然成为艺术创作的工具。 你知道你...

    《精通Javascript+jQuery》光盘源码

     3.2 使用CSS控制页面  3.2.1 行内样式  3.2.2 内嵌式  3.2.3 链接式  3.2.4 导入样式  3.3 CSS选择器  3.3.1 标记选择器  3.3.2 类别选择器  3.3.3 ID选择器  3.3.4 选择器集体声明  3.3.5 ...

    精通JavaScript+jQuery Part1

     1.2 使用CSS控制页面   1.3 体验CSS   第2章 CSS的基本语法   2.1 CSS选择器   2.2 选择器声明  2.3 CSS的继承  第3章 用CSS设置丰富的文字效果   3.1 CSS文字样式  3.2 文字实例一:模拟...

    HTML-CSS-详解资源

    它包括一系列标签,通过这些标签可以将网络上的文档格式统一,使分散的Internet资源连接...CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。 [2]

Global site tag (gtag.js) - Google Analytics