CSS:print - Revision history

Wini: 回復至未受 Spammer 破壞前

2006-02-23T17:33:18Z

回復至未受 Spammer 破壞前

Show changes

58.236.73.217 at 02:10, 23 February 2006

2006-02-23T02:10:01Z

Show changes

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

2005-07-14T03:11:43Z

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

← Older revision		Revision as of 03:11, 14 July 2005
Line 19:		Line 19:
	這兒所講解的全是 CSS 的實用技術面了，如果你還不懂 CSS 的話，建議你到 [[CSS\|Cascading Style Sheet]] 這一頁找資料看一下。		這兒所講解的全是 CSS 的實用技術面了，如果你還不懂 CSS 的話，建議你到 [[CSS\|Cascading Style Sheet]] 這一頁找資料看一下。

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

	==可供參考的範例==		==可供參考的範例==

Wini: /* 可供參考的範例 */

2005-07-14T02:58:56Z

可供參考的範例

← Older revision		Revision as of 02:58, 14 July 2005
Line 38:		Line 38:

	*[http://w.csie.org/~piaip/pietty/ PieTTY (pputty): piaip's reimplementation of PuTTY]		*[http://w.csie.org/~piaip/pietty/ PieTTY (pputty): piaip's reimplementation of PuTTY]
			*[http://geocities.jp/kouyunahi/file/20050713_food.zip 某人幫別人寫的不知所謂的分頁符號運用的例子的壓縮檔，請複製本連結後丟入網址列，因為放置的空間有擋直連的關係，下載完後請解壓縮並開啟 index.html 來預覽列印看看。]

	----		----

Wini at 02:51, 14 July 2005

2005-07-14T02:51:39Z

@@ Line 2: / Line 2: @@
 <div style="background:#eeee77; border:1px solid #ccccff; padding:0.4em; text-align:center;">您的位置: [[Main Page|ACnowiki]] &gt;&gt; [[CSS|Cascading Style Sheet]] &gt;&gt; [[CSS:print|CSS 在列印文件上的運用]]</div>
 ==如何將列印用的樣式套用至網頁的文件中==
@@ Line 12: / Line 10: @@
 ==如何設計列印用樣式的內容==
 這點要由各位自己決定，以下我會提幾點建議供各位參考。
 ==實際地將 CSS 運用至列印文件的工作中==
 ==可供參考的範例==

Wini at 02:16, 14 July 2005

2005-07-14T02:16:48Z

New page

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

<div style="background:#eeee77; border:1px solid #ccccff; padding:0.4em; text-align:center;">您的位置: [[Main Page|ACnowiki]] >> [[CSS|Cascading Style Sheet]] >> [[CSS:print|CSS 在列印文件上的運用]]</div>

CSS ，全名 Cascading Style Sheet ，中文翻譯有「串接式樣式表」、「層級式樣式表」、「串聯式排版樣式表」等的，總之就是那種感覺啦。

==如何將列印用的樣式套用至網頁的文件中==
基本上在 [[HTML]] 文件的 head 元素中加入以下這一行就好了。

<code style=" color:#555555; "><link rel="stylesheet" type="text/css" href="你的列印用 CSS 檔案的位置" media="print" /></code>

==如何設計列印用樣式的內容==
這點要由各位自己決定，以下我會提幾點建議供各位參考。

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

==可供參考的範例==
以下列出有將 CSS 運用至列印文件的工作中的網頁。

*[http://w.csie.org/~piaip/pietty/ PieTTY (pputty): piaip's reimplementation of PuTTY]

----