`
wdanping
  • 浏览: 23616 次
  • 性别: 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。
分享到:
评论

相关推荐

    jQuery CSS3文字排版效果.zip

    《jQuery与CSS3结合实现的文字排版效果探析》 在网页设计中,文字的排版效果对于用户体验和页面美观性具有举足轻重的作用。"jQuery CSS3文字排版效果.zip"这个压缩包文件正是专注于这一领域的实践案例集,其中包含...

    jQuery+CSS3文字排版效果.zip

    《jQuery与CSS3在文字排版效果中的应用》 在现代网页设计中,优秀的文字排版不仅能够提升网站的美观度,还能增强用户体验,使信息传递更为清晰、有效。jQuery和CSS3作为Web开发中的重要工具,它们在文字排版方面的...

    css中文排版心得

    在CSS世界中,中文排版是一项特殊的挑战,因为中文字符的特性与西文有很大区别。以下是一些关于CSS中文排版的重要知识点: 1. **文字属性设置**:要设定中文文字的样式,可以使用`font`属性。例如,`font-style`...

    css3 文字效果

    10. **多列布局** (column-count, column-gap, column-fill, column-rule): CSS3允许我们将文本分成多列展示,类似于报纸排版。 此外,博客可能还介绍了如何结合JavaScript和CSS3实现动态文字效果,如动画、响应式...

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

    在这个CSS教程中,我们将深入探讨如何利用CSS控制网页文字排版,并通过实例来展示其强大的功能。 1. **字体和字号**: 在CSS中,`font-family`属性用于设置元素的字体,例如`"Trebuchet MS", Garamond, Georgia`...

    css网页布局中文字排版的属性和用法

    在CSS网页布局中,文字排版是至关重要的,它直接影响着网页内容的可读性和美观性。本篇文章将深入探讨一些关键的CSS属性及其用法,帮助你掌握更精细的文字控制技巧。 首先,我们来看一下设定文字基本属性的方法。`...

    HTML+CSS图片简介排版样式.rar

    `width`和`height`属性可用来设定图片尺寸,但现代实践中更推荐使用CSS来控制大小,以保持响应式布局。 CSS在处理图片排版时有多种方法。浮动布局(`float`)曾是常见的选择,但现在更多地被弹性盒模型(`display: ...

    jQuery+CSS3文字排版效果特效代码

    《jQuery与CSS3结合实现的文字排版效果详解》 在网页设计中,文字的排版效果不仅影响着信息的传达,也对用户体验起着至关重要的作用。jQuery与CSS3的结合,为创建动态、交互性强的文字排版效果提供了无限可能。本文...

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

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

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

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

    文字 排版 软件 html word

    在IT行业中,文字排版是一项基础且重要的任务,它涉及到如何有效地组织和呈现文本,以使其清晰、美观且易于阅读。HTML(HyperText Markup Language)和Microsoft Word是两种广泛使用的文字排版工具,它们各自拥有...

    WEB排版+.CSS

    - **字体和排版**:选择适合品牌风格的字体,并用CSS控制字间距、行高、段落对齐,使文本阅读起来更顺畅。 综上所述,“WEB排版+.CSS”这个资源将涵盖以上这些关键点,帮助你掌握如何运用CSS来打造美观、易用的服装...

    jQuery和css3文字特效

    本文将深入探讨如何利用jQuery库和CSS3技术来实现一系列精彩的网页文字排版动画特效。我们将通过分析提供的压缩包文件中的示例代码,逐一解析这些特效的实现原理和步骤。 首先,jQuery是一个广泛使用的JavaScript库...

    精通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控制文字自动换行的实现方法

    以上内容详细介绍了CSS中关于如何控制文字自动换行的几种实现方法,这在网页布局和排版中非常关键,能够帮助开发者更加精确地控制页面的显示效果,提升用户体验。在实际应用中,需要结合不同浏览器的兼容性来选择...

    纯css3精美的文本块排版效果

    5. **文字样式**:CSS3提供了丰富的文字样式控制,如自定义字体、颜色、阴影、渐变、文本装饰等。`text-shadow`可以为文字添加阴影效果,`text-decoration`可设置下划线、删除线等,而`text-rendering`则优化文本...

    经典全套DIV+CSS实例

    `div`元素是一个块级元素,它可以包含其他HTML元素,并且可以通过CSS控制其布局和样式。CSS允许开发者分离内容与表现,使得设计更易于维护和扩展。在这些实例中,你可以学习到如何使用CSS选择器来定位和操作`div`...

    css|排版|美工|提供免费资源,供求各大朋友下载,学习

    本资源包专注于CSS在排版和美工方面的应用,提供了丰富的素材供广大开发者下载和学习。 排版是网页设计中的关键环节,它关乎着信息的清晰度和可读性。CSS为网页排版提供了强大的工具,例如通过设置`display`属性...

    CSS纵向拉伸或随意放大缩小字体的宽高比例

    在网页设计中,字体的呈现方式对于用户体验至关重要。有时候,我们可能会遇到一些特殊的设计需求,例如需要让文字在保持清晰可读的同时,实现纵向拉伸的效果。...不断实践和学习,你将在CSS排版上变得更加熟练。

Global site tag (gtag.js) - Google Analytics