คุณรู้หรือไม่ว่าการรีเซ็ต CSS คืออะไร? โดยปกติแล้วจะเขียนเป็นรีเซ็ต CSS ซึ่งจะรีเซ็ตสไตล์ของเบราว์เซอร์ ในเบราว์เซอร์ต่างๆ ค่าเริ่มต้นบางอย่างจะถูกใช้สำหรับตัวเลือก CSS ตัวอย่างเช่น เมื่อไม่ได้ตั้งค่า h1 เป็นค่า ขนาดที่แน่นอนจะปรากฏขึ้น แต่ไม่ใช่ทุกเบราว์เซอร์ที่ใช้ค่าเดียวกัน ดังนั้นจึงใช้การรีเซ็ต CSS เพื่อทำให้สไตล์ของหน้าเว็บทำงานสอดคล้องกันในแต่ละเบราว์เซอร์
หากคุณใช้ CSS คุณเคยใช้ CSS Reset หรือไม่ แน่นอน คุณอาจใช้มันแต่ไม่รู้ว่าคุณกำลังใช้มันอยู่ ตัวอย่างเช่น คุณอาจใช้:
| * { ช่องว่างภายใน: 0; ระยะขอบ: 0; |
นี่เป็นวิธีการรีเซ็ต CSS ที่ตั้งค่าช่องว่างภายใน ระยะขอบ และเส้นขอบของตัวเลือกทั้งหมดเป็น 0 นี่เป็นวิธีการที่ทรงพลังและง่ายที่สุดและปลอดภัยที่สุดเช่นกัน สำหรับเว็บไซต์ขนาดเล็ก การใช้สิ่งนี้จะไม่ทำให้เกิดการสิ้นเปลืองทรัพยากรมากนัก แต่หากเป็นเว็บไซต์ที่มีโครงสร้างขนาดใหญ่มาก เช่น Yahoo คุณเพียงแค่ต้องเลือกรีเซ็ต CSS เพื่อลดการสูญเสียทรัพยากร ต่อไปนี้เป็นโค้ดรีเซ็ต CSS ของ Yahoo ซึ่งเป็นวิธีการรีเซ็ต CSS ที่ได้รับความนิยมมากที่สุดเช่นกัน วิธีที่ YUI เลือกคือ:
| ร่างกาย,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,ก่อน, แบบฟอร์ม, fieldset, อินพุต, textarea, p, blockquote, th, td { ช่องว่างภายใน: 0; ระยะขอบ: 0; - โต๊ะ { ชายแดนยุบ: ยุบ; ระยะห่างขอบ: 0; - ชุดสนาม img { เส้นขอบ: 0; - ที่อยู่, คำอธิบายภาพ, การอ้างอิง, รหัส, dfn, em, strong, th, var { น้ำหนักตัวอักษร: ปกติ; รูปแบบตัวอักษร: ปกติ; - เฒ่า อุล { รายการสไตล์: ไม่มี; - คำบรรยายภาพ, { การจัดแนวข้อความ: ซ้าย; - h1,h2,h3,h4,h5,h6 { น้ำหนักตัวอักษร: ปกติ; ขนาดตัวอักษร: 100%; - ถาม:ก่อน,ถาม:หลัง { เนื้อหา:”; - อักษรย่อ อักษรย่อ { เส้นขอบ: 0; - |
ตกลง ฉันเชื่อว่าคุณเข้าใจวัตถุประสงค์ของการรีเซ็ต CSS แล้ว บางทีคุณอาจเขียนระบบรีเซ็ต CSS ของคุณเองได้ตามความต้องการของคุณเอง ท้ายที่สุดแล้ว ความต้องการและนิสัยของทุกคนก็แตกต่างกัน และคุณสามารถดูสิ่งต่อไปนี้:
รีเซ็ต CSS ยอดนิยมของ Ateneu
| html, เนื้อหา, div, สแปน, แอพเพล็ต, วัตถุ, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, ตัวย่อ, ที่อยู่, ใหญ่, อ้างอิง, รหัส, del, dfn, em, แบบอักษร, img, ins, kbd, q, s, samp, เล็ก, โจมตี, แข็งแกร่ง, ย่อย, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, แบบฟอร์ม, ป้ายกำกับ, คำอธิบายแผนภูมิ, ตาราง, คำอธิบาย, tbody, tfoot, thead, tr, th, td { ระยะขอบ: 0; ช่องว่างภายใน: 0; เส้นขอบ: 0; โครงร่าง: 0; น้ำหนักตัวอักษร: สืบทอด; รูปแบบตัวอักษร: สืบทอด; ขนาดตัวอักษร: 100%; ตระกูลแบบอักษร: สืบทอด; แนวตั้ง-จัด: พื้นฐาน; - :โฟกัส {โครงร่าง: 0;} a, a:link, a:visited, a:hover, a:active{การตกแต่งข้อความ:none} ตาราง { ยุบเส้นขอบ: แยก; ระยะห่างเส้นขอบ: 0;} th, td {จัดข้อความ: ซ้าย; img, iframe {เส้นขอบ: none; ol, ul {รายการสไตล์: ไม่มี;} อินพุต, พื้นที่ข้อความ, เลือก, ปุ่ม {font-size: 100%;font-family: inherit;} เลือก {ระยะขอบ: สืบทอด;} ชั่วโมง {ระยะขอบ: 0; ช่องว่างภายใน: 0; เส้นขอบ: 0; สี: #000; สีพื้นหลัง: #000; ความสูง: 1px} |
Chris Poteet’s รีเซ็ต CSS
| - แนวตั้ง-จัด: พื้นฐาน; ตระกูลแบบอักษร: สืบทอด; รูปแบบตัวอักษร: สืบทอด; ขนาดตัวอักษร: 100%; เส้นขอบ: ไม่มี; ช่องว่างภายใน: 0; ระยะขอบ: 0; - ร่างกาย { ช่องว่างภายใน: 5px; - h1, h2, h3, h4, h5, h6, p, ก่อน, blockquote, แบบฟอร์ม, ul, ol, dl { ระยะขอบ: 20px 0; - li, dd, blockquote { ขอบซ้าย: 40px; - โต๊ะ { ชายแดนยุบ: ยุบ; ระยะห่างขอบ: 0; - |
เอริค เมเยอร์ รีเซ็ต CSS
| html, เนื้อความ, div, span, แอพเพล็ต, วัตถุ, iframe, ตาราง, คำอธิบายภาพ, tbody, tfoot, thead, tr, th, td, del, dfn, em, แบบอักษร, img, ins, kbd, q, s, samp, เล็ก, โจมตี, แข็งแกร่ง, ย่อย, sup, tt, var, h1, h2, h3, h4, h5, h6, p, blockquote, ก่อน, a, abbr, คำย่อ, ที่อยู่, ใหญ่, อ้างอิง, รหัส, dl, dt, dd, ol, ul, li, fieldset, แบบฟอร์ม, ป้ายกำกับ, คำอธิบาย { แนวตั้ง-จัด: พื้นฐาน; ตระกูลแบบอักษร: สืบทอด; น้ำหนักตัวอักษร: สืบทอด; รูปแบบตัวอักษร: สืบทอด; ขนาดตัวอักษร: 100%; โครงร่าง: 0; ช่องว่างภายใน: 0; ระยะขอบ: 0; เส้นขอบ: 0; - :จุดสนใจ { โครงร่าง: 0; - ร่างกาย { พื้นหลัง: สีขาว; ความสูงของเส้น: 1; สี: สีดำ; - เฒ่า อุล { รายการสไตล์: ไม่มี; - โต๊ะ { ชายแดนยุบ: แยก; ระยะห่างขอบ: 0; - คำบรรยายภาพ th, td { น้ำหนักตัวอักษร: ปกติ; การจัดแนวข้อความ: ซ้าย; - blockquote: ก่อน, blockquote: หลัง, q: ก่อน, q: หลัง { เนื้อหา: ""; - เครื่องหมายคำพูด q { เครื่องหมายคำพูด: "" ""; - |