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