สัปดาห์ที่ 4: การจัดรูปแบบเว็บด้วย Style Sheet (ต่อ)

» การจัดรูปแบบเว็บด้วย Style Sheet

การกำหนดสไตล์ให้กับลิงค์ (CSS Links)

» แม้ว่าจะเป็นลิงค์ แต่หากกำหนดคลาสให้เป็นปุ่ม ลิงค์นั้นก็จะมีรูปแบบเหมือนกับปุ่มได้ นี่คือ ความสามารถของสไตล์ชีต (การกำหนดสไตล์ ให้กับอิลิเมนต์ต่าง ๆ)
ค่า Properties ของลิงค์ ได้แก่
- a:link คือ ลิงค์ปกติ ซึ่งจะมีเส้นใต้ด้านล่างลิงค์
- a:visited คือ ลิงค์ที่เคยไปที่เว็บนั้นมาแล้ว
- a:hover คือ การเหตุการณ์เมื่อนำเมาส์วางบนลิงค์นั้น
- a:active คือ เหตุการณ์เมื่อลิงค์ถูกคลิ๊ก

<div>
<style>
/* unvisited link */
a:link { color: red; }
/* visited link */
a:visited {color: green;}
/* mouse over link */
a:hover {color: hotpink;}
/* selected link */
a:active { color: blue;}
</style>
</head>
<body>
<a style="font-size:65px;" href="#" target="_blank">คลิ๊กลิงค์</a> 
</body>

ผลลัพธ์:


คลิ๊กลิงค์

การกำหนดสไตล์พื้นหลังให้กับลีสต์รายการ

» text-decoration ประกอบด้วย 1) none 2) overline 3) line-through และ 4) underline

<ul style="background: #3399ff;
padding: 20px;">
<li style="background: #cce5ff;margin: 5px;">Coffee</li>
<li style="background: #cce5ff;margin: 5px;">Tea</li>
<li style="background: #cce5ff;margin: 5px;">Coca Cola</li>
</ul>

ผลลัพธ์:

  • Coffee
  • Tea
  • Coca Cola

การกำหนดความกว้าง ด้วย width, max-width และ margin:auto

» การกำหนดความกว้าง ด้วย width, max-width และ margin:auto;
» คำอธิบาย :
- การใช้ block จะมีความกว้างแบบเต็มหน้าจอ
- การกำหนดความกว้างให้กับบล็อก (block) จะช่วยป้องกันการแสดงนอกกรอบ สามารถกำหนดเป็น auto 
- ปัญหาของแท็ก 
 เมื่อบราวเซอร์เล็กกว่าความกว้างของมัน บราวเซอร์จะใส่สกอร์ลบาร์ลงในหน้าเว็บ การใช้ max-width จะช่วยแก้ปัญหาบราวเซอร์ที่มีขนาดหน้าจอเล็ก (ปกติเวลาย่อบราวเซอร์ หรือหน้าจอของสมาร์ตโฟน)
<div style="width:500px;
margin: auto;
border: 3px solid #73AD21;">นี่คือแท็ก div กำหนดค่า width: 500px;</div>
<br>
<div style="max-width:500px;
margin: auto;
border: 3px solid #73AD21;">นี่คือแท็ก div กำหนดค่า max-width: 500px;</div>

ผลลัพธ์:

นี่คือแท็ก div กำหนดค่า width: 500px;

นี่คือแท็ก div กำหนดค่า max-width: 500px;

การใส่กรอบสวยงามน่าสนใจ

»  การใส่กรอบด้วย border-image

 <p style=" border: 10px solid transparent;padding: 15px;
