การตรวจสอบระดับความสำคัญของ CSS สไตล์

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

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

ดังนั้นโพสต์นี้มีไว้เฉพาะสำหรับผู้เริ่มต้นที่เพิ่งเริ่มได้รับความท้าทายอาจยังคงทำผิดพลาดและผิดพลาดเมื่อรวบรวมสไตล์ชีทแรกของพวกเขา ดังนั้นเรามาเริ่มกันเลย.

ลักษณะเบราว์เซอร์เริ่มต้น

Firefox, Chrome, Safari, Opera และ Internet Explorer เป็นเบราว์เซอร์เดสก์ท็อปห้าอันดับแรกในตลาด เบราว์เซอร์เหล่านี้และเบราว์เซอร์อื่น ๆ ทั้งหมดปฏิบัติตามกฎมาตรฐานเพื่อรวมสไตล์เริ่มต้นในตัวเพื่อแสดงองค์ประกอบ HTML.

ดังนั้นเมื่อเราใส่องค์ประกอบ HTML แบบสุ่มโดยไม่มีการเพิ่มสไตล์ใด ๆ คุณจะเห็นว่ามันยังแสดงผลอย่างถูกต้องในเบราว์เซอร์.

แต่ถ้าเราตรวจสอบองค์ประกอบเหล่านั้นอย่างรอบคอบแต่ละเบราว์เซอร์จะมีค่าแตกต่างกันเล็กน้อย “ค่าเริ่มต้น” การประกาศที่ก่อให้เกิดความไม่สอดคล้องกันในเบราว์เซอร์โดยเฉพาะในเบราว์เซอร์เก่าเช่น IE6, 7 และ Firefox 3.0.

ตัวอย่างเช่นอย่างที่คุณเห็นจากภาพด้านบน Firefox ใหม่ล่าสุดแสดงผล blockquote โดยค่าเริ่มต้นด้วย กำไร: 16px 40px 16px 40px, ในขณะที่อีกด้านหนึ่ง Internet Explorer 7 จะทำให้ blockquote กับ กำไรขั้นต้น: 0px 40px.

เพื่อเอาชนะความไม่สอดคล้องที่แสดงด้านบนนักออกแบบเว็บไซต์และนักพัฒนาซอฟต์แวร์จำนวนมากต้องการเขียนทับสไตล์เหล่านั้นทั้งหมดด้วย รีเซ็ต CSS. โดยทั่วไปไฟล์ CSS นี้มี HTML เกือบทั้งหมด ชนิด ตัวเลือกกำหนดด้วยกฎเท่ากัน.

มีการรีเซ็ต CSS จำนวนมากที่มีอยู่ แต่นี่คือรายการโปรดสามอันดับแรกของฉัน:

• Normalize.css
• รีเซ็ต CSS
• สไตล์ชีท HTML5 รีเซ็ต

selectors

คุณมักจะอ่านคำนี้ในบล็อกการออกแบบ / การพัฒนาเว็บที่คุณเยี่ยมชม selectors.

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

ตัวเลือกประเภท

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

 p / ** ประกาศ ** / 

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

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

เมื่อคุณเพิ่มคลาสหรือแม้แต่คลาสจำนวนมากให้กับองค์ประกอบคุณยังสามารถกำหนดเป้าหมายคลาสเหล่านั้นได้ ตัวเลือกคลาส เริ่มต้นด้วย จุด พารามิเตอร์.

 .กล่อง / ** ประกาศ ** / 

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

 p.box / ** ประกาศ ** / 

มันจะกำหนดเป้าหมายเท่านั้น พี องค์ประกอบที่มี กล่อง ชั้น.

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

ตัวเลือกรหัส

ID เป็นแอตทริบิวต์ที่ จำกัด มากเราสามารถมีได้เพียงอันเดียว รหัส ในองค์ประกอบและจะต้องไม่ซ้ำกันเช่นกัน.

 
เนื้อหา
 

