|
整理：电子商务实践网
如今制作主页，在字体控制上许多人都是采用CSS语言。CSS控制网页字体的优点在于：全部文档集采用同一格式页，在设计思想及布局外观上都是一致的。并且，CSS语言本身也是浅显易懂，对于入门者来说，只须在网上套用现成的例子，就可以轻松地学会设计方法。现在，让我们从网上获取CSS文档，学习CSS语言设置字体特性的办法。
首先，查看网页的源代码获取CSS文档，有时它可能就包含在HTML文档中，但有可能位于文档所链接的目标处。
例1：包含在HTML文档中，如网页http://www.chinabyte.com：
< style type="text/css" >
< !--
td{font-size:12px;}
A:link {text-decoration: none; color:#0000ff}
A:visited {text-decoration: none; color: #3D117B}
A:active {text-decoration: none; color: #3333FF }
A:hover {text-decoration: underline; color: #ff9999 }
-- >
< /style >
它的位置是在< head >< /head >之间。
例2：包含在文档所链接的目标处，如网页http://mall.sina.com.cn：
引用格式页的语句：< link href="/images/mystyle.css" rel=stylesheet >
它的位置同样也是在< head >< /head >之间。您只须在浏览器的地址栏中输入：http://mall.sina.com.cn/images/mystyle.css，即可获得CSS的文档。
然后，结合页面的表现形式，具体分析夹在< style type="text/css" >< /style >之间每条规则的作用。
由例1可知，每条CSS规则的构成都是由一个选择符如td，和一个或多个指定单元格式特性的声明，如：{font-size:12px;}。在{font-size:12px;}中，左花括号{ 表示集的开始，右花括号} 表示集的结束。每一声明以分号(；)结束。
A:link 是指未访问过的链接样式；
A:visited 是指已访问过的链接样式；
A:active 是指活动时的样式；
A:hover 是指鼠标经过时的样式；
font-size：12px;表示字体的大小；
text-decoration: underline;不加下划线；
color：#0000ff 控制文本颜色；
此外还有例1中尚未用到的声明，如：font-family：表示字体族。应用举例：font-family：宋体；font-weight：表示字体粗细。应用举例：font-weight：bold；
在www.chinabyte.com网页的源代码中，可以发现规则td用于所有的td单元，而不管它们在文档中的位置。由于td是HTML的标识符的特殊性，在网页中的调用不须设定class调用。
例2即css文档http://mall.sina.com.cn/images/mystyle.css，是一个比较大型的CSS文档，它用比较多的规则及特性以复杂的方式交织在一块，充分地运用在网页上。由于语句并不难理解，大家可通过对例1的学习，结合网页http://mall.sina.com.cn/的表现效果，自已辨识每条语名的作用。在这里，重点是说一下设计这样大型的CSS的步骤：
1、分析HTML文档的设计，划分文档不同的逻辑部分，如页头、页体、页脚等。再用不同的CLASS属性值定义这些部分。
2、把一些需要特别格式的部分再分类。比如，一篇文档的主体第一段需要特别的格式，那么该段就应用CLASS属性明确地标出来。
3、如果普通单元内的某些小段文本（如H1、P或EM之内的小段文本）需要特别的格式，可通过SPAN单元来标记这些将被特别格式化的小段文本。
通过以上例举，您对CSS的应用有一定的了解吧？其实只要您平时在浏览网页时多留心、多看一些CSS的实例，就能从中学习到更多的关于CSS布局与设计知识。 |
网络技术
