2012年8月30日 星期四

CSS Class Selectors

CSS Class Selectors

類別選取:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS Class Selectors</title>
<style type="text/css">
html{
background-color: #000000; /*背景色為黑色*/
}

/*elements selector,選取所有的DIV元素*/
div{
width: 50px;        /*寬度*/
height: 50px;       /*高度*/
line-height: 50px;  /*讓文字垂直置中*/
text-align: center; /*讓DIV內部的文字水平置中*/
border: #808080;    /*邊的顏色*/
border-style: solid;/*border為實線*/
border-width: 1px;  /*border寬度*/
margin-bottom: 2px; /*margin下方寬度*/
        color:white;        /*文字的顏色*/
}

/**選取document裡所有有宣告class為top的元素*/
.top{
background-color:#1E646F;
}

.center{
background-color:#26681B;
}

.bottom{
background-color:#6F691E; 
}

</style>
</head>
<body>
<div class="top"></div>
<div class="center"></div>
<div class="bottom"></div>
</body>
</html>

結果:














DOM 上宣告多個Class ,並用CSS選取套用:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS Class Selectors</title>
<style type="text/css">
html{
background-color: #000000; /*背景色為黑色*/
}

/*elements selector,選取所有的DIV元素*/
div{
width: 100px;        /*寬度*/
height: 100px;       /*高度*/
line-height: 100px;  /*可讓文字垂直置中*/
text-align: center; /*讓DIV內部的文字水平置中*/
border: #808080;    /*邊的顏色*/
border-style: solid;/*border為實線*/
border-width: 1px;  /*border寬度*/
margin-bottom: 2px; /*margin下方寬度*/
color:white;
}

.sky{
background-color:#25B3F7;
font-weight: bold;
}

.flowers{
background-color:#F72598;
font-style: italic
}


/**選擇有宣告兩個class的DOM元素,套入以下屬性*/
.sky.flowers{
background-color:#AB25F7;
}

</style>
</head>
<body>
<div class="sky"></div>
<div class="flowers">花海</div>
<!--會套入sky的粗體,flower的斜體-->
<div class="flowers sky ">Mix</div>
</body>
</html>


結果:






















Note:在早於IE7的版本中,多類別選取會有問題,因此不建議使用多類別選取。

選擇具有class=article 屬性的span element。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS Class Selectors</title>
<style type="text/css"
html{
background-color: #000000; /*背景色為黑色*/
color: OliveDrab;    /**預設所有字體是橄欖綠*/
}

/**選擇有class為article的span元素 ,套用CSS屬性*/
span.article{
  border: #808080;
  border-style: dotted;
  border-width: 1px;
  color:DarkMagenta;
}
</style>
</head>
<body>
<p><span class="article">八陣圖  杜甫</span></p>
<!--雖然class為article但CSS要選擇的是有article class的span所以這裡color是繼承html的color:OliveDrab-->
<p class="article">功蓋三分國,名成八陣圖。</p>
<p class="article">江流石不轉,遺恨失吞吳。</p>
<div><p><span class="article">諸葛孔明石兵八陣</span></p></div> 
</body>
</html>

結果:

CSS Grouping Selectors

CSS 群組選擇

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS Grouping Selectors</title>
<style type="text/css">
h1{
   background-color:black/**背景色*/
}

/**Group selector*/
h1 , p{
   color:gray/**文字內容顏色*/
}
</style>
</head>
<body>
   <h1>CSS</h1>
   <p>層疊樣式表(英語:Cascading Style Sheets,簡寫CSS),又稱串樣式列表,由W3C定義和維護的標準,
一種用來為結構化文件(如HTML文件或XML應用)添加樣式(字型、間距和顏色等)的電腦語言。
目前最新版本是CSS2.1,為W3C的候選推薦標準。CSS3現在已被大部分現代瀏覽器支援,而下一版的CSS4仍在開發過程中。</p>
<span>上段文字引用自維基百科</span>
</body>
</html>

運作結果: 

CSS 學習資源收集

CSS 學習資源收集


Box Model文章:

em單位文章:
CSS2 & CSS3  X11Colors:

2012年8月29日 星期三

JavaScript特性測試(二) switch

