Java程式教學甘仔店: 9月 2014

2014年9月12日星期五

CSS color Property 套用樣式文字顏色

支援CSS1 以上

用法： color
說明：
color 文字顏色

css定義：

使用顏色英文名字來定義：
Red (紅色)
Green (綠色)
Blue (藍色)

例：
a{
color: blue;
}

使用RGB來配色定義：

R為 Red (紅色)
G為 Green (綠色)
B為 Blue (藍色)
RGB數值範圍：
R:0~255
G:0~255
B:0~255
如果不想配G、B 給0值

為
rgb(255,0,0);紅色
rgb(0,0,0) ;黑色
rgb(255,255,255) ;白色

例：
div{
color: rgb(012,150,150);
}

使用16進制(HEX)來配色定義：
#123456
從左第一個來解說：
# 定義為16進制
12 二個數值來定義 R 色盤值
34 二個數值來定義 G 色盤值
56 二個數值來定義 B 色盤值

HEX數值範圍：
每一個數值共有16種值：
0、1、2、3、4、5、6、7、8、9
A、B、C、D、E、F

#000000 黑色
#FF0000 紅色
#00FF00 綠色
#0000FF 藍色
#FFFFFF 白色

例：
p{
color: #11ffaa;
}
注意事項：
JavaScript 用法:
object.style.color="#0000FF"

程式：
<!DOCTYPE html>
<html>
<head>
<title>CSS color Property 套用樣式文字顏色</title>
<meta http-equiv="Content-Type" content="text/html; charset=BIG5">
<style type="text/css">
a{
color: blue;
}
div{
color: rgb(012,150,150);
}
p{
color: #11ffaa;
}
</style>
</head>
<body>
<a href="#1">a Tag CSS color Property</a>
<div id="div1">
div Tag CSS color Property
</div>
<p>p Tag CSS color Property</p>
</body>
</html>

圖1：

測試結束~
如果還不了解可參考：w3schools CSS color Property

合法的顏色定義：
1、Hexadecimal colors
2、RGB colors
3、RGBA colors
4、HSL colors
5、HSLA colors
6、Predefined/Cross-browser color names

請參考：w3schools CSS Legal Color Values

各種顏色查表參考如下:

w3schools CSS Colors

w3schools CSS Color Names

HTML 顏色代碼 (十六進位值色碼)

感謝~

其它文章

閱讀更多 »

2014年9月1日星期一

css3 Selector only-of-type 套用樣式

支援CSS3 以上

用法： :only-of-type
說明：
依元素是唯一的子元素則套用

css定義：
父元素裡其中一個的a tag唯一子元素是則套用
a:only-of-type{
font-size: 20px;
color: silver;
}
父元素裡其中一個的p tag唯一子元素是則套用
p:only-of-type{
font-size: 20px;
color: red;
}
注意事項：

程式：
<!DOCTYPE html>
<html>
<head>
<title>css3 Selector only-of-type 套用樣式</title>
<meta http-equiv="Content-Type" content="text/html; charset=BIG5">
<style type="text/css">
a:only-of-type{
font-size: 20px;
color: silver;
}

p:only-of-type{
font-size: 20px;
color: red;
}
</style>
</head>
<body>
<a href="#1">a tag test 1</a>
<div id="div1">
<a href="#1">div 1 a tag test 2</a>
</div>
<div id="div2">
<a href="#1">div 2 a tag test 3</a>
<a href="#1">div 2 a tag test 4</a>
</div>

<p>p tag test 1</p>
<div id="div3">
<p>div 1 p tag test 2</p>
</div>
<div id="div4">
<p>div 2 p tag test 3</p>
<p>div 2 p tag test 4</p>
</div>
</body>
</html>

a:only-of-type 父元素裡其中一個的a tag唯一子元素是則套用
p:only-of-type 父元素裡其中一個的p tag唯一子元素是則套用

有子元素
的父元素子元素數量是否符合
body 6
a tag 1個是
p tag 1個是
div tag 4個否
div1 1
a tag 1個是
div2 2
a tag 2個否
div3 1
p tag 1個是
div4 2
p tag 2個否
圖1：

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

感謝~

其它文章

閱讀更多 »

css3 Selector only-child 套用樣式

支援CSS3 以上

