Ngôn ngữ CSS là gì? Những kiến thức cơ bản về CSS

Ngôn ngữ CSS là gì?

CSS là viết tắt của Cascading Style Sheets, là một ngôn ngữ thiết kế được sử dụng nhằm mục đích đơn giản hóa quá trình tạo nên một website. CSS được ra mắt vào năm 1996 bởi World Wide Web Consortium (W3C).

CSS xử lý một phần giao diện của trang web. CSS giúp bạn kiểm soát màu sắc của văn bản, kiểu phông chữ, khoảng cách giữa các đoạn văn, cách các cột được đặt kích thước và bố cục, hình ảnh hoặc màu nền nào được sử dụng, thiết kế bố cục, các biến thể hiển thị cho các thiết bị và kích thước màn hình khác nhau cũng như hàng loạt các hiệu ứng khác.

CSS hoạt động dựa trên tìm kiếm dựa trên vùng chọn chẳng hạn như thẻ HTML, ID, class, v.v. Sau đó, nó sẽ áp dụng những thuộc tính buộc phải thay đổi lên các vùng đã chọn. 

Mối quan hệ của CSS và HTML

CSS và HTML có mối quan hệ mật thiết trong việc xây dựng một website. Nếu HTML là các thành phần động cơ của một chiếc xe hơi thì CSS sẽ là kiểu dáng và màu sắc của chiếc xe. 

Một trang web có thể chạy mà không cần CSS, nhưng nó chắc chắn sẽ không có tình thẩm mỹ. CSS làm cho giao diện người dùng của một trang web tỏa sáng và mang đến trải nghiệm người dùng tuyệt vời. Nếu không có CSS, các trang web sẽ kém bắt mắt hơn và có thể khó điều hướng hơn nhiều. Ngoài bố cục và định dạng, CSS chịu trách nhiệm về màu chữ, kích thước hình ảnh, khoảng cách giữa các đoạn và hơn thế nữa.

Đọc thêm: Thuật toán là gì? 12 thuật toán cơ bản lập trình viên cần biết

Bố cục và cấu trúc của một đoạn CSS

Bố cục của một đoạn CSS

Bố cục của một đoạn CSS chủ yếu dựa vào hình hộp với mỗi hộp chiếm những khoảng trống trên trang web với các thuộc tính chính như:

• Padding: Là các không gian xung quanh nội dung (ví dụ: không gian xung quanh đoạn văn bản).
• Border: Là các đường nằm ngoài phần đệm.
• Margin: Là khoảng cách bao quanh phía ngoài của phần tử.

Cấu trúc của một đoạn CSS

Cấu trúc của một đoạn CSS: vùng chọn {thuộc tính: giá trị; thuộc tính: giá trị;….. }

Đoạn CSS sẽ được khai báo bằng vùng chọn, các thuộc tính, giá trị nằm trong dấu ngoặc nhọn. Mỗi thuộc tính là một giá trị riêng ở dạng số, hoặc chính là tên của các giá trị đã có trong danh sách của CSS. 

Quy tắc khai báo đó chính là: thuộc tính và giá trị cần cách nhau bằng dấu hai chấm, mỗi dòng khai báo thuộc tính cần có dấu chấm phẩy cuối cùng. Các thuộc tính không bị giới hạn ở một vùng chọn. Trong đó: 

Bộ chọn (Selector): mẫu để chọn phần tử HTML mà bạn muốn định nghĩa phong cách. Bạn có thể áp dụng các selector cho các trường hợp sau:

Tất cả những phần tử được định dạng theo một dạng cụ thể nào đó, ví dụ phần tử tiêu đề h2.

Thuộc tính id, class của phần tử.

Các phần tử có mối liên quan với các phần tử khác trong hệ thống cây phân cấp tài liệu.

• Khai báo (Declaration): Khối khai báo có thể chứa một hoặc nhiều khai báo và chúng được phân tách với nhau bằng dấu chấm phẩy. Mỗi khai báo lại bao gồm tên & giá trị đặc tính CSS, dược phân tách với nhau bằng dấu phẩy. Quy tắc khai báo CSS là chúng luôn phải kết thúc bằng dấu chấm phẩy, và khối khai báo phải nằm trong các dấu ngoặc móc.
• Thuộc tính (Properties): Thuộc tính là các cách thức mà bạn có thể tạo kiểu cho một phần tử HTML. Vì vậy, với CSS, bạn chỉ cần lựa chọn thuộc tính mà bạn muốn tác động nhất trong bộ quy tắc bạn đã tạo ra.
• Giá trị thuộc tính: Được nằm ở bên phải của thuộc tính. Việc lựa chọn một thuộc tính trong số đó phụ thuộc vào số lần xuất hiện của thuộc tính. 

