ซึ่งแต่ละสีจะต้องได้รับสีเฉพาะ วิธีการทำเช่นนี้? ตัวเลือก CSS มาตรฐานตามแท็กจะไม่ทำงาน แต่จะระบุพารามิเตอร์สำหรับบล็อกทั้งหมดในคราวเดียว วิธีแก้ปัญหานั้นง่าย กำหนดคลาสให้กับองค์ประกอบ ตัวอย่างเช่น div ตัวแรกได้รับ class=’red’ ตัวที่สอง - class=’blue’ ตัวที่สามได้รับ class=’green’ ตอนนี้สามารถเลือกได้โดยใช้ตาราง CSS

ไวยากรณ์มีดังนี้: เราระบุจุด (“.”) หลังจากนั้นเราเขียนชื่อของชั้นเรียน เพื่อควบคุมบล็อกแรก เราใช้โครงสร้าง .red อย่างที่สองคือ .blue และอื่นๆ

สำคัญ!ขอแนะนำให้ใช้ค่าที่ชัดเจนสำหรับแอตทริบิวต์คลาส การใช้คำแปล (เช่น krasiviy-blok) หรือการผสมตัวอักษร/ตัวเลขแบบสุ่ม (ojfh834871) ถือเป็นรูปแบบที่ไม่เหมาะสม คุณจะสับสนในโค้ดดังกล่าวอย่างแน่นอนไม่ต้องพูดถึงความยากลำบากที่ผู้ที่จะทำงานในโครงการนี้หลังจากคุณจะต้องเผชิญ ทางเลือกที่ดีที่สุดคือการใช้วิธีการบางอย่าง เช่น BEM

ข้อดี: มีความยืดหยุ่นค่อนข้างสูง

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

ตัวเลือกตาม ID

ความคิดเห็นของนักออกแบบเลย์เอาต์และโปรแกรมเมอร์เกี่ยวกับตัวเลือกนี้มีความคลุมเครือ หนังสือเรียนบางเล่มซีเอสเอสไม่แนะนำให้ใช้เลยบัตรประจำตัวเพราะหากใช้อย่างไม่ระมัดระวังอาจทำให้เกิดปัญหาเรื่องมรดกได้ อย่างไรก็ตาม ผู้เชี่ยวชาญหลายคนเน้นย้ำเครื่องหมายเหล่านี้ตลอดทั้งเครื่องหมาย มันขึ้นอยู่กับคุณที่จะตัดสินใจ ไวยากรณ์คือ: สัญลักษณ์แฮช ("# ") ตามด้วยชื่อบล็อก ตัวอย่างเช่น,#สีแดง.

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

ข้อดี - คุณสามารถควบคุมองค์ประกอบเฉพาะได้โดยไม่ต้องใส่ใจกับสไตล์ของแท็กและคลาส

ข้อเสีย - สับสนได้ง่ายในจำนวนมากบัตรประจำตัวประชาชนและระดับ.

สำคัญ!หากคุณใช้วิธีการ BEM (หรือแบบอะนาล็อก)บัตรประจำตัวประชาชนโดยทั่วไปคุณไม่จำเป็นต้องใช้มัน เทคนิคการจัดวางนี้เกี่ยวข้องกับการใช้คลาสที่ไม่ซ้ำใครซึ่งสะดวกกว่ามาก

ตัวเลือกสากล

ไวยากรณ์: เครื่องหมายดอกจัน (“*”) และเครื่องหมายปีกกา เช่น *{}.

ใช้เพื่อกำหนดคุณลักษณะบางอย่างให้กับองค์ประกอบของหน้าทั้งหมดในคราวเดียว สิ่งนี้จะมีประโยชน์เมื่อใด? ตัวอย่างเช่น หากคุณต้องการตั้งค่าคุณสมบัติของเพจขนาดกล่อง: ขอบกล่องสามารถใช้ไม่เพียงแต่ในการควบคุมส่วนประกอบเอกสารทั้งหมด แต่ยังควบคุมองค์ประกอบย่อยทั้งหมดของบล็อกเฉพาะ เช่นdiv *()

ข้อดี - คุณสามารถจัดการองค์ประกอบจำนวนมากได้พร้อมกัน

ข้อเสีย - ไม่คล่องตัวเท่าที่ควร นอกจากนี้ การใช้ตัวเลือกนี้อาจทำให้เพจช้าลงได้ในบางกรณี

ตามคุณสมบัติ

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

ป้อนข้อมูล()

ตัวเลือกแอตทริบิวต์นี้จะเลือกอินพุตทั้งหมดที่มีข้อความประเภท

