CSS 3 語法介紹
CSS 的語法由三個部份組成. 分別是 selector 選擇子, property 屬性,
及 value數值:其構成的語法就像底下的範例. 這個範例僅是說明CSS
語法的構成.並不是真實可用的CSS 語法指令
selector {property:value}
這個選擇子通常是您想要定義的HTML 標註語言的要素/元素 或標簽. 屬性這個用來定義您想要改變的屬性內容,每一個屬性可以給予一個含以上的數值., 在屬性與數值之間是用 : 冒號加以區隔最外層則是以 {} 大括弧包覆。
body {color:black}
注意事項:如果數值是多個字元的組成,您必需為這個數值以引號包覆,請參考下例:
p {font-family:"sans serif"}
注意事項: 如果您想要指定更多的屬性，您必需使用; 分號來區別多個屬性,請參考底下的範例
這個範例展示了如何將文字區段指定為文字居中,並指定文字顏色為紅色.
p {text-align:center;color:red}
另外為了使CSS 樣式定義更方便閱讀.您可以每一行描述一個屬性內容,請參考底下的範例
p
{
text-align:center;
color:black;
font-family:arial
}
CSS 3 語法介紹
CSS 的語法由三個部份組成. 分別是 selector 選擇子, property 屬性,
及 value數值:其構成的語法就像底下的範例. 這個範例僅是說明CSS
語法的構成.並不是真實可用的CSS 語法指令
selector {property:value}
這個選擇子通常是您想要定義的HTML 標註語言的要素/元素 或標簽. 屬性這個用來定義您想要改變的屬性內容,每一個屬性可以給予一個含以上的數值., 在屬性與數值之間是用 : 冒號加以區隔最外層則是以 {} 大括弧包覆。
body {color:black}
注意事項:如果數值是多個字元的組成,您必需為這個數值以引號包覆,請參考下例:
p {font-family:"sans serif"}
注意事項: 如果您想要指定更多的屬性，您必需使用; 分號來區別多個屬性,請參考底下的範例
這個範例展示了如何將文字區段指定為文字居中,並指定文字顏色為紅色.
p {text-align:center;color:red}
另外為了使CSS 樣式定義更方便閱讀.您可以每一行描述一個屬性內容,請參考底下的範例
p
{
text-align:center;
color:black;
font-family:arial
}
群組化 Grouping
您也可以將選擇子群組化,每一個選擇子間以逗號區別.底下的範例將展示如何將HTML 中標題元素/要素 相關的選擇子,群組起來並指定為綠色的文字.
h1,h2,h3,h4,h5,h6
{
color:green
}
類別選擇子 The class Selector
使用類別選擇子您可以為相同的HTML 元素/要素 定義不同的樣式,以字段來說 HTML 的要素/元素是<P> 假設您想為字段設定不同的排序分別,一個向右對齊 另一個向中對齊. 您可以參考底下的範例,底下的範例是寫在CSS 樣式表指令區.
<head>
<style type="text/css">
p.right {text-align:right}
p.center {text-align:center}
</style>
</haed>
您可以使用類別屬性在您的HTML 文件中:
<p class="right">This paragraph will be right-aligned.</p> <p class="center">This paragraph will be center-aligned.</p>
注意事項:您也可以指定一個以上的類別屬性給HTML 元素/要素,請參考底下的範例
<p class="center bold">This is a paragraph.</p>
像是上面的範例裏就是同時指定了類別選擇子 center 及類別選擇子 bold 給這個字段
您也可以省略類別選擇子的標記名稱,來定義一個可以使用在所有HTML 要素/元素的樣式.
並且所有使用此一類別運算子的HTML 要素/元素皆為同一階層. 請參考以下範例:
.center {text-align:center}
在底下的範例裏,h1 及 p 這兩個html 元素/要素. 同時都使用了這個省略了標記名稱的類別選擇子.這兩個元素/要素都套用了 .center 這個省略了標記名稱的類別選擇子的樣式規則. 都是文字排序居中的效果, 使用這樣的類別選擇子可以大大簡化CSS樣式表,避免為同樣的樣式撰寫過多冗長的指令,在這個範例中您就可以不必為 P 字段 跟 H1 標題字段分別定義各別的文字居中樣式.
<h1 class="center">This heading will be center-aligned</h1> <p class="center">This paragraph will also be center-aligned.</p>
注意事項: 您必需注意不能使用數值符號在定義類別選擇子的名字前面.
.1234center
在學習CSS 前您有什麼是必需知道的?
在您繼續閱讀底下的教學前.您必需對 HTML/XHTML 有一些基本的了解, 當然也可以依循底下我發佈的教學
慢慢的對HTML/XHTML 有一個概括的了解,我將不會介紹所有的HTML/XHTML 只會概略提到跟底下CSS 教學相關的部份.
什麼是CSS?
CSS 是Cascading Style Sheets 的縮寫.一般的翻譯是標準樣式表
它可以用來定義如何來表現/顯示 HTML 要素/元素.
它可以用來存儲一般的樣式表定義
它可以被加入到 HTML 4.0 的網頁標註語言來解決及強化HTML 4.0 的功能
外部定義的樣式表可以儲存很多並簡化網頁的定義
外部定義的樣式表可以被存儲在單一的檔案中. 其副檔名為 .CSS
多重的樣式定義可以經由一個樣式來套用
CSS 發展到現在已經是 3.0版了, 3.0 向下相容 2.0 其較早版本的樣式定義,也包括了一些針對特別瀏覽器的延伸子集
底下先對網頁的背景的相關語法做個解釋
CSS Background
CSS 的背景屬性定義 HTML 中關於背景要素的影嚮,請看底下的網頁範例
<html>
<head>
<style type="text/css">
body {background-color: yellow}
h1 {background-color: #00ff00}
h2 {background-color: transparent}
p {background-color: rgb(250,0,255)}
</style>
</head>
<body>
<h1>This is header 1</h1>
<h2>This is header 2</h2>
<p>This is a paragraph</p>
</body>
</html>
<BODY> </BODY> 等等,這些全是HTML 標註語言的標簽. 用以定義不同的作用區域,
像是 <HTML> 到 </HTML> 中間所包含的就是 HTML 標註語言的主體. 而 <BODY> 到 </BODY> 則是 HTML檔案中的主要標簽,用來存儲文字,聲音,影像等等. 當然還要加上更多的細節標簽才能達到上述的應用
<style type="text/css">
body {background-color: yellow}
h1 {background-color: #00ff00}
h2 {background-color: transparent}
p {background-color: rgb(250,0,255)}
</style>
上面的CSS 指令包含了四行對HTML 元素/要素的定義,
分別是 body h1,h2,p 等
簡單的來提一下 body{} 內的指令. 這樣就可以把
這個網頁的背景顏色指定為 yellow 黃色.
這兒關於顏色的定義,有三種指定顏色的方式.
一. 就是字面上的定義. 例如上例 yellow 就是黃色
二. 16進位的色碼表示,例如 #00ff00
三. RGB 三元色的色碼表示.
還有一個特別的顏色應用 transparent 這個是指透明色. 上面的顏色定義看起來很繁複. 這的確也是但是要利用適當的工具就可以好好的指定自己想要用的顏色.
http://www.w3schools.com/HTML/tryit.asp?filename=tryhtml_basic
上面這個網址是一個小型的即時的網頁編輯頁面,您可以在這練習您剛學到的指令.
接下來請您到下述的網址去下載 ColorSelector
http://www.fujitsu.com/global/accessibility/assistance/cs/download.html
這兒可以下載英文版或簡體中文版,不過建議使用正體中文作業系統朋友們. 下載英文版就可以了
功能很強大,操作很簡單. 若是下載簡體中文版在使用上會碰到不些字碼顯示不正確. 還是用英文版就好了
http://www.elekta.com/assets/VMAT-Elekta-Format_1.jpg
http://www.elekta.com/
圖片出處,這有這更多詳盡的資料是英文站
以下資料轉載自 人間福報電子版. 詳細出處請看底下的網頁連結
http://www.merit-times.com.tw/NewsPage.aspx?Unid=124601
首套動態療法 360度照射 病患不用麻醉 腦瘤或已轉移到腦部的腫瘤最適用
【本報台北訊】治療癌症又有新選擇。台北醫學大學附設醫院引進國內第一套動態式弧形放射線治療設備，三百六十度全方位的放射線射出角度，可將不規則形狀或躲在器官或組織後面的癌細胞逐一殺死，一舉將癌症治療由「放射治療」提升到「放射手術」的層次。
台北醫學大學校長邱文達昨天帶領醫療團發表這項新技術。北醫放射腫瘤科主任、癌症中心執行長邱仲峰表示，近年癌症治療突飛猛進，從可避免鼻咽癌患者治療後唾液腺遭破壞的「強度調控放射治療技術」（IMRT），進展到可有效治療不規則形狀癌症的「影像導引放射治療技術」（IGRT），如今，可全方位照射癌細胞的「動態式弧形放射治療技術」（VMAT），無疑創下第三個里程碑。
邱仲峰表示，VMAT整合IMRT及IGRT的優點，能量高達一千萬伏特的光子束可三百六十度、全方位地射入體內，再調控不同劑的放射線，把不規則形狀或躲在器官後面的癌細胞殺死，治療癌症快、狠、準，且能減少治療後之副作用，提升病人存活率。
治療前一周，癌患要到醫院做術前全身模型，再經三D電腦斷層攝影（CT），做出癌細胞立體定位，還把呼吸造成的身體位移算出。這些數據經電腦運算，先在全身模型上測試一次，確認無誤後，再為癌患治療。
邱仲峰說，整個治療才五分鐘，癌患不用麻醉。一般說來，腦瘤或已轉移到腦部的腫瘤，因精準度的要求較高，最適合接受這種手術，肺癌、胰臟癌、膽管癌、攝護腺癌及子宮頸癌等惡性腫瘤，也可列為考慮對象。
附註:
國內已有此設備的除了台北醫學大學附設教學醫院,尚有其他醫學院所附設醫院亦能提VMAT 設備的相關治療.相關訊息仍在收集中. 敬請期待
以下資料轉載自 自由時報電子報. 詳細出處請看底下的網頁連結
http://www.libertytimes.com.tw/2009/new/feb/26/today-north8-2.htm
VMAT小檔案
陽大醫院放射腫瘤科醫師劉育昌說，「全體積強度調控弧形治療」（VMAT）就像巡曳飛彈一樣有精準的導引裝置，可精準定位腫瘤位置，治療時間也大幅縮短。（記者游明金攝）
可縮短治療時間
●陽大醫院放射腫瘤科醫師劉育昌說，「全體積強度調控弧形治療」（VMAT）（右圖：記者游明金攝）就像巡曳飛彈一樣有精準的導引裝置，可精準定位腫瘤位置，治療時間也大幅縮短。
傳統的強度調控放射治療、螺旋刀、螺旋光子刀電腦斷層治療機、多模式螺旋斷層放射治療等，治療時間約15到20分鐘，「全體積強度調控弧形治療」只要7分鐘時間，患者不必在治療台躺那麼久時間，可減少身體亂動造成治療的誤差或副作用。
頭頸部癌（例如鼻咽癌、口咽癌）、攝護腺癌、肺癌、肝癌、食道癌、直腸癌、子宮頸癌及脊椎骨轉移等，都可使用VMAT治療。
VMAT整個療程約1至2個月，不過，健保不給付影像導引，患者要自費治療，外縣市各大醫院收費因療程不同約3萬元到6萬元，陽大醫院收費還在研擬中。（記者游明金）
以下資料轉載自 財團法人奇美醫院 放射腫瘤科. 詳細出處請看底下的網頁連結
http://www.chimei.org.tw/main/right/right01/cmh_department/55700/5_4_LA_VMAT.htm
文 :
可執行 IGRT & VMAT 技術之直線加速器
英文 :
Linear Accelerator with Image Guided Radiation Therapy (IGRT) and Volumetric Modulated Arc Therapy (VMAT) technique
近年來，放射線治療技術的演進已由二度空間 ( 2D ) 時代進展至三度空間順形放射線治療 ( 3DCRT ) ，直至今日普遍的強度調控放射線治療 ( Intensity Modulated Radiation Therapy ， IMRT ) 。但無論使用何種技術，能精確的治療到腫瘤位置才能提高治療品質與成效。 影像導引放射線治療 ( Image Guided Radiation Therapy，I GRT ) 技術的出現正解決了治 療間因擺位誤差造成治療錯誤的可能性 。 所謂 影像導引放射線治療是指利用放射治療機器本身內建或其他外加的影像導引裝置，如 EPID ( Electronic Portal Image Device ) 或外加的 x 光機與 OBI ( On-board imager ) ﹔透過每次治療前由影像導引系統取得的影像來確認治療位置是否正確無誤。
本科於 97 年 5 月引進 Varian Clinac iX 直線加速器，此型加速器除了原有的 EPID 外，還外加可執行 KV cone beam-CT 的 OBI 裝置，因此病人於每次執行放射線治療前，除了可以二度空間的 X 光影像來確認治療位置之 外；還能利用 KV cone beam-CT 來得到斷層掃描影像，可大幅提高放射線治療的精確性與治療品質。
放眼現今放射治療技術，強度調節放射治療 ( IMRT ) ，比三度空間順型治療 ( 3DCRT ) 有更好的腫瘤順形、強度調控和避開危及器官，增加腫瘤劑量與降低副作用之優勢。
無論IMRT所用的MLC是 step and shot 或 dynamic 方式，在時間上皆較3DCRT 方式長，換句話說，治療技術的精進也伴隨時間的增長。而時間增長時，病人有可能會移動，造成劑量之準確性下降，影響治療結果。
VMAT是種極為複雜精密之技術，在轉動治療機頭的同時，劑量率，多鉛葉準直儀會隨病人之治療範圍之變動，相較IMRT而言，治療時間更短，因病人移動而有的不準確性更低，有更好的腫瘤順形，更具備增加腫瘤控制率與降低副作用之優勢。
一般我們若是不小心生了病.有時醫生可能未能詳細聆聽您的病情或者您一時疏漏而未能詳盡告之病史及用藥禁忌對何種藥物不適應或是對某種藥物過敏.
這樣往往會發生一些意料之外的事.台灣目前是醫生開診方.再去藥局拿藥.,一般都會主動掣發
全民健康保險療醫療費用明細表及收據. 如碰到未主動發給的, 這對您的用藥安全是一大隱憂.
碰到這種情形不必客氣,直接找醫生反應. 若敢置之不理或藉詞推託一律向健保局申訴.以維謢您的用藥安全.
雖然那張全民健康保險療醫療費用明細表及收據,上面寫的全是英文. 其實要查出藥品作用並不難.
接下來請您把您拿到的收據拿在手上.再去底下的網站查詢.
行政院衛生署藥物資訊網
http://drug.doh.gov.tw/index2.php
只要在左側輸入您要查詢的藥品英文名稱.即可了解該用的特性.副作用等.及用藥禁忌
只要短短花個幾分鐘.了解醫生所開給您吃的藥是什麼藥.一來吃的安心二來也可以明確的避免吃錯藥.過去也曾發生吃錯藥而送命的悲劇.我們都應該加以留意. 吃藥前稍微花點時間.了解一下您所吃的是什麼藥. 對於家裏有老人小孩的朋友們.則更應該留心注意. 因為醫生跟藥劑師都是人.只要是人都有可能發生人為疏失. 能夠好好保護自己及家人的.應該就是您自己了
如何在Blogger 文章裏使用表情符號?
當然也可以透過blogger 內建的圖片檔上傳作業來上傳要使用的表情圖案.但那可一次只能上傳一個圖檔.即使利用google site 也是只能一次上傳一個.目前皆尚未支援FTP 批次傳檔.
較好的方法是將表情圖檔下載回來後.解壓縮後直接上傳到Goolge 的Picasa 3網路相薄去
不過要做這個動作前先要去下載表情圖檔.首先介紹有很多表情圖檔的網站. 像是內陸的朋友常用的QQ表情圖檔,或是國內流行的彎彎,洋蔥頭皆有收錄.
http://cuteemoticon.blogspot.com
這兒以QQ Panda emoticon 做為範例說明.詳細下載位置如下
http://cuteemoticon.blogspot.com/2009/02/panda-emoticon.html
其實在上面這個連結裏是有一些可以立即拿來用的程式碼,您可以直接點選最左邊的圖示就會被導引到另一個頁面去. 請參考下圖. 不過這不是所有的表情圖示都有連結的.
QQ 的熊貓表情符號("不會是真的吧")
只要直接點選HTML CODE 再把它複製貼到您的部落格文章即可.底下有個IMG CODE 那是給一般論壇用的,通稱 BB 標簽,一般是不能直接在Blogger 部落格使用的
[IMG]http://i655.photobucket.com/albums/uu273/cebongipiet/panda%20emot/QQ_3710.gif[/IMG]
之前提到較好的方法是直接上傳到Picasa 去.但這裏您極有可能碰到下載好的表情圖案,在Picasa 無法找到的情況. 即使是您自認放到了正確的目錄底下. 例如 我的文件底下的我的圖片
會發生這樣的情況.請參考敝人在下我的另一篇文章
http://idarfan.blogspot.com/2009/05/damn-where-is-my-picture-part-of-picasa.html
接下來若您已成功將圖示檔傳上去Picasa 3 網路相薄. 當您要引用表情符號時. 只要登入到該相薄並選右側的連結到該相片. 如下圖所示的勾選. 再將那html code 貼到您的文章就可以了
要記得右下角的要勾選.要不然就會把您的相薄連結給洩露出去了. 嘿嘿
在編寫部落格時有的文章寫的很長不光是來看我部落格的人辛苦,連我都覺得心煩.
在網路上翻箱倒櫃兼侵門踏戶也參考了阿土伯的教學. 仔細一看他所分享的文章是在 2007年發佈的,也有下載來用. 部份功能是可以運做的. 但read more 繼續閱讀的功能硬是無法運作.
陸陸續續的也找到一些解法. 有些解法還真的是大費周章. 也真的很辛苦那些熱心分享的網友.敝人在下我也心懷感激.
只是一直在反覆思考,應該可能有更為簡便的方法吧. 於是又再去煩 google 大神. 終於找到我能用的解決方法. 在此特地撰文野人獻曝一番。
原文出處 : http://www.deluxetemplates.net/1999/04/automatic-thumbnail-and-read-more.html
要讓原本沒有read more 功能的部落格加上這個功能,首先請您登入您的部落格.
步驟一 :請點選版面配置的分頁. 再點選 "修改HTML" 請參考下圖
步驟二: 再來請注意到右側的 "展開小裝置副本" 必需勾選,
步驟三: 再來請搜尋html 內文.找出
<data:post.body/>
在這兒有一點要注意. 由於可能您所使用的模版跟我或那位熱心分享的作者有所不同,
若是搜尋不到完全相同的也別擔心. 以我用的模版來說它就不是
<data:post.body/>而是
<p><data:post.body/></p>差異不大.
接下來請您將這段HTML 碼給加上註解符號.使其無效. 請參考下圖
<!-- <data:post.body/> 加上註解,使其無效 -->
步驟四: 緊接這上述的步驟,底下加入如下的程式碼.請參考下圖
<script type='text/javascript'> summary_noimg = 430; summary_img = 340; img_thumb_height = 100; img_thumb_width = 120; </script> <script src='http://kfile.110mb.com/summary-post.js' type='text/javascript'/> <b:if cond='data:blog.pageType != "item"'> <div expr:id='"summary" + data:post.id'><data:post.body/></div> <script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script> <span class='rmlink' style='float:right'><a expr:href='data:post.url'>Read more</a></span> </b:if> <b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
步驟五: 按下儲存範本就行了
這樣可愛的Read more 就出現了
