php中的文字排版问题,CSS布局中常用的文字排版相关属性详解
本篇文章给大家带来的内容是关于CSS布局中常用的文字排版相关属性详解,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。
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;(这是通用的写法)
二、段落排版:使用margin、padding和text-align。
中文段落使用
标签(也可以是其他容器),左右(相当于缩进)、段前段后的空白,都可以用margin或padding。比如:
示例代码p{
margin: 18px 6px 6px 18px;
/*分别是上、右、下、左,十二点开始的顺时针方向*/
}
文字的对齐方式用text-align,比如:
示例代码p{
text-align: center; /*居中对齐*/
}
对齐方式还有left、right和justify(两端对齐)
三、竖排文字:使用writing-mode。
writing-mode属性有两个值lr-tb和tb-rl,前者是默认的左-右、上-下,后者是上-下、右-左。
比如:
示例代码p{
writing-mode: tb-rl;
}
可以结合direction排版。
四、项目符号的问题:使用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(“图片地址”)就可以了。但Mb5u.com极力不提倡这样的方式。建议您设置图片为li 的背景。
五、首字下沉效果
伪对象: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。
七、固定宽度汉字截断:使用text-overflow(显示省略号效果)
用后台语言可以对从数据库里的字段内容做截断处理,比如说截12个汉字(之后用省略号)。但是有时还需要html标签的过滤等,而用CSS来控制则没有这个问题。比如对列表应用以下样式:
示例代码li{
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
八、固定宽度汉字(词)折行:使用word-break
举个例子,比如说要在一个固定宽度容器里面显示很多地名(假设以空格分隔),为了避免地名中间断开(即一个字在上面而另一个字折断到下一行去了)。则可以使用word-break。比如:
示例代码
南京上海 上海上 南 上海上海 南京 上海上海上海 南京上海 上海 南京上海 上海 南京 上海 南京 上海 南京 上海 南京 上海 南京 上海 南京上海 上海 南京上海 上海
值得注意的是里面的空格不能以 代替(最少要有一个软空格)。
九、汉字注音:使用ruby标签和ruby-align属性
比如说注音zhu yin,可以利用ruby-align设置对齐方式。这是在CSS手册里面看到的,具体可以自行查阅ruby-align项。
以上就是对CSS布局中常用的文字排版相关属性详解的全部介绍,如果您想了解更多有关CSS3教程,请关注PHP中文网。
php中的文字排版问题,CSS布局中常用的文字排版相关属性详解相关推荐
- css动画相关属性详解
css动画相关属性详解 文章目录 css动画相关属性详解 什么是CSS动画? 一.@keyframes规则 二.延迟动画-animation-delay 三.设置动画应运行多少次animation-i ...
- html布局文字设置,div css布局中css中文字体设置
在HTML网页结构中,会用到中文字,而中文字有得多中笔墨体,有的开发者在自身电脑中下载并安装不少摩登字体.而这些中文字体CSS设置装备摆设提倡? 1.不克不及随意CSS设置装备摆设本人安装中笔墨体 假 ...
- PyQt(Python+Qt)入门:Designer组件属性编辑界面中QWidget类相关属性详解
本文适用人员:本文比较长,适合不理解Qt Designer部件属性的人员阅读或资料查找. 声明: 1.如果有人认为本文是简单的复制粘贴+翻译而成,敬请读本文最后的后记: 2.本文为老猿Python学习 ...
- 原生HTML:img 相关属性详解(alt属性,onerror事件,以及其他基本属性),css中的object-fit
语法:<img> 属性: 1.src 指定要显示图像的URL 2.width 宽度,指定图像的宽度 以px作为单位的数值,px可以省略 3.height 高度,指定 ...
- css布局中的居中问题
css布局中的居中问题 作者:阿捷 2004-7-5 14:35:49 #sample{ HEIGHT:240px;WIDTH:400px; BACKGROUND: url(http://www.w3 ...
- DIV CSS布局中绝对定位和浮动用法
转自:http://developer.51cto.com/art/201009/223337_1.htm 你对DIV CSS布局中绝对定位和浮动的概念及使用是否熟悉,这里和大家分享一下,CSS中,实 ...
- div css布局中CSS图片大小自动按比例等比例缩小图片不变形解决技巧
div css布局中CSS图片大小自动按比例等比例缩小图片不变形解决技巧 在DIV CSS布局中对于图片列表或图片排版时,图片不是固定宽度高度大小,但图片占位是固定宽度高度,这个时候如果使用CSS固定 ...
- div css布局中CSS图片大小自动按比例等比例缩小图片不变形解决技巧(转)
本人对前端处理不是很牛,所以转载这文章.原文地址:http://www.divcss5.com/wenji/w632.shtml DIV CSS布局中对于图片列表或图片排版时,图片不是固定宽度高度大小 ...
- 在CSS布局中让Floats轻拂
If you're new to CSS layouts, you'd be forgiven for thinking that using CSS floats in imaginative wa ...
最新文章
- [JAVA EE] JPA 技术实践:完成增、删、改、查操作
- 后门技术(HOOK篇)之DT_RPATH
- outlook搜索不到历史邮件内容
- vue-element-admin使用常见问题
- 开源API网关Kong基本介绍和安装验证
- C#中使用opencv处理图像
- 获取两个数的最大值,判断是否相等;
- 谈谈我对MYSQL乱码的解决办法
- python 批量打印文档_使用python将Excel数据填充Word模板并生成Word
- Python中如何输入一个整数实例
- 卖二手书的多抓鱼是如何逆袭上位的!
- 【ESAPI】WEB安全ESAPI使用
- 字节跳动校招提前批面试
- 自己写strcmp( )函数
- 翻译并添加 解析OV13850 datasheet
- 百度云爬虫_python
- Relief特征选择算法
- OpenCL入门一:Intel核心显卡OpenCL环境搭建
- 挑战编程:回文字符串
- PAT出现段错误怎么办
热门文章
- 2016年9月16日 总结
- 详细教程|电脑上删除的照片如何恢复?
- 麦当劳中国内地第4000家餐厅开业;圣培露携手心灵厨房打造更可持续的未来 | 知消...
- 使用PageMethod.startPage分页查询 返回总数对不上
- 权限管理系统6—业务功能实现—1分页查询
- 备战数学建模六之差值拟合
- c语言生成1000 9999随机数,产生随机数(rand()函数和srand()函数)
- 37 | MySQL的内部临时表使用场景?(Group by语句使用注意事项)
- Flink DataStream Connectors 之 Apache Kafka 连接器
- 智能电表软件测试,智能电能表软件测试技术概述