CSS Reset หมายถึงการรีเซ็ตสไตล์ของเบราว์เซอร์ ในบทความก่อนหน้านี้บน 52CSS.com มีการแนะนำความรู้ที่คล้ายกัน แต่ยังข้อมูลเชิงลึกไม่เพียงพอ วันนี้เราจะดูตัวอย่างวิธีการรีเซ็ต CSS สิบตัวอย่างและเรียนรู้การประยุกต์ใช้วิธีนี้
ในเบราว์เซอร์ต่างๆ ค่าเริ่มต้นบางอย่างจะถูกใช้สำหรับตัวเลือก CSS ตัวอย่างเช่น เมื่อไม่ได้ตั้งค่า h1 เป็นค่า ขนาดที่แน่นอนจะปรากฏขึ้น แต่ไม่ใช่ทุกเบราว์เซอร์ที่ใช้ค่าเดียวกัน ดังนั้นจึงใช้การรีเซ็ต CSS เพื่อทำให้สไตล์ของหน้าเว็บทำงานสอดคล้องกันในแต่ละเบราว์เซอร์
1. รีเซ็ต CSS ทั่วไป
* {
ช่องว่างภายใน: 0;
ระยะขอบ: 0;
เส้นขอบ: 0;
}
นี่เป็นวิธีการรีเซ็ต CSS ซึ่งตั้งค่าช่องว่างภายใน ระยะขอบ และเส้นขอบของตัวเลือกทั้งหมดเป็น 0 นี่เป็นวิธีการที่มีประสิทธิภาพ ง่ายที่สุดและปลอดภัยที่สุด แต่ก็ใช้ทรัพยากรมากที่สุดเช่นกัน สำหรับเว็บไซต์ขนาดเล็ก การใช้สิ่งนี้จะไม่ทำให้เกิดการสิ้นเปลืองทรัพยากรมากนัก แต่หากเป็นเว็บไซต์ที่มีโครงสร้างขนาดใหญ่มาก เช่น Yahoo คุณเพียงแค่ต้องเลือกรีเซ็ต CSS เพื่อลดการสูญเสียทรัพยากร
2. Ateneu รีเซ็ต CSS ยอดนิยม
html, body, div, span, applet, object, 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 {เส้นขอบ: ไม่มีการตกแต่งข้อความ: ไม่มี;}
ol, ul {รายการสไตล์: ไม่มี;}
อินพุต, พื้นที่ข้อความ, เลือก, ปุ่ม {font-size: 100%;font-family: inherit;}
เลือก {ระยะขอบ: สืบทอด;}
ชั่วโมง {ระยะขอบ: 0; ช่องว่างภายใน: 0; เส้นขอบ: 0; สี: #000; สีพื้นหลัง: #000; ความสูง: 1px}
3. CSS รีเซ็ตของ Chris Poteet
* {
แนวตั้ง-จัด: พื้นฐาน;
ตระกูลแบบอักษร: สืบทอด;
รูปแบบตัวอักษร: สืบทอด;
ขนาดตัวอักษร: 100%;
เส้นขอบ: ไม่มี;
ช่องว่างภายใน: 0;
ระยะขอบ: 0;
-
ร่างกาย {
ช่องว่างภายใน: 5px;
-
h1, h2, h3, h4, h5, h6, p, ก่อน, blockquote, แบบฟอร์ม, ul, ol, dl {
ระยะขอบ: 20px 0;
-
li, dd, blockquote {
ขอบซ้าย: 40px;
-
โต๊ะ {
ชายแดนยุบ: ยุบ;
ระยะห่างขอบ: 0;
}
4. การรีเซ็ต CSS ของ Yahoo
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
แบบฟอร์ม, fieldset, อินพุต, textarea, p, blockquote, th, td {
ช่องว่างภายใน: 0;
ระยะขอบ: 0;
-
โต๊ะ {
ชายแดนยุบ: ยุบ;
ระยะห่างขอบ: 0;
-
ชุดสนาม img {
เส้นขอบ: 0;
-
ที่อยู่, คำอธิบายภาพ, การอ้างอิง, รหัส, dfn, em, strong, th, var {
น้ำหนักตัวอักษร: ปกติ;
รูปแบบตัวอักษร: ปกติ;
-
เฒ่า อุล {
รายการสไตล์: ไม่มี;
-
คำบรรยายภาพ, {
การจัดแนวข้อความ: ซ้าย;
-
h1,h2,h3,h4,h5,h6 {
น้ำหนักตัวอักษร: ปกติ;
ขนาดตัวอักษร: 100%;
-
ถาม:ก่อน,ถาม:หลัง {
เนื้อหา:";
-
abbr, ตัวย่อ { เส้นขอบ: 0;
}
5. Eric Meyer รีเซ็ต CSS
html, body, div, span, applet, object, iframe, table, Caption,
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 {
คำพูด: “” “”;
}
6. Tantek Celik รีเซ็ต CSS
:link,:visited { การตกแต่งข้อความ:none }
ul, ol { รายการสไตล์: ไม่มี }
h1,h2,h3,h4,h5,h6,pre,รหัส { ขนาดตัวอักษร:1em;
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,อินพุต
{ ระยะขอบ:0;
img,:link img,:เยี่ยมชม img { border:none }
ที่อยู่ { font-style:normal }
7. Christian Montoya รีเซ็ต CSS
html, body, form, fieldset {
ระยะขอบ: 0;
ช่องว่างภายใน: 0;
แบบอักษร: 100%/120% Verdana, Arial, Helvetica, sans-serif;
-
h1, h2, h3, h4, h5, h6, p, ก่อน,
blockquote, ul, ol, dl, ที่อยู่ {
ระยะขอบ: 1em 0;
ช่องว่างภายใน: 0;
-
li, dd, blockquote {
ขอบซ้าย: 1em;
-
ป้ายกำกับแบบฟอร์ม {
เคอร์เซอร์: ตัวชี้;
-
ชุดสนาม {
เส้นขอบ: ไม่มี;
-
อินพุต, เลือก, พื้นที่ข้อความ {
ขนาดตัวอักษร: 100%;
ตระกูลแบบอักษร: สืบทอด;
}
8. Rudeworks รีเซ็ต CSS
* {
ระยะขอบ: 0;
ช่องว่างภายใน: 0;
เส้นขอบ: ไม่มี;
-
HTML {
แบบอักษร: 62.5% "Lucida Grande", Lucida, Verdana, sans-serif;
ข้อความเงา: #000 0px 0px 0px;
-
อูล {
รายการสไตล์: ไม่มี;
รายการสไตล์ประเภท: ไม่มี;
-
h1, h2, h3, h4, h5, h6, p, ก่อน,
blockquote, ul, ol, dl, ที่อยู่ {
น้ำหนักตัวอักษร: ปกติ;
ระยะขอบ: 0 0 1em 0;
-
อ้างอิง em, dfn {
รูปแบบตัวอักษร: ตัวเอียง;
-
ซุป {
ตำแหน่ง: ญาติ;
ด้านล่าง: 0.3em;
แนวตั้ง-จัด: พื้นฐาน;
-
ย่อย {
ตำแหน่ง: ญาติ;
ด้านล่าง: -0.2em;
แนวตั้ง-จัด: พื้นฐาน;
-
li, dd, blockquote {
ขอบซ้าย: 1em;
-
รหัส, kbd, samp, ก่อน, tt, var, อินพุต[type='text'], textarea {
ขนาดตัวอักษร: 100%;
ตระกูลฟอนต์: โมนาโก, “Lucida Console”, courier, mono-space;
-
เดล {
การตกแต่งข้อความ: เส้นผ่าน;
-
อินส์ dfn {
ขอบล่าง: 1px solid #ccc;
-
เล็ก, ซุป, ย่อย {
ขนาดตัวอักษร: 85%;
-
อักษรย่อ {
การแปลงข้อความ: ตัวพิมพ์ใหญ่;
ขนาดตัวอักษร: 85%;
การเว้นวรรคตัวอักษร: .1em;
สไตล์ขอบล่าง: ประ;
เส้นขอบด้านล่างกว้าง: 1px;
-
ตัวย่อ ตัวย่อ {
เส้นขอบ: ไม่มี;
-
ซุป {
จัดแนวตั้ง: ซุปเปอร์;
-
ย่อย {
จัดแนวตั้ง: ย่อย;
-
h1 {
ขนาดตัวอักษร: 2em;
-
h2 {
ขนาดตัวอักษร: 1.8em;
-
h3 {
ขนาดตัวอักษร: 1.6em;
-
ชั่วโมง4 {
ขนาดตัวอักษร: 1.4em;
-
h5 {
ขนาดตัวอักษร: 1.2em;
-
h6 {
ขนาดตัวอักษร: 1em;
-
ก, ก: ลิงก์, ก: เยี่ยมชม, ก: โฮเวอร์, ก: ใช้งานอยู่ {
โครงร่าง: 0;
การตกแต่งข้อความ: ไม่มี;
-
ไอจี {
เส้นขอบ: ไม่มี;
การตกแต่งข้อความ: ไม่มี;
-
ไอเอ็มจี {
เส้นขอบ: ไม่มี;
การตกแต่งข้อความ: ไม่มี;
-
ป้ายกำกับ ปุ่ม {
เคอร์เซอร์: ตัวชี้;
-
อินพุต:โฟกัส, เลือก:โฟกัส, พื้นที่ข้อความ:โฟกัส {
สีพื้นหลัง: #FFF;
-
ชุดสนาม {
เส้นขอบ: ไม่มี;
-
.ชัดเจน {
ชัดเจน: ทั้งสอง;
-
.float-ซ้าย {
ลอย: ซ้าย;
-
.float-ขวา {
ลอย: ขวา;
-
ร่างกาย {
การจัดแนวข้อความ: กึ่งกลาง;
-
#กระดาษห่อ {
ระยะขอบ: 0 อัตโนมัติ;
การจัดแนวข้อความ: ซ้าย;
}
9. Anieto2K รีเซ็ต CSS
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, พี,
blockquote, pre, a, abbr, ตัวย่อ, ที่อยู่, ใหญ่,
อ้างอิง, รหัส, del, dfn, em, แบบอักษร, img,
ins, kbd, q, s, samp, เล็ก, นัดหยุดงาน,
แข็งแกร่ง, ย่อย, sup, tt, var, dl, dt, dd, ol, ul, li,
ชุดสนาม, แบบฟอร์ม, ป้าย, ตำนาน,
ตาราง, คำอธิบายภาพ, tbody, tfoot, thead, tr, th, td,
ศูนย์กลาง คุณ ข ฉัน {
ระยะขอบ: 0;
ช่องว่างภายใน: 0;
เส้นขอบ: 0;
โครงร่าง: 0;
น้ำหนักตัวอักษร: ปกติ;
รูปแบบตัวอักษร: ปกติ;
ขนาดตัวอักษร: 100%;
ตระกูลแบบอักษร: สืบทอด;
แนวตั้ง: พื้นฐาน
-
ร่างกาย {
ความสูงของเส้น: 1
-
:จุดสนใจ {
โครงร่าง: 0
-
เฒ่า อุล {
รายการสไตล์: ไม่มี
-
โต๊ะ {
ชายแดนยุบ: ยุบ;
ระยะห่างขอบ: 0
-
blockquote: ก่อน, blockquote: หลัง, q: ก่อน, q: หลัง {
เนื้อหา: ""
-
เครื่องหมายคำพูด q {
คำพูด: “” “”
-
อินพุต พื้นที่ข้อความ {
ระยะขอบ: 0;
ช่องว่างภายใน: 0
-
ชม. {
ระยะขอบ: 0;
ช่องว่างภายใน: 0;
เส้นขอบ: 0;
สี: #000;
สีพื้นหลัง: #000;
ความสูง: 1px
}
10. CSSLab CSS รีเซ็ต
html, body, div, span, applet, object, 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,
ส่วนหัว, tr, th, td {
ระยะขอบ: 0;
ช่องว่างภายใน: 0;
เส้นขอบ: 0;
โครงร่าง: 0;
น้ำหนักตัวอักษร: สืบทอด;
รูปแบบตัวอักษร: สืบทอด;
ขนาดตัวอักษร: 100%;
ตระกูลแบบอักษร: สืบทอด;
แนวตั้ง-จัด: พื้นฐาน;
-
:จุดสนใจ {
โครงร่าง: 0;
-
โต๊ะ {
ชายแดนยุบ: แยก;
ระยะห่างขอบ: 0;
-
คำบรรยายภาพ th, td {
การจัดแนวข้อความ: ซ้าย;
น้ำหนักตัวอักษร: ปกติ;
-
img, iframe {
เส้นขอบ: ไม่มี;
-
เฒ่า อุล {
รายการสไตล์: ไม่มี;
-
อินพุต, พื้นที่ข้อความ, เลือก, ปุ่ม {
ขนาดตัวอักษร: 100%;
ตระกูลแบบอักษร: สืบทอด;
-
เลือก {
ระยะขอบ: สืบทอด;
-
/* แก้ไขการวางตัวเลขไม่ถูกต้องใน ol's ใน IE6/7 */
ol { ขอบซ้าย:2em;
/* == เคลียร์ฟิกซ์ == */
.clearfix: หลังจาก {
เนื้อหา: ".";
จอแสดงผล: บล็อก;
ความสูง: 0;
ชัดเจน: ทั้งสอง;
การมองเห็น: ซ่อนเร้น;
-
.clearfix {จอแสดงผล: อินไลน์บล็อก;}
* html .clearfix {ความสูง: 1%;}
.clearfix {display: block;}
ทั้งหมดนี้คล้ายกัน โดยมีความต้องการและวิธีการต่างกัน