เสร็จสิ้นการรีเซ็ต Css (รีเซ็ต)

CSS รีเซ็ตคืออะไร? เพื่อนร่วมงานบางคนเรียกมันว่า "การรีเซ็ต css" และบางคนอาจเรียกมันว่า "css เริ่มต้น"...
ฉันเชื่อว่าคุณจะมีความเข้าใจใหม่เกี่ยวกับการรีเซ็ต Css หลังจากอ่านข้อความ

ฉบับเต็มแล้ว...

PS:

รหัสโปรแกรม
-
ช่องว่างภายใน: 0;
ระยะขอบ: 0;
}

นี่เป็นการรีเซ็ต Css ที่ใช้บ่อยที่สุด แต่มีปัญหามากมายที่นี่

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

ขอขอบคุณ Perishable เป็นอย่างยิ่งสำหรับการเรียบเรียงและสรุปข้อมูล

ต่อไปนี้เป็นการแนะนำสั้นๆ เกี่ยวกับ Css Reset หลายประเภท ผู้เขียนมีความสามารถจำกัดและสามารถเข้าใจได้เฉพาะความหมายทั่วไปเท่านั้น

การรีเซ็ตแบบเรียบง่าย [เวอร์ชัน 1]

โค้ดโปรแกรม

ที่เรามักใช้

-
ช่องว่างภายใน: 0;
ระยะขอบ: 0;
-

การรีเซ็ตแบบเรียบง่าย [เวอร์ชัน 2]
การออกแบบของ border:0 ค่อนข้างไม่น่าเชื่อถือและ

โค้ดของโปรแกรม
-
ช่องว่างภายใน: 0;
ระยะขอบ: 0;
เส้นขอบ: 0;
-

การรีเซ็ตแบบเรียบง่าย [เวอร์ชัน 3]
แน่นอนว่าไม่แนะนำให้ทำเช่นนี้ เนื่องจากจะขัดแย้งกับรูปแบบเริ่มต้นของ

โค้ดโปรแกรม

-
โครงร่าง: 0;
ช่องว่างภายใน: 0;
ระยะขอบ: 0;
เส้นขอบ: 0;
-

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

รหัสโปรแกรม
-
แนวตั้ง-align: baselinebaseline;
น้ำหนักตัวอักษร: สืบทอด;
ตระกูลแบบอักษร: สืบทอด;
รูปแบบตัวอักษร: สืบทอด;
ขนาดตัวอักษร: 100%;
เส้นขอบ: 0 ไม่มี;
โครงร่าง: 0;
ช่องว่างภายใน: 0;
ระยะขอบ: 0;
-

การรีเซ็ตของคนจน

รหัสโปรแกรม

สำหรับการรีเซ็ตขนาดตัวอักษรและการประมวลผลเส้นขอบของลิงก์รูปภาพมักพบเห็นได้ในบางไซต์

