CSS là gì? CSS hoạt động như thế nào?

Đánh giá

CSS là một phần quan trọng trong việc tạo ra các website hiện nay. Với CSS, bạn có thể thiết kế các trang web ấn tượng cho công ty của mình hoặc cho bản thân. Vậy CSS là gì? CSS hoạt động như thế nào? Hãy cùng Thiết kế web DC khám phá trong bài viết này.

CSS là gì?

CSS, viết tắt của Cascading Style Sheets, là một ngôn ngữ dùng để tìm và định dạng các phần tử được tạo ra bởi các ngôn ngữ đánh dấu như HTML. Nói đơn giản, CSS là ngôn ngữ dùng để tạo phong cách cho trang web. Nếu HTML chịu trách nhiệm định dạng các phần tử trên website như các đoạn văn bản, tiêu đề, bảng,… thì CSS giúp thêm các kiểu dáng cho các phần tử HTML đó, như thay đổi bố cục, màu sắc trang, màu chữ, font chữ, và cấu trúc.

CSS được phát triển bởi W3C (World Wide Web Consortium) vào năm 1996 nhằm khắc phục hạn chế của HTML trong việc định dạng trang web.

Phương thức hoạt động của CSS là nó sẽ tìm các phần tử dựa trên các vùng chọn, vùng chọn có thể là tên một thẻ HTML, tên một ID, class hoặc nhiều kiểu khác. Sau đó, CSS sẽ áp dụng các thuộc tính cần thay đổi lên vùng chọn đó, giúp tạo ra các trang web đẹp mắt và chuyên nghiệp

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 trên mô hình hộp, trong đó mỗi hộp chiếm không gian nhất định trên trang web với các thuộc tính chính như:

Padding: Khoảng trống xung quanh nội dung (ví dụ: không gian xung quanh đoạn văn bản).
Border: Đường viền bao quanh phần đệm.
Margin: Khoảng cách bên ngoài của phần tử.

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

Thông thường, một đoạn CSS sẽ bao gồm các phần:

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 và giá trị nằm trong dấu ngoặc nhọn. Mỗi thuộc tính có một giá trị riêng ở dạng số hoặc tên giá trị đã có trong danh sách CSS.

Quy tắc khai báo như sau: thuộc tính và giá trị cách nhau bằng dấu hai chấm, mỗi dòng khai báo thuộc tính kết thúc bằng dấu chấm phẩy. Các thuộc tính không bị giới hạn ở một vùng chọn.

Cụ thể:

