กดถูกใจ เป็นกำลังใจให้เรา 😍

VIR9.COM

ขอบคุณน๊าา 🥰

Close

  • ID , Class

    May 30, 2017
    <style type=”text/css” rel=”stylesheet”>
h3 {
font-size: 36px;
color: grey;
}
</style>
.
.
.
<h3>cymiz</h3>
<h3>cymiz</h3>

    ต้องการให้ข้อความมีการแสดงผลที่แตกต่างไปจาก css ข้างบนที่กำหนด ต้องใส่ ID หรือ Class ให้กับแท็ก <h3>

    <style type=”text/css” rel=”stylesheet”>
h3 {
font-size: 36px;
color: grey;
}
#section_header {
font-size: 48px;
color: red;
}
</style>
.
.
.
<h3 id=”section_header“>cymiz</h3>
<h3>cymiz</h3>

    ความแตกต่างระหว่าง ID และ Class

    1. วิธีเขียนที่แตกต่างกัน
    การเขียน ID ใน CSS จะเริ่มต้นด้วย # แล้วตามด้วยชื่อ ID ที่เราต้องการตั้ง
    #main_header เพื่อสั่งแท็ก <h3 id=”main_header”>……..</h3>
    #main_menu เพื่อสั่งแท็ก <ul id=”main_menu”>……..</ul>
    #sub_menu เพื่อสั่งแท็ก <ul id=”sub_menu”>……..</ul>
    #footer เพื่อสั่งแท็ก <div id=”footer”>……..</div>

    การเขียน Class ใน CSS จะเริ่มต้นด้วย . แล้วตามด้วยชื่อ Class ที่เราต้องการตั้ง
    .sub_header เพื่อสั่งแท็ก <h4 class=”sub_header”>……..</h4>
    .main_list เพื่อสั่งแท็ก <ul class=”main_list”>……..</ul>
    .content เพื่อสั่งแท็ก <div class=”content”>……..</div>
    .details เพื่อสั่งแท็ก <p class=”details”>……..</p>

    โดยตัวแรกของชื่อจะต้องเป็นตัวอักษรระหว่าง A ถึง Z เท่านั้น
    ห้ามเริ่มต้นชื่อด้วยสัญญลักษณ์หรือตัวเลข
    เพราะบราวเซอร์จะไม่ตีความว่าเป็น ID หรือ Class ซึ่งจะมีผลทำให้คำสั่ง CSS ที่เราเขียนไม่มีผลใดๆทั้งสิ้น

    CSS จะไม่สนใจว่าจะเป็นตัวเล็กหรือตัวใหญ่ หรือ Case Insensitive
    เพราะฉะนั้นการตั้งชื่อว่า SuperAgent กับ superagent จะมีค่าเท่ากัน

    2. จำนวนครั้งที่ใช้ได้ต่อหน้าเว็บ
    ID ที่ตั้งขึ้นมาจะอนุญาตให้ใช้ได้ครั้งเดียวในหน้า และหนึ่งแท็กจะใส่ ID ได้ตัวเดียว
    Class ที่ตั้งขึ้นมาจะอนุญาตให้ใช้ได้หลายครั้งในหน้าเดียวกัน และหนึ่งแท็กจะใส่ Class ได้หลายตัว

    <div id=”header”>
<h1>cymiz</h1>
<ul id=”main_menu”>
<li class=”menu”><a class=”menu_link link” href=”home.html” title=”Home”>Home</a></li>
<li class=”menu”><a class=”menu_link link” href=”products.html” title=”Products”>Products</a></li>
<li class=”menu”><a class=”menu_link link” href=”support.html” title=”Support”>Support</a></li>
<li class=”menu”><a class=”menu_link link” href=”contactus.html” title=”Contact Us”>Contact Us</a></li>
<li class=”menu”><a class=”menu_link link” href=”sitemap.html” title=”Site Map”>Site Map</a></li>
</ul>
</div>

    <div> และ <ul> ต่างมี ID ของตัวเองคือ header และ main_menu ตามลำดับ และจะถูกเรียกใช้เพียงแค่ครั้งเดียวในหน้า
    แต่สำหรับ Class ชื่อ menu ในแท็ก <li> จะได้เรียกใช้ซ้ำได้
    ในแท็ก <a> จะเห็นตัวอย่างการใส่ชื่อ Class ได้มากกว่าหนึ่งในแท็กเดียวกัน
    โดยในแท็ก <a> นี้จะมีชื่อ Class อยู่ 2 ชื่อด้วยกันคือ menu_link และ link

    นอกจากนี้เรายังสามารถใส่ทั้ง ID และ Class ให้กับแท็กๆเดียวกันได้ด้วย เช่น

    <li id=”menu_selected” class=”menu”><a class=”menu_link link active” href=”home.html” title=”Home”>Home</a></li>

    3. ระดับ Specificity
    ID มีความเฉพาะเจาะจงหรือ Specificity ที่สูงกว่า Class ในกรณีที่มีปัญหาคำสั่ง CSS ไปทับซ้อนกันในแท็กเดียวกัน

    .menu {
background: grey;
}
#menu_selected {
background: white;
}

<li id=”menu_selected” class=”menu”><a class=”menu_link link active” href=”home.html” title=”Home”>Home</a></li>

    คำสั่งซ้ำซ้อนกันในแท็ก <li> แต่เนื่องจาก ID มีระดับ Specificity ที่สูงกว่า Class
    จึงทำให้เว็บบราวเซอร์เลือกที่จะแสดงสีพื้นหลังของแท็ก <li> เป็นสีขาวที่สั่งผ่าน #menu_selected

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

    #header
    #menu
    #content
    #footer

    ใช้ Class เมื่อต้องการใส่สไตล์การแสดงผลที่เป็นรายละเอียดปลีกย่อยที่เราอยากใช้ร่วมกันได้กับหลายๆแท็กในหน้าเดียวกัน เช่น
    สีตัวอักษรของพาดหัวหลักพาดหัวรอง
    ลักษณะของลิ้งก์เพื่อไปอ่านต่อหน้าใน

    การตั้งชื่อ ID และ Class
    ให้ตั้งชื่อให้สื่อความหมายของ ID และ Class นั้นๆจริงๆ (เช่น สำหรับ highlight ข้อความ) และยืดหยุ่นพอที่จะให้คุณสามารถเปลี่ยนแปลงคำสั่งได้ในอนาคตได้ ไม่ควรตั้ง yellow เพราะอนาคตอาจอยากให้เป็นสีอื่น หลีกเลี่ยงที่จะตั้งชื่อตามลักษณะการแสดงผลบนหน้าจอ เช่นตั้งชื่อตามสีอย่าง red, black, pink, white หรือตั้งชื่อตามตำแหน่งหรือลักษณะการวางอย่าง left, right, center, bottom ที่แนะนำอย่างนี้เพราะว่าคุณไม่มีทางรู้หรอกว่าในอนาคตคุณอาจจะต้องเปลี่ยนลักษณะการแสดงผลนั้นๆเป็นอย่างอื่นที่ตรงกันข้ามอย่างสิ้นเชิงเลยก็ได้


เวอไนน์ไอคอร์ส

ประหยัดเวลากว่า 100 เท่า!

เวอไนน์เว็บไซต์⚡️
สร้างเว็บไซต์ ดูแลเว็บไซต์

Categories