เครื่องมือนี้ค่อนข้างยืดหยุ่น สามารถใช้ได้กับแท็กใดๆ ที่อาจมีแอตทริบิวต์ แต่นั่นไม่ใช่ทั้งหมด! ข้อกำหนด CSS ทำให้สามารถจัดการองค์ประกอบต่างๆ ได้สะดวกยิ่งขึ้น!

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

อินพุต () หรืออินพุต

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

CSS จะเลือกองค์ประกอบทั้งหมดที่ชื่อมีอักขระ “Kaspiysk” เช่น ทั้ง “Kaspiyskiy” และ “Kaspiyskaya”

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

หรือลงท้ายด้วย:

{}.

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

ข้อเสีย - มีการใช้งานค่อนข้างน้อยเฉพาะในบางกรณีเท่านั้น นักออกแบบเลย์เอาต์หลายคนชอบวิธีการ เนื่องจากการระบุคลาสนั้นง่ายกว่าการจัดเรียงสัญญาณจำนวนมากและเท่ากัน นอกจากนี้ ตัวเลือกเหล่านี้ใช้ไม่ได้ใน Internet Explorer 7 และต่ำกว่า อย่างไรก็ตาม ตอนนี้ใครต้องการ Internet Explorer รุ่นเก่าบ้าง?

ตัวเลือกคลาสหลอก

คลาสหลอกหมายถึงสถานะขององค์ประกอบ ตัวอย่างเช่น :hover คือสิ่งที่เกิดขึ้นกับส่วนของหน้าเมื่อเคอร์เซอร์ถูกชี้เมาส์ไว้ :visited คือลิงก์ที่เยี่ยมชม รวมถึงองค์ประกอบต่างๆ เช่น:first-child และ:last-child

ตัวเลือกประเภทนี้ถูกใช้อย่างแข็งขันในเลย์เอาต์สมัยใหม่ เนื่องจากคุณทำให้เพจ "ใช้งานได้" โดยไม่ต้องใช้ JavaScript ตัวอย่างเช่น คุณต้องการให้แน่ใจว่าเมื่อคุณวางเมาส์เหนือปุ่มที่มีคลาส btn สีจะเปลี่ยน ในการทำเช่นนี้เราใช้โครงสร้างต่อไปนี้:

