สีลิง และการตกแต่งลิง สีของลิงและการตกแต่งลิง โดยเราจะใช้คำสั่งธรรมดาของ HTML ที่เคยอ่าน ๆ กันมา (อ่านหรือยังนั่น... ไม่ได้อ่านก็ไปอ่านมาก่อนนะครับ เดี๋ยวงง (ไปกว่านี้) จะหาว่าไม่เตือนนะครับ) ไม่ได้แล้วครับ ต้องใช้คำสั่งของ stylesheet หรือ CSS แล้ว โดยมาดูรูปแบบคำสั่งกันก่อนครับ โดยทั่วไป ก็จะอยู่ในรูป คำสั่ง html { property: value;} นะครับ เราเรียกคำสั่งรูปแบบนี้ว่า class คือว่ามันจะมีคำสั่งเป็นกลุ่ม ๆ ไปน่ะครับ เช่น ค่าขอบของกล่องข้อความ ก็จะมีขนาดเส้น รูปแบบเส้น สี เป็นกลุ่ม html ก็คือคำสั่งที่ระบุลักษณะที่เราต้องการ เช่น คำสั่ง link (ที่เราจะพูดถึงวันนี้ล่ะ), ย่อหน้า ( ... ), ตาราง เป็นตัว (ทำไมต้องเป็นต้นเนี่ย ว่าง ๆ ต้องไปหาหน่อยแล้ว เป็นตัว เป็นตนมั่งไม่ได้หรือไงหว่า) property ก็คือ ค่าที่เราจะระบุข้างใน เพื่อให้แสดงผล เช่น ค่าต่าง ๆ ของตัวหนังสือ (font), ค่าเส้นขอบตาราง หรือค่าสีพื้นตาราง อะไรแบบนี้ล่ะครับ อย่าสงสัยสิครับ ผมรู้แค่นี้เหมือนกัน 5 5 5 value ก็คือ ค่าคล้าย ๆ attribute ที่เราเรียก ๆ กันใน html น่ะครับ เป็นการกำหนดค่าของสิ่งที่ต้องการให้แสดงผล เช่น ขนาด font, สี font, ตัวหนา ตัวเอียง เป็นต้น... อย่ากระนั้นเลย มาดูคำสั่งเกี่ยวกับตัวหนังสือที่บอก link กันดีกว่า....ปรากฏว่า มันกลายเป็น CSS Pseudo-classes ครับคือ รูปแบบคำสั่งจะเป็นแบบนี้ a:(ชื่อที่บอกสถานะ){ค่า attribute: value;} ลองดูคำสั่งที่เราใช้คือ code CSS แสดงคำสั่งกำหนดลักษณะ link   นั่นก็คือ ชื่อที่บอกสถานะ หรือ State's name ในที่นี้ก็คือ link, visited, hover, และ active นั่นล่ะครับ ที่เราเปลี่ยนได้ก็คือ attribute และ value ของมันน่ะครับ แล้วมันคืออะไรล่ะ มาดูครับ link หมายถึง ตอนปกติเปิดหน้า web มาข้อความที่เป็น link จะมีหน้าตาเป็นแบบนี้ hover หมายถึง เมื่อลาก mouse ไปวางบน link แต่ยังไม่ได้ click active หมายถึง เมื่อเราเพิ่ง click link นี้ไป แต่ว่า ยังไม่ได้ลาก mouse ออกจาก link คือ เพิ่งกดหน้า link ไปน่ะครับ visited หมายถึง เมื่อเรา click ไปยัง link นี้แล้ว จะเป็นแบบนี้ สำหรับการตกแต่งที่ใช้ หรือ ค่า attribute และ value ก็ประกอบไปด้วย font color: ... ; หมายถึง สีที่เราต้องการ ค่า default เป็น black ใส่เข้าไปเลยครับ เราอาจจะใส่เป็น code สี เช่น #xxxxxx ก็ได้ หรือจะใส่เป็น name of color หรือชื่อสีก็ได้ครับ ระบุเป็นระบบ rbg ก็จะอยู่ในรูป rbg(xxx,xxx,xxx) น่ะครับ xxx ที่เห็นก็แทนด้วยเลข 0-255 นั่นล่ะครับ ยากมาก ๆ background-color: ...; คำสั่งนี้จะทำให้ตัว link มีสี ๆ สด ๆ เป็นพื้น (background) ขนาดเล็ก ๆ คล้าย ๆ เราใช้ปากกาสีสะท้อนแสงเน้นคำน่ะครับ โดยก็ใส่ชื่อสี หรือรหัสสีลงไปด้วยเลย ในหน้านี้ ผมระบุให้มีสีเหลืองเป็น hilight ตอนที่เป็น active ครับ ลองจิ้ม ๆ ลิงดูก็ได้ font family: ... ; ก็มีหลายแบบให้เลือกครับ ถ้าอยากรู้ว่า จะใช้อะไรก็กดดูใน web browser ได้เลยครับ สำหรับ Internet explorer ก็ดูดังนี้ Tools » General » Fonts.. ตรงด้านบนของหน้าต่าง web browser จะมี tool bar เห็นปุ่ม Tools มั้ยครับ กดแล้วจะมีหน้าต่างใหม่เด้งมา เป็น Internet Options น่ะครับ ไม่ยาก ๆ ชอบแบบไหนก็เลือกชื่อมันลงไป แล้วก็จะระบุได้แล้วครับ ง่าย ๆ font-size: ... ; ก็ กำหนดขนาดของ font ธรรมดาครับ ถ้าไม่กำหนดก็จะเป็นแบบเดียวกันข้อความใน blog เรานั่นล่ะครับ จะมีให้เลือก percent ก็ระบุเป็น % เช่น 120% น่ะครับ โดย 100% นี่เป็นขนาดปกติของ base font ของเราครับ ระบุเป็น px ซึ่ง px ก็คือ pixel ครับ บางยี่ห้อก็ระบุเป็น pt หรือ point คล้าย ๆ กันครับ ขนาดเป็น size อันนี้ก็ระบุเหมือนเสื้อเลยครับ เป็น xx-large, x-large, large, medium, small, x-small, xx-small แต่ไม่ค่อยเห็นใครเค้าใช้กันครับ ค่า default ก็คือ medium เอาเป็นว่ารู้ไว้อวดชาวบ้านที่ไม่ได้อ่าน blog นี้ (ว่าไปนั่น) ก็แล้วกันครับ font-weight: ... ; คือน้ำหนักของเส้นที่เป็น font ครับ มี 2 ระบบครับ ระบบระบุเป็นตัวหนังสือ ก็มีระบุแค่ bolder กับ normal ให้เลือกครับ ถ้าไม่ใส่ไม่ระบุอะไรหรือ defualt จะเป็น normal ระบุเป็นตัวเลข อันนี้ไม่ค่อยมีคนใช่เท่าไหร่ (รึไม่ก็ เรามันโง่เองก็ไม่รู้ ''- - ) เค้าใช้เลขจำนวนเท่าของ 100 ครับ เช่น 200, 300 เป็นต้น ค่าที่เป็น default คือ 100 ส่วนค่าที่มีให้เลือกก็ 100 จนถึง 900 เรียกว่ามี 9 ระดับความเข้มน่ะครับ font-style: ... ; มีให้เลือกเป็น italics ไม่ได้แปลว่าเป็น font ของ Italy นะครับ แต่เป็นตัวเอียง หรือบางคนก็ใช้ oblique ครับ ผลเหมือนกัน อีกแบบก็ normal อันนี้ก็ไม่เอียง สำหรับ default เป็น normal นี่ล่ะครับ font variant: ... ; อันนี้ก็ไว้ดูเท่เฉย ๆ คือมีให้เลือกแค่ small-caps ก็จะมีผลให้เกิดตัวหนังสือตัวพิมพ์ใหญ่แต่ว่าขนาดเล็ก... งงมั้ยครับ เช่น IT HAS AN EFFECT LIKE THIS จะมีเฉพาะในภาษาอังกฤษนะครับ ภาษาไทยไม่เคยลองเหมือนกัน... text-decoraion: ... ; เป็นตัวช่วยที่จะทำให้เราตกแต่งข้อความได้ นิดหน่อยครับ ได้แก่ none ก็คือไม่ใส่อะไรเลย underline ก็จะมีขีดเส้นใต้ข้อความที่เป็น link อันนี้เป็น default คือ ไม่ระบุจะได้เส้นใต้แถมมาเลย overline ก็จะมีเส้นอยู่ข้างบน line-through ก็จะมี เส้นขีดกลางตัวหนังสือ ← แบบนี้ล่ะครับ word-spacing: ตัวเลขpx; อันนี้เป็นการเว้นระยะระหว่างคำน่ะครับ ใส่ตัวเลขที่ต้องการไป ก็จะได้ตัวหนังสือระหว่างคำห่างออก ใช้ในภาษาอังกฤษเป็นสำคัญ เช่น This    is    a    book. letter spacing: ตัวเลขpx; เป็นการระบุระยะระหว่างตัวหนังสือ เช่น T h i s    i s    a    b o o k เป็นต้น border: 10px solid สีที่ต้องการ; อันนี้จะเหมือนกันกับที่เราระบุในเรื่องกล่องความเห็น comment box ล่ะครับ ก็ประกอบด้วย ขนาดขอบ ก็ระบุเป็นจำนวน pixel ครับ ลักษณะขอบ ก็จะมีให้เลือกเป็น solid, dashed, dotted, etc สีที่ต้องการ ก็จะระบุเป็น code สีหรือระบุเป็นชื่อสีก็ได้ครับ position: ...; เป็นการระบุใช้ที่ hover และ active เท่านั้นนะครับ เป็นคำสั่งที่ระบุว่า จะมีตำแหน่งเคลื่อนไหวเมื่อเราลาก mouse มาวาง เรียกว่า ต้องมีการกระทำของเราบางอย่างกับ link ถ้าอยู่เฉย ๆ เช่น visited แปลว่าเยี่ยมชมหรือคลิ๊กไปแล้ว ก็ไม่เกิดอะไร เป็นต้นครับ ค่าที่เลือกได้ก็มีดังนี้ absolute หมายความว่า ไม่ขยับเขยี้อนเลย มั่นคงมาก ซึ่งค่านี้เป็นค่า default ครับ ถ้าไม่อยากให้ขยับก็ไม่ต้องใส่จะง่ายกว่า relative ก็แปลว่ามีความเคลื่อนไหว โดยจะต้องระบุความสัมพันธ์ (จริง ๆ คือสัมพัทธ์) กับตำแหน่งปกติ ซึ่งระบุได้เป็นใน 2 ทิศทางคือ top เป็นการระบุในแนวดิ่งครับ มีขึ้นกับลง ถ้าต้องการให้ลง ก็ระบุค่าเป็นลบ โดยตัวเลขจะหมายถึงระยะที่เลื่อนไป เช่น position: relative: top:-3px; ก็หมายความว่า เวลาลาก mouse ไปวาง ตัวอักษรจะเลื่อนลง (เพราะค่า top ติดลบ) 3 pixel left เป็นการระบุในแนวนอน โดยอาศัยหลักการเดียวกันครับ ถ้าระบุเป็นค่าติดลบ ก็จะเลื่อนไปทางขวาแทนตอนลาก mouse ไปวาง สำหรับในหน้า blog นี้ ลองจิ้มที่ link ดูครับ ระบุให้เป็น position: relative; left: -2px; top: 1; อยู่ครับ link ที่ว่าก็มีตรงข้างบนเรื่อง commment box กับตรงท้ายเรื่องสมุดเยี่ยมครับ ยากไปไหมครับ เอาง่าย ๆ ก็ copy code กึ่งสำเร็จรูปนี้ไปแล้วกันครับ เป็น code basic อย่าลืมทำให้เป็นบรรทัดเดียวกันด้วยล่ะครับ code แสดงสี ไม่มีเส้นใต้ code: hilight, กำหนดสี และไม่มีเส้นใต้ครับ code แสดงสี ไม่มีเส้นใต้ และมีกรอบเล็ก ๆ ล้อมรอบ code แสดงสี ไม่มีเส้นใต้ และใส่ position ที่ hover คำแนะนำในการใช้คำสั่งนี้ Attributes และ tags ที่ว่า ใช้วางภายในเครื่องหมายปีกกานะครับ และอย่าลืมว่า เมื่อกำหนดแล้ว ทั้งหน้านั้น (หรือทั้ง blog กรณีใส่ในช่องข้อความแนะนำตัวหรือ slogan) จะเป็น pattern นี้หมดครับ ถ้าหากเราไปใส่ในช่องข้อความของ blog ก็จะให้ผลเฉพาะหน้านั้น ๆ เพียงหน้าเดียวครับ ถ้าหากเราต้องการให้ group blog เรามี link ต่าง ๆ กันทุก group ก็แค่ใส่หัว link ในแต่ละ blog ให้มันเหมือนกันเฉพาะใน group ได้ ทั่วไปแล้วก็มักจะให้สีของ link ที่ไปอ่านแล้ว (visited) สีเข้ม ๆ กว่า ลองนึกถึงในพันทิปน่ะครับ สำหรับ active นี่มีผลไม่มากครับ พอเราย้าย mouse ออกมาหลัง (double) click มันก็หายไปแล้วล่ะครับ บางคนก็ไม่ระบุเอาซะงั้น อะไรข้อไหนไม่อยากได้ ก็ลบออกทั้งบรรทัดได้เลยครับ เอาแต่ที่ใช้ก็พอ เราใช้ : หลังหัวข้อ attribute และ ; หลังจากใส่ค่า value สังเกตดี ๆ นะครับ [ถามมาก็ตอบไป]  [สมุดเยี่ยม]   Create Date : 31 กรกฎาคม 2548 32 comments Last Update : 3 ธันวาคม 2549 0:01:18 น. Counter : 1740 Pageviews. Share Tweet

