Hướng dẫn how css works - css hoạt động như thế nào

CSS thực sự hoạt động như thế nào?

Khi trình duyệt hiển thị tài liệu, nó phải kết hợp nội dung của tài liệu với thông tin kiểu của nó. Nó xử lý tài liệu trong một số giai đoạn mà chúng tôi đã liệt kê dưới đây. Hãy nhớ rằng đây là phiên bản rất đơn giản của những gì xảy ra khi trình duyệt tải một trang web và các trình duyệt khác nhau sẽ xử lý quy trình theo những cách khác nhau. Nhưng đây là những gì xảy ra.

1. Trình duyệt tải HTML (ví dụ: nhận nó từ mạng).
2. Nó chuyển đổi HTML thành DOM (mô hình đối tượng tài liệu). DOM đại diện cho tài liệu trong bộ nhớ của máy tính. DOM được giải thích chi tiết hơn một chút trong phần tiếp theo.
3. Sau đó, trình duyệt tìm kiếm hầu hết các tài nguyên được liên kết bởi tài liệu HTML, chẳng hạn như hình ảnh nhúng, video và thậm chí CSS được liên kết! JavaScript được xử lý sau đó một chút trong quá trình và chúng tôi sẽ không nói về nó ở đây để giữ cho mọi thứ đơn giản hơn.
4. Trình duyệt phân tích các CSS được tìm nạp và sắp xếp các quy tắc khác nhau theo các loại chọn của chúng thành các "thùng" khác nhau, ví dụ: yếu tố, lớp, id, v.v. Dựa trên các bộ chọn mà nó tìm thấy, nó sẽ áp dụng các quy tắc nào nên được áp dụng cho các nút trong DOM và gắn kiểu cho chúng theo yêu cầu (bước trung gian này được gọi là cây kết xuất).
5. Cây kết xuất được đặt trong cấu trúc nó sẽ xuất hiện sau khi các quy tắc đã được áp dụng cho nó.
6. Màn hình trực quan của trang được hiển thị trên màn hình (giai đoạn này được gọi là vẽ).

Biểu đồ sau đây cũng cung cấp một cái nhìn đơn giản về quy trình.

Về Dom

Một DOM có cấu trúc giống như cây. Mỗi phần tử, thuộc tính và đoạn văn bản trong ngôn ngữ đánh dấu trở thành một nút DOM trong cấu trúc cây. Các nút được xác định bởi mối quan hệ của chúng với các nút DOM khác. Một số yếu tố là cha mẹ của các nút con và các nút con có anh chị em.

Hiểu DOM giúp bạn thiết kế, gỡ lỗi và duy trì CSS của bạn vì DOM là nơi CSS của bạn và nội dung của tài liệu gặp nhau. Khi bạn bắt đầu làm việc với trình duyệt devtools, bạn sẽ điều hướng DOM khi bạn chọn các mục để xem quy tắc nào được áp dụng.

Một đại diện thực sự

Thay vì một lời giải thích dài, nhàm chán, chúng ta hãy xem một ví dụ để xem cách một đoạn trích HTML thực sự được chuyển đổi thành một DOM.

Lấy mã HTML sau:

<p>
  Let's use:
  <span>Cascadingspan>
  <span>Stylespan>
  <span>Sheetsspan>
p>

Trong DOM, nút tương ứng với phần tử

của chúng tôi là cha mẹ. Trẻ em của nó là một nút văn bản và ba nút tương ứng với các yếu tố của chúng tôi. Các nút SPAN cũng là cha mẹ, với các nút văn bản là con cái của họ:

P
├─ "Let's use:"
├─ SPAN
|  └─ "Cascading"
├─ SPAN
|  └─ "Style"
└─ SPAN
    └─ "Sheets"

Đây là cách trình duyệt diễn giải đoạn trích HTML trước đó - nó hiển thị cây DOM ở trên và sau đó xuất ra nó trong trình duyệt như vậy:

Áp dụng CSS cho DOM

Giả sử chúng tôi thêm một số CSS vào tài liệu của chúng tôi, để tạo kiểu cho nó. Một lần nữa, HTML như sau:

<p>
  Let's use:
  <span>Cascadingspan>
  <span>Stylespan>
  <span>Sheetsspan>
p>

Giả sử chúng ta áp dụng các CSS sau đây cho nó:

span {
  border: 1px solid black;
  background-color: lime;
}

Trình duyệt phân tích HTML và tạo một DOM từ nó. Tiếp theo, nó phân tích các CSS. Vì quy tắc duy nhất có sẵn trong CSS có bộ chọn

