ขอถามเรื่อง CSS หน่อยครับ

[1.2 Selector]

     ก่อนอื่นต้องขอบอกว่า ใครยังไม่เข้าใจ ก็อ่านผ่านๆไปจนถึงบทที่ 2 ก่อน แล้วจะร้อง อ๋อ... เอง(มั้ง)
เพราะบทนี้จะยังไม่ยกตัวอย่างที่ใช้งานได้จริงๆ

1.2 Selector

Multi-Selector
     เราสามารถ ใช้ selector ได้หลายๆตัว ต่อ 1 คำสั่ง เช่น

โค้ด:

    b, strong {
     color: green  
    }

   ในที่นี้ทั้งแท็ก "b" และ "strong" ก็ถูกจับจอง ให้แลมองเป็นสีเขียว


Class Selector
     สมมุติว่าเรากำหนดแท็ก font ดังนี้

โค้ด:

    <font>ถ้า อจวว ไม่หล่อ ก็ยังรักจริง</font>
    <b>ถ้า อจวว ไม่หล่อ ก็ขอแฟนสวยๆ</b>
    <font class="s1">แต่ที่จริงแล้ว อจวว ก็ดูไปแล้วเหมือนจะหล่อนิดๆ</font>
    <b class="s1">(ไอ้คนติวเตอร์จิตใจมันฟุ้งซ่านป่าววะ)</b>

    ในที่นี้ 2 บรรทัดด้านบน จะไม่ถูกกำหนด class แต่ 2 บรรทัดล่าง ได้ถูกกำหนด class เอาไว้ แถมใช้ชื่อเดียวกันอีกตะหากคือ "s1" ดังนั้นเราจะกำหนดสไตล์ให้กับ class ที่ ชื่อ "s1" ดังนี้

โค้ด:

    .s1 {
        color: green
    }

    ผลของมันคือ เป็นการกำหนดให้ 2 บรรทัดล่าง จากโค้ดข้างบน ให้มันเป็นสีเขียว นั่นเอง ไม่ว่าจะแท็ก "font" หรือ "b" ก็ตาม
     แต่ถ้าเราจะเพิ่มเติมว่า ในเท็ก "b" ให้มีขนาดฟอนต์สัก 20 pt แต่แท็กอื่นไม่ต้องไปกำหนดอะไรมัน เราก็ใช้แบบนี้

โค้ด:

    .s1 {
        color: green
    }
    b.s1 {
        font-size: 20pt
    }

ID Selector
     วิธีการ เหมือน Class Selector แต่จะแตกต่างตรงที่ "class" เป็น "id" และ "." เป็น "#"

โค้ด:

    <font>ถ้า อจวว ไม่หล่อ ก็ยังรักจริง</font>
    <b>ถ้า อจวว ไม่หล่อ ก็ขอแฟนสวยๆ</b>
    <font id="s1">แต่ที่จริงแล้ว อจวว ก็ดูไปแล้วเหมือนจะหล่อนิดๆ</font>
    <b id="s1">(ไอ้คนติวเตอร์จิตใจมันฟุ้งซ่านป่าววะ)</b>

    เราจะกำหนดสไตล์ให้กับ id ที่ ชื่อ "s1" ดังนี้

โค้ด:

    #s1 {
        color: green
    }

    ถ้าเราจะเพิ่มเติมว่า ในเท็ก "b" ให้มีขนาดฟอนต์สัก 20 pt แต่แท็กอื่นไม่ต้องไปกำหนดอะไรมัน เราก็ใช้แบบนี้

โค้ด:

    #s1 {
        color: green
    }
    b#s1 {
        font-size: 20pt
    }

หมายเหตุ :
1. จริงๆแล้วตามหลัก ไม่ควรใช้ id ซ้ำกัน เพราะเวลาอ้าง id ด้วย Javascript จะเกิดปัญหา ดังนั้น ควรใช้ class จะดีกว่า
2. เค้าว่ากันว่า (เปิดตำรามา) ไม่ควรใช้ชื่อ id หรือ class ให้มีตัวเลขนำหน้าเช่น 3000annnn แต่ annnn3000 นี่ใช้ได้ เพราะตัวเลขนำหน้า เค้าว่ากันว่าถ้าเปิดใน Fixefox แล้วจะ error (แต่ไม่เคยลองทำดูนะ)

สู้ตายนะลุงอจวว.

หลงมาได้ไงฟะ

[1.3 ความซ้ำซ้อน]

     ต่อๆๆ กำลังบ้าน้ำลาย เพราะรีเควสมากันดีนัก จะติวให้ตาลายอ้วกแตกอ้วกแตนกันไปข้างนึง ฮ่าๆๆๆๆ (หัวเราะอย่างสะใจ)