用法： :only-child
說明：
父元素的是唯一的子元素則套用

css定義：
父元素唯一的子元素是且是a tag則套用
a:only-child{
font-size: 20px;
color: silver;
}
父元素唯一的子元素是且是p tag則套用
p:only-child{
font-size: 20px;
color: red;
}
注意事項：

程式：
<!DOCTYPE html>
<html>
<head>
<title>css3 Selector only-child 套用樣式</title>
<meta http-equiv="Content-Type" content="text/html; charset=BIG5">
<style type="text/css">
a:only-child{
font-size: 20px;
color: silver;
}

p:only-child{
font-size: 20px;
color: red;
}
</style>
</head>
<body>
<a href="#1">a tag test 1</a>
<div id="div1">
<a href="#1">div 1 a tag test 2</a>
</div>
<div id="div2">
<a href="#1">div 2 a tag test 3</a>
<a href="#1">div 2 a tag test 4</a>
</div>

<p>p tag test 1</p>
<div id="div3">
<p>div 1 p tag test 2</p>
</div>
<div id="div4">
<p>div 2 p tag test 3</p>
<p>div 2 p tag test 4</p>
</div>
</body>
</html>

a:only-child 唯一的子元素且是a tag則套用
p:only-child 唯一的子元素且是p tag則套用

有子元素
的父元素子元素數量是否符合
body 6 否
div1 1 是 div 1 a tag test 2
div2 2 否
div3 1 是 div 1 p tag test 2
div4 2 否

圖1：

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

感謝~

其它文章

閱讀更多 »

css3 Selector nth-last-of-type(n) 套用樣式

支援CSS3 以上

用法： :nth-last-of-type(n)
說明：
n 為第幾個子元素，
依tag為第幾個子元素套用樣式

此nth-last-of-type為：子元素從後開始算依tag區分

css定義：
從後算來第2個a tag子元素
a:nth-last-of-type(2){
font-size: 20px;
color: silver;
}
從後算來第4個p tag子元素
p:nth-last-of-type(4){
font-size: 20px;
color: red;
}
注意事項：
只算第幾個子元素，分tag。
只要有父子關系，都會被定義。

不分tag

css3 Selector nth-last-child(n) 套用樣式

程式：
<!DOCTYPE html>
<html>
<head>
<title>css3 Selector nth-last-of-type(n) 套用樣式</title>
<meta http-equiv="Content-Type" content="text/html; charset=BIG5">
<style type="text/css">
a:nth-last-of-type(2){
font-size: 20px;
color: silver;
}

p:nth-last-of-type(4){
font-size: 20px;
color: red;
}
</style>
</head>
<body>
<a href="#1">a tag test 1</a>
<a href="#2">a tag test 2</a>
<a href="#3">a tag test 3</a>
<p>p tag test 1</p>
<a href="#4">a tag test 4</a>
<p>p tag test 2</p>

<div>
<a href="#1">div a tag test 1</a>
<a href="#2">div a tag test 2</a>
<a href="#3">div a tag test 3</a>
<p>div p tag test 1</p>
<a href="#4">div a tag test 4</a>
<p>div p tag test 2</p>
</div>
</body>
</html>

例說明：
a:nth-last-of-type(2)) 從後算第2個a tag 子元素則套用
p:nth-last-of-type(4) 從後算第4個p tag子元素則套用

父元素為body ，子元素順序為：

正常順序 nth-last-of-type 檢查元素是否套用
1、a tag 1 | a4、a tag 1 |
2、a tag 2 | a3、a tag 2 |
3、a tag 3 | a2、a tag 3 | 套用
4、p tag 1 | p2、p tag 1 |
5、a tag 4 | a1、a tag 4 |
6、p tag 2 | p1、p tag 2 |
7、div tag | d1、div tag |

父元素為div ，子元素順序為：
正常順序 nth-last-of-type 檢查元素是否套用
1、div a tag 1 | a4、div a tag 1 |
2、div a tag 2 | a3、div a tag 2 |
3、div a tag 3 | a2、div a tag 3 | 套用
4、div p tag 1 | p2、div p tag 1 |
5、div a tag 4 | a1、div a tag 4 |
6、div p tag 2 | p1、div p tag 2 |

p tag 這裡只要二個，所以沒套用css

