CSS样式字体与文本相关属性
字体相关属性基本属性添加阴影添加多阴影微调字体大小颜色表示文本相关属性文本基本属性文本自动换行长单词和URL地址换行CSS3新增服务器字体字体相关属性
基本属性
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html"/><title> 字体相关属性设置 </title></head><body>color：#888888:<span style="color: #888888;">测试文字</span><br>color:red:<span style="color: red;">测试文字</span><br>font-family:楷体_GB2312:<span style="font-family: '楷体_GB2312';">测试文字</span><br>font-size:20pt:<span style="font-size: 20pt;">测试文字</span><br>font-size:xx-large:<span style="font-size: xx-large;">测试文字</span><br>font-stretch:narrower:<span style="font-stretch:narrower">测试文字</span><br>font-stretch:wider:<span style="font-stretch:wider">测试文字</span><br>font-style:italic:<span style="font-style: italic;">测试文字</span><br>font-weight:bold:<span style="font-weight: bold;">测试文字</span><br>font-weight:900:<span style="font: weight 900">测试文字</span><br>text-decoration:blink:<span style="text-decoration: blink;">测试文字</span><br>text-decoration:underline:<span style="text-decoration:underline">测试文字</span><br>text-decoration:line-through:<span style="text-decoration:line-through">测试文字</span><br>font-variant:small-caps:<span style="font-variant: small-caps;">hello</span><br>text-transform:uppercase:<span style="text-transform:uppercase">hello</span><br>text-transform:capitalize:<span style="text-transform:capitalize">hello</span><br>line-height:30pt:<span style="line-height: 30pt;">测试文字</span><br>letter-spacing:5pt:<span style="letter-spacing: 5pt;">hello world</span><br>letter-spacing:10pt:<span style="letter-spacing: 10pt;">hello world</span><br>word-spacing:20pt:<span style="word-spacing:20pt;">hello world</span><br>word-spacing:60pt;<span style="word-spacing: 60pt;">hello world</span><br></body></html>
添加阴影
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html;"/><title> 阴影 </title><style type="text/css">span {display: block;padding: 8px;font-size: xx-large;}</style></head><body>text-shadow: red 5px 5px 2px：<span style="text-shadow:red 5px 5px 2px">测试文字</span>text-shadow: 5px 5px 2px (省略阴影颜色)：<span style="text-shadow: 5px 5px 2px; color:blue">测试文字</span>text-shadow: -5px -5px 2px gray (向左上角投影)：<span style="text-shadow: -5px -5px 2px gray;">测试文字</span>text-shadow: -5px 5px 2px gray (向左下角投影)：<span style="text-shadow: -5px 5px 2px gray;">测试文字</span>text-shadow: 5px -5px 2px gray (向右上角投影)：<span style="text-shadow: 5px -5px 2px gray;">测试文字</span>text-shadow: 5px 5px 2px gray (向右下角投影)：<span style="text-shadow: 5px 5px 2px gray;">测试文字</span>text-shadow: 15px 15px 2px gray (向右下角投影，更大偏移距离)：<span style="text-shadow: 15px 15px 2px gray;">测试文字</span>text-shadow: 5px 5px 10px gray (模糊半径增加，模糊程度增加)：<span style="text-shadow: 5px 5px 10px gray">测试文字</span></body></html>
添加多阴影
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html;"/><title> 多个阴影 </title><style type="text/css">span {display: block;padding: 8px;font-size:xx-large;}</style></head><body>text-shadow:5px 5px 2px #222, <br/>30px 30px 2px #555, <br/>50px 50px 2px #888 (多个投影)：<span style="text-shadow: 5px 5px 2px #222, 30px 30px 2px #555, 50px 50px 2px #888;">测试文字</span></body></html>
微调字体大小
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html"/><title> text-size-adjust </title><style type="text/css">#div1 {font-size: 16pt;font-family: "Arial Black";font-size-adjust: 0.52;}#div2 {font-size: 16pt;font-family: "Bodoni MT";font-size-adjust: 0.48;}#div3 {font-size: 16pt;font-family: "Niagara Solid";font-size-adjust: 1.22;}</style></head><body><div id="div1">Hello world</div><div id="div2">Hello world</div><div id="div3">Hello world</div></body></html>
颜色表示
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html"/><title> 颜色表示方式 </title><style type="text/css">div>div {width: 400px;height: 40px;}</style></head><body><script type="text/javascript">for (var i=0; i<10; i++) {document.write("测试文字");}</script><div style="position: absolute; top: 0px;"><div style="background-color: grey;">background-color:gray</div><div style="background-color:#aaa">background-color:#aaa</div><div style="background-color: #ffff00;">background-color#ffff00</div><div style="background-color: rgb(255, 0, 255);">background-color:rgb(255, 0, 255)</div><div style="background-color: hsl(120, 60%, 50%);">background-color: hsl(120, 60%, 50%)</div><div style="background-color: rgba(255, 0, 255, 0.5);">background-color: rgba(255, 0, 255, 0.5)</div><div style="background-color: hsla(120, 80%, 50%, 0.5);">background-color: hsla(120, 80%, 50%, 0.5)</div></div></body></html>
文本相关属性
文本基本属性
<!DOCTYPE html><html><meta http-equiv="Content-Type" content="text/html;"/><title>文本相关属性设置</title><style type="text/css">/* 为div元素增加边框 */div {border: 1px solid #000000;height: 30px;width: 200px;}</style><body><!-- 缩进20pt -->text-indent:20pt <div style="text-indent: 20pt">测试文字</div><!-- 缩进40pt -->text-indent:40pt <div style="text-indent: 40pt;">测试文字</div><!-- 居中对齐 -->text-align:center <div style="text-align:center">测试文字</div><!-- 居右对齐 -->text-align:right <div style="text-align: right;">测试文字</div><!-- 居左对齐 -->text-align:left <div style="text-align: left;">测试文字</div><!-- 文本从右到左 -->direction:rtl <div style="direction: rtl;">测试文字</div><!-- 文本从左到右 -->direction:ltr <div style="direction: ltr;">测试文字</div><!-- 强制不换行，直到遇到br -->white-space:nowrap <div style="white-space: nowrap;">强制不换行，直到遇到br标签，测试文字</div><!-- 当文字溢出时，只是简单裁剪 -->text-overflow:clip <div style="overflow:hidden; white-space:nowrap; text-overflow: clip;">当文字溢出时，只是简单裁剪, 测试文字</div><!-- 当文字溢出时，裁剪之后显示裁剪标记 -->text-overflow:ellipsis <div style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis;">当文字溢出时，裁剪之后显示裁剪标记</div></body></html>
文本自动换行
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html"/><title>文本相关属性设置</title><style type="text/css">/* 为div元素增加边框 */div {border: 1px solid #000000;height: 60px;width: 200px;}</style></head><body><!-- 不允许在单词中间换行 -->word-break:keep-all <div style="word-break:keep-all">Line changes in the middle of the words are not allowed.</div><!-- 允许在单词中间换行 -->word-break:break-all <div style="word-break:break-all">Allows changing lines in the middle of the words.</div></body></html>
长单词和URL地址换行
<!DOCTYPE html><html><meta http-equiv="Content-Type" content="text/html;"/><title>文本相关属性设置</title><style type="text/css">/* 为div元素增加边框 */div {border: 1px solid #000000;height: 50px;width: 140px;}</style><body><!-- 允许在长单词、URL地址中间换行 -->word-wrap:noraml <div style="word-wrap: normal;">Our domain is </div><!-- 允许在长单词、URL地址中间换行 -->word-wrap:break-word <div style="word-wrap: break-word;">Our domain is </div></body></html>
CSS3新增服务器字体
<!DOCTYPE html><html><meta http-equiv="Content-Type" content="text/html"/><title>服务器字体</title><style type="text/css">/* 定义服务器字体，字体名为CrazyIt 服务器字体对应的字体文件为Blazed.ttf */@font-face {font-family: CrazyIt;src: url("Blazed.ttf") format("TrueType");}</style><body><!-- 指定CrazyIt字体，这是服务器字体 --><div style="font-family:CrazyIt;font-size:36pt">Our domain is </div></body></html>
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html"/><title> 服务器字体 </title><style type="text/css">/* 定义普通的服务器字体 */@font-face{font-family: CrazyIt;src: url("Delicious-Roman.otf") format("OpenTpye");}/* 定义粗体的服务器字体 */@font-face {font-family: CrazyIt;src: url("Delicious-Bold.otf") format("OpenType");font-weight: bold;}/* 定义斜体的服务器字体 */@font-face {font-family: CrazyIt;src: url("Delicious-Italic.otf") format("OpenType");font-style:italic;}/* 定义粗斜体的服务器字体 */@font-face {font-family: CrazyIt;src: url("Delicious-BoldItalic.otf") format("OpenType");font-style: italic;font-weight: bold;}</style></head><body><div style="font-family: CrazyIt; font-size:30pt;">Our domain is </div><div style="font-family: CrazyIt; font-size: 30pt; font-weight:bold;">Our domain is </div><div style="font-family: CrazyIt; font-size: 30pt; font-style: italic;">Our domain is </div> <div style="font-family: CrazyIt; font-size: 30pt; font-style: bold;">Our domain is </div></body></html>
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html"/><title> 优先使用客户端字体 </title><style type="text/css">/* 定义服务器字体：CrazyIt 该字体优先使用客户端字体: Goudy Stout当客户端字体不存在时，使用Blazed.ttf作为替代字体 */@font-face {font-family: CrazyIt;src: local("Goudy Stout"), url("Blazed.ttf") format("TrueType");}</style></head><body><div style="font-family: CrazyIt; font-size: 30pt;">Our domain is </div></body></html>