html เนื้อความ {
ช่องว่างภายใน: 0;
ระยะขอบ: 0;
-
HTML {
ขนาดตัวอักษร: 1em;
-
ร่างกาย {
ขนาดตัวอักษร: 100%;
-
img, :link img, :visited img {
เส้นขอบ: 0;
-

การรีเซ็ตทั่วโลกของ Shaun Inman
ผู้เขียนเชื่อว่า Shaun มีวัตถุประสงค์บางอย่างในการเขียน Css Reset ประเภทนี้ และกฎดังกล่าวมุ่งเป้าไปที่เบราว์เซอร์ที่สำคัญๆ ที่ใช้กันทั่วไป เช่น IE, Firefox และ

โค้ดโปรแกรม

ร่างกาย, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, ก่อน,
แบบฟอร์ม, fieldset, อินพุต, p, blockquote, ตาราง, th, td, ฝัง, วัตถุ {
ช่องว่างภายใน: 0;
ระยะขอบ: 0;
-
โต๊ะ {
ชายแดนยุบ: ยุบ;
ระยะห่างขอบ: 0;
-
ชุดสนาม, img, abbr {
เส้นขอบ: 0;
-
ที่อยู่, คำอธิบายภาพ, อ้างอิง, รหัส, dfn, em,
h1, h2, h3, h4, h5, h6, แข็งแกร่ง, th, var {
น้ำหนักตัวอักษร: ปกติ;
รูปแบบตัวอักษร: ปกติ;
-
อูล {
รายการสไตล์: ไม่มี;
-
คำบรรยายภาพ, {
การจัดแนวข้อความ: ซ้าย;
-
h1, h2, h3, h4, h5, h6 {
ขนาดตัวอักษร: 1.0em;
-
ถาม:ก่อน, ถาม:หลัง {
เนื้อหา: '';
-
ก, อิน {
การตกแต่งข้อความ: ไม่มี;
-

Yahoo CSS รีเซ็ต

รหัสโปรแกรม

สำหรับ Reset ที่เขียนโดยพวกที่ yahoo สามารถแนะนำได้

ร่างกาย,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%;
-
ถาม:ก่อน,ถาม:หลัง {
เนื้อหา:'';
-
abbr, ตัวย่อ { เส้นขอบ: 0;
-

รีเซ็ต CSS ของ Erik Meyer
ผู้เขียนได้จัดเรียงโค้ดของ Erik Meyer ใหม่ แต่ฟังก์ชันยังคงเหมือนเดิม ชุด Css Reset นี้ถือเป็น

โค้ดโปรแกรม

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, pre, a, abbr, ตัวย่อ, ที่อยู่, ใหญ่, อ้างอิง, รหัส,
dl, dt, dd, ol, ul, li, fieldset, แบบฟอร์ม, ป้ายกำกับ, คำอธิบาย {
แนวตั้ง-align: baselinebaseline;
ตระกูลแบบอักษร: สืบทอด;
น้ำหนักตัวอักษร: สืบทอด;
รูปแบบตัวอักษร: สืบทอด;
ขนาดตัวอักษร: 100%;
โครงร่าง: 0;
ช่องว่างภายใน: 0;
ระยะขอบ: 0;
เส้นขอบ: 0;
-
/* อย่าลืมกำหนดรูปแบบโฟกัส! */
:จุดสนใจ {
โครงร่าง: 0;
-
ร่างกาย {
พื้นหลัง: สีขาว;
ความสูงของเส้น: 1;
สี: สีดำ;
-
เฒ่า อุล {
รายการสไตล์: ไม่มี;
-
/* ตารางยังต้องการ cellspacing="0" ในมาร์กอัป */
โต๊ะ {
ชายแดนยุบ: แยก;
ระยะห่างขอบ: 0;
-
คำบรรยายภาพ th, td {
น้ำหนักตัวอักษร: ปกติ;
การจัดแนวข้อความ: ซ้าย;
-
/* ลบเครื่องหมายคำพูดที่เป็นไปได้ (") จาก <q> & <blockquote> */
blockquote: ก่อน, blockquote: หลัง, q: ก่อน, q: หลัง {
เนื้อหา: "";
-
เครื่องหมายคำพูด q {
เครื่องหมายคำพูด: "" "";
-

รีเซ็ตเมเยอร์แบบย่อ
โดยทั่วไป นี่คือการแก้ไขและปรับปรุง

โค้ดโปรแกรม

ร่างกาย, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6,
ก่อน, แบบฟอร์ม, ชุดเขตข้อมูล, อินพุต, พื้นที่ข้อความ, p, blockquote, th, td {
ช่องว่างภายใน: 0;
ระยะขอบ: 0;
-
ชุดสนาม img {
เส้นขอบ: 0;
-
โต๊ะ {
ชายแดนยุบ: ยุบ;
ระยะห่างขอบ: 0;
-
เฒ่า อุล {
รายการสไตล์: ไม่มี;
-
ที่อยู่, คำอธิบายภาพ, อ้างอิง, รหัส, dfn, em, strong, th, var {
น้ำหนักตัวอักษร: ปกติ;
รูปแบบตัวอักษร: ปกติ;
-
คำบรรยายภาพ, {
การจัดแนวข้อความ: ซ้าย;
-
h1, h2, h3, h4, h5, h6 {
น้ำหนักตัวอักษร: ปกติ;
ขนาดตัวอักษร: 100%;
-
ถาม:ก่อน, ถาม:หลัง {
เนื้อหา: '';
-
อักษรย่อ {
เส้นขอบ: 0;
-