第五章

样式文件

呵呵。看了上一章 tex2page 输出的网页是不是有点失望。怎么那么丑啊？那是因为你没有加入任何样式。你可以用一个 CSS 文件轻轻松松把你的 HTML 变得比这个小册子漂亮十倍，而你不需要再次运行 tex2page!

5.1 CSS class 信息

tex2page 输出的文字都是含有 class 信息的。它输出的 HTML 有各种 class, 比如我摘取的这段生成的 HTML，就是这个网页右上角的导航栏。

<div align=right class=navigation><i>[<span><a 
href="intro.html"> 封面</a>, <a href="intro-Z-H-12.html">上 
一页</a></span><span>, <a href="intro-Z-H-14.html">下一页 
</a></span> <span>; &nbsp;&nbsp;</span><span><a 
href="intro-Z-H-1.html#node_toc_start">目录 
</a></span><span><span>; &nbsp;&nbsp;</span><a 
href="intro-Z-H-18.html#node_index_start"> 索引 
</a></span>]</i></div>

可以看到，它是包含在一个 class 为 navigation 的 <div> 里的，如果你在样式文件里指定：

div.navigation{  
                position: fixed; 
                width: 30%; 
                top: 96%; 
                right: 0; 
                bottom: auto; 
                margin:0; 
                padding:5px; 
                font:  28px; 
                padding: 2px; 
                margin: 0px; 
                margin-bottom: 8px; 
                background: white; 
                border-style: solid; 
                border-width: 0.6pt;  
                border-color: orange; 
                text-align: center; 
                }

就可以得到跟本文以前的版本一样的浮动导航条了。可惜的是 IE 显示这种浮动对象有问题，所以如果你想让各种浏览器都能正常显示你的文档，最好不要用太炫的 CSS 样式。

另外，章节，代码，强调，……都有自己的 class。以后我们还会看到其它结构的样式定义。

5.2 导入 CSS 文件

你可以用

\inputcss basic.css

导入你自己的样式文件。这样你的 HTML 文件的 <head> 中就会有

<link rel="stylesheet" type="text/css" href="tex2page.css" title=default>

这样的信息。你也可以用

\cssblock 
h1      {color: navy} 
\endcssblock

它会被 tex2page 插入到 HTML 文件的 <head> 中作为嵌入 CSS.

好了，你现在就可以把这个 main.css 和 tex2page.css下载过去放到你的 first.tex 的目录里。然后在 first.t2p 文件开头加入：

\inputcss tex2page.css

再运行一次

tex2page first

因为先头你的 first.t2p 文件里没有插入对 tex2page.css 的引用，所以需要再次运行。以后修改 CSS 就不用再次运行了，只需要刷新浏览器。

好！刷新一下你的浏览器。你的文档已经基本上跟我一样了！出去 happy 一下，回来再继续看 :)

5.3 css.t2p

随 tex2page 提供的 css.t2p 中有基本的样式和对 Scheme 进行语法加亮的样式。t2p 文件的配置请看第 15 章。Scheme 的语法加亮请看第 13 章。

5.4 为什么要使用 CSS?

HTML 本来没有 [intro-Z-G-D-1.png] 那样的页面表达能力，一个转换程序何必一定要让生成的 HTML 跟 DVI 看起来一样？

用户通过 CSS stylesheet 来修改样式，大大简化了 tex2page 的设计，它不需要理解很多 [intro-Z-G-D-1.png] 的样式定义，也大大方便了作者修改页面的样式。

作者可以在 [intro-Z-G-D-1.png] 文件外部修改转换后 HTML 的样式，这可能就是 tex2page 区别于其它转换程序的地方。

CSS 具有非常灵活的屏幕排版方式，比如，我在这个文档里定义了一个宏：

\def\tl{\htmlonly\rawhtml<div class=tl>\endrawhtml\endhtmlonly} 
\def\endtl{\htmlonly\rawhtml</div>\endrawhtml\endhtmlonly}

我的 CSS 里有一段定义：

div.tl{  
        position: fixed; 
        width: 3.5em; 
        top: 0; 
        right: 0; 
        left: 0; 
        bottom: auto; 
        margin:0; 
        padding:5px; 
        font:  28px; 
        color:#666; 
        border-bottom: 5px solid #000; 
        padding: 2px; 
        margin: 0px; 
        margin-bottom: 8px; 
        }

我只要用 \tl 和 \endtl 把某些文字括起来，就可以把它悬挂在浏览器页面左上角。

以前这本手册每一页悬挂在屏幕的左上角那个章标号就是用这个办法加上去的。不过我用了很程序化的手段，请参考第 13 章。

第五章 样式文件

5.1 CSS class 信息

5.2 导入 CSS 文件

5.3 css.t2p

5.4 为什么要使用 CSS?

第五章

样式文件