CSS (Cascading Style Sheets) là công cụ không thể thiếu để làm cho trang web của bạn trở nên hấp dẫn và thú vị hơn. Trong bài viết này, chúng ta sẽ tìm hiểu về những khái niệm cơ bản của CSS và cách áp dụng chúng vào trang web của bạn.
Contents
Chèn CSS vào HTML cơ bản
Để sử dụng CSS, bạn cần tạo một file có đuôi .css
, ví dụ như main.css
. Sau đó, chúng ta chỉ cần chèn file CSS này vào trang HTML. Đơn giản như vậy!
Selectors cơ bản cần nắm
Trong CSS, chúng ta sử dụng các Selectors để xác định các phần tử HTML mà chúng ta muốn áp dụng kiểu dáng. Các Selectors có thể là các thẻ HTML (div
, h2
, span
, a
), class (bắt đầu bằng dấu chấm như .heading
, .item
, .header
), hoặc id (bắt đầu bằng dấu # như #header
, #container
).
Thuộc tính Color
Thuộc tính color
được sử dụng để thay đổi màu chữ trên trang web của bạn. Bạn có thể sử dụng các giá trị mã màu như tên màu (red
, orange
, blue
), mã hexa (#ffa400
), mã RGB (255,255,255
), hoặc mã HSL (39, 100%, 50%
) tùy thuộc vào mục đích của bạn.
Nếu bạn muốn có màu chữ trong suốt, bạn nên sử dụng mã RGB hoặc HSL với giá trị độ trong suốt (alpha) từ 0 đến 1. Ví dụ, rgba(rgb-color, alpha)
với alpha
là độ trong suốt và rgb-color
là mã màu (ví dụ: rgba(0, 0, 0, 0.5)
đại diện cho màu đen với độ trong suốt 0.5).
Thuộc tính background-color
Thuộc tính background-color
cũng tương tự như thuộc tính color
, nhưng nó được áp dụng cho màu nền của một phần tử trên trang web. Ví dụ: nếu bạn sơn tường, màu tường đó chính là background-color
, còn nếu viết chữ lên đó, màu chữ đó sẽ được xác định bằng thuộc tính color
. Rất dễ hiểu, phải không?
Thuộc tính text-align
Thuộc tính text-align
dùng để căn chỉnh văn bản trong một phần tử. Có 4 giá trị phổ biến: left
(trái), right
(phải), center
(giữa), và justify
(căn đều hai bên). Tùy thuộc vào thiết kế của bạn mà bạn có thể sử dụng một trong bốn giá trị này.
DÀNH CHO BẠN:
Mình có một khóa học HTML CSS từ cơ bản tới nâng cao cho người mới. Nếu bạn quan tâm, bạn có thể học thử miễn phí tại đây.
Thuộc tính line-height
Thuộc tính line-height
được sử dụng để điều chỉnh chiều cao của dòng chữ. Giá trị của line-height
càng lớn, khoảng cách giữa các dòng càng xa. Ví dụ: nếu bạn có một đoạn chữ với kích thước font là 20px, nếu chỉ có một dòng, chiều cao của dòng đó sẽ là 20px. Nhưng nếu có hai dòng, chiều cao sẽ là 40px. Nếu bạn muốn tạo khoảng trống giữa các dòng, bạn có thể sử dụng line-height
.
Thuộc tính letter-spacing
Nếu line-height
là khoảng cách giữa các dòng, thì letter-spacing
là khoảng cách giữa các kí tự trong một từ. Bạn có thể sử dụng letter-spacing
để điều chỉnh khoảng cách này. Số càng lớn, các kí tự càng thưa rời nhau và ngược lại, số càng nhỏ, các kí tự càng gần nhau.
Thuộc tính word-spacing
Nếu có khoảng cách giữa các kí tự, thì cũng sẽ có khoảng cách giữa các từ. Thuộc tính word-spacing
sẽ giúp điều chỉnh khoảng cách này.
Thuộc tính word-break
Trong một số trường hợp, người dùng nhập vào các từ được dính liền nhau và làm cho giao diện bị tràn ra ngoài. Để giải quyết vấn đề này, chúng ta có thể sử dụng thuộc tính word-break
với giá trị break-all
hoặc break-word
, tuỳ thuộc vào mục đích của giao diện.
Thuộc tính text-overflow
Trong một số trường hợp, chúng ta muốn chữ nằm trên một hàng duy nhất và nếu quá dài thì ẩn đi và hiển thị dấu ba chấm. Để hiển thị chữ trên một hàng duy nhất, chúng ta sử dụng thuộc tính white-space: nowrap
. Để ẩn chữ khi quá dài và hiển thị dấu ba chấm, chúng ta kết hợp hai thuộc tính overflow: hidden
và text-overflow: ellipsis
.
Đó là những kiến thức cơ bản về CSS mà bạn cần biết khi bắt đầu học CSS. Hy vọng bài viết này có thể giúp bạn hiểu rõ hơn về CSS và ứng dụng nó vào trang web của bạn. Hẹn gặp bạn ở phần 2!
Bài viết gốc được đăng tải tại laptrinhc.edu.vn.