home

หน้าแรก
 Computer >> คอมพิวเตอร์ >  >> การเขียนโปรแกรม >> CSS

ตัวเลือกแอตทริบิวต์ CSS

ตัวเลือก CSS ช่วยให้นักพัฒนาเว็บใช้สไตล์กับองค์ประกอบเฉพาะหรือชุดขององค์ประกอบบนหน้าเว็บได้

เมื่อทำงานกับตัวเลือก คุณอาจตัดสินใจว่าคุณต้องการกำหนดเป้าหมายเฉพาะองค์ประกอบที่มีแอตทริบิวต์เฉพาะ นั่นคือที่มาของตัวเลือกแอตทริบิวต์ CSS ตัวเลือกแอตทริบิวต์ช่วยให้คุณใช้รูปแบบเฉพาะกับองค์ประกอบที่มีแอตทริบิวต์เฉพาะเท่านั้น

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

แอตทริบิวต์ HTML

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

คุณประกาศแอตทริบิวต์โดยใช้โครงสร้างคู่ชื่อ/ค่า ซึ่งหมายความว่าในไฟล์ HTML แอตทริบิวต์จะปรากฏดังนี้: name=“value” . หากต้องการเรียนรู้เพิ่มเติมเกี่ยวกับแอตทริบิวต์ใน HTML โปรดอ่านคำแนะนำเกี่ยวกับแอตทริบิวต์ HTML

ตัวเลือกแอตทริบิวต์ CSS

เมื่อคุณออกแบบเว็บไซต์ คุณอาจต้องการนำสไตล์ไปใช้กับองค์ประกอบโดยพิจารณาว่าองค์ประกอบเหล่านั้นมีค่าแอตทริบิวต์เฉพาะหรือไม่ คุณใช้ตัวเลือกแอตทริบิวต์ CSS เพื่อดำเนินการดังกล่าว

สองขั้นตอนที่คุณจะทำเมื่อใช้ตัวเลือกแอตทริบิวต์คือ:

  1. ใส่ชื่อแอตทริบิวต์ภายในวงเล็บเหลี่ยม
  2. ระบุสไตล์ที่คุณต้องการนำไปใช้กับแอตทริบิวต์ที่มีชื่อนั้น

มาสำรวจตัวอย่างบางส่วนของตัวเลือกแอตทริบิวต์ CSS ที่ใช้งานจริงกัน

81% ของผู้เข้าร่วมกล่าวว่าพวกเขารู้สึกมั่นใจมากขึ้นเกี่ยวกับโอกาสในการทำงานด้านเทคโนโลยีหลังจากเข้าร่วม bootcamp จับคู่กับ Bootcamp วันนี้

ผู้สำเร็จการศึกษาจากหลักสูตร bootcamp โดยเฉลี่ยใช้เวลาน้อยกว่าหกเดือนในการเปลี่ยนอาชีพ ตั้งแต่เริ่มต้น bootcamp ไปจนถึงหางานแรก

CSS [แอตทริบิวต์]

รูปแบบพื้นฐานที่สุดของตัวเลือกแอตทริบิวต์คือ:[attribute] . พูดง่ายๆ คือ คุณใส่ชื่อของแอตทริบิวต์ในวงเล็บเหลี่ยม

สมมติว่าเราต้องการตั้งค่าขนาดตัวอักษรของทุกองค์ประกอบที่มีแอตทริบิวต์ชื่อเป็น 16px เราสามารถทำได้โดยใช้รหัสนี้:

[title] {
	font-size: 16px;
}

โค้ดในกฎ CSS ของเราจะนำไปใช้กับองค์ประกอบที่มีแอตทริบิวต์ชื่อเท่านั้น ขนาดแบบอักษรขององค์ประกอบใดๆ ที่มีแอตทริบิวต์ชื่อที่ระบุ—ไม่ว่าจะเก็บค่าใดก็ตาม—จะเปลี่ยนเป็น 16px ตามกฎด้านบน

คุณสามารถทำให้ตัวเลือกแอตทริบิวต์ของคุณแม่นยำยิ่งขึ้นได้โดยระบุอย่างใดอย่างหนึ่งหรือทั้งสองอย่างต่อไปนี้:

  • ประเภทองค์ประกอบเฉพาะที่กฎควรใช้
  • ค่ารหัสแอตทริบิวต์ (เช่น "ชื่อ" สำหรับข้อความ "href" สำหรับลิงก์ หรือ "คลาส" สำหรับองค์ประกอบใดๆ)

ตัวอย่างเช่น สมมติว่าคุณต้องการตั้งค่าขนาดของข้อความส่วนหัวของย่อหน้าทั้งหมดเป็น 16 พิกเซล คุณสามารถทำได้โดยใช้รหัสนี้:

[title] {
	font-size: 16px;
}

