CSS (Cascading Style Sheets) giúp bạn tạo ra những trang web có giao diện bắt mắt, nhưng đằng sau đó, nó hoạt động như thế nào? Bài viết này mình sẽ giải thích CSS là gì thông qua một ví dụ cú pháp đơn giản, đồng thời giải thích một số thuật ngữ quan trọng về ngôn ngữ này một cách dễ hiểu.
Yêu cầu: Đã có kiến thức về HTML
Ở phần học về HTML, các bạn đã được tìm hiểu HTML là gì cũng cách sử dụng để tạo ra cấu trúc của một website đơn giản và hiển thị trên trình duyệt web. Tiêu đề sẽ có kích thước chữ lớn hơn các nội dung văn bản thông thường, các đoạn văn bản sẽ hiển thị trên mỗi dòng khác nhau và có khoảng cách. Các liên kết mặc định sẽ có màu và được gạch chân. Những gì các bạn đang thấy là các định dạng mặc định của trình duyệt
Tuy nhiên nếu mọi thứ cứ hiển thị như hình ảnh ở trên thì các website sẽ trông rất chán vì website nào cũng sẽ trông như nhau và khá xấu 😀 Sử dụng CSS, chúng ta có thể thay đổi, kiểm soát cách các thành phần HTML hiển thị trên trình duyệt và trình bày mọi thứ theo ý các bạn muốn
CSS dùng để làm gì?
Như đã đề cập trước đó, CSS là ngôn ngữ dùng để định dạng, tạo kiểu, trình bày các nội dung trên website của chúng ta, hay nói đơn giản dễ hiểu là làm cho website của chúng ta sẽ trông đẹp và thu hút hơn.
CSS có thể dùng để định dạng cơ bản các nội dung văn bản như thay đổi màu sắc, thay đổi kích thước chữ cho tiêu đề, liên kết. Cũng có thể dùng để tạo ra các bố cục cho website, chia website thành nhiều phần để hiển thị các nội dung thông tin khác nhau. Nó cũng có thể tạo ra các hiệu ứng đẹp mắt trên website.
Cú pháp CSS
CSS là một ngôn ngữ dựa trên quy tắc (rule) – chúng ta xác định các quy tắc bằng cách chỉ định các nhóm kiểu định dạng sẽ được áp dụng cho các phần tử cụ thể hoặc nhóm phần tử trên trang web của mình
Ví dụ, bạn có thể cho thẻ h1 của trang web có màu đỏ và kích thước chữ lớn hơn.
h1 {
color: red;
font-size: 50px;
}
- Trong ví dụ trên, mình bắt đầu với tên thẻ
h1– đây được gọi là mộtselector(bộ chọn), cho biết mình sẽ tiến hành định dạng cho thẻh1 - Tiếp theo là cặp dấu ngoặc nhọn
{ } - Bên trong cặp dấu ngoặc nhọn, mình có thể viết một hoặc nhiều phần khai báo (declarations). Mỗi phần định dạng sẽ là một cặp thuộc tính (property) và giá trị (value). Tên thuộc tính sẽ được đặt trước dấu hai chấm
:(color - màu sắc chữtrong ví dụ trên), giá trị của thuộc tính sẽ được đặt sau dấu hai chấm:(red - màu đỏtrong ví dụ trên) - Ở ví dụ trên mình có hai phần khai báo, một là chỉnh sửa màu sắc chữ (
color) và hai là chỉnh sửa kích thước chữ (font-size).
Một thuộc tính trong CSS có thể có nhiều giá trị khác nhau, ví dụ với thuộc tính color mình có thể chỉ định giá trị khác như green - màu xanh, yellow - màu vàng (các giá trị màu sắc chúng ta sẽ được tìm hiểu sau)
Các bạn có thể viết nhiều CSS khác nhau
h1 {
color: red;
font-size: 50px;
}
p {
color: green;
}
Hiện tại các bạn có thể có rất nhiều thắc mắc và chưa hiểu được một số khái niệm mình trình bày ở trên. Các bạn không cần lo lắng, những nội dung trên chỉ nhằm mục đích cho bạn thấy cách mà CSS hoạt động và làm thay đổi các nội dung trên website như thế nào. Chúng ta sẽ cùng tìm hiểu chi tiết từng thành phần ở các bài học về sau.
Hẹn gặp lại các bạn ở các phần tiếp theo, chúc các bạn một ngày làm việc và học tập thật tốt!