ขอบคุณครับ ละเอียดยิบ ๆเลย   โดย: แม่สาย 31 กรกฎาคม 2548 4:24:37 น.

โอวว มาเร็วมากครับ   โดย: dont wanna no 31 กรกฎาคม 2548 4:27:04 น.

เข้ามาดูค่ะ เก็บเกี่ยวความรู้   โดย: iampum 31 กรกฎาคม 2548 4:36:01 น.

ใช้ละเอียดจริง ๆ เลยคะ   โดย: Angel Tanya 31 กรกฎาคม 2548 4:36:04 น.

มีแก้ไขด้วยนะครับ ว่าง ๆ มาอ่านใหม่แล้วกัน มากันเร็วมาก จนผมตรวจตราไม่ทันได้พิมพ์ตั้งหลายเรื่องแน่ะ...   โดย: dont wanna no 31 กรกฎาคม 2548 5:00:39 น.

เข้ามาอ่านอีกรอบค่ะ แต่...ตอนนี้ง่วงจัง ว่าง ๆ จะแวะมาอ่านอีกรอบค่ะ   โดย: iampum 31 กรกฎาคม 2548 5:05:12 น.

เด๋วไว้เข้ามาใหม่ค่ะ ตอนนี้สมองไม่รับละ   โดย: ขนมชั้น...เธอห้ามกิน!!! 31 กรกฎาคม 2548 5:16:45 น.