btn:โฮเวอร์ (

สีพื้นหลัง: สีแดง;

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

ข้อดี - ใช้เพื่อ "ฟื้นฟู" เพจอย่างแข็งขัน ใช้งานง่าย.

ข้อเสีย - ไม่มีเลย นี่เป็นเครื่องมือที่สะดวกจริงๆ อย่างไรก็ตาม นักออกแบบเลย์เอาต์ที่ไม่มีประสบการณ์อาจสับสนกับคลาสหลอกที่มีอยู่มากมาย ปัญหาได้รับการแก้ไขโดยการศึกษาและการปฏิบัติ

ตัวเลือกองค์ประกอบหลอก

"องค์ประกอบหลอก" คือส่วนของหน้าที่ไม่มีอยู่ใน HTML แต่ยังสามารถจัดการได้ ไม่เข้าใจอะไรเลยเหรอ? ทุกอย่างง่ายกว่าที่คิด ตัวอย่างเช่น คุณต้องการทำให้ตัวอักษรตัวแรกในบรรทัดมีขนาดใหญ่และเป็นสีแดง แต่ปล่อยให้ข้อความที่เหลือมีขนาดเล็กและเป็นสีดำ แน่นอน คุณสามารถแนบจดหมายนี้ในช่วงที่มีคลาสเฉพาะเจาะจงได้ แต่มันก็ยาวและน่าเบื่อ ง่ายกว่ามากในการเลือกทั้งย่อหน้าและใช้ pseudo-element::first-letter ช่วยให้คุณควบคุมลักษณะที่ปรากฏของตัวอักษรตัวแรกได้

มีองค์ประกอบหลอกค่อนข้างมาก ไม่น่าเป็นไปได้ที่จะแสดงรายการไว้ในบทความเดียว คุณสามารถค้นหาข้อมูลที่เกี่ยวข้องได้ในเครื่องมือค้นหาที่คุณชื่นชอบ

ข้อดี - ช่วยให้คุณปรับแต่งรูปลักษณ์ของเพจได้อย่างยืดหยุ่น

ข้อเสีย - ผู้เริ่มต้นมักจะสับสนเกี่ยวกับเรื่องนี้ ตัวเลือกประเภทนี้หลายตัวใช้งานได้ในบางเบราว์เซอร์เท่านั้น

มาสรุปกัน

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

• งานที่กำลังดำเนินการคือการเลือกองค์ประกอบทั้งหมด จริงๆแล้วทุกคน
• การกำหนดเป็นเครื่องหมายดอกจัน - *
• ตัวอย่างการใช้งาน:

รีเซ็ตช่องว่างภายในเป็นค่าเริ่มต้นสำหรับองค์ประกอบทั้งหมด

เรียนรู้เพิ่มเติมเกี่ยวกับตัวเลือกสากล

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

อีกสิ่งหนึ่งที่เกี่ยวกับตัวเลือกสากลก็คือ เมื่อใช้ร่วมกับตัวเลือกอื่น (เช่น คลาส ตัวระบุ หรือตัวเลือกแอตทริบิวต์) โดยเป็นส่วนหนึ่งของตัวเลือกแบบธรรมดา ก็สามารถข้ามได้โดยไม่ต้องรับโทษ นี่เป็นเรื่องเดียวกับการพูดว่า "อูฐทุกตัวเป็นอูฐหนอก" เพียงว่า "หนอกเป็นอูฐหนอก" ความหมายไม่เปลี่ยนแปลง

ตัวอย่าง:

*.error ( color: red; ) .error ( color: red; ) /* กฎทั้งสองนี้เทียบเท่ากัน ตัวเลือกสากลหายไปในกรณีที่สอง */

ขอบเขตการใช้งาน

ที่จริงแล้ววิธีที่สะดวกที่สุดในการใช้ตัวเลือกสากลดังเช่นในตัวอย่างแรกเพื่อรีเซ็ตค่าเริ่มต้นของสไตล์ที่ขึ้นอยู่กับเบราว์เซอร์ (โดยเฉพาะการเยื้อง)

แต่ถึงแม้แอปพลิเคชันดังกล่าวจะไม่ใช่ความคิดที่ดีเสมอไป เนื่องจากข้อเสียของตัวเลือกสากลที่อธิบายไว้ในบทความ จึงควรใช้ . นั่นคือใช้ตัวเลือกประเภท

นี่คือวิธีที่เราเข้าหาหัวข้อถัดไปได้อย่างราบรื่น ดูเหมือนว่าเราจะแยกแยะตัวเลือกสากลออกแล้ว ถึงเวลาที่จะเดินหน้าต่อไป สถานีต่อไป - .

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

สัญลักษณ์ดอกจัน (*) ใช้เพื่อแสดงถึงตัวเลือกสากล และโดยทั่วไปไวยากรณ์จะเป็นดังนี้

* (คำอธิบายกฎสไตล์)

ใน ในบางกรณี ไม่จำเป็นต้องระบุตัวเลือกสากล ตัวอย่างเช่น บันทึก*.class และ .class เหมือนกันในเอาต์พุต

ใน ตัวอย่าง 1.50 แสดงหนึ่งในแอปพลิเคชันที่เป็นไปได้ของตัวเลือกสากล - การเลือกแบบอักษรและขนาดข้อความสำหรับองค์ประกอบเอกสารทั้งหมด

ตัวอย่าง 1.50. การใช้ตัวเลือกสากล

เสือดาวหิมะ

เสือดาวหิมะ (irbis, ak Leopard) เป็นสัตว์เลี้ยงลูกด้วยนมขนาดใหญ่ที่กินสัตว์อื่นในตระกูลแมว อาศัยอยู่ในภูเขาของอัฟกานิสถาน พม่า ภูฏาน อินเดีย คาซัคสถาน คีร์กีซสถาน จีน มองโกเลีย เนปาล ปากีสถาน รัสเซีย ทาจิกิสถาน และอุซเบกิสถาน เสือดาวหิมะมีลักษณะเด่นคือมีรูปร่างที่บาง ยาว และยืดหยุ่น ขาค่อนข้างสั้น หัวเล็ก และหางที่ยาวมาก

ความยาวของเสือดาวหิมะรวมหางคือ 200-230 ซม. น้ำหนักมากถึง 55 กก.

ขนมีสีอ่อน สีเทาควัน มีจุดดำรูปวงแหวนหรือทึบ

เสือดาวหิมะล่าแพะภูเขาและแกะเป็นหลัก อาหารของมันยังรวมถึงหมูป่า ไก่ฟ้า และแม้แต่โกเฟอร์ด้วย เนื่องจากไม่สามารถเข้าถึงแหล่งที่อยู่อาศัยของสายพันธุ์นี้ได้ เสือดาวหิมะจึงยังมีการศึกษาไม่ดีนัก อย่างไรก็ตาม ตามการประมาณการคร่าวๆ จำนวนของพวกเขาแตกต่างกันไปประมาณ 10,000 คน ในปี 2013 ห้ามล่าเสือดาวหิมะในทุกที่