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   
繼續閱讀
無法自動斷行

今天在調整一個某部落格的CSS，輸入了一堆TESTTESTTESTTESTTEST…… 居然…… 出現無法斷行的狀況，天啊～這怎麼可能   Σ(;ﾟдﾟ) Σ(;ﾟдﾟ) 在慌張許久之後，找了位同事出手相救，只見她淡定平靜地跟我說

輸入全形文字或因為某些符號就有可能發生這種狀況，不過一般來說是不用特定處理斷行。如果發生這個狀況，只要輸入CSS的斷行指令強制斷行就可以

[斷行的語法] 自動換行要在該區塊加入

div{
word-wrap: break-word;
word-break: normal;
}

英文單詞斷行

div{
word-break:break-all;
}

強制不換行

div{
white-space:nowrap;
}

因為我需要得是強制斷行，所以在該區塊加上指令後，歐耶～歐耶～它好了(*P≧▽≦q)

  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   
繼續閱讀
製作一個有Mouseover效果的Button (CSS+JS)

一直很想試試看自己做一個有Mouseover效果的Button，這次參考了重灌狂人的文章提供的語法，在修改之後就出來囉！

  • Mouseover變換文字顏色
  • 固定在該區塊的左邊
  • 文字上下左右置中
  • Clicks直接換頁

【成品】

Mousever看看

   

 

【範例語法】

<div style="float: left;">
    <div style="width: 180px; height: 50px; font-size: 25px; color: #777777;
		background-color: #ffeedd;
		border-style: dashed;
		line-height: 50px;
		text-align: center;
		cursor: pointer;"
		title="Mousever看看 "
		onclick="location.href = '目標連結'"
		onmouseover="this.style.color='#CC5533';"
		onmouseout="this.style.color='#777777';">
		Mousever看看
	</div>
</div>
  2013-08-28      ez   
繼續閱讀
IFrame 透明背景

IFrame的HTML修改為

<iframe　src="SourcePage.htm" allowtransparency="true"></iframe>

IFrame的頁面HTML修改為

  2011-11-29      ez      CSS
繼續閱讀