การใช้คลาสและรหัสสไตล์

ชั้นเรียนและรหัสช่วยขยาย CSS ของคุณ

การสร้างเว็บไซต์บนเว็บในปัจจุบันจำเป็นต้องมีความเข้าใจอย่างลึกซึ้งเกี่ยวกับ 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 ที่เราแสดง

ย่อหน้านี้จะเขียนด้วยสีแดง

และ h2 นี้ก็จะเป็นสีแดง

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

ID Selectors

ตัวเลือก รหัสช่วยให้คุณสามารถกำหนดชื่อให้กับสไตล์เฉพาะโดยไม่ต้องเชื่อมโยงกับแท็กหรือ องค์ประกอบ 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 แต่คุณยังสามารถเปลี่ยนเป็นชั้นเรียนเพื่อจัดรูปแบบ CSS ทั่วไปได้ นี่คือวิธีที่ฉันทำเครื่องหมายหน้าเว็บในวันนี้ - ฉันใช้ตัวเลือกชั้นเรียนให้มากที่สุดเท่าที่จะเป็นไปได้และหันไปใช้ ID เมื่อฉันต้องการแอตทริบิวต์ให้ทำหน้าที่ไม่เพียง แต่เป็นเบ็ดสำหรับ CSS แต่ยังเป็นลิงก์ในหน้า

บทความต้นฉบับโดย Jennifer Krynin แก้ไขโดย Jeremy Girard เมื่อวันที่ 8/9/17