13-CSS文字与文本

来源：互联网发布：nba球队季后赛数据编辑：程序博客网时间：2024/06/06 15:50

CSS中长度与颜色
CSS中的文字属性
CSS中的文本属性

1. CSS中长度与颜色

CSS长度单位推荐使用像素(px)，其它单位可从样式表手册查得。
CSS颜色

颜色单位格式说明十六进制 color:#ff0000或color:#f00 常用颜色名称 color:red 常用三原色单位 color:rgb(255,0,0) 不常用，由三原色红绿蓝混合而成，每个值域在0-255之间

2. CSS中的文字属性

属性名称属性值说明 font-style normal 正常显示 italic 斜体 font-variant normal 正常显示 small-caps 将小写字母转化为与小写字母同宽的大写字母 font-weight normal 正常显示 bold 加粗 font-size 像素字体大小百分比根据父级标签的字体大小显示本标签的字体大小 font-family 字体名称设置字体名称，多个字体用逗号分隔，从第一个开始检测直到找到第一个有效字体

font属性简化的写法（不推荐使用简化写法）
font:是否斜体是否同宽是否加粗字体大小字体名称
实例：

    p{        font:italic bold 100px 黑体;    }

2. CSS中的文本属性

属性名称属性值说明 color 十六进制数颜色，如color:#ff6600 英文名称颜色，如color:red 三原色颜色，如color:rgb(255,0,0) letter-spacing normal 正常显示长度文本间隔（字母或文字之间的间隔） word-spacing normal 正常显示长度单词间距 white-space normal 文本自动处理换行（文本换行变成空格） pre 换行和空白原样显示 nowrap 强制在同一行显示，除非遇到<br/>标签 text-align left 文字靠左（默认） right 文字靠右 center 文字靠中 text-decoration none 文本不显示任何线条 underline 加下划线 overline 加顶线 line-through 加删除线 text-indent 长度首行缩进百分比首行缩进 line-height 像素行高百分比行高 text-transform none 正常显示 capitalize 字符串第一个字母大写 uppercase 所有字母转化为大写 lowercase 所有字母转化为小写 vertical-align sub 设置文字为下标 super 设置文字为上标 top 将支持 valign 特性的对象的内容与对象顶端对齐 middle 将支持 valign 特性的对象的内容与对象中部对齐 bottom 将支持 valign 特性的对象的内容与对象底端对齐 text-top 将支持 valign 特性的对象的文本与对象顶端对齐 text-bottom 将支持 valign 特性的对象的文本与对象顶端对齐 length 由浮点数字和单位标识符组成的长度值或百分数。可为负数。定义由基线算起的偏移量。
基线对于数值来说为0，对于百分数来说就是0%

line-height的应用实例 :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>      <meta http-equiv="Content-Type" content="text/html;charset=gb2312"/>      <title>我的CSS文字与文本实验</title>      <style type="text/css">        p{            background-color : red;            height : 200px;            line-height : 200px;/*实现垂直方向的居中*/            text-align : center;        }         </style></head><body>     <p>这里是居中的内容</p></body></html>

vertical-align的应用实例 :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>      <meta http-equiv="Content-Type" content="text/html;charset=gb2312"/>      <title>我的CSS文字与文本实验</title>      <style type="text/css">        td{            width : 500px;            height : 500px;            background-color : yellow;            vertical-align :middle;/*在td标签里使用top，middle，bottom定位容器里内容的位置，            使用text-top和text-bottom时td标签里的内容都定位在顶端*/        }        img{            vertical-align : middle;/*img标签里可以使用top，middle，bottom，            text-top，text-bottom定位旁边的文字*/        }      </style></head><body>    <table>            <tr><td><img src="xiaoxiongmao.jpg"/>这是vertical-align实例</td></tr>    </table></body></html>

0 0