这篇文章给大家分享的是有关CSS布局中常用的文字排版属性有哪些的内容。小编觉得挺实用的,因此分享给大家做个参考。一起跟随小编过来看看吧。
CSS布局中常用的文字排版相关属性详解
一、设定文字字体,颜色,大小等使用字体等。
字体样式设定斜体,比如字体样式:斜体;
粗细设定文字粗细,比如粗细:大胆的;
字体大小设定文字大小,比如字体大小:12 px;(或者9 pt,不同单位显示问题参考CSS手册)
行高设定行距,比如行高:150%;
颜色设定文字颜色(注意不是字体颜色),比如颜色:红色;
字体类型设定字体,比如字体类型:“明星Grande", Verdana,最亮的星,Arial, Helvetica,宋体,无衬线;(这是通用的写法)
二、段落排版:使用,填充和text-align。
中文段落使用& lt; p>标签(也可以是其他容器),左右(相当于缩进),段前段后的空白,都可以用保证金或填充比。如:
示例代码
文字的对齐方式用text-align,比如:
示例代码
对齐方式还有左,右和证明(两端对齐)
三、竖排文字:使用写入方式。
写入方式属性有两个值lr-tb和tb-rl,前者是默认的左,右,上,下后者是上-下,右-左。
比如:
示例代码
可以结合方向排版。
四项目符号的问题:使用list-style
在CSS里项目符号有盘(实心圆点),圆(空心圆圈),广场(实心方块),小数(阿拉伯数字),小写罗马数字(小写罗马数字),大写罗马数字(大写罗马数字),小写(小写英文字母),大写阿拉伯数字(大写英文字母),(无)。没有人比如设定一个列表(ul或ol)的项目符号为方块,如:
示例代码
另外list-style还有一些值,比如可以采用一些小图片作为项目符号,在list-style下直接写url(“图片地址”)就可以了。但Mb5u.com极力不提倡这样的方式。建议您设置图片为李的背景。
五首字下沉效果
伪对象:首字母配合字体大小,可浮动以制作首字下沉效果。
比如:
示例代码
六、文本缩进:使用- indent
- indent可以使得容器内首行缩进一定单位。比如中文段落一般每段前空两个汉字。可以这么写:
示例代码
如果字体大小是12 px的话,那么indent: 2 em则缩进24 px。
七、固定宽度汉字截断:使用文本溢出(显示省略号效果)
用后台语言可以对从数据库里的字段内容做截断处理,比如说截12个汉字(之后用省略号)。但是有时还需要html标签的过滤等,而用CSS来控制则没有这个问题。比如对列表应用以下样式:
示例代码
八,固定宽度汉字(词)折行:使用单词分割
举个例子,比如说要在一个固定宽度容器里面显示很多地名(假设以空格分隔),为了避免地名中间断开(即一个字在上面而另一个字折断到下一行去了),则可以使用单词分割比。如:
示例代码
九,汉字注音:使用ruby标签和ruby-align属性
比如说& lt; ruby>注音& lt; rt风格=白痔宕笮?11 px;“在朱yin & lt;/ruby>可以利用ruby-align设置对齐方式。这是在CSS手册里面看到的,具体可以自行查阅ruby-align项。
感谢各位的阅读!关于CSS布局中常用的文字排版属性有哪些就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到吧!
