CSS là gì và tại sao nó quan trọng khi xây dựng trang web? Sau khi bạn đã làm quen với HTML căn bản, bước tiếp theo là tìm hiểu về CSS để trang web của bạn trở nên hấp dẫn hơn và đẹp mắt hơn. Trong bài viết này, chúng ta sẽ khám phá một số thuộc tính cơ bản của CSS, tìm hiểu cách chèn CSS vào HTML và áp dụng chúng vào trang web của mình.
Chèn CSS vào HTML cơ bản
Trước khi bắt đầu viết CSS, chúng ta cần tạo một tệp có phần mở rộng .css, ví dụ: main.css. Sau đó, chúng ta sẽ chèn tệp CSS này vào HTML bằng cách sử dụng thẻ <link>. Đơn giản như vậy! Tiếp theo, hãy tìm hiểu về cấu trúc của một đoạn mã CSS cơ bản:
Các Selector cơ bản cần nắm
Trong CSS, các Selector như div, h2, body, span, a, class hoặc id giúp chúng ta chọn các phần tử trong HTML để áp dụng các thuộc tính CSS. Thuộc tính CSS là các thuộc tính chúng ta sẽ học trong tương lai. Cùng nhau, hãy nhìn vào cấu trúc CSS cơ bản:
- Selector: Chọn phần tử HTML (ví dụ. div, h2, body, span, a, .class, #id)
- Property: Các thuộc tính CSS (sẽ được học sau)
- Value: Giá trị tương ứng với thuộc tính
Thuộc tính Color
Thuộc tính này cho phép bạn thay đổi màu chữ của trang web. Bạn có thể sử dụng các mã màu theo tùy chọn của mình, ví dụ: tên màu (đỏ, cam, xanh...), mã hexa (#ffa400), RGB (255,255,255) hoặc HSL (39, 100%, 50%). Hãy tận dụng thuộc tính này để trang web của bạn trở nên bắt mắt và hợp lý cho mục đích của nó.
Thuộc tính background-color
Tương tự như thuộc tính trên, thuộc tính background-color áp dụng cho màu nền của một khối hoặc phần tử HTML. Hãy tạo sự tương phản và độc đáo cho trang web của bạn bằng cách sử dụng thuộc tính này.
Thuộc tính text-align
Thuộc tính này giúp căn chỉnh văn bản theo 4 giá trị thường được sử dụng: trái (left), phải (right), giữa (center) và hai bên (justify). Tùy vào mục đích và thiết kế của bạn, hãy chọn giá trị phù hợp để văn bản của bạn trở nên dễ đọc và hài hòa.
Thuộc tính line-height
Thuộc tính này giúp điều chỉnh chiều cao của các dòng văn bản. Bằng cách sử dụng thuộc tính này, bạn có thể tạo ra khoảng trống giữa các dòng văn bản, làm cho trang web của bạn trông thoáng hơn và dễ đọc hơn.
Thuộc tính letter-spacing
Nếu bạn muốn kiểm soát khoảng cách giữa các kí tự trong từ, hãy sử dụng thuộc tính letter-spacing. Giá trị càng lớn, khoảng cách càng lớn và ngược lại. Điều này giúp bạn tạo ra hiệu ứng độc đáo và truyền tải một thông điệp riêng cho trang web của bạn.
Thuộc tính word-spacing
Không chỉ có khoảng cách giữa các kí tự, chúng ta cũng cần quan tâm đến khoảng cách giữa các từ. Sử dụng thuộc tính word-spacing để thay đổi khoảng cách này và tạo ra một văn bản đẹp và dễ đọc.
Thuộc tính word-break
Trong một số trường hợp, văn bản mà người dùng nhập vào có thể làm cho giao diện của chúng ta bị bể. Để giải quyết vấn đề này, hãy sử dụng thuộc tính word-break với giá trị break-all hoặc break-word, phụ thuộc vào mục đích của giao diện.
Thuộc tính text-overflow
Thuộc tính này cho phép bạn hiển thị một hàng văn bản trên giao diện. Nếu văn bản dài quá, thuộc tính này sẽ ẩn đi và hiển thị dấu ba chấm. Được sử dụng cùng với thuộc tính overflow: hidden và text-overflow: ellipsis, bạn có thể kiểm soát trực quan văn bản trên giao diện của mình.
Đây là những thuộc tính cơ bản trong CSS mà bạn cần nắm vững khi bắt đầu học về CSS. Hy vọng rằng những kiến thức này sẽ giúp bạn xây dựng trang web đẹp và chuyên nghiệp hơn. Tiếp tục theo dõi phần 2 để khám phá thêm về CSS.
