0402 文本样式、文本装饰、字体样式

 1 文本样式

　　文本颜色：color:red;
　　背景颜色：background:gray

　　字符间距：letter-spacing:2em 

　　空格间距：word-spacing
　　行 间 距：line-height:14px
　　文本对齐：text-align:center / left / right
　　文本缩进：text-indent：2em

　　垂直对齐方式：vertical-align：middle

 1 <!DOCTYPE html><!--  给浏览器解析，我这个文档是html文档 -->
 2 <html>
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5     <meta name="description" content="" />
 6     <meta name="Keywords" content="" />
 7     <title></title>
 8     
 9     <script type="text/javascript" src="../easyui/jquery.min.js"></script> 
10     <script type="text/javascript" src="../easyui/jquery.easyui.min.js"></script> 
11     <script type="text/javascript" src="../easyui/locale/easyui-lang-zh_CN.js" ></script> 
12 
13     <link rel="stylesheet" type="text/css" href="../easyui/themes/default/easyui.css" />  
14     <link rel="stylesheet" type="text/css" href="../easyui/themes/icon.css" /> 
15 
16     <script type="text/javascript" src="../js/test.js"></script>
17 
18     <link rel="shortcut icon" href="../img/study04.ico">
19     <style>
20         *{
21             margin: 0;
22             padding: 0;
23         }
24           a{
25               font-size: 30px;
26               vertical-align: middle;
27           }
28           span{
29               font-size: 50px;
30               vertical-align: middle;
31           }
32     </style>
33 </head>
34     
35 <body>
36     <p>
37         你好<a href="@">hello</a><span>庠序</span>
38     </p>
39 </body>
40 </html>
内联元素垂直对齐

　

　ps: 单位em是相对于字体大小而定的，是个相对单位

 1 <!DOCTYPE html><!--  给浏览器解析，我这个文档是html文档 -->
 2 <html>
 3 <head>
 4     <meta charset = "utf-8" /> <!-- 让浏览器识别文档的字符编码集 -->
 5     <meta name="Keywords" content="" /> <!-- 关键字：在百度中通过关键字能搜索到这个页面 -->
 6     <mata name = "description" content = "" /> <!-- 描述：对网页的一个简单描述（80字以内） -->
 7     <title></title>
 8     <style>
 9         *{
10             margin: 0;
11             padding: 0;
12         }
13         .color{
14             color: red;
15         }
16         .background{
17             background-color: blue;
18             color: white;
19         }
20         .letter{
21             letter-spacing: 10px; /*字符之间相距10px*/
22         }
23         .word{
24             word-spacing: 20px; /*单词之间的间距，只是对英文有效*/
25         }
26         .line{
27             line-height: 40px; /*行之间的间距*/
28         }
29         .align{
30             text-align: center;
31         }
32         .indent{
33             text-indent: 2em;
34         }
35         
36     </style>
37 </head>
38 
39 <body>
40     <h2>文本颜色</h2>
41     <p class="color">icon是一种图标格式，用于系统图标、软件图标等，这种图标扩展名为*.icon、*.ico。常见的软件或windows桌面上的那些图标一般都是ICON格式的。icon元素包括两个可选的子元素：small-icon子元素和large-icon子元素。文件名是Web应用归档文件(WAR)的根的相对路径。部署描述符并没有使用icon元素。但是，如果使用XML工具编辑部署描述符，XML编辑器可以使用icon元素。图标是特殊类型的小位图，最大尺寸为32×32像素。</p>
42     <hr />
43 
44     <h2>文本背景颜色</h2>
45     <p class="background">icon是一种图标格式，用于系统图标、软件图标等，这种图标扩展名为*.icon、*.ico。常见的软件或windows桌面上的那些图标一般都是ICON格式的。icon元素包括两个可选的子元素：small-icon子元素和large-icon子元素。文件名是Web应用归档文件(WAR)的根的相对路径。部署描述符并没有使用icon元素。但是，如果使用XML工具编辑部署描述符，XML编辑器可以使用icon元素。图标是特殊类型的小位图，最大尺寸为32×32像素。</p>
46     <hr />
47 
48 
49     <h2>字符间距</h2>
50     <p class="letter">icon是一种图标格式，用于系统图标、软件图标等，这种图标扩展名为*.icon、*.ico。常见的软件或windows桌面上的那些图标一般都是ICON格式的。icon元素包括两个可选的子元素：small-icon子元素和large-icon子元素。文件名是Web应用归档文件(WAR)的根的相对路径。部署描述符并没有使用icon元素。但是，如果使用XML工具编辑部署描述符，XML编辑器可以使用icon元素。图标是特殊类型的小位图，最大尺寸为32×32像素。</p>
51     <hr />
52 
53     <h2>空格间距</h2>
54     <p class="word">icon是一种图标格式，用于系统图标、软件图标等，这种图标扩展名为*.icon、*.ico。常见的软件或windows桌面上的那些图标一般都是ICON格式的。icon元素包括两个可选的子元素：Small - icon and large - icon subelements. The file name is the relative path of the root of the Web application archive (WAR). The deployment descriptor does not use the icon element. However, if you use the XML tool to edit the deployment descriptor, the XML editor can use the icon element. The icon is a special type of bitmap with a maximum size of 32 by 32 pixels.</p>
55     <hr />
56 
57     <h2>行间距</h2>
58     <p class="line">icon是一种图标格式，用于系统图标、软件图标等，这种图标扩展名为*.icon、*.ico。常见的软件或windows桌面上的那些图标一般都是ICON格式的。icon元素包括两个可选的子元素：small-icon子元素和large-icon子元素。文件名是Web应用归档文件(WAR)的根的相对路径。部署描述符并没有使用icon元素。但是，如果使用XML工具编辑部署描述符，XML编辑器可以使用icon元素。图标是特殊类型的小位图，最大尺寸为32×32像素。</p>
59     <hr />
60 
61     <h2>文本对齐</h2>
62     <p class="align">hello word</p>
63     <hr />
64 
65     <h2>文本缩进</h2>
66     <p class="indent">icon是一种图标格式，用于系统图标、软件图标等，这种图标扩展名为*.icon、*.ico。常见的软件或windows桌面上的那些图标一般都是ICON格式的。icon元素包括两个可选的子元素：small-icon子元素和large-icon子元素。文件名是Web应用归档文件(WAR)的根的相对路径。部署描述符并没有使用icon元素。但是，如果使用XML工具编辑部署描述符，XML编辑器可以使用icon元素。图标是特殊类型的小位图，最大尺寸为32×32像素。</p>
67     <hr />
68 
69 </body>
70 </html>
文本样式源代码