มาสูบความรู้ก่อน..เด๋วต้องไปงมๆต่อ..   โดย: FaCtOrY cHeeSeCaKe 31 กรกฎาคม 2548 5:28:36 น.

ขอบคุณคะ   โดย: โอน่าจอมซ่าส์ 31 กรกฎาคม 2548 6:23:44 น.

ได้ความรุ้เพิ่มมากมายละเอียดยิบ ขอบคุณนะคะ   โดย: มัชฌิมา 31 กรกฎาคม 2548 7:26:03 น.

ขอเรียนรู้ด้วยคนค่ะ ว่างๆจะเข้ามาเยี่ยมบ่อยๆ พร้อมแบกวิชากลับไปด้วย   โดย: naruน้องใหม่ 31 กรกฎาคม 2548 9:55:39 น.

ขอบคุณค่ะที่มาให้ความรู้ค่ะ   โดย: รัตน์ดา 31 กรกฎาคม 2548 10:12:17 น.

ขอบคุณคร๊าบ   โดย: dont wanna no 31 กรกฎาคม 2548 10:17:54 น.

ได้ความรู้อีกเยอะ นี่เลยต้องเซฟเอาไว้อ่านเองอีกรอบ เผื่อจะได้ไม่ลืมด้วยน่ะค่ะ   โดย: JewNid 31 กรกฎาคม 2548 10:46:48 น.

