2014年8月30日 星期六

css Selector active、hover、link、visited總合應用


css基本定義 active、hover、link、visited總合應用



支援CSS1 以上

說明:active、hover、link、visited總合應用

css定義:
未訪問 a tag 套用樣式
a:link {
font-size: 20px;     字型20像素
color: blue; 字顏色blue
background-color:pink; 背色pink
}

移動到此 a tag 套用樣式
a:hover {
font-size: 40px; 字型40像素
color: red; 字顏色red
background-color: yellow;背色yellow
}

點下此 a tag 套用樣式
a:active {
font-size: 50px; 字型50像素
color: lime; 字顏色lime
background-color: gray; 背色gray
}

已訪問  a tag 套用樣式
a:visited {
font-size: 30px; 字型30像素
color: green; 字顏色green
background-color:red; 背色red
}

程式:
<!DOCTYPE html>
<html>
<head>
<title>css基本定義 active、hover、link、visited總合應用</title>
<meta http-equiv="Content-Type" content="text/html; charset=BIG5">
<style type="text/css">
/* 未訪問 a tag */
a:link {
font-size: 20px;
color: blue;
background-color:pink;
}
/* 移動到此 a tag*/
a:hover {
font-size: 40px;
color: red;
background-color: yellow;
}
/* 點下此 a tag  */
a:active {
font-size: 50px;
color: lime;
background-color: gray;
}
/* 已訪問  a tag*/
a:visited {
font-size: 30px;
color: green;
background-color:red;
}
</style>
</head>
<body>
<a href="#1">這是a tag 1</a>
<div>
<a href="#2">這是a tag 2</a>
</div>
</body>
</html>

未訪問 a tag 套用樣式
圖1:

移動到此 a tag 套用樣式
圖2:

點下此 a tag 套用樣式
圖3:

已訪問  a tag 套用樣式
圖4:


測試結束~
如果還不了解可參考:w3schools CSS Selector Reference


感謝~























其它文章

2014年8月29日 星期五

css Selector visited 元素屬性 套用樣式


css基本定義 visited 元素屬性 套用樣式


支援CSS1 以上

用法::visited
說明:已訪問 套用樣式

css定義:
    a tag  已訪問 套用樣式
a:visited {
font-size: 30px; 字型30像素
color: blue;  字顏色blue
}
已訪問 是為 按過此a tag

程式:
<!DOCTYPE html>
<html>
<head>
<title>css基本定義 visited 元素屬性 套用樣式</title>
<meta http-equiv="Content-Type" content="text/html; charset=BIG5">
<style type="text/css">
a:visited {
font-size: 30px;
color: green;
}
</style>
</head>
<body>
<a href="#1">這是a tag 1</a>
<div>
<a href="#2">這是a tag 2</a>
</div>
</body>
</html>

尚未訪問
圖1:

已訪問a tag 1後
圖2:


測試結束~
如果還不了解可參考:w3schools CSS Selector Reference


感謝~






















其它文章

css Selector link 元素屬性 套用樣式


css基本定義 link 元素屬性 套用樣式


支援CSS1 以上

用法::link
說明:尚未訪問 套用樣式

css定義:
    a tag  尚未訪問 套用樣式
a:link {
font-size: 30px; 字型30像素
color: blue;  字顏色blue
}
尚未訪問 是為 未按過此a tag

程式:
<!DOCTYPE html>
<html>
<head>
<title>css基本定義 link 元素屬性 套用樣式</title>
<meta http-equiv="Content-Type" content="text/html; charset=BIG5">
<style type="text/css">
a:link {
font-size: 30px;
color: blue;
}
</style>
</head>
<body>
<a href="#1">這是a tag</a>
<div>
<a href="#2">這是a tag</a>
</div>
</body>
</html>

尚未訪問
圖1:

已訪問後
圖2:


測試結束~
如果還不了解可參考:w3schools CSS Selector Reference


感謝~

























其它文章

css Selector hover 元素屬性 套用樣式


css基本定義 hover 元素屬性 套用樣式



支援CSS1 以上

用法::hover
說明:鼠指標移動到 tag 套用樣式

css定義:
    鼠指標移動到 a tag  套用樣式
a:hover {
font-size: 20px; 字型20像素
color: blue;  字顏色blue
background-color: yellow; 背景色 yellow
}

