CSS có ý nghĩa gì?

CSS được viết tắt từ Cascading Style Sheets. Đừng bỏ qua bài viết dưới đây của Mytour để hiểu rõ hơn về CSS nhé.

1. CSS là gì? Quan hệ giữa CSS và HTML?

- CSS là viết tắt của Cascading Style Sheets, một ngôn ngữ được sử dụng để định dạng các phần tử trên trang web. Trong khi HTML tạo ra các phần tử như văn bản, tiêu đề và bảng, CSS cho phép điều chỉnh bố cục, màu sắc, font chữ và nhiều khía cạnh khác của các phần tử HTML, tạo ra giao diện đẹp và hấp dẫn cho trang web.

- CSS và HTML có mối quan hệ mật thiết trong việc xây dựng trang web. HTML giống như động cơ của một chiếc xe hơi, trong khi CSS là  kiểu dáng và màu sắc của chiếc xe. Một trang web có thể hoạt động với HTML mà không có CSS, nhưng nó sẽ thiếu đi tính thẩm mỹ. CSS làm cho trang web trở nên hấp dẫn hơn và cung cấp trải nghiệm người dùng tốt hơn. CSS không chỉ quản lý bố cục và định dạng, mà còn điều chỉnh màu sắc chữ, kích thước hình ảnh, khoảng cách giữa các phần tử văn bản.

2. 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à các thuộc tính quản lý không gian trong và xung quanh hộp đó, bao gồm:

- Đệm (Padding): Là khoảng không gian xung quanh nội dung bên trong hộp, như là khoảng cách xung quanh một đoạn văn bản. Đệm giúp tạo ra khoảng trống xung quanh nội dung.

- Đường viền (Border): Đường viền nằm ở bên ngoài phần đệm. Nó định nghĩa ranh giới hoặc đường viền của hộp, thường là các đường kẻ xung quanh phần tử.

- Khoảng cách (Margin): Là khoảng cách từ bên ngoài của phần tử đến các phần tử khác hoặc biên của trang. Khoảng cách xác định khoảng cách giữa phần tử hiện tại và các phần tử khác xung quanh.

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

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

- Lựa chọn (Selector): CSS sẽ được áp dụng cho các phần tử HTML cụ thể trên trang web. Lựa chọn được đặt trong dấu ngoặc đơn (hoặc ngoặc nhọn).

- Khai báo thuộc tính và giá trị: Trong lựa chọn, bạn sẽ khai báo các thuộc tính CSS kèm theo giá trị tương ứng. Mỗi thuộc tính sẽ đi kèm với một giá trị, được phân tách bằng dấu hai chấm. Mỗi cặp thuộc tính và giá trị sẽ được đặt trong cặp dấu ngoặc nhọn {}.

- Dấu chấm phẩy (Semicolon): Mỗi cặp thuộc tính và giá trị trong một lựa chọn sẽ kết thúc bằng dấu chấm phẩy. Dấu chấm phẩy đánh dấu kết thúc của một khai báo và chuẩn bị cho khai báo tiếp theo.

Một minh hoạ về cấu trúc của CSS:

chọn-được {

    thuộc-tính-1: giá-trị-1;

    thuộc-tính-2: giá-trị-2;

    thuộc-tính-3: giá-trị-3;

}

CSS được áp dụng để định dạng các thuộc tính hiển thị trên trang web bằng cách tương tác với các phần tử HTML riêng lẻ. Ví dụ, đoạn văn bản trong HTML có dạng như sau:

Khi muốn đặt màu chữ của văn bản là màu hồng và in đậm trên trình duyệt của người xem, chúng ta sử dụng mã CSS như sau:

Trong trường hợp này, 'p' (paragraph hoặc đoạn văn bản) được gọi là 'selector', là một phần của mã CSS, được sử dụng để chỉ định phần tử HTML áp dụng CSS Style. Trong CSS, selector được đặt ở phía bên trái của dấu ngoặc nhọn đầu tiên.

