SupeSite 為了方便站長(zhǎng)修改站點(diǎn)樣式，在后臺(tái)加入了樣式表編輯功能，方便站長(zhǎng)直接在后臺(tái)針對(duì)站點(diǎn)已有的樣式表進(jìn)行編輯，而不需要通過 FTP 登錄到空間修改。

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

進(jìn)入 SupeSite 7.0 后臺(tái) => 系統(tǒng)管理 => 樣式表編輯：

一、瀏覽站點(diǎn) CSS

1、編輯默認(rèn)的樣式表

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

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

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

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

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

修改好了點(diǎn)擊“提交保存”。

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

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

再看一下將標(biāo)題字號(hào)從 16px 修改為 26px 后的效果截圖：

通過上面簡(jiǎn)單的修改演示大家應(yīng)該已經(jīng)明白了如何針對(duì)文章打印頁(yè)面做樣式調(diào)整了，一般是針對(duì)文章字號(hào)的調(diào)整，因?yàn)榇蛴№?yè)面沒法加一些表格和絢麗的樣式，主要就是針對(duì)文字的一些樣式調(diào)整。

2、CSS 編輯助手

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

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

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

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

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

點(diǎn)擊“提交保存”，到文章頁(yè)面點(diǎn)擊“打印”我們看下效果：

通過上面的演示大家應(yīng)該看出來了，CSS 編輯助手就是一個(gè)方便大家寫 CSS 的小工具，可以將其應(yīng)用于所有需要寫 CSS 的頁(yè)面，不止是打印樣式表里，模板 CSS 里同樣可以，您自己做的頁(yè)面需要 CSS 代碼也可以在這里可視化的向?qū)碌玫侥枰?CSS 代碼。

二、添加站點(diǎn) CSS

進(jìn)入 SupeSite 7.0 后臺(tái) => 系統(tǒng)管理 => 樣式表編輯 => 添加站點(diǎn) CSS

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

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

有了 CSS 文件我們?nèi)绾螌⑵鋺?yīng)用到某個(gè)模板里面呢？

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

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

主句代碼就是調(diào)用 CSS 文件用的，您可以用自己寫的 CSS 文件替換默認(rèn)的 CSS 文件，比如我們用 test.css 替換 common.css

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

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

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