ฮ่า ฮ่า ฮ่า...มาอ่านเรื่องลิงๆ... ขอบคุณที่เอาลิงเป็นฝูงมาฝากนะครับ   โดย: กุมภีน 31 กรกฎาคม 2548 10:50:57 น.

ขอบคุณค่า พอมั่วๆ ไปได้ อิอิ ^^ ...   โดย: ขอบคุณที่รักกัน (blueberry_cpie ) 31 กรกฎาคม 2548 11:26:26 น.

ละเอียดดีจังเลยค่ะ   โดย: prncess 31 กรกฎาคม 2548 11:29:54 น.

ขอบคุณคะ   โดย: asariss 31 กรกฎาคม 2548 11:40:21 น.

จขบ.ใจดี จังเลยค่ะ   โดย: หนี่หนีหนี้ 31 กรกฎาคม 2548 12:31:44 น.

ขอถามสักหน่อยครับ เห็นมีวิธีลบรูปที่อยู่ิบลอกของเราได้ แสดงว่าต้องมีวิธีเอารูปเข้าไปไว้ได้ใช่ไหมครับ ที่อยากทราบคือจะเอารูปไปไว้ในบลอกได้อย่างไร ผมมือใหม่ยังงงงงอยู่ ขอบคุณครับ   โดย: tomzeny (sakol98 ) 31 กรกฎาคม 2548 12:42:16 น.