Các thông tin được đặt trong dấu ngoặc nhọn được gọi là khai báo, bao gồm các thuộc tính và giá trị được áp dụng cho selector. Các thuộc tính bao gồm kích thước font chữ, màu sắc và căn lề, và các giá trị là các cài đặt cho thuộc tính đó.

Trong ví dụ trên, 'color' và 'font-weight' là các thuộc tính, 'pink' và 'bold' là các giá trị của các thuộc tính đó.

{ color:pink; font-weight:bold; } là khai báo và 'p' (hoặc paragraph trong HTML) là selector.

Bên cạnh đó, ta có thể sử dụng các nguyên tắc cơ bản này để điều chỉnh kích thước của chữ, màu sắc nền, căn lề, ... .

Ví dụ như sau:

body { background-color:lightblue; } đặt màu nền của trang web thành xanh nhạt. Xem Mã màu trong CSS tại đây.

Hoặc p { font-size:20px; color:red; } đặt kích thước của chữ là 20px và màu sắc của chữ là đỏ.

Nếu bạn đang tự hỏi cách thức áp dụng các đoạn mã CSS này vào nội dung HTML. Tương tự như HTML, bạn có thể viết các đoạn mã CSS thông qua trình soạn thảo hoặc trình biên tập văn bản trên máy tính, và có thể thêm các đoạn mã CSS này vào các trang web HTML thông qua 3 cách khác nhau.

Các đoạn mã CSS (hay Bảng CSS) có thể được chèn trực tiếp vào tài liệu HTML (CSS Trong Nội), nội tuyến (CSS Nội Bộ) hoặc ngoại tuyến (CSS Ngoại). Trong đó, các tệp CSS ngoại tuyến được lưu trữ dưới dạng các tệp .css và được sử dụng để định nghĩa giao diện cho toàn bộ trang web thông qua 1 tệp (thay vì thêm các tệp CSS riêng lẻ cho các phần tử HTML mà bạn muốn chỉnh sửa).

Để sử dụng CSS ngoại tuyến, các tệp .html phải bao gồm phần tiêu đề được liên kết với CSS ngoại tuyến và có dạng như sau:

Mã trên sẽ liên kết tệp .html với CSS ngoại tuyến (trong ví dụ này là mysitestyle.css) và tất cả các hướng dẫn CSS trong tệp sẽ được áp dụng cho các trang .html mà nó liên kết.

Thêm vào đó, chúng ta có thể nhúng mã CSS trực tiếp vào phần đầu của tài liệu .html cụ thể, như sau:

Đoạn mã này sẽ thiết lập màu nền là đỏ tím, kích thước chữ là 20px và màu chữ là xanh cho trang .html này.

Cuối cùng, ta có thể nhúng các mã CSS trực tiếp vào mã HTML, tuy nhiên cách này chỉ áp dụng cho một mã duy nhất. Ví dụ:

Trong đoạn mã này, tiêu đề của trang .html sẽ được định dạng với màu tím và kích thước chữ là 40px.
 

4. Cách nhúng CSS vào trang web

Có 3 phương pháp để nhúng CSS vào một trang web, chi tiết như sau:

Cách 1. Nhúng CSS trực tiếp (Inline CSS): Sử dụng dấu chấm phẩy để ngăn cách giữa các quy tắc và đặt chúng trong thuộc tính style.

Cách 2. Nhúng CSS nội tuyến (Internal CSS): Sử dụng thẻ style để đặt mã CSS bên trong tài liệu HTML. 

Cách 3. Nhúng CSS từ xa (External CSS): Bạn viết mã CSS trong một tệp độc lập với đuôi là .css, sau đó sử dụng phần tử link để liên kết tệp CSS này với tài liệu HTML.

Trong bài viết này, Mytour đã giới thiệu về khái niệm CSS, cấu trúc, và cách nhúng CSS vào website, mong rằng sẽ mang lại những thông tin hữu ích cho bạn.