SupeSite 為了方便站長修改站點樣式，在后臺加入了樣式表編輯功能，方便站長直接在后臺針對站點已有的樣式表進行編輯，而不需要通過 FTP 登錄到空間修改。

說明一下，全新安裝的 SupeSite 后臺樣式表編輯這里只包含 print.css 一個樣式表文件，這個樣式表是針對文章打印頁面的樣式控制，并不是瀏覽器的瀏覽頁面樣式表編輯，網站在瀏覽器里的所有樣式都是在 ./templates/default/css/common.css（以默認模板舉例）文件控制的，后臺并沒有修改的地方，直接修改該文件即可。下面詳細為大家講解一下如何修改文章打印樣式表和 CSS 編輯助手的使用方法，以及簡單講解下如何添加站點 CSS。

進入 SupeSite 7.0 后臺 => 系統管理 => 樣式表編輯：

一、瀏覽站點 CSS

1、編輯默認的樣式表

上圖界面中可以看到系統默認自帶的打印樣式表只有一個 ./css/print.css，點擊“刪除”即可刪掉該樣式表，點擊“編輯”修改該樣式表，下面我們著重介紹下如何編輯該樣式表。

我們將樣式表代碼摘錄如下：

/* ------------------------------------- SupeSite 官方模板 for Printer (C) 2001-2006 Comsenz Inc. http://www.supesite.com------------------------------------- */* { font: 14px; font-family: Arial, Helvetica, sans-serif; }// 文章打印頁面文字字號和字體控制#header, .sideL, .sideR, #nav, .col_350, .nl_hot, .nl_list h3, .news_glo_module, #sign_msg { display: none !important;}.sideR { background: red !important; }// 上面兩項是提升上述指定樣式規則的應用優先權，應用于 IE4.0+，具體請參考 CSS 手冊h1 { text-align: center; font-size: 16px; margin-bottom: 10px;}// 文章標題字號和間距控制#article{ margin-top: 10px; text-align: center; font-size: 16px; font-weight: normal; border-bottom: 1px solid #CCC; line-height: 2em;}// 文章正文的字號、邊框、間距等的控制img { border: none;}// 文中圖片邊框樣式控制.pages { text-align: right; font-size: 12px;}.pages table { margin: 0 0 0 auto; }// 翻頁鏈接間距及字號控制#footer { text-align: center; font-size: 18px; border-top: 1px solid #D21A1C;}#footer p { margin: 5px 0;}#footer * { font-size: 18px;}// 上面三項是文中打印頁面頁腳部分的樣式控制

我們做一個小的修改為大家演示下修改效果，將上面樣式表代碼里的控制標題的 h1 的字號屬性修改一下：

將 font-size: 16px; 修改為 font-size: 26px;

修改好了點擊“提交保存”。

打開一篇資訊文章，點擊文章右下方的“打印”鏈接，如下圖所示：

我們先看一下修改之前默認樣式表下該文章的打印頁面截圖：

再看一下將標題字號從 16px 修改為 26px 后的效果截圖：

通過上面簡單的修改演示大家應該已經明白了如何針對文章打印頁面做樣式調整了，一般是針對文章字號的調整，因為打印頁面沒法加一些表格和絢麗的樣式，主要就是針對文字的一些樣式調整。

2、CSS 編輯助手

CSS 編輯助手其實就是一個簡單的 CSS 生成工具，不會自己寫 CSS 的朋友可以通過可視化的操作得到自己需要的 CSS 代碼加入模板里面。

下面舉例說明其使用方法，我們從 CSS 編輯助手里得到一個背景顏色的 CSS 代碼，然后將其加入文章打印頁面樣式表 ./css/print.css 里，下面圖示說明：

我們選中一個淡綠色的背景色，得到的 CSS 代碼如圖所示：

我們將得到的 background-color : #C4FFC4; 加入 ./css/print.css 的 h1 部分，修改后的 h1 部分的代碼如下：

h1 { text-align: center; font-size: 16px; margin-bottom: 10px; background-color : #C4FFC4;}

點擊“提交保存”，到文章頁面點擊“打印”我們看下效果：

通過上面的演示大家應該看出來了，CSS 編輯助手就是一個方便大家寫 CSS 的小工具，可以將其應用于所有需要寫 CSS 的頁面，不止是打印樣式表里，模板 CSS 里同樣可以，您自己做的頁面需要 CSS 代碼也可以在這里可視化的向導下得到您需要的 CSS 代碼。

二、添加站點 CSS

進入 SupeSite 7.0 后臺 => 系統管理 => 樣式表編輯 => 添加站點 CSS

我們添加一個名為 test.css 的站點 CSS 文件，“提交保存”后得到：

我們可以利用上面講過的 CSS 編輯助手得到您需要的 CSS 代碼，然后將其加入上面的輸入框里“提交保存”，生成的 test.css 文件保存在 ./css 目錄下。

有了 CSS 文件我們如何將其應用到某個模板里面呢？

我們隨便舉個例子看一下默認模板是如何調用 CSS 文件的，打開 ./templates/default/header.html.php 文件，搜索下面的代碼：

<link rel="stylesheet" type="text/css" href="{S_URL}/templates/$_SCONFIG[template]/css/common.css" />

主句代碼就是調用 CSS 文件用的，您可以用自己寫的 CSS 文件替換默認的 CSS 文件，比如我們用 test.css 替換 common.css

<link rel="stylesheet" type="text/css" href="{S_URL}/css/test.css" />

這樣修改后 ./templates/default/header.html.php 頁面就是 ./css/test.css 這個 CSS 控制的。

同理，其他模板修改 CSS 文件的外鏈方法是一樣的。