CSS、HTML的字典＆自學網站

學習CSS、HTML一開始最大的入門就是，認識標籤與屬性，老實說～多成那樣，誰記得起來啊 ლ(⁰⊖⁰ლ)

這時候就相當需要一些字典型的網站，可以幫助使用時可以隨時查詢

以下來介紹幾個我常用，而且居然看得懂得字典款CSS教學網站 XDDD

 

Google 只要把CSS的標籤輸入Google，很快就可以找到相關的網頁介紹，十分便利 不過缺點是，很容易只會找到片段資訊

  2013-08-28      ez      好站分享
繼續閱讀
名詞解释 | 什麽是CSS、HTML？

記得剛開始的時候，真的稿不太懂什麽是CSS？什麽是HTML？不都是網頁原始碼，兩者有什麼不同？？

身為一個認真的企劃，我們當然都會去Google一下，然後…


CSS，層疊樣式表（Cascading Style Sheets，簡寫CSS） 又稱串樣式列表，一種用來為結構化文件（如HTML文件或XML應用）添加樣式（字型、間距和顏色等）的電腦語言，由W3C定義和維護。目前最新版本是CSS2.1，為W3C的候選推薦標準。CSS3現在已被大部分現代瀏覽器支援，而下一版的CSS4仍在開發過程中。
HTML，超文件標示語言（HyperText Markup Language，簡寫HTML） 是為「網頁建立和其它可在網頁瀏覽器中看到的訊息」設計的一種標示語言。HTML被用來結構化訊息——例如標題、段落和列表等等，也可用來在一定程度上描述文件的外觀和語意。1982年由蒂姆·伯納斯-李建立，由IETF用簡化的SGML（標準通用標示語言）語法進行進一步發展的HTML，後來成為國際標準，由全球資訊網協會（W3C）維護。 HTML檔案最常用的副檔名（副檔名）是.html，但是像DOS這樣的舊作業系統限制副檔名為最多3個字元，所以.htm副檔名也允許使用。現在.htm副檔名使用的比較少一些了，但是仍舊受到支援。編者可以用任何文字編輯器或所見即所得的HTML編輯器來編輯HTML檔案。 早期的HTML語法規則定義較為鬆散，這有助於不熟悉網路出版的人採用。網頁瀏覽器接受了這個事實，使之可以顯示語法不嚴格的網頁。隨著時間的流逝，官方標準漸漸趨於嚴格的語法，但是瀏覽器繼續顯示一些遠稱不上合乎標準的HTML。使用XML的嚴格規則的XHTML（可延伸超文件標示語言）是W3C計劃中的HTML的接替者。雖然很多人認為它已經成為當前的HTML標準，但是它實際上是一個獨立的、和HTML平行發展的標準。W3C目前建議使用XHTML 1.1、XHTML 1.0或者HTML 4.01標準編寫網頁，但已有不少網頁轉用較新的 HTML5 編碼撰寫（如Google）。 (以上資料來源︰維基百科)

 

天啊～～這到底在說什麼！可以說國語嗎？？？  ◢▆▅▄▃崩╰(〒皿〒)╯潰▃▄▅▇◣

  2013-01-27      ez   
繼續閱讀
如何讓文字或圖片元素在區塊(Div)中置中

在前兩次學習讓區塊<div>內的塊狀元素水平、上下置中，這次要來個相對容易的，讓區塊<div>內的單行元素進行水平垂直置中  

【文字、圖片水平置中】→在元素容器中加入text-align:center即可

文字水平置中

【Sample code】

<!--- CSS code --->
<style type='text/css'>
.container {
	background-color:#8D9FB3;
	width:200px;
	height:200px;
	text-align:center;
	}
</style>

<!--- HTML code  --->
<div class="container">
文字水平置中
</div>
<div class="container">
	<img src="http://www.ez2o.com/LIB/ezThumbnail/images/164/1.jpg"/>
</div>

   

  2013-08-28      ez   
繼續閱讀
如何讓區塊(DIV)在區塊(DIV)中 垂直置中

繼上次成功畫出水平置中之後，這次希望可以嘗試畫出區塊(DIV)在區塊(DIV)中垂直置中(專業速語會說讓塊狀元素中的塊狀元素垂直置中)

要把粉紅色塊垂直置中

 

【塊狀元素置中，容器高度不確定】 =>外層上下設置相同的padding

【Sample code】

<!--- CSS code --->
<style type='text/css'>
.outer {
	width:180px;
	background-color:#CCC;
	border:dashed #FFF 1px;
	padding-bottom:30px;
	padding-top:30px;
	}
.inner {
	width:160px;
	height:140px;
	background-color:#F99;
	}
</style>

<!--- HTML code  --->
<div class="outer">
  <div class="inner"></div>
</div>

→在外層的div設定相同padding-buttom、padding-top高度 → 優點：支援所有的瀏覽器，語法相當簡單 → 缺點：如果容器有固定高度就無法達到效果

  2013-08-28      ez   
繼續閱讀
如何讓區塊(DIV)在區塊(DIV)中 水平置中

今天想使用HTML畫出一個大格子中包著小格子 (換句話說就是讓多行內容區塊水平置中) 原本以為要讓小格子水平置中只要加上text-align:center，沒想到居然失敗ﾍ(○ﾟ△ﾟ)ﾉ 究竟要怎樣才能達到我想要得呢？ 【Demo】

 
123

【Sample code】

 <div style="width:180px; height:200px; margin:5px; padding:10px 5px; background-color:#CCC; border:dashed #FFF 1px; float:left;">
      	<div style="width:160px; height:140px; background-color:#F99; margin:auto;">
        </div>
        <div>
        123
        </div>
 </div>

[說明]

→在要置中的內層Div加入margin:auto;

上面這個方法相容IE6,IE7,IE8,FireFox,Safari…等多款瀏覽器，同時如果使用Table無法置中也用此法解決  ^^   參考資料︰Div或其他HtmlTag容器置中的方式(相容IE6,IE7,IE8,FireFox,Safari)  

  2013-08-28      ez   
繼續閱讀