Xem lại mức độ ưu tiên của kiểu CSS
Biểu định kiểu xếp chồng (CSS) Tôi nghĩ, là ngôn ngữ đơn giản nhất so với các ngôn ngữ liên quan đến web khác, vì vậy không có gì đáng ngạc nhiên khi nhiều người mới bắt đầu học cách tạo một trang web sẽ chủ yếu học ngôn ngữ này và HTML trước tiên.
Trong bài viết này, chúng ta sẽ quay trở lại những điều cơ bản về CSS. Chúng tôi sẽ xem xét cách các kiểu CSS được áp dụng ban đầu, kiểu nào sẽ được áp dụng, cách một số kiểu khai báo ghi đè lên nhau trong khi các kiểu khác không ghi đè lên nhau trong khi các kiểu khác không.
Vì vậy, bài đăng này được dành riêng cho những người mới bắt đầu, những người mới bắt đầu vượt qua các thử thách, có lẽ vẫn mắc lỗi và sai sót khi biên dịch biểu định kiểu đầu tiên của họ. Vì vậy, hãy bắt đầu.
Kiểu trình duyệt mặc định
Firefox, Chrome, Safari, Opera và Internet Explorer hiện là năm trình duyệt máy tính để bàn hàng đầu trên thị trường. Các trình duyệt này và tất cả các trình duyệt khác tuân theo quy tắc chuẩn để bao gồm các kiểu mặc định tích hợp sẵn để hiển thị các thành phần HTML.
Vì vậy, khi chúng tôi đưa vào một số thành phần HTML ngẫu nhiên mà không có bất kỳ kiểu nào được thêm vào, bạn sẽ thấy rằng nó vẫn được hiển thị đúng trong trình duyệt.
Nhưng, nếu chúng ta kiểm tra các yếu tố đó một cách cẩn thận, mỗi trình duyệt có (hơi) các giá trị khác nhau cho chúng “mặc định” tuyên bố gây ra sự không thống nhất trên các trình duyệt, đặc biệt là trong các trình duyệt cũ như IE6, 7 và Firefox 3.0.
Ví dụ, như bạn có thể thấy từ ảnh chụp màn hình ở trên, Firefox mới nhất đã hiển thị blockquote theo mặc định với lề: 16px 40px 16px 40px, trong khi ở phía bên kia Internet Explorer 7 sẽ kết xuất blockquote với lề: 0px 40px.
Để khắc phục sự không nhất quán được hiển thị ở trên, nhiều nhà thiết kế và phát triển web thích ghi đè lên tất cả các kiểu đó bằng Đặt lại CSS. Tệp CSS này thường chứa hầu hết tất cả HTML Kiểu bộ chọn, xác định chúng với các quy tắc bằng nhau.
Có nhiều thiết lập lại CSS có sẵn, nhưng đây là ba mục yêu thích hàng đầu của tôi:
- Chuẩn hóa.css
- Đặt lại CSS
- Biểu định kiểu đặt lại HTML5
Bộ chọn
Bạn có thể thường đọc thuật ngữ này trên các blog thiết kế / phát triển web mà bạn đã truy cập; Bộ chọn.
Bộ chọn trong CSS là cú pháp được sử dụng để nhắm mục tiêu bất kỳ phần nào trên tài liệu HTML cho các kiểu được áp dụng. Có ba bộ chọn cơ bản mà chúng ta sẽ thảo luận ở đây, vì chúng có thể sẽ là bộ chọn phổ biến được sử dụng trên trang web đầu tiên của bạn. Chúng tôi sẽ đề cập đến những người khác trong các bài viết trong tương lai.
Loại chọn
Chúng tôi đã đề cập một lần ở trên, Bộ chọn loại sẽ nhắm mục tiêu bất kỳ thành phần HTML được chỉ định nào trên tài liệu. Ví dụ:
khai báo p / ** ** /
sẽ phù hợp với tất cả p hoặc là đoạn văn các phần tử và sử dụng nó cuối cùng sẽ ghi đè lên các kiểu mặc định được cung cấp từ các trình duyệt.
Lớp chọn
Khi bạn đã thêm một lớp hoặc thậm chí nhiều lớp vào một phần tử, bạn cũng có thể nhắm mục tiêu các lớp đó. Các Lớp chọn bắt đầu bằng một dấu chấm tham số.
.hộp / ** khai báo ** /
Đoạn mã trên sẽ khớp với tất cả các thành phần có lớp hộp hoặc chúng tôi cũng có thể chọn cụ thể hơn.
p.box / ** khai báo ** /
Nó sẽ chỉ nhắm mục tiêu p yếu tố có cái hộp lớp học.
Khi chúng ta đang sử dụng Lớp học bộ chọn, tất cả các khai báo kiểu giống nhau từ cả hai Kiểu bộ chọn và Trình duyệt mặc định sẽ bị ghi đè.
Bộ chọn ID
Các ID là một thuộc tính rất hạn chế, chúng ta chỉ có thể có một ID trên một yếu tố và nó cũng phải là duy nhất.
Nội dung
Trong trường hợp chúng ta có một ID trong một yếu tố, chúng ta có thể sử dụng bộ chọn id để nhắm mục tiêu yếu tố đó; bộ chọn id được xác định bằng hàm băm # tham số.
#uniqueID / ** khai báo ** /
Kể từ khi ID là duy nhất, nó có mức độ ưu tiên mạnh nhất của loại bộ chọn. Vì vậy, khi chúng tôi khai báo các kiểu với ID bộ chọn cuối cùng sẽ ghi đè lên tất cả các khai báo tương tự từ Lớp học, Kiểu bộ chọn và Trình duyệt mặc định phong cách.
Nhúng các kiểu
Chúng tôi đã xem qua tất cả các bộ chọn cơ bản cần thiết và bây giờ chúng tôi sẽ xem xét cách các kiểu đó được nhúng trong tài liệu HTML.
Kiểu bên ngoài
Kiểu bên ngoài là kiểu được thêm vào trong một tệp riêng biệt, thường là trong một .css tệp mà sau đó được liên kết với tài liệu HTML bằng cách sử dụng gắn thẻ để áp dụng những kiểu đó.
Và tất cả các kiểu được khai báo trong các tệp sẽ hoạt động giống như những gì chúng ta đã đề cập trong Bộ chọn phần trên, cụ thể là nó sẽ ghi đè trình duyệt mặc định kiểu và ghi đè lên khai báo kiểu khác tùy thuộc vào mức độ ưu tiên của bộ chọn.
Cách thực hành này là cách được khuyên dùng nhất để đính kèm các kiểu, đặc biệt khi bạn có hàng ngàn dòng mã CSS có nhiều trang để đính kèm.
Bằng cách làm như vậy, các kiểu cũng sẽ dễ dàng quản lý, chẳng hạn, bạn có thể tách các tệp CSS thành một số tệp tùy thuộc vào vai trò cụ thể của nó, chẳng hạn như typography.css để kiểm soát tất cả các kiểu liên quan đến Kiểu chữ, v.v..
Phong cách nội bộ
Các kiểu bên trong là các kiểu được nhúng trực tiếp vào tài liệu HTML, thường là bên trong nhãn.
Nhưng thực tế này không được khuyến nghị khi bạn sẽ có hàng trăm dòng kiểu vì trang HTML của bạn sẽ quá dài và kiểu sẽ chỉ ảnh hưởng đến nơi các kiểu được nhúng. Khi bạn nói mười trang, bạn sẽ cần sao chép các kiểu đó và nhúng chúng vào tất cả các trang và khi bạn cần thay đổi kiểu, bạn phải thay đổi nó thành mười trang khác nhau, đó rõ ràng là một công việc tẻ nhạt.
Dựa trên mức độ ưu tiên của nó, kiểu bên trong cao hơn, vì vậy nó sẽ ghi đè lên các kiểu bên ngoài.
Kiểu nội tuyến
Các kiểu nội tuyến là các kiểu được nhúng trực tiếp vào phần tử HTML.
Đây là một đoạn
Ví dụ này ở trên sẽ thêm 5px lề cho phần tử đoạn và nó cũng sẽ ghi đè lên các lề đã được khai báo cho phần tử đó cả theo kiểu bên trong và bên ngoài.
Nhưng đừng tránh làm điều này, vì đánh dấu của bạn sẽ lộn xộn với tất cả các tuyên bố phong cách đó; nếu bạn có một loạt các kiểu được nhúng, nó thậm chí sẽ trở thành một cơn ác mộng khi thấy và duy trì tất cả các kiểu và html của bạn.
đọc thêm: Ba cách để chèn CSS - W3CSchools.
Quy tắc quan trọng!
Có một số trường hợp khi chúng ta phải áp dụng một kiểu cụ thể cho một phần tử nhưng kiểu tương tự cho phần tử đó cũng đã được khai báo ở nơi khác trong biểu định kiểu hoặc trong tài liệu. Ví dụ:
Chúng tôi có thẻ neo sau với các kiểu nhúng
Đây là một liên kết
Và chúng tôi cũng có một kiểu riêng cho thẻ neo đó trong biểu định kiểu.
một viền: 1px solid # 333; màu nền: # 555;
Trong ví dụ đó, chúng ta có thể sử dụng !quan trọng quy tắc để buộc trình duyệt sử dụng các kiểu trong biểu định kiểu thay vì kiểu trong phần tử.
một viền: 1px solid # 333! quan trọng; màu nền: # 555! quan trọng;
Các !quan trọng quy tắc sẽ chỉ ra rằng phong cách này là nhất quan trọng và phải được áp dụng cho kiểu khác ngay cả khi nó được nhúng trực tiếp vào phần tử (Kiểu nội tuyến).
đọc thêm:! Tuyên bố CSS quan trọng: Cách thức và thời điểm sử dụng chúng - Tạp chí Smashing.
Phần kết luận
Chúng tôi đã đi qua toàn bộ vấn đề trong bài viết này. Bây giờ chúng ta có thể thấy rằng mỗi bộ chọn và cách chúng ta nhúng các kiểu có mức độ ưu tiên khác nhau trong cơ chế của trình duyệt. Như tôi đã đề cập trước đó, những chủ đề này được dành cho cấp độ người mới, vì vậy chúng chắc chắn không phải là điều gì mới mẻ đối với các nhà thiết kế web dày dạn.
Nhưng, tôi nghĩ rằng mọi nhà thiết kế web nói chung sẽ đồng ý rằng việc quay trở lại vấn đề cơ bản đôi khi là cần thiết để xem xét kiến thức cơ bản của chúng ta về một chủ đề. Trên thực tế, chúng ta thường bỏ lỡ một số nội dung cơ bản, vì chúng ta có xu hướng ấn tượng hơn với những thứ tuyệt vời (và điên rồ) như thế này.
Cuối cùng, tôi đã cung cấp một bản demo và tệp nguồn để bạn kiểm tra thảo luận của chúng tôi trong bài viết này hơn nữa.
- Bản giới thiệu
- Tải xuống nguồn
Tôi hy vọng bạn thích bài đăng này và nếu bạn thấy một số điểm không chính xác trong đó, hoặc tôi đã bỏ lỡ một số điểm quan trọng, đừng ngần ngại thông báo cho tôi trong phần bình luận bên dưới.