ตัวอักษร p ที่จุดเริ่มต้นของตัวเลือกแอตทริบิวต์บอกให้เบราว์เซอร์ใช้รูปแบบแบบอักษรเฉพาะกับ <p> แท็ก [title] ส่วนหนึ่งของตัวเลือกสั่งให้เบราว์เซอร์ใช้รูปแบบแบบอักษรกับแท็ก

ที่มี title เท่านั้น แอตทริบิวต์ที่ระบุ

ดังนั้น หลังจากอ่านโค้ดนี้แล้ว เบราว์เซอร์จะแปลงขนาดฟอนต์ของส่วนหัวของย่อหน้า (p) ทั้งหมดเป็น 16 พิกเซล รหัสนี้จะไม่มีผลกับข้อความอื่นบนหน้า

CSS [attribute=“value”]

[attribute=“value”] ตัวเลือกแอตทริบิวต์ช่วยให้ผู้เขียนโค้ดใช้รูปแบบได้เฉพาะกับองค์ประกอบที่มีค่าแอตทริบิวต์เท่ากับค่าที่ระบุในตัวเลือก

สมมติว่าเราต้องการตั้งค่าสีพื้นหลังของลิงก์ทั้งหมดที่ไปยังหน้าแรกของ Career Karma เป็นสีส้ม สไตล์นี้ควรกำหนดสีพื้นหลังของ a องค์ประกอบเป็นสีส้ม เราสามารถดำเนินการนี้ได้โดยใช้โค้ด CSS ต่อไปนี้:

a[href="careerkarma.com"] {
	background-color: orange;
}

กฎนี้จะเลือกองค์ประกอบ ของหน้าเว็บทั้งหมดที่มีแอตทริบิวต์ href เท่ากับ careerkarma.com . จากนั้นจะกำหนดสีพื้นหลังขององค์ประกอบเหล่านั้นทั้งหมดเป็นสีส้ม

CSS [แอตทริบิวต์~=“ค่า”]

[attribute~=“value”] ตัวเลือกช่วยให้คุณเลือกองค์ประกอบที่มีค่าแอตทริบิวต์ที่มีคำเฉพาะได้

ตัวอย่างเช่น สมมติว่าคุณต้องการใช้สไตล์กับ p . ทั้งหมด องค์ประกอบที่มีชื่อตรงกับคำว่า blue . สำหรับสไตล์นี้ สีข้อความขององค์ประกอบเหล่านี้ควรเปลี่ยนเป็นสีน้ำเงิน

เราสามารถใช้กฎต่อไปนี้เพื่อทำงานนี้ให้สำเร็จ:

p[title~="blue"] {
	color: blue;
}

กฎนี้จะค้นหาแท็ก

ทั้งหมดที่เกี่ยวข้องกับชื่อที่มีคำว่า "สีน้ำเงิน" และจะกำหนดสีข้อความของข้อความภายในแท็ก

ให้เป็นสีน้ำเงิน ดังนั้น หากแท็ก

มีชื่อเรื่องว่า blue หรือ blue สไตล์นี้จะนำไปใช้ อย่างไรก็ตาม กฎนี้จะ ไม่ นำไปใช้กับแท็ก

ที่มีชื่อ blueColor เพราะคำว่า blue ไม่มีอยู่อย่างอิสระภายในแอตทริบิวต์

ซึ่งต่างจากตัวเลือก *= selector ซึ่งไม่เพียงแต่ค้นหาคำเฉพาะในแอตทริบิวต์เท่านั้น แต่ยังสามารถค้นหาค่าเฉพาะในแอตทริบิวต์ได้อีกด้วย

CSS [แอตทริบิวต์|=“ค่า”]

[attribute|=“value”] selector ให้คุณเลือกองค์ประกอบที่มีแอตทริบิวต์ที่เริ่มต้นด้วยค่าที่ระบุ (เช่น “top”) ซึ่งรวมถึงองค์ประกอบที่มีแอตทริบิวต์ที่ขึ้นต้นด้วยค่าที่ระบุและมียัติภังค์ตามด้วยข้อความเพิ่มเติม (เช่น "top-style" และค่า "top-") โปรดทราบว่ารหัสต้องใช้แถบแนวตั้ง (|) หลังคำว่า "คลาส"

ตัวอย่างเช่น สมมติว่าคุณต้องการกำหนดช่องว่างด้านบน 10px ให้กับทุก <div> องค์ประกอบที่มีแอตทริบิวต์ class ที่ขึ้นต้นด้วย top รวมถึงค่าที่ตามด้วยค่าที่คั่นด้วยยัติภังค์อื่นๆ คุณสามารถทำได้โดยใช้รหัสนี้:

div[class|="top"] {
	padding-top: 10px;
}

กฎนี้จะใช้ช่องว่างภายใน 10px ที่ด้านบนของทุกองค์ประกอบ

ที่มีชื่อคลาสขึ้นต้นด้วย top รวมถึงองค์ประกอบที่มีชื่อคลาสที่ขึ้นต้นด้วย top- .

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