程式:
<!DOCTYPE html>
<html>
<head>
<title>css基本定義 hover 元素屬性 套用樣式</title>
<meta http-equiv="Content-Type" content="text/html; charset=BIG5">
<style type="text/css">
a:hover {
font-size: 20px;
color: blue;
background-color: yellow;
}
</style>
</head>
<body>
<a href="#">滑鼠指標移動到這裡</a>
</body>
</html>


圖:





測試結束~
如果還不了解可參考:w3schools CSS Selector Reference


感謝~























其它文章

css Selector active 元素屬性 套用樣式


css基本選擇器定義 active 元素屬性 套用樣式

支援CSS1 以上

用法::active
說明:按下 tag 套用樣式

css定義:
    按下 a tag  套用樣式
a:active {
font-size: 20px; 字型20像素
color: blue;  字顏色blue
background-color: yellow; 背景色 yellow
}

程式:
<!DOCTYPE html>
<html>
<head>
<title>css基本定義 :active 元素屬性 套用樣式</title>
<meta http-equiv="Content-Type" content="text/html; charset=BIG5">
<style type="text/css">
a:active {
font-size: 20px;
color: blue;
background-color: yellow;
}
</style>
</head>
<body>
<a href="#">點我</a><br>
<a href="#">點我點我</a>
</body>
</html>


圖:





測試結束~
如果還不了解可參考:w3schools CSS Selector Reference


感謝~
























其它文章

css3 Selector [attribute*=value]元素屬性 套用樣式

css3基本定義 [attribute*=value]元素屬性 套用樣式




支援CSS3 以上

用法:p[title屬性$=名稱]
說明:套用有定義title屬性的p tag 有某字結尾

css定義:
p[title*="test"]  {
文字大小 font-size : 20px 為20像素
文字顏色 color :color 為 blue;
}
注意事項:
title 為元系的屬性。
如: id 、 name 、class等屬性。

程式:

<!DOCTYPE html>
<html>
<head>
<title>css3基本定義 [attribute*=value]元素屬性 套用樣式</title>
<meta http-equiv="Content-Type" content="text/html; charset=BIG5">
<style type="text/css">

p[title*=test] {
font-size: 20px;
color: blue;
}

</style>
</head>
<body>
<p class="p0" title="test">p Tag id=p0  title=test</p>
<p class="p1" title="test-1">p Tag id=p1 title=test-1</p>
<div>
  <span><p>div span p Tag</p></span>
</div>
<p class="p2" title="test-2"> p Tag id=p2 title=test-2</p>
<span>
<h5 id="myDivId">span h5 Tag myDivId</h5>
<p>span p Tag</p>
</span>
<ul>
<li><p> ul li p Tag</p></li>
<li><p> ul li p Tag</p></li>
</ul>
<p class="p3" title="this-test_3"> p Tag id=p3 title=this-test_3</p>
<div title="test">
<h5> h5 Tag</h5>
<p>p Tag</p>
</div>
<p class="p4" title="thistest_4"> p Tag id=p4 title=thistest_4</p>
<p class="p5" title="thistest"> p Tag id=p5 title=thistest</p>
</body>
</html>


結果p tag有title 有test文字都會套用。
圖:




測試結束~
如果還不了解可參考:w3schools CSS Selector Reference


感謝~























其它文章

css3 Selector [attribute$=value]元素屬性 套用樣式


css3基本定義 [attribute$=value]元素屬性 套用樣式



支援CSS3 以上

用法:p[title屬性$=名稱]
說明:套用有定義title屬性的p tag 有某字結尾

css定義:
p[title$="test"]  {
文字大小 font-size : 30px 為30像素
文字顏色 color :color 為 blue;
}
注意事項:
title 為元系的屬性。
如: id 、 name 、class等屬性。

程式:
<!DOCTYPE html>
<html>
<head>
<title>css3基本定義 [attribute$=value]元素屬性 套用樣式</title>
<meta http-equiv="Content-Type" content="text/html; charset=BIG5">
<style type="text/css">

p[title$=test] {
font-size: 30px;
color: blue;
}

</style>
</head>
<body>
<p class="p0" title="test">p Tag id=p0  title=test</p>

<p class="p1" title="test-1">p Tag id=p1 title=test-1</p>

<div>
  <span><p>div span p Tag</p></span>
</div>
<p class="p2" title="test-2"> p Tag id=p2 title=test-2</p>

