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