-webkit-border-image: url(https://www.w3schools.com/css/border.png) 30 round; /* Safari 3.1-5 */
-o-border-image: url(border.png) 30 round; /* Opera 11-12.1 */
border-image: url(https://www.w3schools.com/css/border.png) 30 round;">Hello World</p>

ผลลัพธ์:

Hello World

ใส่กรอบด้วย border-image

» กรอบด้วย border-image

 <p style="border: 10px solid transparent;padding: 15px;
-webkit-border-image: url(https://www.w3schools.com/css/border.png) 30 stretch; /* Safari 3.1-5 */
-o-border-image: url(border.png) 30 stretch; /* Opera 11-12.1 */
border-image: url(https://www.w3schools.com/css/border.png) 30 stretch;">Hello World.</p>

ผลลัพธ์:

Hello World.

การใช้งาน border-box

»  

<p>No background-clip (border-box is default):</p>
<div style="border: 10px dotted black;
padding:35px;
background: yellow;">
<h2>Google</h2>
<p>สวัสดี</p>
</div>
<p>background-clip: padding-box:</p>
<div style="border: 10px dotted black;
padding:35px;
background: yellow;
background-clip: padding-box;">
<h2>Gmail</h2>
<p>สวัสดี</p>
</div>
<p>background-clip: content-box:</p>
<div style="border: 10px dotted black;
padding:35px;
background: yellow;
background-clip: content-box;">
<h2>Youtube</h2>
<p>สวัสดี</p>
</div>

ผลลัพธ์:

No background-clip (border-box is default):

Google

สวัสดี

background-clip: padding-box:

Gmail

สวัสดี

background-clip: content-box:

Youtube

สวัสดี

การใช้งาน backgroud-color

» กำหนดด้วย style="background-color:rgba(red ,green ,blue, alpha);"

<p style="background-color:rgba(255,0,0,0.3);">Red</p>
<p style="background-color:rgba(0,255,0,0.3);">Green</p>
<p style="background-color:rgba(0,0,255,0.3);">Blue</p>
<p style="background-color:rgba(192,192,192,0.3);">Grey</p>
<p style="background-color:rgba(255,255,0,0.3);">Yellow</p>
<p style="background-color:rgba(255,0,255,0.3);">Cerise</p>

ผลลัพธ์:

Red

Green

Blue

Grey

Yellow

Cerise

การใช้งาน background-color : hsl

» กำหนดสีพื้นหลังด้วย style="background-color:hsl(120,100%,50%);"

<p style="background-color:hsl(120,100%,50%);">Green</p>
<p style="background-color:hsl(120,100%,75%);">Light green</p>
<p style="background-color:hsl(120,100%,25%);">Dark green</p>
<p style="background-color:hsl(120,60%,70%);">Pastel green</p>
<p style="background-color:hsl(290,100%,50%);">Violet</p>
<p style="background-color:hsl(290,60%,70%);">Pastel violet</p>

ผลลัพธ์:

Green

Light green

Dark green

Pastel green

Violet

Pastel violet

การใช้งาน background-color - hsla 

» กำหนดสีพื้นหลังด้วยstyle="background-color:hsla(120,100%,50%,0.3);"

<p style="background-color:hsla(120,100%,50%,0.3);">Green</p>
<p style="background-color:hsla(120,100%,75%,0.3);">Light green</p>
<p style="background-color:hsla(120,100%,25%,0.3);">Dark green</p>
<p style="background-color:hsla(120,60%,70%,0.3);">Pastel green</p>
<p style="background-color:hsla(290,100%,50%,0.3);">Violet</p>
<p style="background-color:hsla(290,60%,70%,0.3);">Pastel violet</p>

ผลลัพธ์:

Green

Light green

Dark green

Pastel green

Violet

Pastel violet

การใช้งาน background-color : opacity

» กำหนดสีพื้นหลังให้มีความโปร่งแสงด้วย opacity

<p style="background-color:rgb(255,0,0);opacity:0.6;">Red</p>
<p style="background-color:rgb(0,255,0);opacity:0.6;">Green</p>
<p style="background-color:rgb(0,0,255);opacity:0.6;">Blue</p>
<p style="background-color:rgb(192,192,192);opacity:0.6;">Grey</p>
<p style="background-color:rgb(255,255,0);opacity:0.6;">Yellow</p>
<p style="background-color:rgb(255,0,255);opacity:0.6;">Cerise</p>

ผลลัพธ์:

Red

Green

Blue

Grey

Yellow

Cerise

การไล่เฉดสีแนวตั้ง 

»  การไล่เฉดสีแนวตั้ง 

<div style=" height: 200px;
background: red; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(red, yellow); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(red, yellow); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(red, yellow); /* For Firefox 3.6 to 15 */
background: linear-gradient(red, yellow); /* Standard syntax (must be last) */"></div>

ผลลัพธ์:

การไล่เฉดสีแนวนอน

»   การไล่เฉดสีแนวนอน

<div style=" height: 200px;
background: red; /* For browsers that do not support gradients */ 
background: -webkit-linear-gradient(left, red , yellow); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(right, red, yellow); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(right, red, yellow); /* For Firefox 3.6 to 15 */
background: linear-gradient(to right, red , yellow); /* Standard syntax (must be last) */"></div>

ผลลัพธ์:

กิจกรรมที่ 1: กำหนดภาพลอยด้านซ้ายตัวอักษร

คำชี้แจง
1. แสดงกรอบ พื้นสีเทา
2. ภาพอยู่บนด้านซ้ายมือของตัวอักษร กำหนดขนาดความกว้างของภาพ 320px
3. ตัวอักษรลอยไปอยู่ด้านบนของภาพ ใช้ฟอนต์ thsarabunnew ดาวน์โหลดได้จาก https://dsdi.msu.ac.th/fonts/thsarabunnew-webfont.ttf
4. ใส่รายละเอียด

» กล้องวงจรปิดที่ใช้เป็นรุ่น BESDER 1080P PTZ IP Camera Outdoor Speed Dome Wireless Wifi Security Camera Pan Tilt 4X Digital Zoom IR Network CCTV Surveillance ONVIF
» Telnet ด้วย  user : root / cxlinux
» RTSP Protocol ความละเอียด 1280x720  rtsp://[ไอพีกล้อง]:554/onvif1
» RTSP Protocol ความละเอียด 320x180:  rtsp://[ไอพีกล้อง]:554/onvif2
» อ่านภาพ 1 เฟรม http://[ไอพีกล้อง]:554/snapshot
» Webui: http://[ไอพีกล้อง]:8080/cgi-bin/webui
» การใส่รหัสผ่าน แก้ไฟล์ /home/hwcfg.ini เพิ่มบรรทัด passwd=รหัส
» อ่านภาพ 1 เฟรม http://[ไอพีกล้อง]:554/snapshot

กิจกรรมที่ 2: กำหนดภาพลอยด้านขวาตัวอักษร

คำชี้แจง
1. แสดงกรอบ พื้นสีเทา ให้ใช้แท็ก pre
2. ภาพอยู่บนด้านขวามือของตัวอักษร กำหนดขนาดความกว้างของภาพ 320px
3. ตัวอักษรลอยไปอยู่ด้านบนของภาพ ใช้ฟอนต์ thsarabunnew ดาวน์โหลดได้จาก https://dsdi.msu.ac.th/fonts/thsarabunnew-webfont.ttf
4. ใส่รายละเอียด
5. ใส่ลิงค์รายละเอียดสินค้าและให้เปิดในแท็บใหม่ ( target='blank' )

 » กล้องวงจรปิดที่ใช้เป็นรุ่น BESDER 1080P PTZ IP Camera Outdoor Speed Dome Wireless Wifi Security Camera Pan Tilt 4X Digital Zoom IR Network CCTV Surveillance ONVIF
» Telnet ด้วย  user : root / cxlinux
» RTSP Protocol ความละเอียด 1280x720  rtsp://[ไอพีกล้อง]:554/onvif1
» RTSP Protocol ความละเอียด 320x180:  rtsp://[ไอพีกล้อง]:554/onvif2
» อ่านภาพ 1 เฟรม http://[ไอพีกล้อง]:554/snapshot
» Webui: http://[ไอพีกล้อง]:8080/cgi-bin/webui
» การใส่รหัสผ่าน แก้ไฟล์ /home/hwcfg.ini เพิ่มบรรทัด passwd=รหัส
» อ่านภาพ 1 เฟรม http://[ไอพีกล้อง]:554/snapshot

กิจกรรมที่ 3: กำหนดกรอบให้กับกิจกรรม 1

คำชี้แจง
1. แสดงกรอบพื้นสีขาว กรอบจากตัวอย่าง การใส่กรอบด้วย border-image
2. ภาพอยู่บนด้านขวามือของตัวอักษร กำหนดขนาดความกว้างของภาพ 320px
3. ตัวอักษรลอยไปอยู่ด้านบนของภาพ ใช้ฟอนต์ sarabunดาวน์โหลดได้จาก https://dsdi.msu.ac.th/fonts/thsarabunnew-webfont.ttf
4. ใส่รายละเอียด
5. ใส่ลิงค์รายละเอียดสินค้าและให้เปิดในแท็บใหม่ ( target='blank' )
» กล้องวงจรปิดที่ใช้เป็นรุ่น BESDER 1080P PTZ IP Camera Outdoor Speed Dome Wireless Wifi Security Camera Pan Tilt 4X Digital Zoom IR Network CCTV Surveillance ONVIF » Telnet ด้วย user : root / cxlinux
» RTSP Protocol ความละเอียด 1280x720 rtsp://[ไอพีกล้อง]:554/onvif1
» RTSP Protocol ความละเอียด 320x180: rtsp://[ไอพีกล้อง]:554/onvif2
» อ่านภาพ 1 เฟรม http://[ไอพีกล้อง]:554/snapshot
» Webui: http://[ไอพีกล้อง]:8080/cgi-bin/webui
» การใส่รหัสผ่าน แก้ไฟล์ /home/hwcfg.ini เพิ่มบรรทัด passwd=รหัส
» อ่านภาพ 1 เฟรม http://[ไอพีกล้อง]:554/snapshot

กิจกรรมที่ 4: กำหนดกรอบให้กับกิจกรรม 1

คำชี้แจง
1. แสดงกรอบพื้นสีขาว กรอบจากตัวอย่าง การใส่กรอบด้วย border-image
2. ภาพอยู่บนด้านขวามือของตัวอักษร กำหนดขนาดความกว้างของภาพ 320px
3. ตัวอักษรลอยไปอยู่ด้านบนของภาพ ใช้ฟอนต์ sarabunดาวน์โหลดได้จาก https://dsdi.msu.ac.th/fonts/thsarabunnew-webfont.ttf
4. ใส่รายละเอียด
5. ใส่ลิงค์รายละเอียดสินค้าและให้เปิดในแท็บใหม่ ( target='blank' )
» กล้องวงจรปิดที่ใช้เป็นรุ่น BESDER 1080P PTZ IP Camera Outdoor Speed Dome Wireless Wifi Security Camera Pan Tilt 4X Digital Zoom IR Network CCTV Surveillance ONVIF » Telnet ด้วย user : root / cxlinux
» RTSP Protocol ความละเอียด 1280x720 rtsp://[ไอพีกล้อง]:554/onvif1
» RTSP Protocol ความละเอียด 320x180: rtsp://[ไอพีกล้อง]:554/onvif2
» อ่านภาพ 1 เฟรม http://[ไอพีกล้อง]:554/snapshot
» Webui: http://[ไอพีกล้อง]:8080/cgi-bin/webui
» การใส่รหัสผ่าน แก้ไฟล์ /home/hwcfg.ini เพิ่มบรรทัด passwd=รหัส
» อ่านภาพ 1 เฟรม http://[ไอพีกล้อง]:554/snapshot
การจัดรูปแบบเว็บด้วย Style Sheet