บทความนี้นำเสนอหัวข้อที่น่าสนใจและมีความสำคัญที่เรียกว่า ตัวเลือกและติดตามด้วยการสาธิตเชิงปฏิบัติที่สนับสนุน คำแนะนำต่อไปนี้จะกล่าวถึงในบทความนี้
- จัดแต่งทรงผมองค์ประกอบ HTML
- CSS Selectors
- CSS Id Selector
- CSS Class Selector
- CSS Universal Selector
- CSS Group Selectors
มาเริ่มกันเลย
จัดแต่งทรงผมองค์ประกอบ HTML
มาทำความเข้าใจว่า CSS คืออะไรก่อนที่เราจะไปที่ตัวเลือก CSS ถ้า HTML ถูกพิจารณาว่าเป็นโครงกระดูก CSS (Cascading Style Sheets) ก็เหมือนกับกล้ามเนื้อและผิวหนัง สมองคือ JavaScript ดังนั้นสำหรับหน้าเว็บสไตล์ CSS จึงเป็นเค้าโครงและการออกแบบเป็นหลัก ตั้งแต่การวางตำแหน่งของรูปภาพและข้อความไปจนถึงขนาดฟอนต์และสีพื้นหลัง CSS จะควบคุมลักษณะขององค์ประกอบ HTML ในเบราว์เซอร์
คุณจะเข้าใจ CSS ได้ดีขึ้นหากคุณมีความเข้าใจดีว่าตัวเลือก CSS คืออะไร ตัวเลือกเหล่านี้ช่วยให้คุณกำหนดเป้าหมายองค์ประกอบ HTML ที่เฉพาะเจาะจงเพื่อให้คุณสามารถใช้สไตล์ที่เหมาะสมกับพวกเขาได้
มาทำความเข้าใจว่าเราสามารถเลือกองค์ประกอบ HTML ได้อย่างไร
วิธีเลือกองค์ประกอบ
สมมติว่าคุณต้องการให้หัวเรื่องบางส่วนมีสไตล์แตกต่างจากเนื้อหาอื่น ๆ ในหน้าเว็บ ตอนนี้การใช้ตัวเลือก CSS คุณสามารถกำหนดเป้าหมายองค์ประกอบ HTML นั้นเพื่อจัดสไตล์ให้แตกต่างกันได้ ตัวเลือก CSS ช่วยในการกำหนดองค์ประกอบที่ใช้กฎ CSS ชุดหนึ่ง มีตัวเลือก CSS ประเภทต่างๆที่ให้คุณเลือกองค์ประกอบที่คุณต้องการจัดสไตล์ได้อย่างแม่นยำ คุณสามารถกำหนดรูปแบบทั่วไปทั้งหน้าเว็บจากนั้นจัดรูปแบบองค์ประกอบอื่น ๆ ของหน้า
ตัวเลือกเป็นส่วนหนึ่งของกฎ CSS และตัวเลือกเหล่านี้มาก่อนการประกาศบล็อก CSS เพื่อความเข้าใจที่ดีขึ้นคุณสามารถดูภาพด้านล่าง
ไปต่อด้วยบทความ CSS Selectors
CSS Selectors
ตัวเลือกนี้ช่วยให้คุณสามารถเลือกองค์ประกอบ HTML ตามชื่อได้
พิจารณารหัสด้านล่าง:
p {text-align: center color: magenta}ลักษณะนี้จะถูกนำไปใช้กับทุกย่อหน้า
ย่อหน้าที่ 1
ย่อหน้าที่ 2
รหัสนี้จะให้ผลลัพธ์ดังต่อไปนี้:
ลักษณะนี้จะถูกนำไปใช้กับทุกย่อหน้า
ย่อหน้าที่ 1
ย่อหน้าที่ 2
ในโค้ดด้านบนองค์ประกอบ HTML ได้รับการจัดแนวกึ่งกลางและมีสี 'ม่วงแดง'
ไปต่อด้วยบทความ CSS Selectors
CSS Id Selector
ด้วยการเลือกแอตทริบิวต์ id ขององค์ประกอบ HTML คุณสามารถเลือกองค์ประกอบเฉพาะนั้นได้ เนื่องจาก ID ไม่ซ้ำกันสำหรับเพจคุณสามารถเลือกองค์ประกอบที่เหมาะสมได้โดยใช้แอตทริบิวต์ id
คุณสามารถเลือกองค์ประกอบ HTML โดยใช้“ #” ตามด้วยรหัสขององค์ประกอบนั้น ตัวอย่างเช่น“ #firstname” จะเลือกองค์ประกอบที่ id คือ“ firstname”
พิจารณารหัสต่อไปนี้:
# para1 {text-align: center color: orange}สวัสดีชาวโลก
ตัดแต่ง () ใน java
ย่อหน้านี้จะไม่ได้รับผลกระทบ
ผลลัพธ์สำหรับโค้ดด้านบนคือ:
สวัสดีชาวโลก
ย่อหน้านี้จะไม่ได้รับผลกระทบ
ดังที่คุณเห็นในผลลัพธ์ด้านบนโดยการใส่ id =” para1″ เราสามารถเปลี่ยนสีขององค์ประกอบนั้นเป็นสีส้มได้ องค์ประกอบอื่น ๆ ที่ไม่มีสิ่งนี้ยังคงไม่ได้รับผลกระทบ
ไปต่อด้วยบทความ CSS Selectors
CSS Class Selector
เมื่อใช้ตัวเลือกคลาสคุณสามารถเลือกองค์ประกอบ HTML ที่มีแอตทริบิวต์คลาสเฉพาะ คุณสามารถกำหนดตัวเลือกโดยใช้จุด (สัญลักษณ์หยุดเต็ม) ตามด้วยชื่อคลาส ตัวอย่างเช่น. intro เลือกองค์ประกอบที่ชั้นเรียนเป็น 'บทนำ' สิ่งหนึ่งที่ควรทราบคือคุณไม่สามารถเริ่มต้นชื่อชั้นเรียนด้วยตัวเลขได้
พิจารณารหัสต่อไปนี้:
.center {text-align: center color: pink}ส่วนหัวนี้เป็นสีชมพูและจัดกึ่งกลาง
ย่อหน้านี้เป็นสีชมพูและจัดกึ่งกลาง
ผลลัพธ์ของโค้ดด้านบนคือ:
ส่วนหัวนี้เป็นสีชมพูและจัดกึ่งกลาง
ย่อหน้านี้เป็นสีชมพูและจัดกึ่งกลาง
คุณสามารถใช้ตัวเลือกคลาส CSS สำหรับองค์ประกอบเฉพาะได้ หากคุณต้องการให้มีสไตล์เฉพาะองค์ประกอบเดียวคุณสามารถใช้ชื่อองค์ประกอบร่วมกับตัวเลือกคลาสได้
ตัวอย่างเช่นพิจารณารหัสต่อไปนี้:
p.center {text-align: center color: pink}ส่วนหัวนี้ไม่ได้รับผลกระทบ
ย่อหน้านี้เป็นสีชมพูและจัดกึ่งกลาง
ผลลัพธ์ของโค้ดด้านบนคือ:
ส่วนหัวนี้ไม่ได้รับผลกระทบ
ย่อหน้านี้เป็นสีชมพูและจัดกึ่งกลาง
ดังที่คุณเห็นในเอาต์พุตส่วนหัว h2 จะไม่ได้รับผลกระทบจากสไตล์ เนื่องจากเราได้ระบุ“ p.center” เฉพาะย่อหน้าเท่านั้นที่ได้รับผลกระทบจากรูปแบบ
ต่อไปกับบทความ CSS Selectors
CSS Universal Selector
ตัวเลือกประเภทนี้ถือได้ว่าเป็นอักขระตัวแทนที่เลือกองค์ประกอบทั้งหมดในเพจ มันเลือกองค์ประกอบทั้งหมดบนหน้าและระบุโดย“ *”
ตัวอย่างเช่นพิจารณารหัสด้านล่าง:
* {color: darkgreen font-size: 30px}นี่คือการทดสอบ (แบบอักษรที่เล็กกว่า)
นี่คือย่อหน้า
ผลลัพธ์สำหรับโค้ดด้านบนคือ:
สวัสดีชาวโลก
นี่คือการทดสอบ (แบบอักษรที่เล็กกว่า)
นี่คือย่อหน้า
ดังที่คุณเห็นในผลลัพธ์องค์ประกอบทั้งหมดที่กำหนดโดยใช้ตัวเลือกกลุ่มจะมีการกำหนดสไตล์เหมือนกัน - จัดกึ่งกลางและสีแบบอักษรเป็นสีฟ้า
เรามาถึงตอนท้ายของบทความนี้
ตรวจสอบ ซึ่งมาพร้อมกับการฝึกอบรมสดที่นำโดยผู้สอนและประสบการณ์โครงการในชีวิตจริง การฝึกอบรมนี้ทำให้คุณมีความเชี่ยวชาญในทักษะในการทำงานกับเทคโนโลยีเว็บส่วนหลังและส่วนหน้า รวมถึงการฝึกอบรมเกี่ยวกับ Web Development, jQuery, Angular, NodeJS, ExpressJS และ MongoDB
มีคำถามสำหรับเรา? โปรดระบุไว้ในส่วนความคิดเห็นของบทความแล้วเราจะติดต่อกลับไป