JavaScript特性測試(二)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function(){

var values = [ , undefined, 'undefined', 0, '0', false, 'false', '', new String(), null];
var texts  = ['', 'undefined', "'undefined'" , '0' , "'0'" , 'false' , "'false'" , "''" , 'new String()' , 'null']

for(var i=0 , length=values.length; i < length ; i++){
switch( values[i] ){
case undefined:
var textNode = document.createElement('p');
var textInner= document.createTextNode("數值是:「" + texts[i] + "」 , 比對是:「case undefined:」 , 結果是 :「is Run」");
textNode.appendChild(textInner);
document.body.appendChild(textNode);
};

switch( values[i] ){ 
case 'undefined':
var textNode = document.createElement('p');
var textInner= document.createTextNode("數值是:「" + texts[i] + "」 , 比對是:「case 'undefined':」 , 結果是:「is Run」");
textNode.appendChild(textInner);
document.body.appendChild(textNode);
};

switch( values[i] ){
case 0:
var textNode = document.createElement('p');
var textInner= document.createTextNode("數值是:「" + texts[i] + "」 , 比對是:「case 0:」 , 結果是 :「is Run」");
textNode.appendChild(textInner);
document.body.appendChild(textNode);
};

switch( values[i] ){ 
case '0'
var textNode = document.createElement('p');
var textInner= document.createTextNode("數值是:「" + texts[i] + "」 , 比對是:「case '0':」 , 結果是 :「is Run」");
textNode.appendChild(textInner);
document.body.appendChild(textNode);
};

switch( values[i] ){ 
case false
var textNode = document.createElement('p');
var textInner= document.createTextNode("數值是:「" + texts[i] + "」 , 比對是:「case false:」 , 結果是 :「is Run」");
textNode.appendChild(textInner);
document.body.appendChild(textNode);
};

switch( values[i] ){ 
case 'false'
var textNode = document.createElement('p');
var textInner= document.createTextNode("數值是:「" + texts[i] + "」 , 比對是:「case 'false':」 , 結果是 :「is Run」");
textNode.appendChild(textInner);
document.body.appendChild(textNode);
};

switch( values[i] ){ 
case ''
var textNode = document.createElement('p');
var textInner= document.createTextNode("數值是:「" + texts[i] + "」 , 比對是:「case '':」 , 結果是 :「is Run」");
textNode.appendChild(textInner);
document.body.appendChild(textNode);
};

switch( values[i] ){ 
case new String(): 
var textNode = document.createElement('p');
var textInner= document.createTextNode("數值是:「" + texts[i] + "」 , 比對是:「case new String():」 , 結果是 :「is Run」");
textNode.appendChild(textInner);
document.body.appendChild(textNode);
};

switch( values[i] ){ 
case values[8]: 
var textNode = document.createElement('p');
var textInner= document.createTextNode("數值是:「" + texts[i] + "」 , 比對是:「case values[8]:」 , 結果是 :「is Run」");
textNode.appendChild(textInner);
document.body.appendChild(textNode);
};


switch( values[i] ){ 
case null
var textNode = document.createElement('p');
var textInner= document.createTextNode("數值是:「" + texts[i] + "」 , 比對是:「case null:」 , 結果是 :「is Run」");
textNode.appendChild(textInner);
document.body.appendChild(textNode);
};
}
//由輸出結果可以知道switch使用了===來做比對
//在實務上要注意,input 取得的value 會是字串型式,若你在前端有宣告狀態數值(0 ,1 ,2 , 3),若你在switch上使用就要注意 '0'與0是不同的東西。 
}
</script>
</head>
<body>
values = [  , undefined , 'undefined' , 0 , '0' , false , 'false' , '' ,  new String() , null];
<br>
</body>
</html>


結果:

values = [ , undefined , 'undefined' , 0 , '0' , false , 'false' , '' , new String() , null];
數值是:「」 , 比對是:「case undefined:」 , 結果是 :「is Run」
數值是:「undefined」 , 比對是:「case undefined:」 , 結果是 :「is Run」
數值是:「'undefined'」 , 比對是:「case 'undefined':」 , 結果是:「is Run」
數值是:「0」 , 比對是:「case 0:」 , 結果是 :「is Run」
數值是:「'0'」 , 比對是:「case '0':」 , 結果是 :「is Run」
數值是:「false」 , 比對是:「case false:」 , 結果是 :「is Run」
數值是:「'false'」 , 比對是:「case 'false':」 , 結果是 :「is Run」
數值是:「''」 , 比對是:「case '':」 , 結果是 :「is Run」
數值是:「new String()」 , 比對是:「case values[8]:」 , 結果是 :「is Run」
數值是:「null」 , 比對是:「case null:」 , 結果是 :「is Run」