Khi tôi đặt họ phông chữ, kích thước phông chữ, màu sắc vv, có vẻ như một số phần tử lồng nhau ghi đè chúng với các mặc định của trình duyệt xấu xí.Cách chỉ định thuộc tính phông chữ cho tất cả các phần tử trên trang web html?
Tôi có thực sự chỉ định hàng chục lần cho bất kỳ loại yếu tố nào trên trang của tôi hay có cách nào để đặt chúng trên toàn cầu một lần và mãi mãi không?
Làm cách nào để thực hiện điều đó?
* {
font-size: 100%;
font-family: Arial;
}
Dấu hoa thị ngụ ý tất cả các yếu tố.
Tính năng này hoạt động nhưng không phải là giải pháp tốt nhất. Khi trình duyệt thấy '*', nó lặp lại trên tất cả các phần tử HTML trong trang và áp dụng CSS cho chúng. Ngay cả đối với các yếu tố mà quy tắc không có ý nghĩa gì. Tùy thuộc vào kích thước của HTML, điều này có thể làm chậm việc hiển thị trang. –
Đồng ý, nhưng nó áp dụng CSS cho TẤT CẢ các phần tử, như BugAlert đã yêu cầu. Nếu một người muốn có hiệu lực TẤT CẢ các yếu tố, người ta có thể mong đợi hiệu suất giảm một chút. :) – Bazzz
Bạn cũng có thể thêm phần quan trọng vào cuối mỗi tuyên bố kiểu để an toàn với các kiểu khai báo kiểu khác có giá trị lớn hơn. – Sam
Nếu bạn chỉ định thuộc tính CSS cho phần tử body, nên áp dụng cho bất kỳ nội dung nào trong phạm vi <body></body> miễn là bạn không ghi đè chúng sau này trong biểu định kiểu.
bạn có thể đặt chúng trong thẻ nội dung
body
{
font-size:xxx;
font-family:yyyy;
}
Điều này là không chính xác vì hầu hết các trình duyệt sẽ không áp dụng phông chữ này cho một số thành phần (các yếu tố sẽ không kế thừa kiểu phông chữ) –
@ travis-146 trình duyệt nào? yếu tố nào? bạn biết có một thông số mà tất cả các trình duyệt phải tuân theo. – Bamieh
Nếu bạn đang sử dụng trình duyệt IE, rất có thể nó sẽ trở lại giá trị mặc định trình duyệt cho các yếu tố nhất định, như bảng. Bạn có thể phản đối điều đó với một cái gì đó giống như CSS sau:
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;
}
Chỉnh sửa: bạn có thể muốn đọc về các lần đặt lại CSS; xem các chủ đề như this one
Tôi không thể nhấn mạnh đủ lời khuyên này: sử dụng bảng định kiểu đặt lại, sau đó đặt mọi thứ rõ ràng. Nó sẽ cắt giảm thời gian phát triển CSS của trình duyệt chéo của bạn xuống còn một nửa.
Hãy thử Eric Meyer reset.css.
Để sử dụng reset.css này, tôi có liên kết biểu định kiểu vào trang của mình hay tôi phải chỉnh sửa nó? Về cơ bản, tôi cần phải có cùng họ phông chữ và kích thước trên tất cả các trình duyệt chính. Các tệp reset.css có giúp tôi thực hiện điều đó theo mặc định không? –
Tôi có xu hướng sao chép và dán nó vào đầu biểu định kiểu của tôi thay vì liên kết riêng nó, lưu yêu cầu HTTP. Nó sẽ giúp bạn thiết lập phong cách nhất quán trên các trình duyệt bởi vì nó có tất cả mọi thứ: các kiểu duy nhất sẽ là kiểu mà bạn viết. –
Cảm ơn! Tôi đã thử nó và nó đã giải quyết hầu hết các vấn đề của tôi. Tuy nhiên, tôi vẫn có thể thấy sự khác biệt về kích thước phông chữ giữa Chrome và Firefox mặc dù thông số kỹ thuật của trang tính của tôi giống nhau. Bất kỳ ý tưởng về điều này? Ngoài ra, đây là một thực hành tốt? –
Làm thế nào chính xác bạn hiện đang đặt họ phông chữ, kích thước ...? – thecoop