圖1：

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

感謝~

其它文章

閱讀更多 »

css3 Selector nth-last-child(n) 套用樣式

支援CSS3 以上

用法： :nth-last-child(n)
說明：
n 為第幾個子元素，
依tag為第幾個子元素套用樣式

此nth-last-child為：子元素從後開始算

css定義：
從後算來第2個子元素且是a tag
a:nth-last-child(2){
font-size: 20px;
color: silver;
}
從後算來第4個子元素且是p tag
p:nth-last-child(4){
font-size: 20px;
color: red;
}
注意事項：
只算第幾個子元素，不分tag。
只要有父子關系，都會被定義。

有分tag

css3 Selector nth-last-of-type(n) 套用樣式

程式：
<!DOCTYPE html>
<html>
<head>
<title>css3 Selector nth-last-child(n) 套用樣式</title>
<meta http-equiv="Content-Type" content="text/html; charset=BIG5">
<style type="text/css">
a:nth-last-child(2){
font-size: 20px;
color: silver;
}

p:nth-last-child(4){
font-size: 20px;
color: red;
}
</style>
</head>
<body>
<a href="#1">a tag test 1</a>
<a href="#2">a tag test 2</a>
<a href="#3">a tag test 3</a>
<p>p tag test 1</p>
<a href="#4">a tag test 4</a>
<p>p tag test 2</p>

<div>
<a href="#1">div a tag test 1</a>
<a href="#2">div a tag test 2</a>
<a href="#3">div a tag test 3</a>
<p>div p tag test 1</p>
<a href="#4">div a tag test 4</a>
<p>div p tag test 2</p>
</div>
</body>
</html>

例說明：
a:nth-last-child(2) 從後算第2個子元素為a tag 則套用
p:nth-last-child(4) 從後算第4個子元素為p tag 則套用

父元素為body ，子元素順序為：

前數後數檢查元素是否套用
1、a tag 1 | 7、a tag 1 | |
2、a tag 2 | 6、a tag 2 | |
3、a tag 3 | 5、a tag 3 | |
4、p tag 1 | 4、p tag 1 | 檢查為p tag | 是套用
5、a tag 4 | 3、a tag 4 | |
6、p tag 2 | 2、p tag 2 | 檢查為a tag | 否套用
7、div tag | 1、div tag | |

父元素為div ，子元素順序為：
前數後數檢查元素是否套用
1、div a tag 1 | 6、div a tag 1 | |
2、div a tag 2 | 5、div a tag 2 | |
3、div a tag 3 | 4、div a tag 3 | 檢查為p tag | 否套用
4、div p tag 1 | 3、div p tag 1 | |
5、div a tag 4 | 2、div a tag 4 | 檢查為a tag | 是套用
6、div p tag 2 | 1、div p tag 2 | |

圖1：

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

感謝~

其它文章

閱讀更多 »

css3 Selector nth-of-type(n) 套用樣式

支援CSS3 以上

用法：:nth-of-type(n)
說明：
n 為第幾個子元素，
依tag為第幾個子元素套用樣式

css定義：
a Tag 為第二個子元素則套用樣式
a:nth-of-type(2){
font-size: 20px;
color: silver;
}

p Tag 為第四個子元素則套用樣式
p:nth-of-type(4){
font-size: 20px;
color: red;
}
注意事項：
有分tag算第幾個子元素。
只要有父子關系，都會被定義。

不分tag參考：

css3 Selector nth-child(n) 套用樣式

程式：
<!DOCTYPE html>
<html>
<head>
<title>css3 Selector nth-of-type(n) 套用樣式</title>
<meta http-equiv="Content-Type" content="text/html; charset=BIG5">
<style type="text/css">
a:nth-of-type(2){
font-size: 20px;
color: silver;
}

p:nth-of-type(4){
font-size: 20px;
color: red;
}
</style>
</head>
<body>
<a href="#1">a tag test 1</a>
<a href="#2">a tag test 2</a>
<a href="#3">a tag test 3</a>
<p>p tag test 1</p>
<a href="#4">a tag test 4</a>
<p>p tag test 2</p>

<div>
<a href="#1">div a tag test 1</a>
<a href="#2">div a tag test 2</a>
<a href="#3">div a tag test 3</a>
<p>div p tag test 1</p>
<a href="#4">div a tag test 4</a>
<p>div p tag test 2</p>
</div>
</body>
</html>

