Ngôn ngữ CSS được thiết kế để sử dụng cùng với ngôn ngữ "đánh dấu" như HTML. CSS xác định cách các phần tử HTML được định dạng - kiểm soát bố cục, màu sắc, phông chữ của chúng, ... Khi trình duyệt hiển thị một document, nó phải kết hợp nội dung của document với thông tin style của nó. Nó xử lý document theo một số giai đoạn, mà chúng ta đã liệt kê bên dưới. 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. 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 với tài liệu HTML, chẳng hạn như hình ảnh và video được nhúng và CSS được liên kết. 4. Trình duyệt phân tích cú pháp CSS đã nạp và sắp xếp các quy tắc khác nhau theo kiểu selector của chúng thành các "nhóm" khác nhau, ví dụ: phần tử, lớp, ID, ... Dựa trên các selector mà nó tìm thấy, nó sẽ tìm ra các quy tắc nên được áp dụng cho các nút nào trong DOM và đính kèm kiểu cho chúng theo yêu cầu (bước trung gian này được gọi là cây render). 5. Cây render được bố trí trong cấu trúc mà nó sẽ xuất hiện sau khi các quy tắc đã được áp dụng cho nó. 6. Hiển thị trực quan của trang được hiển thị trên màn hình. Sơ đồ sau đây cũng cung cấp một cái nhìn đơn giản về quy trình: ![](https://github.com/Ren0503/fullstack-interviews/raw/main/frontend/css/assets/css-dom.png) #### DOM và CSSOM 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 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à nút cha của các nút con và các nút con có anh chị em. Trình duyệt trải qua một quá trình bao gồm conversion, tokenization, lexing và parsing, cuối cùng tạo nên DOM và CSSOM. - **Conversion**: Đọc các byte raw của HTML và CSS trên đĩa hoặc mạng. - **Tokenization**: Chia nhỏ đầu vào thành nhiều đoạn (ví dụ: thẻ bắt đầu, thẻ kết thúc, tên thuộc tính, giá trị thuộc tính), loại bỏ các ký tự không liên quan như khoảng trắng và ngắt dòng. - **Lexing**: Giống như tokenizer, nhưng nó cũng xác định loại của mỗi mã thông báo (một số, một chuỗi ký tự hay một toán tử bình đẳng). - **Parsing**: Lấy dòng mã thông báo từ lexer, diễn giải mã thông báo bằng cách sử dụng một ngữ pháp cụ thể và biến nó thành một cây cú pháp trừu tượng. Ví dụ: ```html

Let's use: Cascading Style Sheets

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

` là cha. Các con của nó là nút text và 3 nút tương ứng là phần tử ``. Quan hệ phân cấp của nó như sau: ``` P ├─ "Let's use:" ├─ SPAN | └─ "Cascading" ├─ SPAN | └─ "Style" └─ SPAN └─ "Sheets" ``` Áp dụng CSS vào DOM: ```css span { border: 1px solid black; background-color: lime; } ``` Khi cả hai cấu trúc cây được tạo, công cụ render sau đó sẽ gắn các cấu trúc dữ liệu vào cái được gọi là cây render như một phần của quá trình bố trí. Cây render là một biểu diễn trực quan của document cho phép vẽ nội dung của trang theo đúng thứ tự của chúng. Cây render xây dựng theo thứ tự sau: - Bắt đầu từ gốc của cây DOM, đi qua từng nút hiển thị. - Bỏ qua các nút không hiển thị. - Đối với mỗi nút hiển thị, hãy tìm các quy tắc CSSOM phù hợp và áp dụng chúng. - Phát ra các nút hiển thị với nội dung và kiểu tính toán của chúng. - Cuối cùng, xuất một cây render chứa cả thông tin nội dung và style của tất cả nội dung hiển thị trên màn hình.

!important trong CSS là gì?

`!important` trong CSS là gì?