類別選取：
<!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>
<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>
結果：
沒有留言:
張貼留言