午后・时光

九、文本设置常用方法与技巧

位置: 首页 > 马黑教程[ 发布时间: 2023.3.2  作者: 水手  阅读: 113 ]
九、文本设置常用方法与技巧


帖子通常离不开文本。论坛程序对文本的设置一般不会考虑HTML帖子可能用到的文本样式,需要帖子制作者自己设计。


帖子中的文本,可以直接安放在父盒子之下,但这么做的话,文本块可操作的余地除了基于文本的设置外几乎就没有了,所以还是建议将文本置于合适的盒子中。例如,一个标题性质的文本,可以用一个 div 盒子来装载:


#mytitle {
        position: absolute;
        font: bold 2em / 2.2em '新宋体','楷体',sans-serif;
}


第一句,先将 #mytitle 选择器设定为绝对定位,便于将来对它进行物理位置偏移安置。第二句是重点,用一个 font 简写属性设置了N多个字体方面的设置:bold 是粗体,也可用 normal (正常)值;2em / 2.2em 包含两个方面,前面的 2em 设置字体大小,1em 是常规文字个体的大小,2em 是常规文字个体大小的一倍,也可用 px 等单位,2.2em 表示行高,行高可以等于但不能小于字体的大小;后面是字体名称,当设置多个字体时字体名称之间用小角逗号隔开,第一个字体是优先字体,如果客户端没有安装这个字体,则使用下一个字体,中文名称或有空格的字体名称需要使用小角引号将其包裹起来。


如果不想使用 font 简写属性,则需要一一设置字体相关的属性(符号“|”表示“或者”,实际使用时选其一,不带“|”):


font-family: '宋体','新宋体','微软雅黑',sans-serif;
font-weight: normal | bold; /* 字体粗细 */
font-size: 20px;  /* 字体大小 px、em、rem 等单位均可使用 */
line-height: 26px;  /* 行高 指文本所在行占用的容器高度 */


行高是个很有意思的属性,假设是单行文本,我们希望文本能垂直居中于盒子中,那么,line-height 的值与文本容器高度值一致时就可达成。如果文本容器做了绝对定位,假设没有做容器的高度设置,那么,文本行高的设置会被容器当做自己的高度,而文本容器的长度则与字数有关,单字的宽度,以汉字为例,它的宽度占用和 font-size 所设置的值异常接近(有些字体的实际宽度占用会略大于font-size设定的值),利用此原理,很多情况下我们无需设置文本容器的尺寸。


文本颜色,也叫前景色,在CSS里用 color 属性表示,例如:color: #000000 或者 color: black 或者 color: rgb(0,0,0) 等等。


文本还有诸多细节修饰,这里简单说说几个做帖可能会用到的:


text-shadow: 2px 2px 4px #aaa; /* 文本阴影 */
text-decoration: none | underline | overline | line-through; /* 无 | 下划线 | 上划线 | 删除线 */
text-indent: 2em; /* 行首缩进 */
text-align: left | right | center; /* 文本对齐 左对齐 | 右对齐 | 居中对齐 */
letter-spacing: normal | 10px; /* 字间距 */
font-style: normal | italic; /* 字体样式:正常 | 斜体 */

前一篇: 八、父元素令子元素全居中的办法
下一篇: 十、关键帧动画@keyframes及其调用方法animation

发表评论:

       

评论列表 [0条]

Copyright © 2014 All Right Reserved 马黑PHP文章管理整站系统v1.8
联系我们: gxblk@163.com