[Tự học CSS] – Tìm hiểu cách định dạng một bộ phận của phần tử trong CSS

Chào các bạn, mình rất vui khi hôm nay chúng ta lại gặp nhau trong một loạt bài hướng dẫn dùng CSS cơ bản của Ninh Bình Web. Bài viết này sẽ giúp các bạn hiểu một bộ phận của phần tử trong CSS là gì ? Và cách định dạng chúng ra sao. Hãy theo dõi bài viết để biết thêm thông tin chi tiết về điều mình muốn nói ở đây.

Bộ phận trong CSS là gì ?

Là một phần nào đó của phần tử. Ví dụ, tôi có phần tử là một đoạn văn như sau:

Trong đó Bộ phận:

  • ký tự đầu tiên của phần tử là: H
  • dòng đầu tiên của phần tử là: Hướng dẫn học CSS cơ bản từ giuseart.com. Để học tốt thì hãy theo dõi bài viết kỹ nhá, lơ là là

Cú pháp định dạng cho một bộ phận của phần tử

Bộ phận ::before

Là nằm ở vị trí ĐẦU TIÊN trong phần nội dung của phần tử

Kết quả :

Bộ phận ::after

Là nằm ở vị trí CUỐI CÙNG trong phần nội dung của phần tử

Kết quả :

Bộ phận ::first-line

Là dòng đầu tiên của đoạn văn bản

Ví dụ :

Kết quả :

Dưới đây là một số loại thuộc tính có thể dùng để định dạng

  • Các thuộc tính định dạng font chữ
  • Các thuộc tính background
  • Thuộc tính color
  • Thuộc tính word-spacing
  • Thuộc tính letter-spacing
  • Thuộc tính text-decoration
  • Thuộc tính vertical-align
  • Thuộc tính text-transform
  • Thuộc tính line-height
  • Thuộc tính clear

Bộ phận ::first-letter

Là Ký tự đầu tiên của đoạn văn bản

Ví dụ :

Kết quả :

Dưới đây là một số loại thuộc tính có thể dùng để định dạng cho bộ phận ::first-letter

  • Các thuộc tính định dạng font chữ
  • Các thuộc tính background
  • Thuộc tính color
  • Thuộc tính margin
  • Thuộc tính padding
  • Thuộc tính border
  • Thuộc tính vertical-align
  • Thuộc tính text-transform
  • Thuộc tính line-height
  • Thuộc tính float
  • Thuộc tính clear

Lời Kết

Bài viết hướng dẫn của mình tới đây là hết rồi, mình mong rằng bài viết này sẽ có ích cho các bạn. Nếu có bất kỳ thắc mắc nào liên quan tới bài học thì hãy đừng ngại và comment vào phía dưới bài viết. Cảm ơn các bạn đã theo dõi bài viết !

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

    Bài viết cùng chuyên mục:

    Chat Facebook