HTML (Hypertext Markup Language) là gì? Đây có phải là ngôn ngữ lập trình đóng vai trò nền tảng trong việc phát triển tất cả các trang web? Và nếu như HTML là ngôn ngữ đầu tiên bạn cần phải học nếu muốn xây dựng một trang web, thì người anh em CSS của nó chính là ngôn ngữ thứ hai.
CSS là viết tắt của từ Cascading Style Sheets. Tham khảo tiếp bài viết dưới đây của Taimienphi.vn để tìm hiểu chi tiết về CSS là gì nhé.
CSS là gì?Tìm hiểu về hoạt động của CSS
1. Vậy, CSS là gì? Và CSS có quan hệ như thế nào với HTML?
Như đã đề cập ở trên, CSS là viết tắt của Cascading Style Sheets. Nếu như HTML được sử dụng để tạo trang web thì CSS được sử dụng để định dạng các thuộc tính trên trang web, chẳng hạn như màu sắc, font chữ, kích thước font chữ, ... .
2. CSS hoạt động như thế nào?
CSS được sử 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ẻ, chẳng hạn như đoạn văn bản trong HTML có dạng như dưới đây:
Trong trường hợp nếu muốn định dạng màu font chữ văn bản là màu hồng và in đậm trên trình duyệt của khách truy cập, chúng ta sử dụng mã CSS có dạng như dưới đây:
Trong trường hợp này, "p" (paragraph hay đ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 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" (hay paragraph trong HTML) là selector.
Ngoài ra chúng ta có thể áp dụng các nguyên tắc cơ bản này để thay đổi kích thước font chữ, màu nền, căn lề, ... .
Cho ví dụ:
body { background-color:lightblue; } định dạng màu nền của trang web là màu xanh da trời. xem Mã màu trong CSS tại đây.
Hoặc p { font-size:20px; color:red; } thiết lập kích thước font chữ là 20px và định dạng font chữ là màu đỏ.
Nếu đang thắc mắc làm thế nào để áp dụng các mã CSS này cho nội dung HTML. Cũng tương tự như HTML, chúng ta có thể viết các mã CSS thông qua trình soạn thảo hoặc trình xử lý văn bản trên máy tính, và có thể thêm các mã CSS này trên các trang web HTML thông qua 3 cách.
Mã CSS (hay Style Sheets) có thể chèn trực tiếp vào tài liệu HTML (Inline CSS), nội tuyến (Internal CSS) hoặc ngoại tuyến (External CSS). Trong đó các file ngoại tuyến CSS được lưu dưới dạng các file .css và được sử dụng để chỉ định giao diện toàn bộ trang web thông qua 1 file (thay vì thêm các file CSS riêng lẻ cho các phần tử HTML mà chúng ta muốn chỉnh sửa).
Để sử dụng CSS ngoại tuyến, các file .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ư dưới đây:
Đoạn mã trên sẽ liên kết file .html với CSS ngoại tuyến (trong ví dụ này là mysitestyle.css) và tất cả hướng dẫn CSS trong file sẽ được áp dụng cho các trang .html được liên kết.
Ngoài ra chúng ta có thể chèn mã CSS nội tuyến vào tiêu đề của trang .html cụ thể, chẳng hạn như đoạn mã dưới đây:
Đoạn mã trên sẽ áp dụng màu nền là màu đỏ tím, kích thước font chữ 20px và màu font chữ là màu xanh cho trang .html duy nhất này.
Cuối cùng, chúng ta có thể chèn 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ụ:
https://thuthuat.taimienphi.vn/css-la-gi-55526n.aspx
Trong đoạn mã trên tiêu đề trên 1 trang .html duy nhất sẽ được định dạng là màu tím, kích thước font chữ 40px.