1.3 ความซ้ำซ้อน

    ดูตัวอย่าง สมมุติว่าเราทะลึ่งพิมพ์โค้ดลงไปแบบนี้

โค้ด:

    b {
        color: red;
        font-size: 10pt
    }
    b {
        font-size: 20pt;
        text-align: center
   }

    จะเห็นว่าเราอ้างซ้ำซ้อนกัน ผลที่ได้ จะกลายเป็นแบบนี้

โค้ด:

    b {
        color: red;
        font-size: 20pt;
        text-align: center
   }

    จะเห็นได้ว่า มันจะยก color ที่เป็นสีแดงจากตัวบนมาใช้ แล้วมันจะเปลี่ยน font-size จากเดิม 10pt เป็น 20pt แล้วจากเดิม ไม่มี text-align มันก็เพิ่มขึ้นมา ซึ่งหลักการของมันคือ มันจะอ่านคุณสมบัติจากตัวแรกก่อน พอมันพบว่ามีอะไรเปลี่ยนแปลงไป มันก็จะอัพเดทคุณสมบัติที่แก้ไขหรือเพิ่มขึ้นมานั่นเอง


ด้วยหลักการนี้เราไปประยุกต์ ได้ดังนี้
สมมุติว่าเรามีโค้ด

โค้ด:

    b {
        color: black;
        font-size: 10pt
    }

    b.s1 {
        color : green
    }

    โค้ดนี้ มันจะกำหนดแท็ก b ให้เป็นตัวอักษรสีดำ และมีขนาด 10 pt แต่ว่าเราอยากให้มีแท็ก b บางตัวให้มันมีสีเขียวบ้าง เราก็แค่ใส่ class="s1" ลงไปในแท็กที่อยากให้สีเขียว ซึ่งไม่ว่าแท็ก b อันไหน มันก็ยังมีขนาด 10 pt ที่เป็นคุณสมบัติเดียวกันอยู่ดี

1.4 Comment
    ถ้าเราไม่อยากให้คำสั่งนั้นใช้งานได้ หรือจะโน๊ตอะไรก็แล้วแต่ เราจะคอมเม้นได้เหมือนๆจาวา คือ

โค้ด:

    /* นี่คือคอมเม้นนะจ๊ะพ่อรูปหล่อ */
    font {color: blue}
    /* อันนี้ไม่ใช้ชั่วคราวนะยะ
     font {color: green}
    */

พอก่อนสำหรับวันนี้ พรุ่งนี้เรามาว่าด้วยการกำหนด สีของ แท็ก "A" แล้วก็เริ่มบทที่ 2 วิธีการนำไปใช้กัน

(+2) ค่าคำตอบครับ
(จริงๆ อยากได้แบบเรียกไฟล์เอาเลย แต่ยังงี้ก็พอ เอาไว้ใช้ในแต่ละหน้าไป)

[มังกร]

โค้ด:

<link rel="stylesheet" type="text/css" href="แฟ้มซีเอสเอส.css">

ใช่ตัวนี้หรือเปล่าครับ

แบบไฟล์ เห็นส่วนใหญ่เค้ามักใช้ php หรือ asp อะไรแบบนี้ เขียนให้มันเปลี่ยนไฟล์น่ะครับ

ยกตัวอย่าง http://www.punneng.com ปั้นเหน่งจะเปลี่ยน CSS เป็นสีของวันที่เปลี่ยนไป

ถ้างั้นก็ง่ายหน่อย
แต่แบบแนบไปในไฟล์แบบนี้็โอเคครับ เดี๋ยวจะเอาไปใช้

[มังกร]

พี่ อจวว คะ
คืออยากถามว่า
.s1 ที่อยู่ข้างหน้าปีกกา มันคืออะไรคะ  ไม่เข้าใจ

พอดีไม่รู้เรื่อง css 

อ๋า..
เดี๋ยวมาเกาะเรียนด้วยคน 55

พี่ อจวว คะ
คืออยากถามว่า
.s1 ที่อยู่ข้างหน้าปีกกา มันคืออะไรคะ ไม่เข้าใจ

พอดีไม่รู้เรื่อง css

แสดงว่าตูสอนไม่เข้าใจ (รู้สึกมีปมด้อยด้านการสอนคน)

ก่อนอื่น จะถามว่า มินิ พอจะเข้าใจ HTML บ้างใช่ไหมครับ
ถ้าเข้าใจแล้ว ลองย้อนกลับไปหัวข้อ 1.1 Systax อีกทีนะ