<span>
<h5 id="myDivId">span h5 Tag myDivId</h5>
<p>span p Tag</p>
</span>
<ul>
<li><p> ul li p Tag</p></li>
<li><p> ul li p Tag</p></li>
<li><p> ul li p Tag</p></li>
</ul>
<p class="p3" title="this-test_3"> p Tag id=p3 title=this-test_3</p>

<div title="test">
<h5> h5 Tag</h5>
<p>p Tag</p>
</div>

<p class="p4" title="thistest_4"> p Tag id=p4 title=thistest_4</p>

<p class="p5" title="thistest"> p Tag id=p5 title=thistest</p>
</body>
</html>

結果p tag有title 有test文字結尾都會套用。
如:test、thistest
圖:




測試結束~
如果還不了解可參考:w3schools CSS Selector Reference

感謝~























其它文章

css3 Selector [attribute^=value]元素屬性 套用樣式


css3基本定義 [attribute^=value]元素屬性 套用樣式



支援CSS3 以上

用法:p[title屬性^=名稱]
說明:套用有定義title屬性的p tag 有某字開頭

css定義:
p[title^="test"]  {
文字大小 font-size : 30px 為30像素
文字顏色 color :color 為 blue;
}
注意事項:
title 為元系的屬性。
如: id 、 name 、class等屬性。



程式:
<!DOCTYPE html>
<html>
<head>
<title>css3基本定義 [attribute^=value]元素屬性 套用樣式</title>
<meta http-equiv="Content-Type" content="text/html; charset=BIG5">
<style type="text/css">

p[title^=test] {
font-size: 30px;
color: blue;
}

</style>
</head>
<body>
<p class="p0" title="test">p Tag id=p0  title=test</p>

<p class="p1" title="test-1">p Tag id=p1 title=test-1</p>

<div>
  <span><p>div span p Tag</p></span>
</div>
<p class="p2" title="test-2"> p Tag id=p2 title=test-2</p>

<span>
<h5 id="myDivId">span h5 Tag myDivId</h5>
<p>span p Tag</p>
</span>
<ul>
<li><p> ul li p Tag</p></li>
<li><p> ul li p Tag</p></li>
<li><p> ul li p Tag</p></li>
</ul>
<p class="p3" title="this-test_3"> p Tag id=p3 title=this-test_3</p>

<div>
<h5> h5 Tag</h5>
<p>p Tag</p>
</div>

<p class="p4" title="thistest_4"> p Tag id=p4 title=thistest_4</p>
</body>
</html>

結果p tag有title 有test文字開頭都會套用。
如:test、test-1、test-2
圖:




測試結束~
如果還不了解可參考:w3schools CSS Selector Reference

感謝~






















其它文章

2014年8月27日 星期三

線上工具(Pixlr)去除圖片背景

線上工具(Pixlr)去除圖片背景


一、Pixlr editor 網址

如圖:

二、選擇圖片
本例選擇: 從電腦上打開圖片
如圖:

三、選擇圖片:開啟舊檔
如圖:


四、解鎖圖片
在鎖頭  點二下
如圖:


五、在鎖頭點二下,出顯打勾
如圖:


六、選擇魔棒工具
七、選擇要去背的地方
如圖:


八、清除要去背的地方
1、編輯 -> 清除
如圖:


九、清除後圖
如圖:


十、存檔
如圖:


十一、存檔設定框
























其它文章

css基本定義 [attribute|=value]元素屬性 套用樣式


支援CSS2 以上

用法:p[title|=名稱]
說明:套用有定義title屬性的p tag 裡有某字

css定義:
p[title|="test"]  {
文字大小 font-size : 30px 為30像素
文字顏色 color :color 為 blue;
}
注意事項:
是屬性裡有某字,且要相同。
此字前後不可加其它字。
如p[title|="test"]  有 test 此字就套用。
但要有此連字符( - )


程式:
<!DOCTYPE html>
<html>
<head>
<title>css基本定義 [attribute|=value]元素屬性 套用樣式</title>
<meta http-equiv="Content-Type" content="text/html; charset=BIG5">
<style type="text/css">

p[title|=test] {
font-size: 30px;
color: blue;
}

</style>
</head>
<body>
<p class="p0" title="test">p Tag id=p0  title=test</p>

<p class="p1" title="test-1">p Tag id=p1 title=test-1</p>

<div>
  <span><p>div span p Tag</p></span>
</div>
<p class="p2" title="test-2"> p Tag id=p2 title=test-2</p>

