Đặt lại tệp CSS

* { margin:0; padding:0; } p { margin:5px 0 10px 0; }

Nó không quan trọng. Điều quan trọng là khoảng cách giữa các đoạn văn của bạn và các thành phần khác sẽ trông không giống nhau nếu bạn không đặt kiểu cho lề và phần đệm của đoạn văn. Tất nhiên đó là một ví dụ khá đơn giản

Trên thực tế, Đặt lại CSS rất quan trọng trong việc loại bỏ các lề, phần đệm, chiều cao dòng và các thuộc tính khác không nhất quán có thể khiến các trang web của bạn trông khác nhau trên các trình duyệt khác nhau. Vì vậy, đó là lý thuyết cơ bản về đặt lại kiểu của bạn, điều đó chỉ có nghĩa là bạn đặt quy tắc kiểu cho tất cả các phần tử để tránh việc trình duyệt làm điều đó cho bạn. Xa hơn nữa, chúng ta sẽ nói về nó trong thực tế, nhưng trước tiên là một chút lịch sử về cách CSS Reset đã trở thành một thông lệ tiêu chuẩn cho các nhà phát triển web hiện đại

Đặt lại nơi tất cả bắt đầu…

Khái niệm Đặt lại CSS lần đầu tiên được thảo luận chính thức từ khi khủng long vẫn còn lang thang trên internet (chính xác là năm 2004) bởi Andrew Krespanis

Trong bài viết của mình, anh ấy đề xuất sử dụng bộ chọn chung (*) ở đầu tệp CSS của bạn để chọn tất cả các thành phần và cung cấp cho chúng giá trị 0 cho lề và phần đệm, như vậy

* { margin: 0; padding: 0; }