ในนั้นมันจะบอกว่า เป็นส่วนของ selector ซึ่ง ถ้าไม่มีจุดนำหน้า ก็หมายถึง มันจะเป็นแท็กใน html
เช่น font หน้าปีกกา ก็หมายถึง มันจะกำหนดสไตล์ให้กับ แท็ก font ทุกแท็ก ในไฟล์ html นั้นเลย

ส่วนที่ถามเรื่อง .s1 หน้าปีกกา คือ s1 เป็นชื่อที่เราตั้ง จะชื่ออะไรก็ได้ เพื่อเป็นการกำหนดว่า สไตล์นี้มันจะไปกำหนดให้กับแท็ก html ที่กำหนด attribute ที่ชื่อ class เป็น s1

เช่น <font class="s1">kkk</font> หรือ <b class="s1">kkk

คือมันจะไปกำหนดสไตล์ ให้เฉพาะ แทกที่ ใส่คำว่า class="s1" ลงไป




ปล.สอนยากอย่างที่ห้าโอบอกจริงๆด้วย

[มังกร]

พอเข้าใจได้ครับ ไปอ่านเว็บฝรั่งที่หน้าแรกนิดหน่อยก็ได้ครับ แต่ไม่รู้จะฝึกอย่างไรดีครับ
s1 จะใช้ชื่ออื่นเช่น <font class="mee">โฮก</font>
.mee {color:gay} ก็ได้หรือครับ

[มังกร]

มีหลายสิ่งที่ผมยังไม่แน่ใจ แต่ตอนนี้รู้แล้วครับ มาจากพี่ อจวว.นี่แหละ

ขอบคุณมากครับ

[มังกร]

อ๋อ


 class นี่ก็ประมาณแปลเป็นไทยว่า หน้า อะไรอย่างนี้ปะคะ

font class = ฟอนต์ของหน้า....
ถ้าเป็นภาษา css ก็ใช้ . แทน font class

ใช่มั๊ยคะ 

[มังกร]

อธิบายง่ายๆ

class มันก็คือชื่อส่วนนั้นๆน่ะครับ
ยกตัวอย่าง

.กรุงเทพ
     {มีม็อบ : 5000 คน;
       มีบ้าน : 4000 หลังคาเรือน;
       ทุกคน : เป็นตุ๊ด}

แต่ก็ไม่จำเป็นว่าจะต้องใช้กับกรุงเทพซักกะหน่อย
ถ้าใช้กับภูเก็ต คุณสมบัติของภูเก็ตก็จะเหมือนกับกรุงเทพครับ

[แท็ก]

ห้าโอเปรียบเทียบได้แจ๋ว!! 


ขออธิบายเสริมแบบเตาะแตะ
จาก http://f0nt.com/forum/index.php/topic,5153.msg203082.html#msg203082 นะครับ


แท็ก เช่น <body>,<textarea>
ซึ่งมันมีอยู่แล้วในภาษา html เวลาเอา่มากำหนดก็ว่ากันไปเลย ดังนี้

โค้ด:

body {background-color: #000}
textarea {width: 500px}

คลาส เช่น .กรุงเทพ, .บุรีรัมย์, .บริติชเวอร์จิ้น
เป็นชื่อเฉพาะที่ตั้งขึ้นมา (ภาษาอังกฤษเท่านั้นนะ) จะใส่หลังจุด ดังตัวอย่างที่ว่ามา
เราจะกำหนดอะไรไปก็ได้ลงในนั้น

ไอดี เช่น #ไทย, #ยุ่น
ปกติแล้ว ไอดีมันจะใหญ่กว่าคลาส
คือในไอดีนึงสามารถยัดคลาสได้หลายอัน
งงไหมครับ ต้องลองทำดู





แนะนำโปรแกรมเด็ด

โหลดเวอร์ชั่น Lite ได้ที่ www.bradsoft.com/topstyle
แนะนำให้โหลดโปรแกรมนี้มาช่วยเขียน CSS (อยากได้เวอร์ชั่นโปรไหมครับ  )
เพราะขณะที่เขียนมันจะมีบรรดาสรรพคุณที่คุฯต้องการอยู่ในแถบให้ .. ใช้ง่ายดี

อีกตัวนึงเป็น อทช ที่ใช้ดูและทดลองแก้ไข css ในหน้าของหมาย่างเลย (นี่ก็ใช้ง่าย)
แนะนำไปแล้วที่ http://f0nt.com/forum/index.php/topic,1556.msg187784.html#msg187784
โหลดที่ https://addons.mozilla.org/extensions/moreinfo.php?id=179&application=firefox