<span>
<h5 id="myDivId">span h5 Tag myDivId</h5>
<p>span p Tag</p>
</span>
<ul>
<li><p> ul li p Tag</p></li>
<li><p> ul li p Tag</p></li>
<li><p> ul li p Tag</p></li>
</ul>
<p class="p3" title="this-test_3"> p Tag id=p3 title=this-test_3</p>

<div>
<h5> h5 Tag</h5>
<p>p Tag</p>
</div>

<p class="p4" title="thistest_4"> p Tag id=p4 title=thistest_4</p>
</body>
</html>

圖:


測試結束~
如果還不了解可參考:w3schools CSS Selector Reference

感謝~






















其它文章

css基本定義 [attribute~=value]元素屬性 套用樣式


支援CSS2 以上

用法:p[title~=名稱]
說明:套用有定義title屬性的p tag 裡有某字

css定義:
p[title~="test"]  {
文字大小 font-size : 30px 為30像素
文字顏色 color :color 為 blue;
}
注意事項:
是屬性裡有某字,且要相同。
此字前後不可加其它字。
如p[title~="test"]  必須在title有 test 此字才套用。
test1、test2、thistest3 這不套用。
有點想 and 的做法。

程式:
<!DOCTYPE html>
<html>
<head>
<title>css基本定義 [attribute~=value]元素屬性 套用樣式</title>
<meta http-equiv="Content-Type" content="text/html; charset=BIG5">
<style type="text/css">

p[title~="test"] {
font-size: 30px;
color: blue;
}

</style>
</head>
<body>
<p class="p0" title="this test">p Tag id=p0</p>

<p class="p1" title="this test1">p Tag id=p1</p>

<div>
  <span><p>div span p Tag</p></span>
</div>
<p class="p2" title="this test2"> p Tag id=p2</p>

<span>
<h5 id="myDivId">span h5 Tag myDivId</h5>
<p>span p Tag</p>
</span>
<ul>
<li><p> ul li p Tag</p></li>
<li><p> ul li p Tag</p></li>
<li><p> ul li p Tag</p></li>
</ul>
<p class="p3" title="thistest3"> p Tag id=p3</p>

<div>
<h5> h5 Tag</h5>
<p>p Tag</p>
</div>

<p class="p4" title="thistest4"> p Tag id=p4</p>
</body>
</html>


圖:




測試結束~
如果還不了解可參考:w3schools CSS Selector Reference

感謝~
























其它文章

css基本定義 [attribute=value]元素屬性 套用樣式


支援CSS2 以上

用法:p[id=名稱]
說明:套用有定義id屬性的p tag 等於 某名稱

css定義:
p[id=p1] {
文字大小 font-size : 30px 為30像素
文字顏色 color :color 為 blue;
}
注意事項:
p[id="p1"]跟p[id=p1] 都是可以的。

程式:
<!DOCTYPE html>
<html>
<head>
<title>css基本定義 [attribute=value]元素屬性 套用樣式</title>
<meta http-equiv="Content-Type" content="text/html; charset=BIG5">
<style type="text/css">

p[id=p1] {
font-size: 30px;
color: blue;
}

</style>
</head>
<body>
<p id="p1">p Tag id=p1</p>

<div>
  <span><p>div span p Tag</p></span>
</div>
<p id="p2"> p Tag id=p2</p>

<span>
<h5 id="myDivId">span h5 Tag myDivId</h5>
<p>span p Tag</p>
</span>
<ul>
<li><p> ul li p Tag</p></li>
<li><p> ul li p Tag</p></li>
<li><p> ul li p Tag</p></li>
</ul>
<p id="p3"> p Tag id=p3</p>

<div>
<h5> h5 Tag</h5>
<p>p Tag</p>
</div>

<p id="p4"> p Tag id=p4</p>
</body>
</html>



圖:




測試結束~
如果還不了解可參考:w3schools CSS Selector Reference

感謝~























其它文章

css基本定義 [attribute] 元素屬性 套用樣式


支援CSS2 以上

用法:p[id]
說明:套用有定義id屬性的p tag

css定義:
p[id] {
文字大小 font-size : 30px 為30像素
文字顏色 color :color 為 blue;
}
注意事項:
p跟[id]之間不能有空白
p[id]  這是 p tag 屬性有id
p [id] 這是tag 屬性有id

程式:
<!DOCTYPE html>
<html>
<head>
<title>css基本定義 [attribute] 元素屬性 套用樣式</title>
<meta http-equiv="Content-Type" content="text/html; charset=BIG5">
<style type="text/css">

