讀書的筆記。
blockquote 引用
若沒有設定字型樣式與背景，看起來只是普通文字罷了。但是文章中常常有引用別人的東西，預先設定好引用區域的顯示樣式，之後就很方便了。我想啦。
▲語法 <blockquote>子曰：群居終日，言不及義，好行小慧，難矣哉！</blockquote>
▲範例子曰：群居終日，言不及義，好行小慧，難矣哉！
cite+q 也是引用
比較適合文字少的引用，因為顯示是行內而非區塊。更花俏的引用範例可見Pull Quotes，簡單說就是在CSS新增一個引用的區塊設定，當文章中有引用時，再用原始碼拉出設定。
▲語法 <cite>櫻木花道</cite><q>我是天才</q>
▲範例
櫻木花道我是天才
acronym 縮寫文字的註解
原始翻譯是首字母縮略字，滑鼠移上去就可以看到說明文。
▲語法 <acronym title="由貴香織里的天使禁獵區">天禁</acronym>
▲範例：日本漫畫中天禁是經典。
文章中的原始碼
在網誌文章中使用半形的＜＞大多數會被瀏覽器當作原始碼而無法顯示，然而有些情況是刻意要顯示原始碼，pixnet blog處理這種問題的方法是，當我們在進階編輯器中打了<系統就會在原始碼的地方改成<這四個字元，而>改成>。但是我們直接在進階編輯器中打了<怎麼辦？那原始碼就變成&lt;這八個字元。所以不需要code等語法了。
▲語法 <font face="Arial">123</font>
▲範例：
<font face="Arial">123</font>
bdo dir 文字排列
橫式中文與英文一樣是從左至右閱讀，當想像舊式中文或是阿拉伯文從右到左也是可以。左至右的屬性是ltr（應該是left to right），右至左rtl。對於一般歹碗郎實用性低。英文推理小說有時候會用到。
▲語法 <bdo dir="rtl">D・N・Angel中，丹羽變身DARK，相對於日渡變身的KRAD，是反字。</bdo>
▲範例：
D・N・Angel中，丹羽變身DARK，相對於日渡變身的KRAD，是反字。
link 匯入外部CSS
有兩種，法一要放在<head>裡面，法二是行內式。
▲語法1
<link rel="stylesheet" type="text/css" href=www.css.com/abc.css" />
▲語法2
<style type="text/css">@import url("www.css.com/abc.css");</style>
media 列印專用CSS
想要印下文章，通常連結區（導覽列）和頁首頁尾都是多餘的，可以使用media屬性在要列印時，連結到另個CSS。列印用CSS可能是灰階文字設定，因為不是每個人都可以印彩色。type="text/css"可有可無。
▲語法(分離式)
<link rel="stylesheet" type="text/css" media="screen" href="www.css.com/xyz.css" />
<link rel="stylesheet" type="text/css" media="print" href="www.css.com/abc.css" />
▲語法2(階層式)
<link rel="stylesheet" type="text/css" href="www.css.com/xyz.css" />
<link rel="stylesheet" type="text/css" media="print" href="www.css.com/abc.css" />
▲語法3
<style type="text/css">@import url("www.css.com/xyz.css") screen;</style>
<style type="text/css">@import url("www.css.com/abc.css") print;</style>
▲語法4
<style type="text/css" media="screen">@import url("www.css.com/xyz.css") </style>
<style type="text/css" media="print">@import url("www.css.com/abc.css");</style>
object 嵌入式多媒體物件
因為embed是不良標籤，建議用物件插入影音檔。語法十分十分冗長，很難通通記起來。我想我還是會繼續用不良標籤，設定簡單明瞭，也不需要結束。object的屬性如下，data是物件的位置，classid也是物件的位置。
範例的param是物件參數設定，name為必要屬性，value是參數值。
▲語法1(pixnet插入影音檔)
<object id="PixnetPlayerKJMLJAKPQMKRJIQQ" contentEditable="inherit" codeBase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" height="54" width="156" align="middle" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000">
<param name="allowScriptAccess" value="always" />
<param name="movie" value="http://www.pixnet.net/onsv/KJMLJAKPQMKRJIQQ/75492077/0" />
<param name="quality" value="high" />
<param name="scale" value="noscale" />
<param name="salign" value="lt" />
<param name="bgcolor" value="#ffffff" />
<param name="wmode" value="transparent" />
<embed src="http://www.pixnet.net/onsv/KJMLJAKPQMKRJIQQ/75492077/0" wmode="transparent" scale="noscale" salign="lt" quality="high" bgcolor="#ffffff" width="156" height="54" name="PixnetPlayerKJMLJAKPQMKRJIQQ" align="9" allowScriptAccess="always" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
▲語法2 (蟲音前這篇提到的flv播放器)
<object contentEditable="inherit" codeBase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" height="70" width="500" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000">
<param name="_cx" value="13229" />
<param name="_cy" value="1852" />
<param name="FlashVars" value="" />
<param name="Movie" value="http://www.ruochi.com/product/vcastr2/vcastr22.swf?LogoUrl=http://i5.photobucket.com/albums/y200/hana36kkk/2007PacificOcean_005.jpg&LogoText=MushishiOST&BarPosition=0&IsShowBar=1&vcastr_file=http://media.twango.com/m1/original/0096/ea2eefa6b11b44de939d10f0f057c7a9.flv" />
<param name="Src" value="http://www.ruochi.com/product/vcastr2/vcastr22.swf?LogoUrl=http://i5.photobucket.com/albums/y200/hana36kkk/2007PacificOcean_005.jpg&LogoText=MushishiOST&BarPosition=0&IsShowBar=1&vcastr_file=http://media.twango.com/m1/original/0096/ea2eefa6b11b44de939d10f0f057c7a9.flv" />
<param name="WMode" value="Window" />
<param name="Play" value="0" />
<param name="Loop" value="-1" />
<param name="Quality" value="High" />
<param name="SAlign" value="LT" />
<param name="Menu" value="0" />
<param name="Base" value="" />
<param name="AllowScriptAccess" value="" />
<param name="Scale" value="NoScale" />
<param name="DeviceFont" value="0" />
<param name="EmbedMovie" value="0" />
<param name="BGColor" value="" />
<param name="SWRemote" value="" />
<param name="MovieData" value="" />
<param name="SeamlessTabbing" value="1" />
<param name="Profile" value="0" />
<param name="ProfileAddress" value="" />
<param name="ProfilePort" value="0" />
<param name="AllowNetworking" value="all" />
<param name="AllowFullScreen" value="true" />
</object>
▲不良語法 (我平常用的XD)
<embed width="500" height="140" loop="true" showstatusbar="true" showdisplay="true" autostart="false" type="" src="http://www.music.com/01gogogo.mp3"></embed>
CSS語法
font-family 字型設定
字型名稱若有空格，就要括起來。瀏覽器會從第一個開始選擇。
▲語法
h1 { font-family: "Courier New", "Comic Sans MS", "Times New Roman", "Tahoma", "Verdana" }
font-size 字型大小
若要瀏覽器能彈性的控制文字大小，便於視障或特別習慣的朋友閱讀，必須用相對性單位設定。老實說我覺得不多人真的會這麼做啦，畢竟自定大小會有跑框等問題，背景越花風險越大。絕對性單位如px像素和pt點，cm公分或in英吋等不常見。相對性如百分比和em，後者繼承上一階層的大小，如上階層是10px，子元素的2em就是20px。書中建議先用百分比再用em。
▲語法
body {font-size: 80%;}
h1 {font-size: 2em;}
h2 {font-size: 1.5em;}
text-variant 大小寫
英文使用者可能會需要把標題文字改成大寫，使其更顯目。中文字怎麼轉就是方塊啊。除了下面說的語法，另種方式是新增一個class如.firstletter，設定其大小位置等，要打文章時再套用設定。範例如Drop Caps。
▲語法
h1 {font-variant: small-caps;}/*小寫全部變大寫*/
h2 {text-transform: capitalize} /*首字大寫*/
h2 {text-transform: uppercase} /*全大寫*/
h2 {text-transform: lowercase} /*全小寫*/
fixed 背景固定
真奇怪，當初我用此語法在ff不支援，但是別人範例檔卻可以耶…有機會再試試好了。
▲語法 h1 {background-attachment: fixed;}
FIR 圖片替代文字
書中不建議用display: none;，而改用如下。法3很妙，好處是當為了加快載入速度不顯示圖片時，可以看到被圖片蓋過的文字，沒實際用過。我平常用font-size: 0px;其實不是很好的方法，FF是真的消失，IE還是會有很小很小的字，還要再修改文字顏色和背景相同才能隱藏。
▲語法1
h1 {
background-image:url(www.images.com/image01.jpg);
width: 300px;
height: 100px;
}
h1 span {
display: block;
height: 0;
overflow: hidden;
}
▲或是語法2
h1 {
background-image:url(www.images.com/image01.jpg);
width: 300px;
height: 100px;
font-size: 1px;
text-indent: -999em; /*文字縮排*/
}
▲或是語法3
h1 {
position: relative;
width: 300px;
height: 100px;
font-size: 30px; /*文字要比圖片小*/
}
h1 span {
position: absolute; /*將此元素蓋過文字*/
top: 0;
width: 300px;
height: 100px;
background-image:url(www.images.com/image01.jpg);
}
border 邊框
1像素的等距離小點點邊框，IE6及其以下的版本將自動變身成虛線（若打算設成虛線應該是dashed），我測試了一下，IE6有些原則真的妙得怪啊。
▲語法 border: 1px dotted #558097; 
list-style-image 清單背景圖片
使用背景圖片當作項目標記是方法之一，比較標準的作法是list-style-image:url(網址)。
▲語法
ul {
list-style-image: url(www.images.com/image02.jpg) ;
}
list-style-position 清單項目位置
清單會自動將項目標記丟到box，我之前做綠色城堡樣板在自訂連結的地方也遇到這個問題，這時要將位置設為行內。預設行外。
▲語法
ul { list-style-position: inherit; }/*繼承之前的設定*/
ul { list-style-position: outside; }/*預設值 項目標記在內容box外*/
ul { list-style-position: inside; }/*項目標記在內容box內*/
list-style-type 清單項目類型
預設阿拉伯數字，不過也可以改成圈圈、羅馬數字等。以上這三種清單設定可以統一用list-style，比如說。ul { list-style: square; none url(www.images.com/image02.jpg) inside; }
▲語法
ul { list-style-type: none; }/*若有自訂的項目圖片，預設的就要隱藏*/
ul { list-style-type: decimal; }/*1.2.3.等等，ol有序清單的預設值*/
ul { list-style-type: disc; }/*● 實心圈圈*/
ul { list-style-type: circle; }/*○ 空心圈圈*/
ul { list-style-type: square; }/*■ 實心正方形*/
ul { list-style-type: lower-roman; }/*i.ii.iii.iv等，小寫羅馬數字*/
ul { list-style-type: upper-roman; }/*I.II.III.IV等，大寫羅馬數字*/
ul { list-style-type: lower-greek; }/*希臘字元，ie不支援*/
ul { list-style-type: lower-latin; }/*a.b.c等，ie不支援*/
ul { list-style-type: upper-latin; }/*A.B.C等，ie不支援*/
ul { list-style-type: decimal-leaading-zero; }/*01.02...10.11等，ie不支援*/
清單取消預設留白和邊界
IE會到用邊界，其他瀏覽器是套用留白，取消法如下。而IE將每個項目後面擅自加上空格，補救是修改HTML，若以CSS設計無法用到。
▲語法
ul {
padding: 0;
margin: 0;
}
vertical-align 垂直對齊
行內或是儲存格的文字位置。
▲語法
h1 { vertical-align: 0 } /*長度，高於基準線是正值，相反為負值，基線是0*/
h1 { vertical-align: 100% } /*0%是基線，100%一倍行高，類推*/
h1 { vertical-align: baseline } /*預設，繼承*/
h1 { vertical-align: super } /*上標*/
h1 { vertical-align: sub } /*下標*/
h1 { vertical-align: top } /*頂端*/
h1 { vertical-align: bottom } /*底部*/
h1 { vertical-align: text-top } /*對齊父box的頂端*/
h1 { vertical-align: text-bottom } /*對齊父box的底部*/
h1 { vertical-align: middle } /*對齊父box？的中間*/
z-index z軸順序
數字越大位置越高。預設auto。
▲範例
#asd { z-index: 2 }
#zxc { z-index: 1 }
雜談
其１
開新視窗沒有親和性？確實無法使用上一頁，但是我在網誌幾乎全用開新視窗（target=_blank），因為新的連結覆蓋掉正在閱讀的頁面，當看完新連結的東西，想回頭找上篇文章讀到哪就找不到了。原因二，按上一頁又需要重新載入網頁的圖片、檔案很大的音樂檔、會lag的JAVA Script或flash，對於目前頻寬低的台灣我並不認為是好方法。瀏覽器的分頁功能可以取代開新瀏覽器的遲緩。
其２
剩下書末的CSS字典附錄，這本過兩公分厚的書就解決啦。書中有敎自架站中CSS的ID和class設定法，兩欄、三欄式以上，或是頁首、頁尾與導覽列如何不重疊。只是我應該不會再去架站，反正網誌對於我已經十分足夠XD這本書的作者某方面有點過於理想。不過制定標準就是這樣，先訂下高標準，跟著做的人才能有點水平。
留言列表
【Comic】漫畫 (6)
