CSS:print

本頁面要來講解如何將 CSS 運用至列印文件的工作之中，以強化你所列印出的文件的美觀性及實用性。

您的位置: ACnowiki >> Cascading Style Sheet >> CSS 在列印文件上的運用

如何將列印用的樣式套用至網頁的文件中

基本上在 HTML 文件的 head 元素中加入以下這一行就好了。

<link rel="stylesheet" type="text/css" href="你的列印用 CSS 檔案的位置" media="print" />

如何設計列印用樣式的內容

這點要由各位自己決定，以下我會提幾點建議供各位參考。

1. 你本來寫給螢幕看的網頁並不一定適合拿來直接列印，除非你本來就沒有使用任何的樣式，我在這指的並不只有 CSS 的樣式，還有你寫在 HTML 的各個元素 element 中的屬性 attribute 。
2. 當你嘹解了你要列印 ( print ) 出來的文件，並不一定跟你顯示 ( screen ) 在螢幕上的相同時，你可能會考慮再另外重製一份 HTML 檔案，不過我要在這告訴你，如果你的瀏覽器比 Internet Explorer 6.0 還新的話，那麼你可以考慮使用 CSS 來處理，這樣子可以節省掉新增及維護列印用的 HTML 檔案的時間及工夫。
3. 當你選擇了用 CSS 來作業時，你一定會因為自己的 CSS 功力不足而覺得還不如用 HTML 來處理比較適當，不過我認為，在看了「#實際地將 CSS 運用至列印文件的工作中」的這個主題後，你在使用 CSS 來處理列印工作上應該會更加地得心應手，這也是這一份網頁之所以會被寫出來的目的。
4. 最後要提醒的一點是，列印出來的文件中，四周留白的空間，還有在四個角的額外資訊，這些是要由瀏覽器的頁面設定來設定而非由 CSS 負責的，至少我用的 Mozilla Firefox 是這樣子做的。

實際地將 CSS 運用至列印文件的工作中

這兒所講解的全是 CSS 的實用技術面了，如果你還不懂 CSS 的話，建議你到 Cascading Style Sheet 這一頁找資料看一下。

1. 該使用何者長度單位？
   1. 可使用的單位如下。
      1. 公分 cm
      2. 像素 px
      3. 字點（？） pt
      4. 一個全形字單位 em
   2. 需要設定長度單位的元素 element 如下。
      1. body { width } |- 這會決定你的一份文件列印出來的寬度 width 有多寬，一般來說用 cm 並配合所要列印的紙張可能會比較好也說不定…
      2. body { font-size } |- 這會決定你的一份文件列印出來的字體尺寸 font-size 有多大，一般來說用 pt 可能會比較好？
2. 該如何手動換頁？
   1. PAGE-BREAK-AFTER |- 這個 CSS 屬性會讓被套用的元素前插入一個分頁符號，這樣子在列印時，到了該地方就會進行換頁。
   2. PAGE-BREAK-BEFORE |- 這個 CSS 屬性會讓被套用的元素後插入一個分頁符號，這樣子在列印時，到了該地方就會進行換頁。
3. 該如何讓某些元素中的說明文字屬性的資料被顯示出來？
   1. 使用 after 跟 before 這兩個 CSS 的屬性（？）時，可以用 content 來在元素的前或後加入文字，而且你也可以用它來控制輸出特定的屬性中的資料。比如說下面這行 CSS 的源碼（？）會將 a 元素中的 href 中的 href 的資料輸出在該 a 元素的後面，但是如果你的 a 元素沒有 href 屬性時是不會有作用的。
      a[href]:after { content: attr(href) ; }
      這樣子內容 content 屬性就會自己去抓並輸出變數 attr(href) ，也就是你的網址了。
      然後如果你還希望在該輸出的 href 的資料前後加點什麼東西以供區隔（比如說大於小於的數學符號），你可以用下面這行的方式來寫。a[href]:after { content: "<" attr(href) ">" ; }
      在內容 content 中，用左右成對的雙引號（？） " 所包起來的就是代表字串 string ，這是固定一定要照其所宣告的值輸出的，而沒有包起來的就是變數 variable（？） ，這是依所給的值，來決定該抓取何種資料輸出的，然後要記得字串跟變數間一定要隔一個空格。（不隔空格有沒有差我還沒實驗不清楚）

可供參考的範例

以下列出有將 CSS 運用至列印文件的工作中的網頁。

• PieTTY (pputty): piaip's reimplementation of PuTTY

---