Bộ chọn (Selector): Mẫu để chọn phần tử HTML mà bạn muốn định nghĩa phong cách. Selector có thể áp dụng cho các trường hợp sau:
- Tất cả các phần tử được định dạng theo một dạng cụ thể (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 quan hệ 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, phân tách với nhau bằng dấu chấm phẩy. Mỗi khai báo gồm tên và giá trị thuộc tính CSS, phân tách bằng dấu hai chấm. Quy tắc khai báo CSS là các khai báo luôn phải kết thúc bằng dấu chấm phẩy và khối khai báo nằm trong dấu ngoặc móc.
Thuộc tính (Properties): Các cách thức để tạo kiểu cho một phần tử HTML. Bạn chỉ cần lựa chọn thuộc tính muốn tác động trong bộ quy tắc đã tạo ra.
Giá trị thuộc tính (Property Values): Nằm bên phải thuộc tính. Lựa chọn một giá trị trong số đó phụ thuộc vào số lần xuất hiện của thuộc tính.

Ví dụ:

h2 { color: blue;

font-size: 20px;

margin: 10px;

}

Trong ví dụ này, “h2" là bộ chọn, color, font-size, và margin là các thuộc tính, và blue, 20px, 10px là các giá trị thuộc tính tương ứng.

Tại sao sử dụng CSS?

1. Giải quyết vấn đề lớn

Trước khi CSS xuất hiện, việc định dạng phông chữ, màu sắc, kiểu nền, sắp xếp phần tử, đường viền và kích thước phải được thực hiện thủ công trên từng trang web. Điều này làm cho quá trình xây dựng và duy trì các trang web lớn trở nên rất tốn thời gian và công sức. Ví dụ, nếu bạn phát triển một trang web lớn, việc thêm thông tin về phông chữ và màu sắc cho từng trang sẽ trở nên vô cùng phức tạp và tốn kém. CSS được tạo ra để khắc phục vấn đề này, là một khuyến nghị từ W3C.

CSS giúp tổ chức mã nguồn của trang web gọn gàng và có trật tự hơn. Việc tách biệt nội dung trang web và định dạng hiển thị giúp dễ dàng hơn trong việc cập nhật nội dung và giảm thiểu rối loạn trong mã HTML.

2. Tiết kiệm thời gian

Kiểu CSS được định nghĩa trong các tệp CSS bên ngoài, cho phép thay đổi toàn bộ trang web chỉ bằng cách chỉnh sửa một tệp. Điều này giúp loại bỏ việc lặp lại các mô tả định dạng cho từng thành phần trên trang, tiết kiệm tối đa thời gian làm việc và làm cho mã ngắn gọn hơn, dễ kiểm soát và giảm thiểu lỗi.

CSS cung cấp khả năng tạo ra nhiều kiểu dáng khác nhau, áp dụng cho nhiều trang web, từ đó giảm thiểu việc lặp lại các định dạng giống nhau.

3. Cung cấp thêm thuộc tính

CSS cung cấp các thuộc tính chi tiết hơn so với HTML để định nghĩa giao diện trang web. Điều này cho phép người dùng áp dụng nhiều kiểu dáng khác nhau trên cùng một trang HTML, mở rộng khả năng điều chỉnh và tùy biến giao diện trang web.

Mối quan hệ giữa CSS và HTML

CSS và HTML có mối quan hệ chặt chẽ trong việc xây dựng một trang web. Nếu ví HTML như là các thành phần cơ bản của một chiếc xe hơi, thì CSS chính là kiểu dáng và màu sắc của chiếc xe đó.

Một trang web có thể hoạt động mà không cần CSS, nhưng chắc chắn nó sẽ thiếu đi sự hấp dẫn về mặt thẩm mỹ. CSS giúp giao diện người dùng của trang web trở nên sinh động và mang lại trải nghiệm người dùng tuyệt vời. Thiếu CSS, các trang web sẽ trở nên kém bắt mắt và khó điều hướng hơn nhiều. Ngoài việc định dạng bố cục, CSS còn chịu trách nhiệm về màu sắc của chữ, kích thước hình ảnh, khoảng cách giữa các đoạn văn và nhiều yếu tố khác

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

Khi trình duyệt hiển thị một tài liệu, nó cần 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. Quá trình này diễn ra qua một số giai đoạn, mà chúng tôi sẽ liệt kê dưới đây. Lưu ý rằng đây là phiên bản đơn giản hóa 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 có thể xử lý quy trình theo cách riêng của chúng.

Các bước chính:

Bước 1: Trình duyệt tải HTML (nhận từ mạng hoặc nguồn khác).

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ớ máy tính.

Bước 3: Trình duyệt tải hầu hết các tài nguyên liên kết với tài liệu HTML, như hình ảnh, video nhúng và các tệp CSS liên kết. JavaScript cũng được xử lý trong giai đoạn này.

Bước 4: Trình duyệt phân tích cú pháp CSS đã tải về và sắp xếp các quy tắc theo loại bộ chọn thành các nhóm khác nhau như phần tử, lớp, ID, v.v. Dựa trên các bộ chọn, trình duyệt xác định các quy tắc sẽ được áp dụng cho các nút nào trong DOM và đính kèm các kiểu cho chúng (giai đoạn trung gian này được gọi là cây kết xuất).

Bước 5: Cây kết xuất được định hình theo cấu trúc mà nó sẽ xuất hiện sau khi các quy tắc đã được áp dụng.

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

Cách nhúng CSS vào website

Để CSS có thể thực thi trên website hoặc trong tài liệu HTML, cần phải nhúng CSS vào website. Nếu không, các định dạng CSS sẽ không có hiệu lực trên HTML. Có ba cách nhúng CSS vào website:

Inline CSS: Nhúng trực tiếp vào tài liệu HTML thông qua thuộc tính style trong thẻ mở của phần tử HTML. CSS chỉ tác động lên chính phần tử đó.

<p style=“color: red; font-size: 16px;”>Đoạn văn bản này sẽ có màu đỏ và kích thước chữ 16px.</p>

Internal CSS: Sử dụng thẻ <style> bên trong thẻ <head> của HTML để viết mã CSS.

<head>

<style type="text/css">

p {

color: blue;

font-size: 14px;

}

</style>

</head>

External CSS: Tạo một tệp .css riêng và nhúng vào tài liệu HTML thông qua thẻ <link>. Tệp này thường có phần mở rộng .css và được liên kết trong phần <head> của các tệp HTML.

Trong tệp styles.css, bạn có thể đặt các thuộc tính định dạng CSS:

p { color: green; font-size: 18px; }

Như vậy, bằng cách nhúng CSS theo các phương pháp trên, bạn có thể dễ dàng áp dụng các định dạng và kiểu dáng cho các phần tử HTML trên website.

Xem thêm: 3 cách cập nhật WordPress an toàn và hiệu quả.

CSS là gì? Qua bài viết từ Thiết kế web DC đã giúp bạn đọc giải đáp thắc mắc và những kiến thức cơ sở của nền tảng này. CSS giúp tạo ra các trang web với giao diện đẹp mắt, hiện đại, tốc độ tải nhanh và dễ quản lý, cải thiện trải nghiệm người dùng.

[elementor-template id=”12544″]