P
├─ "Let's use:"
├─ SPAN
|  └─ "Cascading"
├─ SPAN
|  └─ "Style"
└─ SPAN
    └─ "Sheets"

Đầu ra cập nhật như sau:

Trong bài viết CSS gỡ lỗi của chúng tôi trong mô -đun tiếp theo, chúng tôi sẽ sử dụng trình duyệt devtools để gỡ lỗi các vấn đề về CSS và sẽ tìm hiểu thêm về cách trình duyệt diễn giải CSS.

Điều gì xảy ra nếu trình duyệt gặp CSS mà nó không hiểu?

Phần hỗ trợ trình duyệt của bài học hỗ trợ trình duyệt được đề cập rằng các trình duyệt không nhất thiết phải triển khai các tính năng CSS mới cùng một lúc. Ngoài ra, nhiều người không sử dụng phiên bản mới nhất của trình duyệt. Cho rằng CSS đang được phát triển mọi lúc và do đó đi trước những gì các trình duyệt có thể nhận ra, bạn có thể tự hỏi điều gì sẽ xảy ra nếu trình duyệt gặp bộ chọn CSS hoặc khai báo mà nó không nhận ra.

Câu trả lời là nó không làm gì cả, và chỉ chuyển sang bit tiếp theo của CSS!

Nếu một trình duyệt đang phân tích các quy tắc của bạn và gặp một thuộc tính hoặc giá trị mà nó không hiểu, nó sẽ bỏ qua nó và chuyển sang khai báo tiếp theo. Nó sẽ làm điều này nếu bạn đã mắc lỗi và viết sai một tài sản hoặc giá trị, hoặc nếu tài sản hoặc giá trị quá mới và trình duyệt chưa hỗ trợ nó.

Tương tự, nếu một trình duyệt gặp phải một bộ chọn mà nó không hiểu, nó sẽ chỉ bỏ qua toàn bộ quy tắc và chuyển sang cái tiếp theo.

Trong ví dụ dưới đây tôi đã sử dụng chính tả tiếng Anh của Anh cho màu sắc, điều này làm cho tài sản đó không hợp lệ vì nó không được công nhận. Vì vậy, đoạn văn của tôi đã không có màu xanh lam. Tất cả các CS khác đã được áp dụng tuy nhiên; Chỉ có dòng không hợp lệ bị bỏ qua.

<p>I want this text to be large, bold and blue.p>

p {
  font-weight: bold;
  colour: blue; /* incorrect spelling of the color property */
  font-size: 200%;
}

Hành vi này rất hữu ích. Điều đó có nghĩa là bạn có thể sử dụng CSS mới làm tăng cường, biết rằng sẽ không xảy ra lỗi nếu không hiểu - trình duyệt sẽ có tính năng mới hoặc không. Điều này cho phép kiểu dáng dự phòng cơ bản.

Điều này hoạt động đặc biệt tốt khi bạn muốn sử dụng một giá trị khá mới và không được hỗ trợ ở mọi nơi. Ví dụ: một số trình duyệt cũ hơn không hỗ trợ

P
├─ "Let's use:"
├─ SPAN
|  └─ "Cascading"
├─ SPAN
|  └─ "Style"
└─ SPAN
    └─ "Sheets"

P
├─ "Let's use:"
├─ SPAN
|  └─ "Cascading"
├─ SPAN
|  └─ "Style"
└─ SPAN
    └─ "Sheets"

P
├─ "Let's use:"
├─ SPAN
|  └─ "Cascading"
├─ SPAN
|  └─ "Style"
└─ SPAN
    └─ "Sheets"

P
├─ "Let's use:"
├─ SPAN
|  └─ "Cascading"
├─ SPAN
|  └─ "Style"
└─ SPAN
    └─ "Sheets"

P
├─ "Let's use:"
├─ SPAN
|  └─ "Cascading"
├─ SPAN
|  └─ "Style"
└─ SPAN
    └─ "Sheets"

.box {
  width: 500px;
  width: calc(100% - 50px);
}

Chúng tôi sẽ xem xét nhiều cách khác để hỗ trợ các trình duyệt khác nhau trong các bài học sau.

Bản tóm tắt

Bạn gần như đã hoàn thành mô -đun này - chúng tôi chỉ có thêm một điều để làm. Trong kiểu đánh giá trang tiểu sử, bạn sẽ sử dụng kiến ​​thức mới của mình để thay đổi một ví dụ, kiểm tra một số CSS trong quá trình này.

• Trước
• Tổng quan: Các bước đầu tiên
• Tiếp theo

Trong mô -đun này