圖1：

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

感謝~

其它文章

閱讀更多 »

css3 Selector nth-child(n) 套用樣式

支援CSS3 以上

用法：:nth-child(n)
說明：
n 為第幾個子元素，
為第幾個子元素套用樣式

css定義：
a Tag 為第二個子元素則套用樣式
a:nth-child(2){
font-size: 20px;
color: silver;
}
p Tag 為第四個子元素則套用樣式
p:nth-child(4){
font-size: 20px;
color: red;
}
注意事項：
只算第幾個子元素，不分tag。
只要有父子關系，都會被定義。

有分tag參考：

css3 Selector nth-of-type(n) 套用樣式

程式：
<!DOCTYPE html>
<html>
<head>
<title>css3 Selector nth-child(n) 套用樣式</title>
<meta http-equiv="Content-Type" content="text/html; charset=BIG5">
<style type="text/css">
a:nth-child(2){
font-size: 20px;
color: silver;
}

p:nth-child(4){
font-size: 20px;
color: red;
}
</style>
</head>
<body>
<a href="#1">a tag test 1</a>
<a href="#2">a tag test 2</a>
<a href="#3">a tag test 3</a>
<p>p tag test 1</p>
<a href="#4">a tag test 4</a>
<p>p tag test 2</p>

<div>
<a href="#1">div a tag test 1</a>
<a href="#2">div a tag test 2</a>
<a href="#3">div a tag test 3</a>
<p>div p tag test 1</p>
<a href="#4">div a tag test 4</a>
<p>div p tag test 2</p>
</div>
</body>
</html>

圖1：

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

感謝~

其它文章

閱讀更多 »

css3 Selector not(selector) 套用樣式

支援CSS3 以上

用法：:not(selector)
說明：
not(selector)
那些不要套用樣式
css定義：
是a tag 不要套用樣式
:not(a){
font-size: 30px;
color: red;
}
注意事項：

程式：
<!DOCTYPE html>
<html>
<head>
<title>css3 Selector not(selector) 套用樣式</title>
<meta http-equiv="Content-Type" content="text/html; charset=BIG5">
<style type="text/css">
a{
font-size: 20px;
color: silver;
}
:not(a){
font-size: 30px;
color: red;
}
</style>
</head>
<body>
<a href="#1">a tag test 1</a>
<div>
<a href="#2">a tag test 2</a>
<a href="#3">a tag test 3</a>
<p>p tag test 1</p>
</div>
<a href="#4">a tag test 4</a>
<p>p tag test 2</p>

</body>
</html>

圖1：

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

感謝~

其它文章

閱讀更多 »

css3 Selector last-child 套用樣式

支援CSS3 以上

用法：:last-child
說明：
a tag 是最後一個子元素

css定義：
a tag是最後一個子元素套用樣式
a:last-child {
font-size: 20px; 字型20像素
color: red; 字顏色red
background-color: yellow; 背景色 yellow
}

注意事項：
a tag 是最後一個子元素，
如果在div裡面的最後一個子元素，也算喔~

程式：
<!DOCTYPE html>
<html>
<head>
<title>css3 Selector last-child 套用樣式</title>
<meta http-equiv="Content-Type" content="text/html; charset=BIG5">
<style type="text/css">
a:last-child {
font-size: 20px;
color: red;
background-color: yellow;
}
</style>
</head>
<body>
<a href="#1">a tag test 1</a>
<div>
<a href="#2">a tag test 2</a>
<a href="#3">a tag test 3</a>
</div>
<a href="#4">a tag test 4</a>
</body>
</html>

會有二個tag被套用~
a3及a4
圖1：

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

感謝~

其它文章

閱讀更多 »

css3 Selector last-of-type 套用樣式

支援CSS3 以上

用法：:last-of-type
說明：
此tag的最後一個tag套用樣式

css定義：
p tag 的最後一個tag套用樣式
p:last-of-type {
background: lime;
}
注意事項：