ที่มีชื่อคลาส top style และ top-style แต่ไม่ใช่กับ
องค์ประกอบที่มีชื่อคลาส topstyle .

CSS [แอตทริบิวต์^=“ค่า”]

[attribute^=“value”] selector ใช้สำหรับเลือกองค์ประกอบที่มีค่าแอททริบิวต์ขึ้นต้นด้วยค่าเฉพาะ ค่าที่คุณระบุไม่จำเป็นต้องเป็นทั้งคำ ไม่เหมือนกับ [attribute|=“value”] ตัวเลือกที่เรากล่าวถึงก่อนหน้านี้

สมมติว่าเราต้องการใช้ช่องว่างภายใน 10px กับทุกองค์ประกอบ

ซึ่งมีแอตทริบิวต์คลาสที่ขึ้นต้นด้วย paddingBottom . เราสามารถทำได้โดยใช้รหัสนี้:

div[class^="paddingBottom"] {
	padding-bottom: 10px;
}

เว็บเบราว์เซอร์ของผู้ใช้จะใช้รูปแบบ padding-bottom ที่เรากำหนดให้กับแท็ก

ทั้งหมดที่มีชื่อคลาสขึ้นต้นด้วย "paddingBottom" ดังนั้น หากเรามีคลาสที่เรียกว่า “paddingBottomStyle” สไตล์นี้จะถูกนำมาใช้ สไตล์นี้จะใช้กับคลาสที่เรียกว่า “paddingBottom” และ “paddingBottom-element” เป็นต้น แต่จะใช้ไม่ได้กับคลาสที่เรียกว่า "new-paddingBottom" ซึ่งไม่ได้ขึ้นต้นด้วย "paddingBottom"

CSS [attribute$=“value”]

ตัวดำเนินการ $= operator ใช้เพื่อเลือกองค์ประกอบทั้งหมดที่มีค่าแอตทริบิวต์ลงท้ายด้วยค่าเฉพาะ ตัวอย่างเช่น สมมติว่าคุณต้องการเปลี่ยนสีข้อความเป็นสีเทาของข้อความไฮเปอร์ลิงก์ทั้งหมดซึ่งค่าแอตทริบิวต์ href ลงท้ายด้วย .app . คุณสามารถทำได้โดยใช้รหัสนี้:

a[href$=".app"] {
	color: gray;
}

ตัวเลือกนี้จะใช้กับองค์ประกอบ ทั้งหมดบนหน้าเว็บของคุณซึ่งค่า href ลงท้ายด้วย .app .

CSS [แอตทริบิวต์*=“ค่า”]

ตัวดำเนินการ *= operator ให้คุณเลือกองค์ประกอบทั้งหมดที่มีค่าแอตทริบิวต์ที่มีค่าเฉพาะ ไม่เหมือนกับตัวดำเนินการ ~= operator ตัวเลือกแอตทริบิวต์นี้สามารถค้นหาค่าเฉพาะในชั้นเรียน ไม่ใช่แค่คำเดียว

ตัวอย่างเช่น สมมติว่าคุณต้องการใช้ช่องว่างภายในขนาด 50px กับแท็ก

ทั้งหมดที่มีแอตทริบิวต์คลาสที่มี allPadding . คุณสามารถทำได้โดยใช้กฎนี้:

div[class*="allPadding"] {
	padding: 50px;
}

กฎนี้จะกำหนดช่องว่างภายใน 50px รอบองค์ประกอบ HTML ทั้งหมดที่มีแอตทริบิวต์คลาสที่มีคำว่า allPadding . ดังนั้นองค์ประกอบที่มีชื่อคลาส new allPadding , surround allPadding red , allPaddingblue และ allPadding-true ทั้งหมดจะอยู่ภายใต้รูปแบบนี้

บทสรุป

ตัวเลือกแอตทริบิวต์ CSS ช่วยให้นักพัฒนาสามารถเลือกองค์ประกอบตามค่าแอตทริบิวต์และใช้รูปแบบเฉพาะกับองค์ประกอบเหล่านั้นได้

บทช่วยสอนนี้กล่าวถึงโดยอ้างอิงถึงตัวอย่าง พื้นฐานของตัวเลือกแอตทริบิวต์และวิธีใช้ตัวเลือกแอตทริบิวต์ CSS ทุกประเภท ตอนนี้คุณก็พร้อมที่จะเริ่มใช้ตัวเลือกแอตทริบิวต์ CSS อย่างมืออาชีพแล้ว


CSS เป็นหนึ่งในสามทักษะหลักที่ใช้ในการพัฒนาเว็บ ดาวน์โหลด แอป Career Karma ฟรี วันนี้เพื่อพูดคุยกับโค้ชอาชีพผู้เชี่ยวชาญที่สามารถช่วยให้คำแนะนำเกี่ยวกับทักษะที่จำเป็นในการเข้าสู่สายอาชีพในฐานะนักพัฒนาเว็บได้