คุณกำลัง login ด้วย [ เปลี่ยนชื่อ | ออกระบบ ]
 กระทู้ Top5 วันนี้ | นิยาย | ค้นหานิยาย | บอร์ดนักเขียน | บอร์ด AF | บอร์ด TheStar | ของที่ระลึก Dek-D | App อ่านนิยายบนมือถือ New! |
  นิยายรักหวานแหวว | นิยายรักเศร้าๆ | นิยายซึ้งกินใจ | นิยายแฟนตาซี | นิยายผจญภัย | เรื่องสบายๆคลายเครียด | แฟนฟิค | วรรณกรรมเยาวชน |
เข้าสู่ My.iD Control สมัครเป็นนักเขียนใหม่ | วิธีลงบทความ กฏเกณฑ์การใช้งาน | การควบคุมเรตติ้ง

Code และเทคนิคตกแต่ง My.iD2 และหน้าบทความ [Writer]

ตอนที่ 90 : [lesson] CSS > Id & Class ... ว่าด้วย Selector


     อัพเดท 3 ก.ค. 53
กลับไปหน้าหลักของบทความ
แจ้งเนื้อหาในตอนไม่เหมาะสม
นิยาย-เรื่องยาว: ไลฟ์สไตล์/ดีไซน์ กราฟิก
Tags: โค้ด, code, แต่งไอดี, ไอดี, แต่ง id, id, My.iD, My.iD2, ตกแต่ง, นิยาย
ผู้แต่ง : Caje ดูเน็ตเวิร์คอื่นๆ ของ Caje
My.iD: https://my.dek-d.com/Caje
< Review/Vote > Rating : 95% [ 233 mem(s) ]
This month views : 53 Overall : 219,375
4,449 Comment(s), [ แฟนพันธุ์แท้ 5121 คน ]

[ ตอนก่อนหน้า | กลับไปหน้าหลักของบทความ | ตอนถัดไป ] [ บันทึกเป็น Favorite ] [ ปิดหน้าต่างนี้ ]
Code และเทคนิคตกแต่ง My.iD2 และหน้าบทความ [Writer] ตอนที่ 90 : [lesson] CSS > Id & Class ... ว่าด้วย Selector , ผู้เข้าชมตอนนี้ : 1759 , โพส : 4 , Rating : 0% / 0 vote(s)

ขนาดตัวอักษร : เพิ่มขนาด | ลดขนาด



หลังยังไม่ได้ก่อนตอนแรก แวะไปอ่านก่อนนะคะ...


อ้างอิง
http://www.w3schools.com/css/css_id_class.asp


รู้จักกับ selector, property, และ value กันไปแล้ว เราก็จะมาดูต่อกันว่าจะเรียกใช้ selector ได้อย่างไร

เราสามารถกำหนด selector ของเราได้สองวิธี เรียกว่า id กับ class
(ไอดีไม่ได้หมายถึง My.iD นะ)


The id Selector
ไอดีซีเลกเตอร์จะมีเพียงหนึ่งเดียวเท่านั้น เป็นเหมือนชื่อที่ในหน้านั้นจะมีไม่ซ้ำกัน
ไอดีซีเลกเตอร์จะขึ้นต้นด้วยเครื่องหมาย #

มาดูตัวอย่างกัน...

<style type="text/css">
#head_module_name {display: none;}
 </style>


จากโค้ดตัวอย่าง #head_module_name ก็คือ selector ประเภท id



The class Selector
คลาส... ให้คิดถึงห้องเรียน ก็เหมือนเป็นกลุ่มของคนที่มารวมๆ กัน
คลาสซีเลกเตอร์สามารถกำหนดสไตล์ของ html elements หลายๆ อันให้แสดงผลออกมาเหมือนกันได้
คลาสซีเลกเตอร์จะมี . (จุด) นำหน้า

ตัวอย่าง...

<style type="text/css">
.font2 {
    color:#000000;
    font-size: 14px;
    font-family: "MS Sans Serif";
}
</style>


.font2 เป็น class selector ค่ะ


สำหรับ selector ที่ไม่มีทั้ง # หรือ . นำเลย อย่างเช่น
body {background: url(...);}

จะทำหน้าที่ครอบคลุม html element ชนิดนั้นทั้งหมดค่ะ



ปิดท้ายด้วยภาพ selector โดยรวมที่สำคัญทั้งหมดจากน้องต้นกล้า Fantasier นะคะ
http://writer.dek-d.com/Fantasier/story/viewlongc.php?id=519203&chapter=36

คลิกที่รูปเพื่อดูภาพใหญ่ได้เลยค่ะ









Dek-D Writer APP : แอพอ่านนิยาย Dek-D บน iPhone , Android Phone
มาแล้ว!! เวอร์ชั่น iPad และ Android Tablet
Code และเทคนิคตกแต่ง My.iD2 และหน้าบทความ [Writer] ตอนที่ 90 : [lesson] CSS > Id & Class ... ว่าด้วย Selector , ผู้เข้าชมตอนนี้ : 1759 , โพส : 4 , Rating : 0% / 0 vote(s)
Vote ให้คะแนนตอนนี้ Vote ได้ 1 ครั้ง / 1 ชม.
[ ตอนก่อนหน้า | กลับไปหน้าหลักของบทความ | ตอนถัดไป ] [ บันทึกเป็น Favorite ] [ ปิดหน้าต่างนี้ ]
หน้าที่ 1
# 4 : ความคิดเห็นที่ 3324
 ขอบคุณค่าา ละเอียดมากเลย