程式：
<!DOCTYPE html>
<html>
<head>
<title>css3 Selector last-of-type 套用樣式</title>
<meta http-equiv="Content-Type" content="text/html; charset=BIG5">
<style type="text/css">
p:last-of-type {
background: lime;
}
</style>
</head>
<body>
<h5>明細</h5>
<p>name:</p>
<p>所在地:</p>
<p>css3 Selector last-of-type 套用樣式</p>
</body>
</html>

圖1：

css3 Selector first-of-type 套用樣式

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

感謝~

其它文章

閱讀更多 »

css3 Selector target 套用樣式

支援CSS3 以上

用法：:target
說明：
target 當被連接到的元素
配合用 a tag href 用#後加入元素id

css定義：
:target {
border: 2px solid blue;
background-color: gainsboro;
}
注意事項：

程式：
<!DOCTYPE html>
<html>
<head>
<title>css3 Selector target 套用樣式</title>
<meta http-equiv="Content-Type" content="text/html; charset=BIG5">
<style type="text/css">
:target {
border: 2px solid blue;
background-color: gainsboro;
}

</style>
</head>
<body>

<p><a href="#catalog1">商品 1</a></p>
<p><a href="#catalog2">商品 2</a></p>

<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p id="catalog1"><b>介紹商品 1...</b></p>
<p id="catalog2"><b>介紹商品 2...</b></p>
</body>
</html>

圖1：

圖2：

圖3：

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

感謝~

其它文章

閱讀更多 »

css3 Selector root 套用樣式

支援CSS3 以上

用法：:root
說明：
root 是指 HTML tag
css定義：
:root{
background: silver;
}
注意事項：

程式：
<!DOCTYPE html>
<html>
<head>
<title>css3 Selector root 套用樣式</title>
<meta http-equiv="Content-Type" content="text/html; charset=BIG5">
<style type="text/css">
:root{
background: silver;
}
</style>
</head>
<body>
<form action="">
name: <input readonly type="text" value="levin" ><br>
數量1: <input type="number" min="5" max="10" value="1"><br>
E-mail<input type="email" value="myEmail"><br>
</form>
</body>
</html>

圖1：

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

感謝~

其它文章

閱讀更多 »

css3 Selector read-only、read-write 總合應用套用樣式

支援CSS3 以上

用法： :read-only、:read-write
說明：
用在input輸入框，配合readonly來使用。

css定義：
input:-moz-read-only { /* For Firefox */
background-color: red;
}

input:read-only {
background-color: red;
}
input:-moz-read-write { /* For Firefox */
background-color: green;
}

input:read-write {
background-color: green;
}
注意事項：
參考：

程式：
<!DOCTYPE html>
<html>
<head>
<title>css3 Selector read-only、read-write 總合應用套用樣式</title>
<meta http-equiv="Content-Type" content="text/html; charset=BIG5">
<style type="text/css">
input:-moz-read-only { /* For Firefox */
background-color: red;
}

input:read-only {
background-color: red;
}
input:-moz-read-write { /* For Firefox */
background-color: green;
}

input:read-write {
background-color: green;
}
</style>
</head>
<body>
<form action="">
name: <input readonly type="text" value="levin" ><br>
數量1: <input type="number" min="5" max="10" value="1"><br>
E-mail<input type="email" value="myEmail"><br>
</form>
</body>
</html>

圖1：

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

感謝~

其它文章

閱讀更多 »

css3 Selector required、optional 總合應用套用樣式

支援CSS3 以上

用法：:required、:optional
說明：
用在input輸入框，配合readonly來使用。

css定義：
input:required {
border: 2px solid red;
}
input:optional {
border: 2px solid green;
}
注意事項：
參考：

程式：
<!DOCTYPE html>
<html>
<head>
<title>css3 Selector required、optional 總合應用套用樣式</title>
<meta http-equiv="Content-Type" content="text/html; charset=BIG5">
<style type="text/css">
input:required {
border: 2px solid red;
}
input:optional {
border: 2px solid green;
}
</style>
</head>
<body>
<form action="">
name: <input type="text" value="levin" required><br>
數量1: <input type="number" min="5" max="10" value="1"><br>
E-mail<input type="email" value="myEmail"><br>
</form>
</body>
</html>

圖1：

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

感謝~

其它文章

閱讀更多 »

css3 Selector read-write 套用樣式

支援CSS3 以上

用法：:read-write
說明：
用在input輸入框，配合readonly來使用。

