九、文本设置常用方法与技巧
九、文本设置常用方法与技巧
帖子通常离不开文本。论坛程序对文本的设置一般不会考虑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; /* 字体样式：正常 | 斜体 */
帖子通常离不开文本。论坛程序对文本的设置一般不会考虑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; /* 字体样式：正常 | 斜体 */
发表评论:
评论列表 [0条]