p[id] {
font-size: 30px;
color: blue;
}

</style>
</head>
<body>
<p id="p1">p Tag id=p1</p>

<div>
  <span><p>div span p Tag</p></span>
</div>
<p id="p2"> p Tag id=p2</p>

<span>
<h5 id="myDivId">span h5 Tag myDivId</h5>
<p>span p Tag</p>
</span>
<ul>
<li><p> ul li p Tag</p></li>
<li><p> ul li p Tag</p></li>
<li><p> ul li p Tag</p></li>
</ul>
<p id="p3"> p Tag id=p3</p>

<div>
<h5> h5 Tag</h5>
<p>p Tag</p>
</div>

<p id="p4"> p Tag id=p4</p>
</body>
</html>



圖:




測試結束~
如果還不了解可參考:w3schools CSS Selector Reference

感謝~























其它文章

css基本定義 (element ~ element)元素階層關系 套用樣式之 弟妹元素關系


支援CSS3 以上

用法:div ~ p
說明:套用在跟div同階層的 p tag的弟妹(siblings)元素

css定義:
div ~ p {
文字大小 font-size : 30px 為30像素
文字顏色 color :color 為 blue;
}

程式:
<!DOCTYPE html>
<html>
<head>
<title>css基本定義 (element ~ element)元素階層關系 套用樣式之 弟妹元素關系</title>
<meta http-equiv="Content-Type" content="text/html; charset=BIG5">
<style type="text/css">

div ~ p {
font-size: 30px;
color: blue;
}

</style>
</head>
<body>
<p id="p1">p Tag id=p1</p>

<div>
  <span><p>div span p Tag</p></span>
</div>
<p id="p2"> p Tag id=p2</p>

<span>
<h5 id="myDivId">span h5 Tag myDivId</h5>
<p>span p Tag</p>
</span>
<ul>
<li><p> ul li p Tag</p></li>
<li><p> ul li p Tag</p></li>
<li><p> ul li p Tag</p></li>
</ul>
<p id="p3"> p Tag id=p3</p>

<div>
<h5> h5 Tag</h5>
<p>p Tag</p>
</div>

<p id="p4"> p Tag id=p4</p>
</body>
</html>

會有三個 p Tag 被套用css喔~
為 p2、p3、p4
圖:


為什麼p1會沒有被套用css呢?
對於 div ~ p
div 的弟妹為 p tag的被套用css。
而p1 是div的兄長~


測試結束~
如果還不了解可參考:w3schools CSS Selector Reference

感謝~























其它文章

css基本定義 (element + element)元素階層關系 套用樣式之 同層後元素關系



支援CSS2 以上

用法:div + p
說明:套用在跟div同階層後有一個 p tag的元素
css定義:
div + p {
文字大小 font-size : 30px 為30像素
文字顏色 color :color 為 blue;
}

程式:
<html>
<head>
<title>css基本定義 (element + element)元素階層關系 套用樣式之 同層後元素關系</title>
<meta http-equiv="Content-Type" content="text/html; charset=BIG5">
<style type="text/css">

div + p {
font-size: 30px;
color: blue;
}

</style>
</head>
<body>
<div>css基本定義 (element + element)元素階層關系 套用樣式之 同層後元素關系-- div Tag</div>
<div>
<h5 id="myDivId">css基本定義 (element + element)元素階層關系 套用樣式之 同層後元素關系-- div h1 Tag myDivId</h5>
<p>css基本定義 (element + element)元素階層關系 套用樣式之 同層後元素關系 -- div p Tag</p>
</div>
<div>
  <span><p>css基本定義 (element + element)元素階層關系 套用樣式之 同層後元素關系 -- div span p Tag</p></span>
</div>
<p>css基本定義 (element + element)元素階層關系 套用樣式之 同層後元素關系 -- p Tag</p>
</body>
</html>

會有一個 p Tag 被套用css喔~
圖:




測試結束~
如果還不了解可參考:w3schools CSS Selector Reference

感謝~






















其它文章

css基本定義 (element > element)元素階層關系 套用樣式之 元素父子關系


支援CSS2 以上

用法:div > p
說明:套用在div 第一個階層有 p tag的元素
css定義:
div > p {
文字大小 font-size : 30px 為30像素
文字顏色 color :color 為 blue;
}

程式:
<html>
<head>
<title>css基本定義 (element > element)元素階層關系 套用樣式之 元素父子關系</title>
<meta http-equiv="Content-Type" content="text/html; charset=BIG5">
<style type="text/css">