當input 沒有readonly屬性則套用樣式

css定義：
input:read-write {
background-color: green;
}
注意事項：

read-write :可修改之意

程式：
<!DOCTYPE html>
<html>
<head>
<title>css3 Selector read-write 套用樣式</title>
<meta http-equiv="Content-Type" content="text/html; charset=BIG5">
<style type="text/css">
input:-moz-read-write { /* For Firefox */
background-color: green;
}

input:read-write {
background-color: green;
}
</style>
</head>
<body>
<form action="">
name: <input readonly type="text" value="levin" ><br>
數量1: <input type="number" min="5" max="10" value="1"><br>
E-mail<input type="email" value="myEmail"><br>
</form>
</body>
</html>

圖1：

css3 Selector read-only 套用樣式

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

感謝~

其它文章

閱讀更多 »

css3 Selector read-only 套用樣式

支援CSS3 以上

用法：:read-only
說明：
用在input輸入框，配合readonly來使用。

當input 為readonly屬性則套用樣式

css定義：
input:read-only {
background-color: red;
}
注意事項：

readonly :不可修改之意

程式：
<!DOCTYPE html>
<html>
<head>
<title>css3 Selector read-only 套用樣式</title>
<meta http-equiv="Content-Type" content="text/html; charset=BIG5">
<style type="text/css">
input:-moz-read-only { /* For Firefox */
background-color: red;
}

input:read-only {
background-color: red;
}
</style>
</head>
<body>
<form action="">
name: <input readonly type="text" value="levin" ><br>
數量1: <input type="number" min="5" max="10" value="1"><br>
E-mail<input type="email" value="myEmail"><br>
</form>
</body>
</html>

圖1：

css3 Selector read-write 套用樣式

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

感謝~

其它文章

閱讀更多 »

css3 Selector required 套用樣式

支援CSS3 以上

用法：:required
說明：
用在input輸入框，配合required來使用。

當input 有required屬性則套用樣式。

css定義：
input:required {
border: 2px solid red;
}
注意事項：

required : 所需的、必要的之意

程式：
<!DOCTYPE html>
<html>
<head>
<title>css3 Selector required 套用樣式</title>
<meta http-equiv="Content-Type" content="text/html; charset=BIG5">
<style type="text/css">
input:required {
border: 2px solid red;
}
</style>
</head>
<body>
<form action="">
name: <input type="text" value="levin" required><br>
數量1: <input type="number" min="5" max="10" value="1"><br>
E-mail<input type="email" value="myEmail"><br>
</form>
</body>
</html>

圖1：

css3 Selector optional 套用樣式

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

感謝~

其它文章

閱讀更多 »

css3 Selector optional 套用樣式

支援CSS3 以上

用法：:optional
說明：
用在input輸入框，配合required來使用。

當input 沒有required屬性則套用樣式

css定義：
input:optional {
border: 2px solid green;
}
注意事項：

required : 所需的、必要的之意

程式：
<!DOCTYPE html>
<html>
<head>
<title>css3 Selector optional 套用樣式</title>
<meta http-equiv="Content-Type" content="text/html; charset=BIG5">
<style type="text/css">
input:optional {
border: 2px solid green;
}
</style>
</head>
<body>
<form action="">
name: <input type="text" value="levin" required ><br>
數量1: <input type="number" min="5" max="10" value="1"><br>
E-mail<input type="email" value="myEmail"><br>
</form>
</body>
</html>

圖1：

css3 Selector required 套用樣式

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

感謝~

其它文章

閱讀更多 »

css3 Selector valid 套用樣式

支援CSS3 以上

用法：:valid
說明：
用在input輸入框，要有type
會依type來驗証輸入值是否有效，
valid 有效才套用樣式。

css定義：
input:valid {
border: 2px solid green;
}
注意事項：

程式：
<!DOCTYPE html>
<html>
<head>
<title>css3 Selector valid 套用樣式</title>
<meta http-equiv="Content-Type" content="text/html; charset=BIG5">
<style type="text/css">
input:valid {
border: 2px solid green;
}
</style>
</head>
<body>
<form action="">
name: <input type="text" value="levin"><br>
數量1: <input type="number" min="5" max="10" value="1"><br>
E-mail<input type="email" value="myEmail"><br>
</form>
</body>
</html>