Đọc thêm: Ngôn ngữ lập trình bậc cao là gì? TOP 9 ngôn ngữ lập trình bậc cao phổ biến nhất hiện nay

Ưu điểm của ngôn ngữ CSS là gì? 

Tăng tốc độ tải trang: CSS cho phép bạn sử dụng ít đoạn mã vì vậy tốc độ tải trang sẽ được cải thiện đáng kể. Ngoài ra, bạn còn có thể sử dụng một quy tắc CSS và áp dụng nó cho tất cả các lần xuất hiện của một thẻ nhất định trong tài liệu HTML.

Cải thiện trải nghiệm người dùng: CSS không chỉ làm cho các trang web dễ nhìn hơn, nó còn giúp các website có định dạng thân thiện với người dùng. Khi các nút và văn bản ở vị trí hợp lý và được sắp đặt tốt, trải nghiệm người dùng sẽ được cải thiện.

Thời gian phát triển nhanh: Với CSS, bạn có thể áp dụng các quy tắc và kiểu định dạng cụ thể cho nhiều trang bằng một chuỗi mã. Một biểu định kiểu xếp tầng có thể được sao chép trên một số trang web. Ví dụ: nếu bạn có các trang sản phẩm tất cả phải có cùng định dạng, giao diện, thì việc viết quy tắc CSS cho một trang sẽ đủ cho tất cả các trang cùng loại.

Thay đổi định dạng dễ dàng: Nếu bạn cần thay đổi định dạng của một nhóm trang cụ thể, bạn có thể dễ dàng thực hiện việc này với CSS mà không cần phải sửa từng trang riêng lẻ. Chỉ cần chỉnh sửa biểu định kiểu CSS tương ứng và bạn sẽ thấy các thay đổi được áp dụng cho tất cả các trang đang sử dụng biểu định kiểu đó.

Khả năng tương thích trên các thiết bị: Trong thời đại ngày nay, các trang web phải hiển thị đầy đủ và có thể điều hướng dễ dàng trên tất cả các thiết bị. Cho dù thiết bị di động hay máy tính bảng, máy tính để bàn hay thậm chí là TV thông minh, CSS kết hợp với HTML để tạo ra thiết kế đáp ứng.

Ngôn ngữ CSS hoạt động như thế nào?

Khi trình duyệt hiển thị một tài liệu, CSS phải kết hợp nội dung của tài liệu với kiểu cách mà nó sẽ xuất hiện. Nó xử lý tài liệu theo quy trình dưới đây:

Bước 1: Trình duyệt tải HTML (ví dụ: nhận nó từ mạng).

Bước 2: Trình duyệt chuyển đổi HTML thành DOM (Document Object Model – 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.

Bước 3: Trình duyệt 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 nhúng, video và thậm chí cả CSS được liên kết. Sau đó, JavaScript được xử lý trong quá trình này.

Bước 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ụ: phần tử, lớp, ID, v.v. Dựa trên các bộ chọn 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 kết xuất).

Bước 5: Cây kết xuất được đặt 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ó.

Bước 6: Hình ảnh hiển thị trực quan của trang được đưa ra màn hình (giai đoạn này được gọi là painting).

Hãy nhớ rằng đây là một phiên bản rất đơn giản của những gì xảy ra khi một trình duyệt tải một trang web. Các trình duyệt khác nhau sẽ xử lý quy trình theo những cách khác nhau. 

Cách nhúng CSS vào website

Nhúng CSS trực tiếp CSS vào tài liệu HTML (Inline CSS)

Với cách này, chúng ta đặt mã CSS vào thẳng thuộc tính style của phần tử. Và với cách nhúng trực tiếp, mã CSS sẽ chỉ tác động lên chính phần tử đó.

Để chỉ định nhiều quy tắc CSS, chúng ta có thể sử dụng dấu chấm phẩy để ngăn cách giữa các rules. Các rules này sẽ được đặt bằng cách sử dụng thuộc tính “style” kèm theo tên thuộc tính, giá trị thuộc tính.

Nhúng nội tuyến (Internal CSS)

Với cách nhúng nội tuyến, bạn cần dùng thẻ