2 文本装饰

　　text-decoration文本装饰：
　　　　none：默认的一个文本（无样式）
　　　　underline：下划线
　　　　overline：上划线
　　　　line-through：定义一个从中间穿过的线（中划线）

 1 <!DOCTYPE html><!--  给浏览器解析，我这个文档是html文档 -->
 2 <html>
 3 <head>
 4     <meta charset = "utf-8" /> <!-- 让浏览器识别文档的字符编码集 -->
 5     <meta name="Keywords" content="" /> <!-- 关键字：在百度中通过关键字能搜索到这个页面 -->
 6     <mata name = "description" content = "" /> <!-- 描述：对网页的一个简单描述（80字以内） -->
 7     <title></title>
 8     <style>
 9         *{
10             margin: 0;
11             padding: 0;
12         }
13         .decoration{
14             text-decoration:underline;
15         }
16     </style>
17 </head>
18 
19 <body>
20     <h2>文本装饰</h2>
21     <p class="decoration">icon是一种图标格式，用于系统图标、软件图标等，这种图标扩展名为*.icon、*.ico。常见的软件或windows桌面上的那些图标一般都是ICON格式的。icon元素包括两个可选的子元素：small-icon子元素和large-icon子元素。文件名是Web应用归档文件(WAR)的根的相对路径。部署描述符并没有使用icon元素。但是，如果使用XML工具编辑部署描述符，XML编辑器可以使用icon元素。图标是特殊类型的小位图，最大尺寸为32×32像素。</p>
22     <hr />
23 </body>
24 </html>
文本装饰源代码

3 字体样式

　　文字大小：font-size:14px
　　文字字体：font-family:”微软雅黑”
　　文字加粗：font-weight: 700 [100-900] 700是默认加粗-->>bold
　　文字风格：font-style:normal / italic

　　　　normal：默认值
　　　　italic：显示一个斜体

 1 <!DOCTYPE html><!--  给浏览器解析，我这个文档是html文档 -->
 2 <html>
 3 <head>
 4     <meta charset = "utf-8" /> <!-- 让浏览器识别文档的字符编码集 -->
 5     <meta name="Keywords" content="" /> <!-- 关键字：在百度中通过关键字能搜索到这个页面 -->
 6     <mata name = "description" content = "" /> <!-- 描述：对网页的一个简单描述（80字以内） -->
 7     <title></title>
 8     <style>
 9         *{
10             margin: 0;
11             padding: 0;
12         }
13         .font{
14             font-size: 20px;
15             font-weight: bold;
16             font-family: "楷体";
17             font-style: italic;
18             text-indent: 2em;
19         }
20     </style>
21 </head>
22 
23 <body>
24     <h2>文本装饰</h2>
25     <p class="font">icon是一种图标格式，用于系统图标、软件图标等，这种图标扩展名为*.icon、*.ico。常见的软件或windows桌面上的那些图标一般都是ICON格式的。icon元素包括两个可选的子元素：small-icon子元素和large-icon子元素。文件名是Web应用归档文件(WAR)的根的相对路径。部署描述符并没有使用icon元素。但是，如果使用XML工具编辑部署描述符，XML编辑器可以使用icon元素。图标是特殊类型的小位图，最大尺寸为32×32像素。</p>
26     <hr />
27 </body>
28 </html>
字体样式源代码

 

posted @ 2017-05-10 10:03  寻渝记  阅读(174)  评论(0)    收藏  举报