Name : Doub'le u. < My.iD > ดูเน็ตเวิร์คอื่นๆ ของ Doub'le u. [ IP : 223.206.163.62 ]
ส่งข้อความลับ
วันที่: 2 พฤษภาคม 2555 / 17:24
# 3 : ความคิดเห็นที่ 795

น้องต้นกล้า ๑ เรื่องรายละเอียดย่อยๆ พวกนั้นพี่ยังไม่อยากลงลึกนักน่ะจ้ะ
คิดว่า เอาเบื้องต้นคร่าวๆ ง่ายๆ ให้พอใช้ในเด็กดีได้ก่อนดีกว่า
ส่วนที่น้องพูดมาก็ถูกต้องทั้งหมดแหละนะ เรียกถูกแล้วล่ะ
เรื่อง link เดี๋ยวจะสอนแยกอีกทีหนึ่ง

^_______^
 
Name : Caje < My.iD > ดูเน็ตเวิร์คอื่นๆ ของ Caje [ IP : 202.28.180.202 ]
ส่งข้อความลับ
วันที่: 7 กรกฎาคม 2553 / 21:26
# 2 : ความคิดเห็นที่ 789
;w; มีพวก Selector แขนงย่อยๆ ด้วยนิครับ รู้สึกจะเรียกว่า Attribute Selector
พวก img[alt=border] { อะไรแบบนี้อ่ะ เคยเห็นคนใช้อยู่เหมือนกันครับ
แล้วก็พวก pseudo class (พิมพ์ผิดเปล่าหว่า) :hover :visited :active :link :focus
:อื่นๆ (มีอีก จำไม่ได้แล่ว)
Name : Fantasier < My.iD > ดูเน็ตเวิร์คอื่นๆ ของ Fantasier [ IP : 124.121.70.247 ]
ส่งข้อความลับ
วันที่: 3 กรกฎาคม 2553 / 20:17
# 1 : ความคิดเห็นที่ 787
ใช้รูปผมด้วยย (ปลื้ม)
Name : Fantasier < My.iD > ดูเน็ตเวิร์คอื่นๆ ของ Fantasier [ IP : 124.121.70.247 ]
ส่งข้อความลับ
วันที่: 3 กรกฎาคม 2553 / 20:11
หน้าที่ 1
Post your comment : แสดงความคิดเห็น
ส่วนที่ 1: Message ข้อความ

ส่วนที่ 2 : Name ลงชื่อ
  โพสความเห็นด้วย member Login name Password
  โพสความเห็นไม่แสดง member : ชื่อ* email รูปตัวแทน
            พิมพ์เลขที่เห็น

เธซเธ™เธฑเธ‡เธชเธทเธญเนƒเธซเธกเนˆเธ›เธฃเธฐเธˆเธณเน€เธ”เธทเธญเธ™เธžเธคเธฉเธ เธฒเธ„เธก 2561

ข้อตกลง & เงื่อนไขการใช้งาน

  • กรณีที่ผลงานชิ้นนี้เป็นผลงานที่แต่งโดยผู้ลงผลงานเอง ลิขสิทธิ์ของผลงานนี้จะ
    เป็นของผู้ลงผลงานโดยตรง ห้ามมิให้คัดลอก ทำซ้ำ เผยแพร่ ก่อนได้รับอนุญาต
    จากผู้ลงผลงาน

  • กรณีที่ผลงานชิ้นนี้กระทำการคัดลอก ทำซ้ำ มาจากผลงานของบุคคลอื่นๆ ผู้ลง
    ผลงานจะต้องทำการอ้างอิงอย่างเหมาะสม และต้องรับผิดชอบเรื่องการจัดการ
    ลิขสิทธิ์แต่เพียงผู้เดียว

  • ข้อความและรูปภาพที่ปรากฏอยู่ในผลงานที่ท่านเห็นอยู่นี้ เกิดจากการส่งเข้าระบบ
    โดยอัตโนมัติจากบุคคลทั่วไป ซึ่งเด็กดีดอทคอมมิได้มีส่วนร่วมรู้เห็น ตรวจสอบ
    หรือพิสูจน์ข้อเท็จจริงใดๆ ทั้งสิ้น ผู้ใดพบเห็นการลงผลงานละเมิดลิขสิทธิ์ หรือ
    ไม่เหมาะสมโปรดแจ้งผู้ดูแลระบบเพื่อดำเนินการทันที
    Email: contact(at)dek-d.com ( ทุกวัน 24 ชม ) หรือ
    Tel: 0-2860-1142 ( จ-ศ 0900-1800 )

App อ่านนิยายบน iPad iPhone และ Android