Group Blog
 
<<
กรกฏาคม 2548
 12
3456789
10111213141516
17181920212223
24252627282930
31 
 
31 กรกฏาคม 2548
 
All Blogs
 
สีลิง และการตกแต่งลิง







สีของลิงและการตกแต่งลิง




โดยเราจะใช้คำสั่งธรรมดาของ 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
Last Update : 3 ธันวาคม 2549 0:01:18 น. 32 comments
Counter : 897 Pageviews.

 


ขอบคุณครับ ละเอียดยิบ ๆเลย


โดย: แม่สาย วันที่: 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 น.  

ชื่อ : * blog นี้ comment ได้เฉพาะสมาชิก
Comment :
  *ส่วน comment ไม่สามารถใช้ javascript และ style sheet
 

dont wanna no
Location :


[ดู Profile ทั้งหมด]

ให้ทิปเจ้าของ Blog [?]
ฝากข้อความหลังไมค์
Rss Feed

ผู้ติดตามบล็อก : 2 คน [?]








Google all webbloggang



คำเตือน

ขอสงวนสิทธิ์ข้อความและภาพ ตลอดจนชื่อคำขวัญ (slogan) และข้อความ "เที่ยวไปงงไป" ที่ปรากฏทั้งหมดในสื่อคอมพิวเตอร์แห่งนี้ ตามพระราชบัญญัติลิขสิทธิ์ปี พ.ศ. ๒๕๓๙ ห้ามมิให้นำไปดัดแปลง ต่อเติม ทำซ้ำ หรือเผยแพร่และอ้างอิงส่วนหนึ่งส่วนใด หรือทั้งหมดเพื่อการค้าโดยไม่ได้รับอนุญาตเป็นลายลักษณ์อักษร ผู้ละเมิดจะถูกดำเนินคดีตามที่กฏหมายบัญญัติไว้สูงสุด



สิทธิพิเศษสำหรับสมาชิกพันทิป ท่านสามารถนำข้อมูลไปใช้ในการตกแต่ง blog ของท่านได้ด้วยความยินดีมากครับ ตกแต่งเสร็จแล้วมาตามไปดูบ้าง จะยินดีมากขึ้นไปอีก

Friends' blogs
[Add dont wanna no's blog to your web]
Links
 

 Pantip.com | PantipMarket.com | Pantown.com | © 2004 BlogGang.com allrights reserved.