อะ พี่ยู ไม่แสดงฅวามเปนเจ้าของไว้ก่อน เด๋วมีพวกแอบเอาโค้ดไปแจกอีกนา   โดย: นู๋เองง่ะ 31 กรกฎาคม 2548 13:12:52 น.

^ ^ กัมม์ โทดที มะได้ดูข้างๆง่ะ อ่านตะเนื้อเรื่อง   โดย: นู๋เองง่ะ 31 กรกฎาคม 2548 13:14:05 น.

เฮ้อ ... รอนานแล้วค่ะ บทนี้ บังเอิญไปเจอที่เว็บเมืองนอก เลยคว้ามาลองดูก่อน แต่ของที่นี่ละเอียดกว่าเยอะเลย   โดย: ป้ามด 31 กรกฎาคม 2548 15:21:55 น.

อ่านไป...งงไป...เฮ้อ...จะพยายามมากกว่านี้ค่ะ...   โดย: ว่าน 2 สิงหาคม 2548 16:12:52 น.

อ่านแล้ว อิชั้น ถอดวิญญาณไปแล้วเจ้าค่า คร่อกกกก   โดย: kisara 13 สิงหาคม 2548 10:52:52 น.

งงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงงง งง งง งงสุดๆๆๆๆๆๆๆๆๆๆๆๆๆๆๆๆๆๆๆๆๆๆๆๆๆๆๆ อยากหัดทำแต่ยิ่งอ่านยิ่งงงงงงงงงงงงงงงงงงงงงงงงงงงงง   โดย: hai IP: 202.28.64.37 13 สิงหาคม 2548 15:54:33 น.

อ่า ค่อย ๆ อ่านครับ เดี๋ยวก็ทำได้เอง ลองแบบง่าย ๆ ที่เตรียมไว้ให้ใช้ไปก่อน พออาคมแก่กล้าค่อยลองแบบอื่น ๆ ครับ   โดย: dont wanna no 11 กันยายน 2548 18:50:35 น.

โดย: เด้ก IP: 58.10.93.82 1 สิงหาคม 2549 14:51:52 น.

อย่ารู้ว่าเป็นงัยกันบ้างวันนี้ฝนตกทั้งวันเลยนะแค่นี้นะไม่ค่อยสบาย   โดย: เด้ก IP: 58.10.93.82 1 สิงหาคม 2549 14:56:21 น.

Thanks a lot for your informations. It can help me alot when I do my assignment.   โดย: Pim IP: 202.7.166.167 9 ตุลาคม 2549 6:58:19 น.

thx   โดย: ... (สิงห์คะนองเดชจิวยี่ ) 26 กรกฎาคม 2550 11:24:14 น.

อีกรายค่ะ   โดย: โอ้ยโอ้ยโอ้ย 4 กันยายน 2550 9:49:23 น.