<html>\n<div style="-moz-column-count: 2;-moz-column-gap: 1.5em;"><p>過去~不熟悉CSS的人，想要特別的在一段文字上加邊框，非得使用格式較複雜的表格標籤來做，這篇特地的使用最簡單的方式，與各位分享如何簡單的在一段文字上加上醒目的邊框。</p><p>這個方法只要在可以支援HTML輸出的發布表格都可以使用。\n</p><blockquote>文字上加邊框原始碼範例如下：\n<p <span style="color: rgb(255, 0, 0);">style="border:1px solid #ff0000"</span>>文字加邊框</p>\n呈現的樣式如下：<p style="border: 1px solid rgb(255, 0, 0);">文字加邊框</p></blockquote><h3>解說：</h3><p>我們先用了段落標籤<p>來包覆我們要強調的一段文字，後在其後面加上 style的屬性，這是CSS用的屬性，然後在冒號與冒號間加上border:1px solid #ff0000。</p><p>border是CSS的邊框複合屬性，可以用最簡單的方式形成簡單的邊框樣式。border:後面的正確寫法如下\n</p><blockquote>border:邊框寬度 邊框樣式 邊框顏色\n</blockquote>邊框寬度我習慣用像素(px)來定義，比較好掌控；邊框的樣式請參考<a href="http://crow.myweb.hinet.net/css/css2/c_borderstyle.html">這裡的介紹</a>，選出你喜愛的填到相對的位置上；而顏色請參照<a href="http://xxx.stenly.com/color_list.htm">這裡</a>，依樣選出你喜愛的填到相對位置上即可。<p></p>\n<h3>進階應用</h3><p>如果想要文字邊框留點空白，讓視覺上比較好看，可以參考以下的寫法：\n</p><blockquote><p style="border:1px solid #ff0000<span style="color: rgb(255, 0, 0);">;padding:10px</span>;">文字加邊框</p>\n呈現的樣式如下：\n<p style="border: 1px solid rgb(255, 0, 0); padding: 10px;">文字加邊框</p></blockquote><p>由於留白這個動作不屬於border管轄，所以在邊框顏色的後面先加上分號( ; )，告知邊框的宣告已經結束，然後加上padding屬性，padding則是內距的快速屬性，用來控制區塊內留白，請參照<a href="http://enginesp.googlepages.com/css_zone.gif">此圖</a>了解padding在區塊中扮演的角色。同樣的，我個人習慣用像素來控制留白的大小。</p><p>\n如果想要加上背景色來達到更強調的效果，請參考以下的寫法：</p><blockquote><p style="border:1px solid #ff0000;padding:10px<span style="color: rgb(255, 0, 0);">;background :#eeffee</span>">文字加邊框</p>\n呈現的結果如下：\n<p style="border: 1px solid rgb(255, 0, 0); padding: 10px; background: rgb(238, 255, 238) none repeat scroll 0% 50%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;">文字加邊框</p></blockquote><p>與上面留白一樣，背景亦不屬於內距，也不屬於邊框所控制，所以在內距屬性的後面先加上分號( ; )，告知內距屬性宣告結束，然後加上background屬性，background是區塊背景的複合屬性。同樣利用上述說的色碼表來貼上自己喜歡顏色的色碼，即可完成。</p><h3>想要一勞永逸的話...</h3><p>經過上面由淺入深的說明，應該已經對這樣簡單的方法感到很有趣了，但是，如果一段文章內需要下很多這樣的樣式時，不免還是顯得麻煩，且維護寫過的文章也會變的比較不方便。</p><p>如這篇文章，我大量的使用的"引用"標籤(<blockquote>)來顯示範例，而且都有其專屬樣式，如果藉由上面的作法，那麼原始碼看起來將會相當的雜亂。</p><p>所幸，多半的部落格都提供了範本的設定，給你妳套用的範本原始碼讓你可以加上想加的東西，因此，我們也可以在範本中加上標籤專屬樣式，以後只需要簡單的打上標籤就可以美美的了。</p><p>一般來說，替網頁裡面的每個標籤加上樣式，都會在html中的<head></head>之間加上CSS原始碼，如我的部落格，替<blockquote>加上的專屬標籤如下：</p><blockquote><style>\n...........\nblockquote {\nmargin:1em 20px;\ndisplay:block;\npadding:10px;\ncolor:#993333;\nborder: 1px solid rgb(153, 153, 153);\nbackground: #ffffee;\n}\n..............\n</style></blockquote><p></p><p>你會發現寫法與上面的範例完全不同，以下用中文解釋上面的寫法結構，以及套用最上面的範例會怎麼呈現。</p><blockquote>中文解釋結構如下：\n<style>\n...........\nHTML標籤 {\nCSS樣式屬性\nCSS樣式屬性\n......\n}\n..............\n</style></blockquote><blockquote>\n最上面的範例宣告於HEAD之間的方法如下...\n<style>\n...........\np {\nborder:1px solid #ff0000;\npadding:10px;\nbackground :#eeffee;\n}\n..............\n</style></blockquote></div>\n</html>
關於本站
/***\n|''Name:''|LegacyStrikeThroughPlugin|\n|''Description:''|Support for legacy (pre 2.1) strike through formatting|\n|''Version:''|1.0.1|\n|''Date:''|Jul 21, 2006|\n|''Source:''|http://www.tiddlywiki.com/#LegacyStrikeThroughPlugin|\n|''Author:''|MartinBudden (mjbudden (at) gmail (dot) com)|\n|''License:''|[[BSD open source license]]|\n|''CoreVersion:''|2.1.0|\n|''Browser:''|Firefox 1.0.4+; Firefox 1.5; InternetExplorer 6.0|\n\n***/\n\n//{{{\n\n// Ensure that the LegacyStrikeThrough Plugin is only installed once.\nif(!version.extensions.LegacyStrikeThroughPlugin)\n {\n version.extensions.LegacyStrikeThroughPlugin = true;\n\nconfig.formatters.push(\n{\n name: "legacyStrikeByChar",\n match: "==",\n termRegExp: /(==)/mg,\n element: "strike",\n handler: config.formatterHelpers.createElementAndWikify\n});\n\n} // end of "install only once"\n//}}}\n
[[關於本站]]\n<<allTags>>
<<tabs txtMainTab Timeline Timeline TabTimeline All 'All tiddlers' TabAll Tags 'All tags' TabTags More 'More lists' TabMore>>
CSS排版教學
CSSMAX
/*{{{*/\n* html .tiddler {\n height: 1%;\n}\n\nbody {\n font-size: .75em;\n font-family: arial,helvetica;\n margin: 0;\n padding: 0;\n}\n\nh1,h2,h3,h4,h5 {\n font-weight: bold;\n text-decoration: none;\n padding-left: 0.4em;\n}\n\nh1 {font-size: 1.35em;}\nh2 {font-size: 1.25em;}\nh3 {font-size: 1.1em;}\nh4 {font-size: 1em;}\nh5 {font-size: .9em;}\n\nhr {\n height: 1px;\n}\n\na{\n text-decoration: none;\n}\n\ndt {font-weight: bold;}\n\nol { list-style-type: decimal }\nol ol { list-style-type: lower-alpha }\nol ol ol { list-style-type: lower-roman }\nol ol ol ol { list-style-type: decimal }\nol ol ol ol ol { list-style-type: lower-alpha }\nol ol ol ol ol ol { list-style-type: lower-roman }\nol ol ol ol ol ol ol { list-style-type: decimal }\n\n.txtOptionInput {\n width: 11em;\n}\n\n#contentWrapper .chkOptionInput {\n border: 0;\n}\n\n.externalLink {\n text-decoration: underline;\n}\n\n.indent {margin-left:3em;}\n.outdent {margin-left:3em; text-indent:-3em;}\ncode.escaped {white-space:nowrap;}\n\n.tiddlyLinkExisting {\n font-weight: bold;\n}\n\n.tiddlyLinkNonExisting {\n font-style: italic;\n}\n\n/* the 'a' is required for IE, otherwise it renders the whole tiddler a bold */\na.tiddlyLinkNonExisting.shadow {\n font-weight: bold;\n}\n\n#mainMenu .tiddlyLinkExisting, \n#mainMenu .tiddlyLinkNonExisting,\n#sidebarTabs .tiddlyLinkNonExisting{\n font-weight: normal;\n font-style: normal;\n}\n\n#sidebarTabs .tiddlyLinkExisting {\n font-weight: bold;\n font-style: normal;\n}\n\n.header {\n position: relative;\n}\n\n.header a:hover {\n background: transparent;\n}\n\n.headerShadow {\n position: relative;\n padding: 4.5em 0em 1em 1em;\n left: -1px;\n top: -1px;\n}\n\n.headerForeground {\n position: absolute;\n padding: 4.5em 0em 1em 1em;\n left: 0px;\n top: 0px;\n}\n\n.siteTitle {\n font-size: 3em;\n}\n\n.siteSubtitle {\n font-size: 1.2em;\n}\n\n#mainMenu {\n position: absolute;\n left: 0;\n width: 10em;\n text-align: right;\n line-height: 1.6em;\n padding: 1.5em 0.5em 0.5em 0.5em;\n font-size: 1.1em;\n}\n\n#sidebar {\n position: absolute;\n right: 3px;\n width: 16em;\n font-size: .9em;\n}\n\n#sidebarOptions {\n padding-top: 0.3em;\n}\n\n#sidebarOptions a {\n margin: 0em 0.2em;\n padding: 0.2em 0.3em;\n display: block;\n}\n\n#sidebarOptions input {\n margin: 0.4em 0.5em;\n}\n\n#sidebarOptions .sliderPanel {\n margin-left: 1em;\n padding: 0.5em;\n font-size: .85em;\n}\n\n#sidebarOptions .sliderPanel a {\n font-weight: bold;\n display: inline;\n padding: 0;\n}\n\n#sidebarOptions .sliderPanel input {\n margin: 0 0 .3em 0;\n}\n\n#sidebarTabs .tabContents {\n width: 15em;\n overflow: hidden;\n}\n\n.wizard {\n padding: 0.1em 0em 0em 2em;\n}\n\n.wizard h1 {\n font-size: 2em;\n font-weight: bold;\n background: none;\n padding: 0em 0em 0em 0em;\n margin: 0.4em 0em 0.2em 0em;\n}\n\n.wizard h2 {\n font-size: 1.2em;\n font-weight: bold;\n background: none;\n padding: 0em 0em 0em 0em;\n margin: 0.2em 0em 0.2em 0em;\n}\n\n.wizardStep {\n padding: 1em 1em 1em 1em;\n}\n\n.wizard .button {\n margin: 0.5em 0em 0em 0em;\n font-size: 1.2em;\n}\n\n#messageArea {\nposition:absolute; top:0; right:0; margin: 0.5em; padding: 0.5em;\n}\n\n*[id='messageArea'] {\nposition:fixed !important; z-index:99;}\n\n.messageToolbar {\ndisplay: block;\ntext-align: right;\n}\n\n#messageArea a{\n text-decoration: underline;\n}\n\n.popup {\n font-size: .9em;\n padding: 0.2em;\n list-style: none;\n margin: 0;\n}\n\n.popup hr {\n display: block;\n height: 1px;\n width: auto;\n padding: 0;\n margin: 0.2em 0em;\n}\n\n.listBreak {\n font-size: 1px;\n line-height: 1px;\n}\n\n.listBreak div {\n margin: 2px 0;\n}\n\n.popup li.disabled {\n padding: 0.2em;\n}\n\n.popup li a{\n display: block;\n padding: 0.2em;\n}\n\n.tabset {\n padding: 1em 0em 0em 0.5em;\n}\n\n.tab {\n margin: 0em 0em 0em 0.25em;\n padding: 2px;\n}\n\n.tabContents {\n padding: 0.5em;\n}\n\n.tabContents ul, .tabContents ol {\n margin: 0;\n padding: 0;\n}\n\n.txtMainTab .tabContents li {\n list-style: none;\n}\n\n.tabContents li.listLink {\n margin-left: .75em;\n}\n\n#displayArea {\n margin: 1em 17em 0em 14em;\n}\n\n\n.toolbar {\n text-align: right;\n font-size: .9em;\n visibility: hidden;\n}\n\n.selected .toolbar {\n visibility: visible;\n}\n\n.tiddler {\n padding: 1em 1em 0em 1em;\n}\n\n.missing .viewer,.missing .title {\n font-style: italic;\n}\n\n.title {\n font-size: 1.6em;\n font-weight: bold;\n}\n\n.missing .subtitle {\n display: none;\n}\n\n.subtitle {\n font-size: 1.1em;\n}\n\n.tiddler .button {\n padding: 0.2em 0.4em;\n}\n\n.tagging {\nmargin: 0.5em 0.5em 0.5em 0;\nfloat: left;\ndisplay: none;\n}\n\n.isTag .tagging {\ndisplay: block;\n}\n\n.tagged {\nmargin: 0.5em;\nfloat: right;\n}\n\n.tagging, .tagged {\nfont-size: 0.9em;\npadding: 0.25em;\n}\n\n.tagging ul, .tagged ul {\nlist-style: none;margin: 0.25em;\npadding: 0;\n}\n\n.tagClear {\nclear: both;\n}\n\n.footer {\n font-size: .9em;\n}\n\n.footer li {\ndisplay: inline;\n}\n\n* html .viewer pre {\n width: 99%;\n padding: 0 0 1em 0;\n}\n\n.viewer {\n line-height: 1.4em;\n padding-top: 0.5em;\n}\n\n.viewer .button {\n margin: 0em 0.25em;\n padding: 0em 0.25em;\n}\n\n.viewer blockquote {\n line-height: 1.5em;\n padding-left: 0.8em;\n margin-left: 2.5em;\n}\n\n.viewer ul, .viewer ol{\n margin-left: 0.5em;\n padding-left: 1.5em;\n}\n\n.viewer table {\n border-collapse: collapse;\n margin: 0.8em 1.0em;\n}\n\n.viewer th, .viewer td, .viewer tr,.viewer caption{\n padding: 3px;\n}\n\n.viewer table.listView {\n font-size: 0.85em;\n margin: 0.8em 1.0em;\n}\n\n.viewer table.listView th, .viewer table.listView td, .viewer table.listView tr {\n padding: 0px 3px 0px 3px;\n}\n\n.viewer pre {\n padding: 0.5em;\n margin-left: 0.5em;\n font-size: 1.2em;\n line-height: 1.4em;\n overflow: auto;\n}\n\n.viewer code {\n font-size: 1.2em;\n line-height: 1.4em;\n}\n\n.editor {\nfont-size: 1.1em;\n}\n\n.editor input, .editor textarea {\n display: block;\n width: 100%;\n font: inherit;\n}\n\n.editorFooter {\n padding: 0.25em 0em;\n font-size: .9em;\n}\n\n.editorFooter .button {\npadding-top: 0px; padding-bottom: 0px;}\n\n.fieldsetFix {border: 0;\npadding: 0;\nmargin: 1px 0px 1px 0px;\n}\n\n.sparkline {\n line-height: 1em;\n}\n\n.sparktick {\n outline: 0;\n}\n\n.zoomer {\n font-size: 1.1em;\n position: absolute;\n padding: 1em;\n}\n\n.cascade {\n font-size: 1.1em;\n position: absolute;\n overflow: hidden;\n}\n/*}}}*/
<<allTags>>
<html>\n<h3>簡述XHTML1.0</h3>\n<p>XHTML是當前HTML版的繼承者。HTML語法要求比較鬆散，這樣對網頁編寫者來說，比較方便，但對於機器來說，語言的語法越鬆散，處理起來就越困難，對於傳統的電腦來說，還有能力相容鬆散語法，但對於許多其他設備，比如手機，難度就比較大。因此產生了由DTD定義規則，語法要求更加嚴格的XHTML。</p>\n<p>在XHTML1.0，只是個過渡階段的版本，並沒有開始對已經是不良結構的標籤大加撻伐，但已經開始建議（或是刪除）不可以使用以下標籤（標示常用的）：</p>\n<ul>\n<li><strong style="color: rgb(255, 0, 0);"><b></strong>粗體標籤：仍舊可以使用，但建議用<strong>，具有語意的標籤替代。</li>\n<li><strong style="color: rgb(255, 0, 0);"><i></strong>斜體標籤：仍舊可以使用，但建議用<em>，具有語意的標籤來替代。</li>\n<li><strong style="color: rgb(255, 0, 0);"><u></strong>底線標籤：不可使用，欲使用底線，只能用CSS的<strong style="color: rgb(51, 204, 0);">text-decoration</strong><span style="color: rgb(51, 204, 0);">:</span><strong style="color: rgb(51, 204, 0);">underline</strong>來顯示。</li>\n<li><strong style="color: rgb(255, 0, 0);"><br></strong>強制斷行標籤：不可使用，需補上結尾符號，改寫成<br /></li>\n<li><strong style="color: rgb(255, 0, 0);"><hr></strong>水平線標籤：不可使用，需補上結尾符號，改寫成<hr /></li>\n<li><strong style="color: rgb(255, 0, 0);"><img></strong>圖片標籤：不可使用，需補上結尾符號，改寫成<img src="....." /> 另外，每個img標籤都必須要含有alt屬性，屬性內容可以留白</li>\n<li><a>超連結標籤的<strong style="color: rgb(255, 0, 0);">target</strong>屬性：target屬性及代表超連結被點擊時，指定開啟的視窗框架，講明白一點，就是<span style="color: rgb(255, 0, 0);">再也不能製作開新視窗的超連結了</span>。</li>\n</ul>\n<h3>XHTML2.0草案</h3>\n<p>XHTML 2.0 的第一個工作草案於 2002 年 8 月 5 日發佈，一大新聞就是取消了向後相容性，換句話說，使用XHTML為基礎的網頁，就無法使用以下的標籤：</p>\n<ul>\n<li><strong style="color: rgb(255, 0, 0);"><b></strong>粗體標籤：用<strong>，具有語意的標籤替代。</li>\n<li><strong style="color: rgb(255, 0, 0);"><i></strong>斜體標籤：用<em>，具有語意的標籤來替代。</li>\n<li><strong style="color: rgb(255, 0, 0);"><br></strong>強制斷行標籤：在XHTML1.0建議的補上結尾符號<br />也一併不支援，改用具有結尾標籤的<line>替代。</li>\n<li><strong style="color: rgb(255, 0, 0);"><h1>到<h6></strong>章節標籤：改用單純的<h>標籤代表，然後用<section>標籤來區分重要性。 </li>\n<li><strong style="color: rgb(255, 0, 0);"><a></strong>超連結標籤：在XHTML2.0將會完全的功成身退，在XHTML裡的所有標籤都將可具備超連結的功能（href屬性），比如：\n<blockquote><em href="http://tw.yahoo.com" >雅虎奇摩網站</em><br/>\n<p href="http://www.w3c.com">這是一個段落，點擊這個段落也可以啟動超連結</p></blockquote></li><li><strong style="color: rgb(255, 0, 0);"><img/></strong>圖片標籤：這個標籤也將被刪去，替代他的是也已經存在很久的<object>。使用 object 標籤的主要優點在於，它被設計成向下串連。換句話說，如果瀏覽器不能顯示一個特定物件，那麼它將顯示該物件的內容。例如，遇到下列程式碼片斷的瀏覽器首先試圖載入電影。如果載入電影失敗，則載入圖像。如果載入圖像失敗，那麼它只顯示純文字。<blockquote> <object data="rides.mpeg" type="application/mpeg"><br/>\n\n <object data="rollercoaster.jpg" type="image/jpg"><br/>\n\n Jack tries to expand his horizons on the racing coasters.<br/>\n </object><br/>\n\n</object></blockquote></li></ul>\n<h3>現在擔心還太早</h3>\n<p> 2002 年 8 月 5 日的 XHTML 2.0 工作草案中唯一可以確定的事就是不能確定任何事情。 在現在的草案和被作為建議書採納的過程中，幾乎可以肯定它將在某些方面發生變化。又，已經累積上億頁的舊版html資料龐大，我相信各家瀏覽器一定盡可能的繼續支持向後相容，所以，新的XHTML最大受惠者，還是屬於記憶體較小，處理能力較差的小型瀏覽器（如：手機）。</p>\n</html>
本站是 intermax 部落格 裡面 所有的css技巧教學備份網站 可以利用左側選單的 'tags' 來找尋相關標籤的實際用法