Bộ chọn chung hoạt động giống như tìm kiếm ký tự đại diện, tương tự như đối sánh biểu thức chính quy trong lập trình. Vì trong trường hợp này, * không được đặt trước bởi một bộ chọn khác, tất cả các phần tử (về lý thuyết – một số trình duyệt không hỗ trợ đầy đủ) là khớp và do đó, tất cả các lề và phần đệm của tất cả các phần tử đều bị xóa (vì vậy chúng tôi tránh khoảng cách . Áp dụng thiết lập lại lề/phần đệm của bộ chọn chung cho ví dụ trước đó của chúng tôi, giờ đây chúng tôi xóa tất cả khoảng cách không nhất quán giữa tất cả các trình duyệt (nói cách khác, chúng tôi không bắt các trình duyệt suy nghĩ cho chúng tôi, chúng tôi cho họ thấy ai là ông chủ)

ví dụ 2. Áp dụng thiết lập lại phần đệm/lề của bộ chọn chung Nhưng bây giờ chúng ta không có bất kỳ khoảng cách nào ở giữa các đoạn, vì vậy, ở đâu đó bên dưới thiết lập lại bộ chọn chung, chúng ta sẽ khai báo cách chúng ta muốn các đoạn của mình trông như thế nào. Bạn có thể thực hiện theo một số cách – bạn có thể đặt lề (hoặc phần đệm) ở đầu hoặc đầu đoạn văn của mình hoặc cả hai. Bạn có thể sử dụng ems làm đơn vị hoặc pixel hoặc tỷ lệ phần trăm của mình

Điều quan trọng là chúng tôi chọn cách trình duyệt sẽ hiển thị nó. Ví dụ của chúng tôi, tôi đã chọn thêm lề (thay vì đệm) ở cả đầu và cuối đoạn văn – nhưng đó là lựa chọn của tôi, bạn có thể muốn làm khác đi. Đây là những gì tôi đã sử dụng

* { margin:0; padding:0; } p { margin:5px 0 10px 0; }

ví dụ 3. Khai báo quy tắc kiểu sau bộ chọn chung

Ghi chú. Ví dụ tôi sử dụng để thảo luận là một ví dụ đơn giản

Nếu bạn chỉ sử dụng các đoạn văn cho các trang web của mình và không có phần tử nào khác, thì bạn sẽ không muốn đặt lại lề của mình thành 0 chỉ bằng cách sử dụng bộ chọn chung để khai báo quy tắc kiểu ngay sau nó cho đoạn văn của bạn. Chúng ta sẽ thảo luận vấn đề này đầy đủ hơn cùng với các phương pháp hay nhất khác ở phần sau của trang

Ngay sau đó – chuyên gia CSS Eric Meyer đã xây dựng thêm khái niệm đặt lại lề và phần đệm

Trong khám phá của Eric Meyer, anh ấy thảo luận về công việc của Tanek trong việc hoàn tác các kiểu HTML mặc định (mà anh ấy gọi là hoàn tác. css) không chỉ đặt lại lề và phần đệm mà còn các thuộc tính khác như chiều cao dòng, kiểu phông chữ và kiểu danh sách (một số trình duyệt sử dụng các dấu đầu dòng khác nhau cho các mục danh sách không có thứ tự). Sau nhiều lần lặp lại và sàng lọc, chúng tôi đã đi đến một giải pháp tuyệt vời có tên là Đặt lại CSS Đã tải lạiCSS Đặt lại, giải pháp này không chỉ làm cho phương thức đặt lại CSS này chính xác hơn phương pháp bộ chọn phổ quát bằng cách sử dụng tính đặc hiệu cao hơn bằng cách đặt tên cho tất cả các thẻ HTML có thể (vì bộ chọn phổ quát không thể . Tất nhiên, có những phương pháp khác để đặt lại CSS của bạn (chẳng hạn như Yahoo. ’s YUI Reset CSS mà tôi hiện đang sử dụng trên Six Revisions), và bạn có thể cuộn của riêng mình dựa trên sở thích và nhu cầu dự án của bạn

Bây giờ, hãy xem qua một số mẹo và phương pháp hay nhất khi áp dụng giải pháp Đặt lại CSS cho dự án của riêng bạn

Áp dụng Đặt lại CSS. mẹo và thực tiễn tốt nhất

1. Bắt đầu bằng cách quyết định chính xác cách bạn sẽ thiết lập lại phong cách của mình

Ở trên, tôi đã chỉ cho bạn hai thái cực của CSS Reset. Từ một phương pháp thú vị và đơn giản bằng cách sử dụng bộ chọn chung (mà tôi không khuyên bạn nên sử dụng) đến một phương pháp phức tạp và liên quan hơn với CSS Reset Reloaded của Eric Meyer (chỉnh sửa. hoặc phiên bản mới hơn, Đặt lại CSS). Tôi cũng đã đề cập ngắn gọn về YUI Reset CSS mà bạn có thể sử dụng trực tiếp từ YDN để không phải phục vụ nó, giúp bạn tiết kiệm một số tài nguyên máy chủ khi các trang web của bạn được yêu cầu

Bạn cũng có thể cuộn của riêng bạn và điều chỉnh nó theo nhu cầu cụ thể của bạn. Không có phương pháp từng bước được xác định trước để xác định đúng cách đặt lại kiểu của bạn; . Để giúp bạn đưa ra lựa chọn của mình, đây là một số tài nguyên tuyệt vời để giúp bạn bắt đầu

• Bộ sưu tập sát thủ các kiểu thiết lập lại CSS toàn cầu
• Ít hơn là nhiều hơn – lựa chọn Đặt lại CSS của tôi (của Ed Elliot)

2. Đặt lại CSS của bạn phải là điều đầu tiên mà trình duyệt nhìn thấy (duh)

Đặt lại kiểu của bạn sau khi khai báo quy tắc kiểu cho một phần tử sẽ làm bạn rối tung lên. Bạn sẽ vò đầu bứt tai tự hỏi tại sao số tiền ký quỹ bạn đã khai báo cho

* { margin:0; padding:0; } p { margin:5px 0 10px 0; }

Bây giờ hãy cười, nhưng đó là một sai lầm phổ biến giữa những người kỳ cựu và những nhà phát triển mới bắt đầu

Ghi chú. Trong trường hợp bạn rơi vào danh mục “những người dễ mắc phải lỗi phổ biến này”, thì đây là lý do tại sao nó phải ở trên cùng của/các tài liệu CSS của bạn. CSS hoạt động trên hệ thống phân cấp từ trên xuống với các quy tắc hạ thấp tài liệu CSS xuống được ưu tiên nếu có khai báo quy tắc kiểu xung đột/dư thừa

Chỉ để tiếp tục đánh một con ngựa chết, hãy khám phá một ví dụ. Tôi đã sử dụng CSS Reset Reloadedverbatim của Eric Meyer trong ví dụ sau khi khai báo quy tắc kiểu cho lề của các phần tử

* { margin:0; padding:0; } p { margin:5px 0 10px 0; }

Về bản chất, những gì bạn thấy là mặc dù tôi đã khai báo lề cho các phần tử

* { margin:0; padding:0; } p { margin:5px 0 10px 0; }

3. Có một tài liệu CSS riêng cho CSS Reset của bạn

Tôi phải đề cập đến mẹo này vì đó là thông lệ và là mẹo mà nhiều người ủng hộ. Tôi đang ở trại One Big CSS File (tất nhiên nó thay đổi tùy theo từng trường hợp) vì lý do hiệu suất trang (tôi sẽ lưu cuộc thảo luận này vào một ngày khác, có lẽ trên một bài viết Mẹo CSS khác), nhưng một điểm chung . css) mà bạn có thể sử dụng lại trong các dự án của mình. Điều này giúp bạn giữ cho các quy tắc kiểu của mình được tổ chức và theo mô-đun, nhưng quan trọng hơn, nó giúp bạn dễ dàng thay đổi và điều chỉnh Cài đặt lại CSS mà không cần phải quay lại các dự án cũ và cập nhật nó

4. Tránh sử dụng thiết lập lại bộ chọn chung

Thiết lập lại bộ chọn chung là khái niệm thực sự đầu tiên (ít nhất là tôi biết, vì vậy vui lòng sửa cho tôi nếu tôi sai) để đặt lại kiểu của bạn, nhưng nó có nhiều thiếu sót và sự không nhất quán của trình duyệt (đó là những gì chúng tôi đang cố gắng khắc phục . Tôi đã đề cập rằng IE không áp dụng và hỗ trợ nó như dự định; . Mẹo này đặc biệt đúng khi bạn phân phối giải pháp “một kích cỡ phù hợp với tất cả” như chủ đề hệ thống quản lý nội dung sẽ được sử dụng và bị tấn công theo những cách không thể đoán trước

Sử dụng một nền tảng vững chắc ngay từ đầu – một phương pháp Đặt lại CSS mở rộng – đảm bảo rằng bạn đang thực sự đặt lại các kiểu của mình và nó xứng đáng với các byte được thêm vào trong tài liệu CSS của bạn

5. Tránh dư thừa với Đặt lại CSS và các khai báo kiểu tiếp theo

Một lý do khác khiến tôi không thích có một biểu định kiểu riêng cho Thiết lập lại CSS của mình là nó có thể gây ra sự dư thừa với các quy tắc kiểu khác sau nó. Đó là một thói quen tốt để không lặp lại phong cách của bạn, và mặc dù đôi khi không thể tránh khỏi điều đó (vì bạn cũng lười như tôi), bạn nên cố gắng thử. Quay trở lại bộ quy tắc CSS Reset Reloaded của Eric Meyer, anh ấy đưa ra các giá trị mặc định cho

* { margin:0; padding:0; } p { margin:5px 0 10px 0; }

* { margin:0; padding:0; } p { margin:5px 0 10px 0; }

* { margin:0; padding:0; } p { margin:5px 0 10px 0; }

body { line-height: 1; color: black; background: white; }

Nếu bạn đã biết rằng các thuộc tính kiểu dáng cơ thể sẽ là (ví dụ)

• màu nền. #ccccccc
• màu. #996633
• và bạn muốn xếp ảnh nền theo chiều ngang

không cần phải khai báo một bộ chọn CSS khác cho phần tử nội dung sau này trên tài liệu – bạn nên thay thế phần đặt lại CSS đó thành phần sau

body { line-height: 1; color: #996633 background:#ccc url(your-tiled-image.gif) repeat-x top left; }

Đừng ngại sử dụng phán đoán của riêng bạn

Tinh chỉnh, tái cấu trúc, xóa và thêm những thứ bạn thấy phù hợp và liên quan đến trường hợp cụ thể của bạn. CSS là duy nhất dựa trên từng doanh nghiệp và từng ngành vì các mục tiêu khác nhau. CSS cho một cửa hàng quần áo sẽ khác, chẳng hạn như một thợ điện so với những người khác vì tính độc đáo và chủ đề của mỗi trang web

CSS không bao giờ là mã có một kích thước phù hợp với tất cả, đó là lý do tại sao điều quan trọng là phải điều chỉnh CSS của bạn dựa trên đánh giá và kiến ​​thức của bạn về trang web của bạn. Eric Meyer lặp lại điều này trong cuộc thảo luận của anh ấy về CSS Reset Reloaded với câu lệnh sau

[…] Đó là phần lớn vấn đề ở đây. rằng đây không phải là trường hợp “mọi người phải sử dụng những phong cách này theo một cách nhất định mà không được thay đổi”

Đọc thêm

Dưới đây là một số tài nguyên tuyệt vời mà tôi khuyên bạn nên đọc về chủ đề đặt lại kiểu của mình

[WSG] Bỏ phần đệm/lề mặc định

Có lẽ là một trong những chủ đề đầu tiên thảo luận về thiết lập lại bộ chọn chung trên danh sách gửi thư của Nhóm Tiêu chuẩn Web

Bộ chọn chung

Eric Meyer thảo luận về cách hoạt động của bộ chọn phổ quát

Không đặt lại CSS

Johnathan Snook thảo luận về lý do tại sao anh ấy không thiết lập lại phong cách của mình;

Tại sao tôi thích (và sử dụng) Đặt lại CSS

Một cuộc thảo luận ngắn và hấp dẫn về lý do đặt lại CSS là một ý tưởng tuyệt vời

Tripoli – một tiêu chuẩn CSS để hiển thị HTML

Tripoli là một tùy chọn Đặt lại CSS phổ biến khác có nhiều phiên bản để bạn có thể sử dụng phiên bản phù hợp nhất cho dự án của mình

Giới thiệu về loạt Mẹo CSS

Loạt bài Mẹo CSS là một nhóm các bài viết tập trung vào một mẹo CSS cụ thể hoặc phương pháp hay nhất. Trong mỗi bài viết, tôi sẽ giải mã một mẹo/tiêu chuẩn/phương pháp hay nhất cụ thể và cung cấp bối cảnh, lợi ích và nhược điểm của từng bài viết.

Tôi tin vào việc học cả lý thuyết và thực hành, cũng như đạt được sự cân bằng giữa các tiêu chuẩn nghiêm ngặt, kiên quyết và tính thực tiễn, vì vậy bạn sẽ có cơ hội tìm hiểu cách mọi người thường làm và lý do tại sao bạn không nhất thiết phải mù quáng làm theo họ. Tôi sẽ trình bày từng mẹo CSS một cách toàn diện nhất có thể nhưng tôi mong bạn sửa cho tôi nếu tôi sai, giải thích những điều tôi đã đọc lướt qua, làm rõ những điều có thể gây nhầm lẫn cho các nhà phát triển mới bắt đầu của chúng tôi và cung cấp thông tin đầu vào của riêng bạn . Để xem tất cả các bài viết Thủ thuật CSS cho đến nay, bạn có thể vào chuyên mục CSS

Tài nguyên liên quan

• Tài nguyên liên quan
• Dịch vụ của chúng tôi
• Tài nguyên theo ngành

• 20 trang web giúp bạn học và làm chủ CSS
• 8 kỹ thuật CSS để vẽ biểu đồ dữ liệu
• Các ví dụ và kỹ thuật CSS sáng tạo (và thử nghiệm)
• Mẹo CSS số 2. Quy ước đặt tên cấu trúc trong CSS
• 20 Tài nguyên hữu ích để tìm hiểu về CSS3
• 30 kỹ thuật điều hướng CSS đặc biệt
• Viết mã thiết kế web chuyên nghiệp sống động với HTML5/CSS3
• Các kỹ thuật CSS3 cơ bản mà bạn nên biết
• Các kỹ thuật CSS3 bạn nên biết

• Dịch vụ thiết kế website
• Cơ quan thiết kế web
• Giá thiết kế web
• Một trang web nên có giá bao nhiêu vào năm 2022?
• Dịch vụ thiết kế blog từng đoạt giải thưởng. Nâng cấp Blog của bạn
• Xây dựng trang web của bạn với một công ty thiết kế web tùy chỉnh đáng tin cậy
• Dịch vụ phát triển trang web thương mại điện tử
• Đại lý thiết kế web B2B
• Thiết kế web dựa trên cơ sở dữ liệu

• Thiết kế web cho công ty khai quật. 5 mẹo hàng đầu (Có ví dụ. )
• 5 mẹo thiết kế web cho người cài đặt hàng rào
• 5 mẹo thiết kế web đơn giản và thành công cho các nhà bán lẻ phụ tùng ô tô
• Lời khuyên cho thiết kế trang web y tế
• Thiết kế trang web y tế từ một cơ quan giành giải thưởng
• Top 10 mẹo thiết kế web hiệu quả cho trung tâm dịch vụ ô tô
• Thiết Kế Web Năng Lượng Tái Tạo. Mẹo cho một trang web tỏa sáng
• Dịch Vụ Thiết Kế Website Bảo Hiểm
• 5 mẹo thiết kế web cho các phòng khám hiếm muộn

Trang web của bạn SEO như thế nào?

Sử dụng công cụ miễn phí của chúng tôi để tính điểm của bạn trong vòng chưa đầy 60 giây