รู้จักกับ class และ id
เธซเธเนเธฒ 1 เธเธฒเธ 1
รู้จักกับ class และ id
by SKY! Wed Apr 23, 2008 2:19 pm
ก่อนจะแต่งสกิน ต้องทำความรู้จักกับเรื่องพวกนี้ก่อน
อย่าสักแต่งก็อบวางๆ โดยที่ไม่รู้ว่ามันคืออะไร
เกิดเวลามีปัญหากะโค้ด จะได้ลองแก้ไขด้วยตัวเอง
หรือคิดว่าจะพึ่งถามแต่คนอื่นอะ = ='''
-------------------------------------------------------------
ขออธิบายแบบคร่าวๆ ไม่เจาะลึกมากนะ
ถ้าจะให้อธิบายกันจริงๆจังๆแบบเจาะลึก เดี๋ยวจะงงซะเปล่าๆ =w=''
ตัวอย่าง
<style>
.friend-picture a img {width:100px; height:100px !important; }
#p_nav_header {DISPLAY:NONE;}
</style>
ส่วนที่เป็นจุด สีน้ำเงิน ส่วนนั้นเรียกว่า class
ส่วนที่เป็นรูปสี่เหลี่ยมตัดกันสีแดง เรียกว่า id
- มันเกี่ยวอะไรกะการแต่งไฮไฟว์ แล้วต้องรู้จักไปทำไม ??
เกี่ยวแน่นอนค่ะ
เพราะมันเป็นคำสั่งที่จะถูกใช้เป็นการระบุการกำหนดพื้นที่ข้อความ
link , div, table และส่วนต่างๆ
หากลอง view ดูโค้ดหน้าไฮไฟว์ทั่วไป ก็จะเห็นคำสั่งเหล่านี้อยู่ตามจุดต่างๆ
เพื่อทำหน้าที่กำหนดรูปแบบให้กับส่วนนั้นๆ
เช่น
ส่วนของ #p_nav_header คือส่วนที่เป็นแถบ logout ของไฮไฟว์
ส่วนของ .vanity-bar คือส่วนของแถบสถิติ
ซึ่งตามความจริง จะไม่สามารถแก้ไขได้
เราจึงต้องดึงคำสั่งส่วนต่างๆ ลงมาไว้ใน Tag Style
เพื่อที่จะสามารถปรับปรุง เปลี่ยนแปลงรายละเอียดได้ตามใจ
- แล้วเราจะรู้ได้ไงว่าแต่ละส่วนมันเป็น id อะไร หรือ class อะไร
เพื่อนๆสามารถกดดูรูป id และ class ได้ >> ที่นี่
เครดิต.. พี่ต้า tapopo.hi5.com
หรือถ้าใครมีโปรแกรมหมาไฟอยู่แล้ว
ไปโหลด plug-in Web developer ไว้ใช้ดูได้จ๊ะ ^^
ถ้ามีความรู้พื้นฐานเรื่องนี้แล้ว รับรองว่าจะเข้าใจแนวทางในการแต่งมากขึ้นอ่า
เพราะเราสามารถเอาแต่ละส่วนมาดัดแปลง พลิกแพลงให้มันแปลกๆได้มากมาย = =''
หากใครสนใจอยากรู้เรื่องคลาสและไอดีแบบละเอียดกว่านี้ ก็เสิร์จหาในกูเกิ้ลเพิ่มเติมละกันนะ
อย่าสักแต่งก็อบวางๆ โดยที่ไม่รู้ว่ามันคืออะไร
เกิดเวลามีปัญหากะโค้ด จะได้ลองแก้ไขด้วยตัวเอง
หรือคิดว่าจะพึ่งถามแต่คนอื่นอะ = ='''
-------------------------------------------------------------
ขออธิบายแบบคร่าวๆ ไม่เจาะลึกมากนะ
ถ้าจะให้อธิบายกันจริงๆจังๆแบบเจาะลึก เดี๋ยวจะงงซะเปล่าๆ =w=''
ตัวอย่าง
<style>
.friend-picture a img {width:100px; height:100px !important; }
#p_nav_header {DISPLAY:NONE;}
</style>
ส่วนที่เป็นจุด สีน้ำเงิน ส่วนนั้นเรียกว่า class
ส่วนที่เป็นรูปสี่เหลี่ยมตัดกันสีแดง เรียกว่า id
- มันเกี่ยวอะไรกะการแต่งไฮไฟว์ แล้วต้องรู้จักไปทำไม ??
เกี่ยวแน่นอนค่ะ
เพราะมันเป็นคำสั่งที่จะถูกใช้เป็นการระบุการกำหนดพื้นที่ข้อความ
link , div, table และส่วนต่างๆ
หากลอง view ดูโค้ดหน้าไฮไฟว์ทั่วไป ก็จะเห็นคำสั่งเหล่านี้อยู่ตามจุดต่างๆ
เพื่อทำหน้าที่กำหนดรูปแบบให้กับส่วนนั้นๆ
เช่น
ส่วนของ #p_nav_header คือส่วนที่เป็นแถบ logout ของไฮไฟว์
ส่วนของ .vanity-bar คือส่วนของแถบสถิติ
ซึ่งตามความจริง จะไม่สามารถแก้ไขได้
เราจึงต้องดึงคำสั่งส่วนต่างๆ ลงมาไว้ใน Tag Style
เพื่อที่จะสามารถปรับปรุง เปลี่ยนแปลงรายละเอียดได้ตามใจ
- แล้วเราจะรู้ได้ไงว่าแต่ละส่วนมันเป็น id อะไร หรือ class อะไร
เพื่อนๆสามารถกดดูรูป id และ class ได้ >> ที่นี่
เครดิต.. พี่ต้า tapopo.hi5.com
หรือถ้าใครมีโปรแกรมหมาไฟอยู่แล้ว
ไปโหลด plug-in Web developer ไว้ใช้ดูได้จ๊ะ ^^
ถ้ามีความรู้พื้นฐานเรื่องนี้แล้ว รับรองว่าจะเข้าใจแนวทางในการแต่งมากขึ้นอ่า
เพราะเราสามารถเอาแต่ละส่วนมาดัดแปลง พลิกแพลงให้มันแปลกๆได้มากมาย = =''
หากใครสนใจอยากรู้เรื่องคลาสและไอดีแบบละเอียดกว่านี้ ก็เสิร์จหาในกูเกิ้ลเพิ่มเติมละกันนะ
SKY!- Admin
- เธเธณเธเธงเธเธเนเธญเธเธงเธฒเธก : 29
อายุ : 34
Registration date : 16/03/2008 -
เธซเธเนเธฒ 1 เธเธฒเธ 1
Permissions in this forum:
เธเธธเธเนเธกเนเธชเธฒเธกเธฒเธฃเธเธเธดเธกเธเนเธเธญเธ|
|
|