div > p {
font-size: 30px;
color: blue;
}

</style>
</head>
<body>
<div>css基本定義 (element > element)元素階層關系 套用樣式之 元素父子關系-- div Tag</div>
<div>
<h5 id="myDivId">css基本定義 (element > element)元素階層關系 套用樣式之 元素父子關系-- div h1 Tag myDivId</h5>
<p>css基本定義 (element > element)元素階層關系 套用樣式之 元素父子關系 -- div p Tag</p>
</div>
<div>
  <span><p>css基本定義 (element > element)元素階層關系 套用樣式之 元素父子關系 -- div span p Tag</p></span>
</div>
<p>css基本定義 (element > element)元素階層關系 套用樣式之 元素父子關系 -- p Tag</p>
</body>
</html>

會有一個 p Tag 被套用css喔~
圖:




測試結束~
如果還不了解可參考:w3schools CSS Selector Reference

感謝~



























其它文章

css基本定義 (element element)元素階層關系 套用樣式之 元素內關系



支援CSS1 以上

用法:div p
說明:套用在div裡面有p tag的元素
css定義:
div p {
文字大小 font-size : 30px 為30像素
文字顏色 color :color 為 blue;
}
注意事項:
    是在div裡面所有的p tag元素,沒有限幾階層。
例加:<div> <spen><p>這也被有套用</p></spen></div>
我們看程式吧~
程式:
<html>
<head>
<title>css基本定義 (element element)元素階層關系 套用樣式之 元素內關系</title>
<meta http-equiv="Content-Type" content="text/html; charset=BIG5">
<style type="text/css">

div p {
font-size: 30px;
color: blue;
}

</style>
</head>
<body>
<div>css基本定義 (element element)元素階層關系 套用樣式之 元素內關系-- div Tag</div>
<div>
<h1 id="myDivId">css基本定義 (element element)元素階層關系 套用樣式之 元素內關系-- div h1 Tag myDivId</h1>
<p>css基本定義 (element element)元素階層關系 套用樣式之 元素內關系 -- div p Tag</p>
</div>
<div>
  <span><p>css基本定義 (element element)元素階層關系 套用樣式之 元素內關系 -- div span p Tag</p></span>
</div>
<p>css基本定義 (element element)元素階層關系 套用樣式之 元素內關系 -- p Tag</p>
</body>
</html>

會有二個 p Tag 被套用css喔~

圖:



測試結束~
如果還不了解可參考:w3schools CSS Selector Reference

感謝~






















其它文章

css基本定義 不可被取代用法

支援CSS1 以上

說明:

因為css 同名稱會被覆蓋,
如果不想被覆蓋定義,
使用設定此定義很重要
語法在定義後加入 !important

myCss1001.css
定義 div
字大小 font-size : 50px 為50像素 ,加入不可被取代
字型 font-style :italic 為斜體字型
字顏色 color   為 red;

myCss1002.css

定義 id為 myDivId
字大小 font-size : 30px 為30像素
字型 font-style :italic 為斜體字型
字顏色 color   為 #CC00CC;

定義 div
字大小 font-size : 30px 為30像素
字顏色 color   為 #CC00CC;

myCss1003.css
定義 html tag p
字大小 font-size : 10px 為10像素
字型 font-style :italic 為斜體字型
字顏色 color   為 blue;

定義 div
字大小 font-size : 10px 為10像素
字顏色 color   為 blue;


在myCss1002.css及myCss1003.css
將主角div重新定義font-size及color。
另外在myCss1001.css的font-size 設為important(重要)
語法如下:



語法: myCss1001.css
div{
font-size: 50px !important;/*重要 不可被取代*/
font-style: italic;
color: red;
}

語法: myCss1002.css
#myDivId{
font-size: 30px;
font-style: italic;
color: #CC00CC;
}
div{
font-size: 30px;
color: #CC00CC;
}

語法: myCss1003.css
p {
font-size: 10px;
font-style: italic;
color: blue ;
}

div{
font-size: 10px;
color: blue;
}