輸入有效值
圖1：

輸入有效值
圖2：

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

感謝~

其它文章

閱讀更多 »

css3 Selector invalid 套用樣式

支援CSS3 以上

用法：:invalid
說明：
用在input輸入框，要有type
會依type來驗証輸入值是否有效，
invalid 無效才套用樣式。
css定義：
input:invalid {
border: 5px solid red;
}
注意事項：

程式：
<!DOCTYPE html>
<html>
<head>
<title>css3 Selector invalid 套用樣式</title>
<meta http-equiv="Content-Type" content="text/html; charset=BIG5">
<style type="text/css">
input:invalid {
border: 5px solid red;
}
</style>
</head>
<body>
<form action="">
name: <input type="text" value=""><br>
數量1: <input type="number" min="5" max="10" value="1"><br>
E-mail<input type="email" value="myEmail"><br>
</form>
</body>
</html>

輸入無效值
圖1：

輸入有效值
圖2：

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

感謝~

其它文章

閱讀更多 »

css3 Selector in-range、out-of-range 總合應用套用樣式

支援CSS3 以上

用法：:in-range、:out-of-range
說明：
輸入框屬性有設定區間值。
不在此區間套用樣式

css定義：
input:in-range {
border: 2px solid green;
}
input:out-of-range {
border: 2px solid red;
}
注意事項：

程式：
<!DOCTYPE html>
<html>
<head>
<title>css3 Selector in-range、out-of-range 總合應用套用樣式</title>
<meta http-equiv="Content-Type" content="text/html; charset=BIG5">
<style type="text/css">
input:in-range {
border: 2px solid green;
}
input:out-of-range {
border: 2px solid red;
}
</style>
</head>
<body>
<form action="">
name: <input type="text" value=""><br>
<p>輸入值為 5 ~ 10</p>
數量1: <input type="number" min="5" max="10" value="1">
<p></p>
數量2：<input type="number" min="5" max="10" value="7">
</form>
</body>
</html>

圖1：

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

感謝~

其它文章

閱讀更多 »

css3 Selector out-of-range 套用樣式

支援CSS3 以上

用法：:out-of-range
說明：
輸入框屬性有設定區間值。
不在此區間套用樣式

css定義：
input:out-of-range {
border: 5px solid red;
}
注意事項：

程式：
<!DOCTYPE html>
<html>
<head>
<title>css3 Selector out-of-range 套用樣式</title>
<meta http-equiv="Content-Type" content="text/html; charset=BIG5">
<style type="text/css">
input:out-of-range {
border: 5px solid red;
}
</style>
</head>
<body>
<form action="">
name: <input type="text" value=""><br>
數量1: <input type="number" value="7"><br>
<p>數量2 輸入值為 5 ~ 10 ，不在此區間會有紅框</p>
數量2：<input type="number" min="5" max="10" value="7">
</form>
</body>
</html>

圖1：

數量2 輸入值為1
圖2：

可配合css3 Selector in-range 使用

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

感謝~

其它文章

閱讀更多 »

css3 Selector in-range 套用樣式

支援CSS3 以上

用法：:in-range
說明：
輸入框屬性有設定區間值。
在此區間套用樣式

css定義：
input:in-range {
border: 5px solid green;
}
注意事項：

程式：
<!DOCTYPE html>
<html>
<head>
<title>css3 Selector in-range 套用樣式</title>
<meta http-equiv="Content-Type" content="text/html; charset=BIG5">
<style type="text/css">
input:in-range {
border: 5px solid green;
}
</style>
</head>
<body>
<form action="">
name: <input type="text" value=""><br>
數量1: <input type="number" value="7"><br>
<p>數量2 輸入值為 5 ~ 10 ，在此區間會有綠框</p>
數量2：<input type="number" min="5" max="10" value="7">
</form>
</body>
</html>

圖1：

數量2 輸入值為1 則沒有綠框
圖2：

可配合css3 Selector out-of-range 使用

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

感謝~

其它文章

閱讀更多 »

css3 Selector first-of-type 套用樣式

支援CSS3 以上

用法：:first-of-type
說明：
此tag的第一個tag套用樣式

css定義：
p tag 的第一個tag套用樣式
p:first-of-type {
background: lime;
}
注意事項：