ในกรณีที่เรามี รหัส ในองค์ประกอบเราสามารถใช้ ตัวเลือกรหัส เพื่อกำหนดเป้าหมายองค์ประกอบนั้น ตัวเลือกรหัสถูกกำหนดด้วยแฮช # พารามิเตอร์.

 #uniqueID / ** การประกาศ ** / 

ตั้งแต่ ID ไม่ซ้ำกันมันมีลำดับความสำคัญที่แข็งแกร่งที่สุดของประเภทของตัวเลือก ดังนั้นเมื่อเราประกาศสไตล์ด้วย ID ตัวเลือกมันจะเขียนทับการประกาศเดียวกันทั้งหมดในที่สุด ชั้น, ชนิด ตัวเลือกและ เบราว์เซอร์เริ่มต้น รูปแบบ.

การฝังสไตล์

เราผ่านตัวเลือกพื้นฐานที่สำคัญทั้งหมดและตอนนี้เราจะพิจารณาว่าสไตล์เหล่านั้นฝังอยู่ในเอกสาร HTML อย่างไร.

สไตล์ภายนอก

สไตล์ภายนอกเป็นสไตล์ที่ถูกเพิ่มเข้าไปในไฟล์แยกต่างหากโดยปกติจะเป็น .CSS ไฟล์ที่เชื่อมโยงกับเอกสาร HTML โดยใช้ แท็กเพื่อใช้สไตล์เหล่านั้น.

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

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

โดยการทำเช่นนั้นสไตล์จะสามารถจัดการได้ง่ายตัวอย่างเช่นคุณสามารถแยกไฟล์ CSS ออกเป็นหลาย ๆ ไฟล์ขึ้นอยู่กับบทบาทเฉพาะเช่น typography.css เพื่อควบคุมสไตล์ทั้งหมดที่เกี่ยวข้องกับ Typography และอื่น ๆ.

ลักษณะภายใน

สไตล์ภายในเป็นสไตล์ที่ฝังอยู่โดยตรงในเอกสาร HTML โดยทั่วไปภายใน แท็ก.

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

ขึ้นอยู่กับระดับความสำคัญสไตล์ภายในจะสูงกว่าดังนั้นจึงจะเขียนทับสไตล์ภายนอก.

รูปแบบอินไลน์

รูปแบบอินไลน์เป็นสไตล์ที่ฝังอยู่ในองค์ประกอบ HTML โดยตรง.

 
นี่คือย่อหน้า
 

ตัวอย่างข้างต้นจะเพิ่ม 5px ส่วนต่างขององค์ประกอบย่อหน้าและจะเขียนทับส่วนต่างที่ได้รับการประกาศสำหรับองค์ประกอบนั้นทั้งในรูปแบบภายในและภายนอก.

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

อ่านเพิ่มเติม: สามวิธีในการแทรก CSS - W3CSchools.

กฎสำคัญ!

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

เรามีแท็กสมอต่อไปนี้มีสไตล์ฝังอยู่

 นี่คือลิงค์ 

และเรายังมีสไตล์แยกต่างหากสำหรับแท็กสมอนั้นในสไตล์ชีท.

 a border: 1px solid # 333; สีพื้นหลัง: # 555;  

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

 a border: 1px solid # 333! important; สีพื้นหลัง: # 555! สำคัญ;  

!สำคัญ กฎจะระบุว่ารูปแบบนี้เป็นแบบส่วนใหญ่ สำคัญ และต้องใช้กับสไตล์อื่นแม้ว่าจะฝังอยู่ในองค์ประกอบโดยตรง (สไตล์อินไลน์).

อ่านเพิ่มเติม:! การประกาศ CSS ที่สำคัญ: อย่างไรและเมื่อใดที่จะใช้นิตยสาร Smashing -.

ข้อสรุป

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

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

ท้ายนี้ฉันได้จัดทำไฟล์ตัวอย่างและซอร์สให้คุณตรวจสอบการสนทนาของเราในบทความนี้เพิ่มเติม.

• การสาธิต
• แหล่งดาวน์โหลด

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