1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31
สีลิง และการตกแต่งลิง
สีของลิงและการตกแต่งลิง โดยเราจะใช้คำสั่งธรรมดาของ HTML ที่เคยอ่าน ๆ กันมา (อ่านหรือยังนั่น... ไม่ได้อ่านก็ไปอ่านมาก่อนนะครับ เดี๋ยวงง (ไปกว่านี้) จะหาว่าไม่เตือนนะครับ) ไม่ได้แล้วครับ ต้องใช้คำสั่งของ stylesheet หรือ CSS แล้ว โดยมาดูรูปแบบคำสั่งกันก่อนครับ โดยทั่วไป ก็จะอยู่ในรูป คำสั่ง html { property: value;} นะครับ เราเรียกคำสั่งรูปแบบนี้ว่า class คือว่ามันจะมีคำสั่งเป็นกลุ่ม ๆ ไปน่ะครับ เช่น ค่าขอบของกล่องข้อความ ก็จะมีขนาดเส้น รูปแบบเส้น สี เป็นกลุ่มhtml ก็คือคำสั่งที่ระบุลักษณะที่เราต้องการ เช่น คำสั่ง link (ที่เราจะพูดถึงวันนี้ล่ะ), ย่อหน้า (...
), ตาราง เป็นตัว (ทำไมต้องเป็นต้นเนี่ย ว่าง ๆ ต้องไปหาหน่อยแล้ว เป็นตัว เป็นตนมั่งไม่ได้หรือไงหว่า)property ก็คือ ค่าที่เราจะระบุข้างใน เพื่อให้แสดงผล เช่น ค่าต่าง ๆ ของตัวหนังสือ (font), ค่าเส้นขอบตาราง หรือค่าสีพื้นตาราง อะไรแบบนี้ล่ะครับ อย่าสงสัยสิครับ ผมรู้แค่นี้เหมือนกัน 5 5 5value ก็คือ ค่าคล้าย ๆ 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 ก็คือ p ix el ครับ บางยี่ห้อก็ระบุเป็น pt หรือ p oint คล้าย ๆ กันครับขนาดเป็น 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 ล่ะครับ ก็ประกอบด้วย ขนาดขอบ ก็ระบุเป็นจำนวน p ix el ครับลักษณะขอบ ก็จะมีให้เลือกเป็น solid, dashed, dotted, etc สีที่ต้องการ ก็จะระบุเป็น code สีหรือระบุเป็นชื่อสีก็ได้ครับposition: ... ; เป็นการระบุใช้ที่ hover และ active เท่านั้นนะครับ เป็นคำสั่งที่ระบุว่า จะมีตำแหน่งเคลื่อนไหวเมื่อเราลาก mouse มาวาง เรียกว่า ต้องมีการกระทำของเราบางอย่างกับ link ถ้าอยู่เฉย ๆ เช่น visited แปลว่าเยี่ยมชมหรือคลิ๊กไปแล้ว ก็ไม่เกิดอะไร เป็นต้นครับ ค่าที่เลือกได้ก็มีดังนี้absolute หมายความว่า ไม่ขยับเขยี้อนเลย มั่นคงมาก ซึ่งค่านี้เป็นค่า default ครับ ถ้าไม่อยากให้ขยับก็ไม่ต้องใส่จะง่ายกว่าrelative ก็แปลว่ามีความเคลื่อนไหว โดยจะต้องระบุความสัมพันธ์ (จริง ๆ คือสัมพัทธ์) กับตำแหน่งปกติ ซึ่งระบุได้เป็นใน 2 ทิศทางคือtop เป็นการระบุในแนวดิ่งครับ มีขึ้นกับลง ถ้าต้องการให้ลง ก็ระบุค่าเป็นลบ โดยตัวเลขจะหมายถึงระยะที่เลื่อนไป เช่น position: relative: top:-3px; ก็หมายความว่า เวลาลาก mouse ไปวาง ตัวอักษรจะเลื่อนลง (เพราะค่า top ติดลบ) 3 pixelleft เป็นการระบุในแนวนอน โดยอาศัยหลักการเดียวกันครับ ถ้าระบุเป็นค่าติดลบ ก็จะเลื่อนไปทางขวาแทนตอนลาก 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 : 1742 Pageviews.
โดย: แม่สาย 31 กรกฎาคม 2548 4:24:37 น.
โดย: iampum 31 กรกฎาคม 2548 4:36:01 น.
โดย: iampum 31 กรกฎาคม 2548 5:05:12 น.
โดย: มัชฌิมา 31 กรกฎาคม 2548 7:26:03 น.
โดย: รัตน์ดา 31 กรกฎาคม 2548 10:12:17 น.
โดย: JewNid 31 กรกฎาคม 2548 10:46:48 น.
โดย: กุมภีน 31 กรกฎาคม 2548 10:50:57 น.
โดย: prncess 31 กรกฎาคม 2548 11:29:54 น.
โดย: asariss 31 กรกฎาคม 2548 11:40:21 น.
โดย: tomzeny (sakol98 ) 31 กรกฎาคม 2548 12:42:16 น.
โดย: ป้ามด 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 น.
โดย: เด้ก IP: 58.10.93.82 1 สิงหาคม 2549 14:51:52 น.
โดย: เด้ก IP: 58.10.93.82 1 สิงหาคม 2549 14:56:21 น.
โดย: Pim IP: 202.7.166.167 9 ตุลาคม 2549 6:58:19 น.
ขอบคุณครับ ละเอียดยิบ ๆเลย