จะระบุแอตทริบิวต์แบบอักษรสำหรับองค์ประกอบทั้งหมดบนหน้าเว็บ html ได้อย่างไร

127

เมื่อฉันตั้งค่าตระกูลฟอนต์ขนาดฟอนต์สี ฯลฯ ดูเหมือนว่าองค์ประกอบที่ซ้อนกันบางอย่างจะแทนที่สิ่งเหล่านี้ด้วยค่าเริ่มต้นของเบราว์เซอร์ที่น่าเกลียด

ฉันต้องระบุหลายสิบครั้งสำหรับองค์ประกอบประเภทใดในหน้าของฉันหรือมีวิธีตั้งค่าทั่วโลกครั้งเดียวตลอดไปหรือไม่

ต้องทำอย่างไร?

css

— สมาชิกภูมิใจ
แหล่งที่มา

1

ปัจจุบันคุณตั้งค่าตระกูลฟอนต์ขนาด ... อย่างไร?

— thecoop

251

* {
 font-size: 100%;
 font-family: Arial;
}

เครื่องหมายดอกจันหมายถึงองค์ประกอบทั้งหมด

— Bazzz
แหล่งที่มา

15

วิธีนี้ใช้ได้ผล แต่ไม่ใช่วิธีแก้ปัญหาที่ดีที่สุด เมื่อเบราว์เซอร์เห็น '*' มันจะวนซ้ำองค์ประกอบ HTML ทั้งหมดในหน้าและใช้ CSS กับองค์ประกอบเหล่านั้น แม้แต่องค์ประกอบที่กฎไม่สมเหตุสมผล ขึ้นอยู่กับขนาดของ HTML ซึ่งอาจทำให้การแสดงผลเพจช้าลง

— Cesar Canassa

4

เห็นด้วย แต่จะใช้ CSS กับองค์ประกอบทั้งหมดตามที่ BugAlert ขอ หากต้องการให้มีผลกับองค์ประกอบทั้งหมดเราสามารถคาดหวังว่าประสิทธิภาพจะลดลงเล็กน้อย :)

— Bazzz

1

นอกจากนี้คุณยังสามารถเพิ่ม! ที่สำคัญในตอนท้ายของการประกาศแต่ละสไตล์เพื่อให้ปลอดภัยกับการประกาศรูปแบบอื่นที่มีน้ำหนักเกินดุลนี้

— ..

4

ฉันรู้ว่ามันเป็นเวลา 5 ปีแล้ว แต่ฉันแปลกใจที่ไม่มีใครสังเกตเห็นจนถึงตอนนี้: คุณไม่ควรระบุแค่ฟอนต์ Windows ใน "font-family" (เว้นแต่ว่าจะเป็นเว็บฟอนต์) - Arial, helvetica, sans-serif มีมากกว่านั้น เข้ากันได้

— rob74

6

html{font-family:Arial,helvetica,sans-serif;font-size:100%;}body{font-size:1em;font-family:inherit;}การสืบทอดแบบอักษรและหากคุณต้องการหลีกเลี่ยงการใช้การแทนที่จริงๆให้ใช้: *,:before,:after{font-family:inherit;}หากคุณต้องใช้ตัวเลือกสากลให้ใช้การสืบทอดแทน

— darcher

18

หากคุณใช้ IE โอกาสที่เบราว์เซอร์จะเปลี่ยนกลับไปเป็นค่าเริ่มต้นของเบราว์เซอร์สำหรับองค์ประกอบบางอย่างเช่นตาราง คุณสามารถตอบโต้ได้ด้วย CSS ต่อไปนี้:

html, body, form, fieldset, table, tr, td, img {
    margin: 0;
    padding: 0;
    font: 100%/150% calibri,helvetica,sans-serif;
}

input, button, select, textarea, optgroup, option {
    font-family: inherit;
    font-size: inherit;
    font-style: inherit;
    font-weight: inherit;
}

/* rest of your styles; like: */
body {
    font-size: 0.875em;
}

แก้ไข: คุณอาจต้องการอ่านเกี่ยวกับการรีเซ็ต CSS ดูกระทู้แบบนี้

— พอล
แหล่งที่มา

10

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

ลองใช้reset.cssของ Eric Meyer

— คริสค็อกซ์
แหล่งที่มา

ในการใช้ reset.css นี้ฉันเพียงแค่เชื่อมโยงสไตล์ชีตเข้ากับหน้าของฉันหรือฉันต้องปรับแต่ง? โดยพื้นฐานแล้วฉันต้องมีตระกูลแบบอักษรและขนาดเดียวกันในเบราว์เซอร์หลัก ๆ ทั้งหมด reset.css ช่วยฉันทำตามค่าเริ่มต้นหรือไม่

— Darth Coder

1

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

— Chris Cox

ขอบคุณ! ฉันลองใช้แล้วและสามารถแก้ปัญหาส่วนใหญ่ของฉันได้ อย่างไรก็ตามฉันยังคงเห็นความแตกต่างของขนาดตัวอักษรระหว่าง Chrome และ Firefox ทั้งๆที่สไตล์ชีตของฉันเหมือนกัน มีความคิดเกี่ยวกับเรื่องนี้ไหม และนี่เป็นแนวทางปฏิบัติที่ดีหรือไม่?

— Darth Coder

8

คุณสามารถตั้งค่าได้ในแท็กเนื้อหา

body
{
    font-size:xxx;
    font-family:yyyy;
}

— jimplode
แหล่งที่มา

13

สิ่งนี้ไม่ถูกต้องเนื่องจากเบราว์เซอร์ส่วนใหญ่จะไม่ใช้แบบอักษรนี้กับองค์ประกอบบางอย่าง (องค์ประกอบจะไม่สืบทอดรูปแบบตัวอักษร)

— travis-146

@ travis-146 เบราว์เซอร์อะไร องค์ประกอบใด คุณรู้ว่ามีข้อกำหนดที่เบราว์เซอร์ทั้งหมดต้องปฏิบัติตาม

— Bamieh

@Bamieh ตัวอย่างเฉพาะอย่างหนึ่ง (ที่ทำให้ฉันมาที่นี่จริงๆ) ใน Chrome 72 คือมันไม่ได้ใช้แบบอักษรกับข้อความภายในปุ่มหรือเลือกเมนู

— Nick Silvestri

2

หากคุณระบุแอตทริบิวต์ CSS สำหรับbodyองค์ประกอบของคุณควรใช้กับสิ่งใดก็ได้ภายใน<body></body>ตราบเท่าที่คุณไม่ได้แทนที่ในภายหลังในสไตล์ชีต

— ไทเลอร์ทรีท
แหล่งที่มา

0

หากคุณต้องการกำหนดรูปแบบขององค์ประกอบทั้งหมดในร่างกายคุณควรใช้รหัสถัดไป ^

  body{
    color: green;
    }

— Stepan Poperechnyi
แหล่งที่มา