程式:(.html)
<html>
<head>
<title>[css-基本類]基本定義 不可被取代用法</title>
<meta http-equiv="Content-Type" content="text/html; charset=BIG5">
<link href="myCss1001.css" rel="stylesheet" type="text/css">
<link href="myCss1002.css" rel="stylesheet" type="text/css">
<link href="myCss1003.css" rel="stylesheet" type="text/css">
</head>
<body>
<div>[css-基本類]基本定義 不可被取代用法-- div Tag</div>
<div>
<h1 id="myDivId">[css-基本類]基本定義 不可被取代用法-- div h1 Tag myDivId</h1>
<p>[css-基本類]基本定義 不可被取代用法 -- div p Tag</p>
</div>
</body>
</html>

結果如下:




主角div的文字大小一樣沒有變吧~
這樣有了解嗎? 可以動手測試看看喔!

測試結束~
如果還不了解可參考:w3schools CSS Selector Reference
感謝~



























其它文章

css基本定義 順序關系


支援CSS1 以上


說明:
css如果有定義了相同名稱是有效的,
且定義了相同的屬性值會有順序關系。
本例用三個css檔來說明:
主角是div

myCss090101.css
定義 div
字大小 font-size : 50px 為50像素
字型 font-style :italic 為斜體字型
字顏色 color   為 red;

myCss090102.css

定義 id為 myDivId
字大小 font-size : 30px 為30像素
字型 font-style :italic 為斜體字型
字顏色 color   為 #CC00CC;

定義 div
字大小 font-size : 30px 為30像素
字顏色 color   為 #CC00CC;

myCss090103.css
定義 html tag p
字大小 font-size : 10px 為10像素
字型 font-style :italic 為斜體字型
字顏色 color   為 blue;

定義 div
字大小 font-size : 10px 為10像素
字顏色 color   為 blue;

在myCss090102.css及myCss090103.css
將div重新定義font-size及color
語法如下:

語法: myCss090101.css
div{
font-size: 50px;
font-style: italic;
color: red;
}

語法: myCss090102.css
#myDivId{
font-size: 30px;
font-style: italic;
color: #CC00CC;
}
div{
font-size: 30px;
color: #CC00CC;
}

語法: myCss090103.css
p {
font-size: 10px;
font-style: italic;
color: blue ;
}

div{
font-size: 10px;
color: blue;
}

這樣重複定義會發生什麼事嗎?

我們來測式看看吧!

程式第一組:(.html)
<html>
<head>
<title>[css-基本類]基本定義 順序關系</title>
<meta http-equiv="Content-Type" content="text/html; charset=BIG5">
<link href="" rel ="stylesheet" type="text/css">
<link href="myCss090101.css" rel="stylesheet" type="text/css">
<link href="myCss090102.css" rel="stylesheet" type="text/css">
<link href="myCss090103.css" rel="stylesheet" type="text/css">
</head>
<body>
<div>[css-基本類]基本定義 順序關系 -- div Tag</div>
<div>
<h1 id="myDivId">[css-基本類]基本定義 順序關系-- div h1 Tag myDivId</h1>
<p>[css-基本類]基本定義 順序關系 -- div p Tag</p>
</div>
</body>
</html>
本測試先匯入順序為 myCss090101.css 、myCss090102.css、myCss090103.css
結果我們的主角div會套用了那個定義呢
圖:


如上圖結果我們看出來是套用了最後匯入的myCss090103.css。
此時你會發現在myCss090103.css只定義了定義font-size及color。
你有沒有發現字型還在,一樣為斜體字型。
所以在myCss090101.css定義的屬性值是有效的。


接下來我們換匯入順序為myCss090103.css、myCss090102.css、 myCss090101.css
程式第二組:(.html)
<html>
<head>
<title>[css-基本類]基本定義 順序關系</title>
<meta http-equiv="Content-Type" content="text/html; charset=BIG5">
<link href="" rel ="stylesheet" type="text/css">
<link href="myCss090103.css" rel="stylesheet" type="text/css">
<link href="myCss090102.css" rel="stylesheet" type="text/css">
<link href="myCss090101.css" rel="stylesheet" type="text/css">
</head>
<body>
<div>[css-基本類]基本定義 順序關系 -- div Tag</div>
<div>
<h1 id="myDivId">[css-基本類]基本定義 順序關系-- div h1 Tag myDivId</h1>
<p>[css-基本類]基本定義 順序關系 -- div p Tag</p>
</div>
</body>
</html>

結果主角div會套用了那個定義~~
我們看下去~
圖:




如上圖結果我們看出來是主角div套用了最後匯入的myCss090101.css。

這樣有了解嗎? 可以動手測試看看喔!
有順序的基本知識後,可以少花點時間在除錯。

