การสร้างเว็บไซต์บนเว็บในปัจจุบันจำเป็นต้องมีความเข้าใจอย่างลึกซึ้งเกี่ยวกับ CSS (Cascading Style Sheets) นี่เป็นคำแนะนำที่คุณให้เว็บไซต์เพื่อกำหนดลักษณะการจัดวางในหน้าต่างเบราเซอร์ คุณใช้ชุดรูปแบบกับเอกสาร HTML ของคุณซึ่งจะสร้างรูปลักษณ์ของหน้าเว็บของคุณ
มีหลายวิธีในการใช้รูปแบบที่กล่าวมาข้างต้นในเอกสาร แต่บางทีคุณอาจต้องการใช้สไตล์แบบนี้เท่านั้น บาง ขององค์ประกอบในเอกสาร แต่ไม่ใช่อินสแตนซ์ทั้งหมดขององค์ประกอบนั้น นอกจากนี้คุณยังอาจต้องการสร้างสไตล์ที่คุณสามารถนำไปใช้กับองค์ประกอบต่างๆในเอกสารโดยไม่ต้องทำซ้ำกฎสไตล์สำหรับแต่ละอินสแตนซ์ เพื่อให้ได้รูปแบบที่ต้องการเหล่านี้คุณจะใช้แอตทริบิวต์ class และ ID HTML แอตทริบิวต์เหล่านี้เป็นแอตทริบิวต์ global ที่สามารถใช้กับแท็ก HTML เกือบทุกชนิด นั่นหมายความว่าไม่ว่าคุณจะจัดรูปแบบส่วนต่างๆย่อหน้าลิงก์รายการหรือส่วนอื่น ๆ ของ HTML ในเอกสารของคุณคุณสามารถเปลี่ยนเป็นแอตทริบิวต์ class และ ID เพื่อช่วยให้คุณบรรลุผลงานนี้ได้!
Class Selectors
ตัวเลือกชั้นเรียนช่วยให้คุณสามารถกำหนดรูปแบบต่างๆให้กับองค์ประกอบหรือแท็กเดียวกันในเอกสารได้ ตัวอย่างเช่นคุณอาจต้องการให้บางส่วนของข้อความของคุณเรียกด้วยสีอื่นจากส่วนที่เหลือของข้อความในเอกสาร ส่วนที่ไฮไลต์เหล่านี้อาจเป็น "การแจ้งเตือน" ที่คุณกำหนดไว้ในหน้า คุณสามารถกำหนดย่อหน้าให้กับชั้นเรียนเช่นนี้
p (สี: # 0000ff; } p.alert {color: # ff0000; } สไตล์เหล่านี้จะกำหนดสีของ ทั้งหมด ย่อหน้าเป็นสีน้ำเงิน (# 0000ff) แต่ย่อหน้าใด ๆ ที่มีแอตทริบิวต์ class ของ "alert" จะถูกแทนที่ด้วยสีแดง (# ff0000) เนื่องจากแอตทริบิวต์ class มีความจำเพาะสูงกว่ากฎ CSS ตัวแรกซึ่งใช้เฉพาะแท็ก selector เท่านั้น เมื่อทำงานร่วมกับ CSS กฎที่เฉพาะเจาะจงมากขึ้นจะแทนที่ข้อ จำกัด ที่เฉพาะเจาะจง ดังนั้นในตัวอย่างนี้กฎทั่วไปจะกำหนดสีของย่อหน้าทั้งหมด แต่กฎที่สองเฉพาะมากกว่าจะแทนที่การตั้งค่าดังกล่าวในย่อหน้าบางส่วนเท่านั้น ต่อไปนี้เป็นวิธีที่สามารถใช้ในมาร์กอัป HTML บางส่วน: ย่อหน้านี้จะปรากฏเป็นสีน้ำเงินซึ่งเป็นค่าเริ่มต้นสำหรับเพจ
ย่อหน้านี้จะเป็นสีฟ้า
และย่อหน้านี้จะปรากฏเป็นสีแดงเนื่องจากแอตทริบิวต์ class จะเขียนทับสีน้ำเงินมาตรฐานจากรูปแบบตัวเลือกองค์ประกอบ
ในตัวอย่างนั้นรูปแบบของ "p.alert" จะใช้กับองค์ประกอบของวรรคที่ใช้ชั้น "alert" เท่านั้น ถ้าคุณต้องการใช้คลาสนั้นในองค์ประกอบ HTML หลาย ๆ องค์ประกอบคุณก็จะลบองค์ประกอบ HTML ออกจากจุดเริ่มต้นของการเรียกสไตล์ (โปรดอย่าลืมออกจากช่วง .) ในตำแหน่ง) เช่นนี้: .alert {background-color: # ff0000;} คลาสนี้ใช้ได้กับองค์ประกอบที่ต้องการแล้ว ส่วนใดส่วนหนึ่งของ HTML ที่มีค่าแอตทริบิวต์คลาสของ "alert" จะได้รูปแบบนี้ ใน HTML ด้านล่างเรามีทั้งย่อหน้าและหัวเรื่อง 2 ที่ใช้ชั้น "alert" ทั้งสองแบบมีสีพื้นหลังเป็นสีแดงตาม CSS ที่เราแสดง
ย่อหน้านี้จะเขียนด้วยสีแดง
ในเว็บไซต์วันนี้แอตทริบิวต์คลาสมักใช้กับองค์ประกอบส่วนใหญ่เพราะง่ายต่อการทำงานจากมุมมองเฉพาะเจาะจงที่มีการใช้ ID คุณจะพบหน้า HTML ส่วนใหญ่ที่เต็มไปด้วยแอตทริบิวต์คลาสซึ่งบางครั้งจะถูกทำซ้ำหลายครั้งในเอกสารและอื่น ๆ ซึ่งอาจปรากฏขึ้นเพียงครั้งเดียว ตัวเลือกรหัสช่วยให้คุณสามารถกำหนดชื่อให้กับสไตล์เฉพาะโดยไม่ต้องเชื่อมโยงกับแท็กหรือองค์ประกอบ HTML อื่น ๆ สมมติว่าคุณมีส่วนในมาร์กอัป HTML ที่มีข้อมูลเกี่ยวกับเหตุการณ์ คุณสามารถให้ส่วนนี้เป็นแอตทริบิวต์ ID ของ "event" และจากนั้นถ้าคุณต้องการร่างหมวดที่มีขอบสีดำกว้าง 1 พิกเซลคุณจะเขียนรหัสรหัสดังนี้: #event {border: 1px solid # 000; } ความท้าทายเกี่ยวกับตัวเลือกรหัสคือไม่สามารถทำซ้ำในเอกสาร HTML ได้ ต้องเป็นรหัสเฉพาะ (คุณสามารถใช้รหัสเดียวกันในหลาย ๆ หน้าในเว็บไซต์ของคุณได้ แต่เพียงครั้งเดียวในเอกสาร HTML แต่ละรายการเท่านั้น) ดังนั้นถ้าคุณมี 3 เหตุการณ์ที่จำเป็นต้องใช้เส้นขอบทั้งหมดนี้คุณจะต้องระบุแอตทริบิวต์ ID ของ "event1", "event2" และ "event3" และกำหนดสไตล์ให้แต่ละรูปแบบ ดังนั้นจึงง่ายกว่าที่จะใช้แอตทริบิวต์ class ดังกล่าวของ "event" และกำหนดสไตล์ให้ทั้งหมดในครั้งเดียว ความท้าทายที่มีคุณลักษณะ ID ก็คือความจำเพาะที่สูงกว่าคุณลักษณะของคลาส ซึ่งหมายความว่าหากคุณจำเป็นต้องมี CSS ที่แทนที่รูปแบบที่กำหนดไว้ก่อนหน้านี้อาจเป็นเรื่องยากที่จะทำเช่นนั้นหากคุณอาศัยอยู่กับ ID มากเกินไป ด้วยเหตุนี้นักพัฒนาเว็บจำนวนมากจึงย้ายออกจากการใช้รหัสในมาร์กอัปแม้ว่าจะต้องการใช้ค่าเพียงครั้งเดียวและหันมาใช้แอตทริบิวต์คลาสที่ไม่เจาะจงสำหรับสไตล์เกือบทุกรูปแบบ พื้นที่หนึ่งที่มีแอตทริบิวต์ ID เข้ามาเล่นคือเมื่อคุณต้องการสร้างหน้าเว็บที่มีลิงก์ anchor ในหน้า ตัวอย่างเช่นหากคุณมีเว็บไซต์สไตล์ parallax ที่มีเนื้อหาทั้งหมดในหน้าเดียวที่มีลิงก์ "ข้ามไปที่ส่วนต่างๆของหน้านั้น นี้จะกระทำโดยใช้คุณลักษณะ ID และการเชื่อมโยงข้อความที่ใช้เชื่อมโยงไปสมอเหล่านี้ คุณจะเพิ่มมูลค่าของแอตทริบิวต์นั้นก่อนหน้าด้วยสัญลักษณ์ "#" ไปยังแอตทริบิวต์ "href" ของลิงก์เช่นนี้ นี่คือลิงค์ เมื่อคลิกหรือแตะลิงก์นี้จะข้ามไปที่ส่วนของหน้าเว็บที่มีแอตทริบิวต์ ID นี้หากไม่มีองค์ประกอบบนหน้าใดใช้ค่า ID นี้ลิงก์จะไม่ทำอะไร โปรดจำไว้ว่าถ้าคุณต้องการสร้างการเชื่อมโยงในหน้าเว็บบนไซต์คุณจะต้องใช้แอตทริบิวต์ ID แต่คุณยังสามารถเปลี่ยนเป็นชั้นเรียนเพื่อจัดรูปแบบ CSS ทั่วไปได้ นี่คือวิธีที่เราทำเครื่องหมายหน้าเว็บในวันนี้ - เราใช้ selectors ชั้นมากที่สุดเท่าที่จะเป็นไปได้และหันไปใช้ ID เมื่อเราต้องการให้แอตทริบิวต์ทำงานไม่เพียง แต่เป็นเบ็ดสำหรับ CSS แต่ยังเป็นลิงก์ในหน้าและ h2 นี้ก็จะเป็นสีแดง
ID Selectors
ภาวะแทรกซ้อนของคุณลักษณะ ID