程式：
<!DOCTYPE html>
<html>
<head>
<title>css3 Selector first-of-type 套用樣式</title>
<meta http-equiv="Content-Type" content="text/html; charset=BIG5">
<style type="text/css">
p:first-of-type {
background: lime;
}
</style>
</head>
<body>
<h5>明細</h5>
<p>name:</p>
<p>所在地:</p>
<p></p>
</body>
</html>

圖1：

css3 Selector last-of-type 套用樣式

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

感謝~

其它文章

閱讀更多 »

css3 Selector empty 套用樣式

支援CSS3 以上

用法：:empty
說明：
元素為空的

css定義：
p tag 元素為空的套用樣式
p:empty {
width: 20px;
height: 20px;
background: lime;
}
注意事項：

程式：
<!DOCTYPE html>
<html>
<head>
<title>css3 Selector empty 套用樣式</title>
<meta http-equiv="Content-Type" content="text/html; charset=BIG5">
<style type="text/css">
p:empty {
width: 20px;
height: 20px;
background: lime;
}
</style>
</head>
<body>
<p>name:</p>
<p>所在地:</p>
<p></p>
</body>
</html>

圖1：

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

感謝~

其它文章

閱讀更多 »

css2 Selector lang 套用樣式

支援CSS2 以上

用法：:lang
說明：
language 語言屬性

css定義：
p tag lang 等於是 tw的套用樣式
p:lang(tw) {
background: lime;
}
注意事項：

程式：
<!DOCTYPE html>
<html>
<head>
<title>css2 Selector lang 套用樣式</title>
<meta http-equiv="Content-Type" content="text/html; charset=BIG5">
<style type="text/css">
p:lang(tw) {
background: lime;
}
</style>
</head>
<body>
<form action="">
<p lang="en">name:</p> <input type="text" value=""><br>
<p lang="tw">所在地:</p> <input type="text" value="">
</form>
</body>
</html>

圖1：

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

感謝~

其它文章

閱讀更多 »

css2 Selector focus 套用樣式

支援CSS2 以上

用法：:focus
說明：
focus 焦點 (目前的)

css定義：
input focus 焦點
input:focus{
background: lime;
}
注意事項：

程式：
<!DOCTYPE html>
<html>
<head>
<title>css2 Selector focus 套用樣式</title>
<meta http-equiv="Content-Type" content="text/html; charset=BIG5">
<style type="text/css">
input:focus{
background: lime;
}
</style>
</head>
<body>
<form action="">
name: <input type="text" value=""><br>
所在地: <input type="text" value="">
</form>
</body>
</html>

圖1：

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

感謝~

其它文章

閱讀更多 »

css3 Selector enabled 套用樣式

支援CSS3 以上

用法：:enabled
說明：
enabled 可編寫的。

css定義：
input type 為 text 且是enabled
input[type=text]:enabled {
background: lime;
}
注意事項：

程式：
<!DOCTYPE html>
<html>
<head>
<title>css3 Selector enabled 套用樣式</title>
<meta http-equiv="Content-Type" content="text/html; charset=BIG5">
<style type="text/css">
input[type=text]:enabled {
background: lime;
}
</style>
</head>
<body>
<form action="">
name: <input type="text" value="Levin"><br>
所在地: <input type="text" disabled="disabled" value="Taiwan">
</form>
</body>
</html>

圖1：

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

感謝~

其它文章

閱讀更多 »

css3 Selector disabled 套用樣式

支援CSS3 以上

用法：:disabled
說明：
disabled 不可編寫的，但可見的。

css定義：
input type 為 text 且是disabled
input[type=text]:disabled {
background: lime;
}
注意事項：

程式：
<!DOCTYPE html>
<html>
<head>
<title>css3 Selector disabled 套用樣式</title>
<meta http-equiv="Content-Type" content="text/html; charset=BIG5">
<style type="text/css">
input[type=text]:disabled {
background: lime;
}
</style>
</head>
<body>
<form action="">
name: <input type="text" value="Levin"><br>
所在地: <input type="text" disabled="disabled" value="Taiwan">
</form>
</body>
</html>

圖1：

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

感謝~

其它文章

閱讀更多 »

訂閱：文章 (Atom)