測試結束~
如果還不了解可參考:w3schools CSS Selector Reference
感謝~




























其它文章

標籤

Oracle (150) Oracle DB (144) Oracle_DB (143) Oracle SQL (135) JAVA (84) css-基本類 (65) MySQL (59) CSS Selector (58) jQuery (49) JavaScript-基本類 (39) Spring Boot (38) JavaScript (37) JavaScript HTML DOM (37) JavaScript-HTML_DOM (36) CSS3 (30) JAVA-基本類 (28) jQuery UI (27) Apache (23) Oracle GROUP BY (20) datepicker (20) Android (18) Oracle Date (17) c (17) JAVA-lang套件 (16) Linux (16) Oracle Sub Query (16) Spring-基本類 (16) jQuery-基本類 (16) MySQL-進階系列教學 (15) Android基本類 (14) Grails (14) Oracle join (14) SQLite (13) Spring (13) WIN7-基本類 (13) grails-基本類 (13) linux cent os (13) CKEditor (12) JAVA-流程控制類 (12) JAVA_Spring (12) PHP (11) Spring MVC (11) MySQL-基本系列教學 (10) Notepad (10) Notepad++ (10) SQLite for java (10) Windows (10) c/c++ (10) eclipse (9) jQuery-Selector (9) sqldeveloper (9) DB_Toad (8) JAVA_IDE_Eclipse (8) JavaScript-String類 (8) MySQL DB Toad (8) MySQL-DATE相關 (8) MySQL-函式相關 (8) Spring Bean (8) Android Studio (7) HTML5 (7) Hibernate (7) JAVA-OCWCD (7) JavaScript-陣列類 (7) Docker (6) JAVA-程式分享 (6) JAVA.util套件 (6) JavaScript-數學類 (6) MinGw (6) MySQL-其它類 (6) Servlet (6) centos (6) Apache_Tomcat (5) Apache套件_POI (5) CSS (5) JavaScript-Date物件 (5) JavaScript-其它類 (5) PostgreSQL (5) httpd (5) log4j (5) 基本資訊 (5) 開發工具 (5) CSS Properties (4) Dev-C++ (4) IntelliJ IDEA (4) Oracle DDL (4) Sublime (4) TortoiseSVN (4) apache_Maven (4) Android NDK (3) Eclipse IDE for C/C++ (3) Hibernate-基本類 (3) JAVA-問題 (3) JAVA-綀習分享 (3) JVM (3) Linux 指令 (3) Proxy Server (3) Spring Mobile (3) Spring web (3) Squid (3) VirtualBox (3) maven (3) zk (3) 生活其它 (3) Bootstrap (2) Filter (2) JAVA_IO (2) JAVA_其它_itext套件 (2) JBoss-問題 (2) JSP (2) Jboss (2) Listener (2) MySQL-語法快速查詢 (2) Spring AOP (2) Spring Batch (2) Spring Boot Actuator (2) Spring i18n (2) Subversive (2) Tomcat 8 (2) UML (2) WebJars (2) WinMerge (2) c++ (2) c語言綀習題 (2) jQuery Mobile (2) jQuery-事件處理 (2) jQuery-套件類 (2) putty (2) svn (2) weblogic (2) Apache_JMeter (1) Apache套件_BeanUtils (1) Apache套件_StringUtils (1) Base64 (1) Google API (1) HTML5-基本類 (1) Heap (1) JAVA 7 (1) JAVA SE 、JAVA EE、JAVA ME (1) JAVA 日期 (1) JAVA-OCJP (1) JAVA-WEB (1) JAVA_IDE (1) JAVA其它 (1) JBoss Server (1) JDK (1) JMX (1) JRE (1) Java RMI (1) Java String (1) Joda Time (1) Linux_其它 (1) MySQL教學 (1) Oracle_VirtualBox (1) SQL Server (1) SWT (1) Session (1) Stack (1) Struts 2 (1) Tool (1) ZK Studio (1) csv (1) grails-其它類 (1) jQuery-進階 (1) java mail (1) java web (1) java8 (1) jsoup (1) mockmvc (1) modules (1) tomcat (1) win10 (1) 其它類 (1) 圖片工具 (1) 模擬器 (1) 讀書分享 (1) 開發資訊 (1)

精選文章

初學 Java 的 HelloWorld 程式

撰寫一個JAVA程式 public class HelloWorld{ public static void main(String[ ] args){ System.out.println("我第一支Java程式!!"); } } ...