Tôi không thể hiểu CSS

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

Khi một trình duyệt hiển thị một 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 về phong cách của nó. Nó xử lý tài liệu theo một số giai đoạn mà chúng tôi đã liệt kê bên dưới. 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à đại khái những gì xảy ra

1. Trình duyệt tải HTML (e. g. 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 trong phần tiếp theo
3. Sau đó, trình duyệt sẽ tìm nạp 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, video được nhúng và thậm chí cả CSS được liên kết. JavaScript được xử lý muộn hơn một chút trong quy trình và chúng tôi sẽ không nói về nó ở đây để mọi thứ đơn giản hơn
4. Trình duyệt phân tích cú pháp CSS đã tìm nạp và sắp xếp các quy tắc khác nhau theo loại bộ chọn của chúng thành các "nhóm" khác nhau, ví dụ:. g. phần tử, lớp, ID, v.v. Dựa trên các bộ chọn mà nó tìm thấy, nó tìm ra quy tắc nào sẽ được áp dụng cho các nút nào 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 mà nó sẽ xuất hiện sau khi áp dụng các quy tắc cho nó
6. Hiển thị trực quan của trang được hiển thị trên màn hình (công đoạn này được gọi là vẽ tranh)

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

Giới thiệu về DOM

DOM có cấu trúc dạng 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 sẽ 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ố phần tử là cha của các nút con và các nút con có anh chị em

Hiểu về DOM giúp bạn thiết kế, gỡ lỗi và duy trì CSS của mình 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ắt đầu làm việc với DevTools của trình duyệt, bạn sẽ điều hướng DOM khi chọn các mục để xem quy tắc nào áp dụng

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

Thay vì giải thích dài dòng và nhàm chán, hãy xem một ví dụ để xem cách một đoạn mã HTML thực sự được chuyển đổi thành 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ử

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"

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

p {
  margin: 0;
}

Áp dụng CSS cho DOM

Giả sử chúng ta thêm một số CSS vào tài liệu của mình để 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 CSS sau cho nó

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

Trình duyệt phân tích cú pháp HTML và tạo một DOM từ nó. Tiếp theo, nó phân tích cú pháp 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"

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

Đầu ra được cập nhật như sau

Trong bài viết Gỡ lỗi CSS của chúng tôi trong mô-đun tiếp theo, chúng tôi sẽ sử dụng DevTools của trình duyệt để gỡ lỗi các sự cố 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 một trình duyệt gặp CSS mà nó không hiểu?

Phần "Thông tin hỗ trợ trình duyệt" trong bài viết "CSS là gì" đã đề 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 trình duyệt mới nhất. Cho rằng CSS luôn được phát triển và do đó đi trước những gì 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 một bộ chọn hoặc khai báo CSS 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 đoạn CSS tiếp theo

Nếu một trình duyệt đang phân tích 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ẽ thực hiện việc này nếu bạn mắc lỗi và viết sai chính tả thuộc tính hoặc giá trị hoặc nếu thuộc tính hoặc giá trị quá mới và trình duyệt chưa hỗ trợ

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

Trong ví dụ bên dưới, tôi đã sử dụng cách viết tiếng Anh của người Anh cho màu sắc, điều này làm cho thuộc tính đó không hợp lệ vì nó không được nhận dạng. Vì vậy, đoạn văn của tôi đã không được tô màu xanh. Tuy nhiên, tất cả các CSS khác đã được áp dụng;

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

________số 8

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 như một cải tiến, biết rằng sẽ không có lỗi xảy ra nếu không hiểu nó — trình duyệt sẽ nhận được tính năng mới hoặc không. Điều này cho phép tạo kiểu dự phòng cơ bản

Điều này đặc biệt hiệu quả 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ợ giá 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"

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

Chúng ta 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

Tóm lược

Bạn gần như đã hoàn thành mô-đun này — chúng ta chỉ còn một việc nữa phải làm. Trong bài đánh giá Tạo kiểu trang tiểu sử, bạn sẽ sử dụng kiến ​​thức mới của mình để tạo kiểu lại một ví dụ, thử nghiệm một số CSS trong quá trình này

Tại sao CSS rất khó hiểu?

Làm cách nào tôi có thể hiểu CSS tốt hơn?

CSS có trở nên dễ dàng hơn không?

Sẽ mất bao nhiêu thời gian để học HTML và CSS?