Bài 05: Các thuộc tính CSS định dạng text

CSS cung cấp cho chúng ta một số thuộc tính định dạng text như màu sắc, hiển thị chữ in hoa hoặc in thường, vị trí hiển thị, ... Những thuộc tính ...

CSS cung cấp cho chúng ta một số thuộc tính định dạng text như màu sắc, hiển thị chữ in hoa hoặc in thường, vị trí hiển thị, ... Những thuộc tính này khá hay và rất quan trọng vì nó quyết định tính thẩm mỹ cho các dòng chữ trong website.

Trong bài chúng ta tìm hiểu một số thuộc tính định dạng cho text như sau:

  • color
  • text-decoration
  • text-transform
  • text-align
  • text-indent

Còn khá nhiều nhưng mình không trình bày ở đây.

1. Chon màu cho chữ với color

Ta sử dụng thuộc tính color để gán màu sắc cho chữ.

Trong CSS thì ta sử dụng 3 cách biểu diễn color như sau:

  • HEX: có định dạng #ma_mau
  • RGB: có định dạng rgb(xxx,yyy,zzz)
  • Tên màu: ví dụ red, blue
Ví dụ: Thiết lập màu cho hai class color-red, color-blue và color-pink

XEM DEMO

.color-red{
    color: red;
}

.color-blue{
    color: blue;
}
.color-pink{
    color:#d624d0
}

2. Thiết lập chữ in hoa và in thường

Nếu bạn muốn một thẻ nào đó luôn luôn hiển thị in hoa hoặc luôn luôn hiển thị in thường mặc dù ta nhập vào là hoa hay thường thì sử dụng thuộc tính text-transform với các thuộc tính:

  • uppercase: chuyển đổi in hoa
  • lowercase: chuyển đổi in thường
  • none: không chuyển đổi gì cả (mặc định)
Ví dụ: Dùng CSS chuyển in hoa và in thường

XEM DEMO

.upper{
    text-transform: uppercase;
}

.lower{
    text-transform: lowercase;
}

Có thể bạn quan tâm:

  • Selector là gì?
  • CSS background

3. Thiết lập vị trí của text (giữa, trái, phải)

Nếu bạn muốn đoạn text hiển thị ở gữa màn hình hoặc bên trái, bên phải thì sử dụng thuộc tính text-align với các giá trị:

  • center : hiển thị ngay giữa
  • left: hiển thị bên trái
  • right: hiển thị bên phải
  • justify : hiển thị canh đều so với lề phải và lề trái
Ví dụ: Sử dụng text-align để xác định vị trí hiển thị của chữ

XEM DEMO

.show-center{
    text-align: center;
}
.show-left{
    text-align: left;
}
.show-right{
    text-align: right;
}
.show-justify{
    text-align: justify;
}

4. Thiết lập gạch  chân cho chữ

Để gạch chân cho chữ thì bạn sử dụng thuộc tính text-decoration với giá trị:

  • underline: gạch chân
  • none: bỏ gạch chân
Ví dụ: Cho gạch chân chữ  trong thẻ div có class="gach-chan"

XEM DEMO

.gach-chan{
    text-decoration: underline;
    text-decoration-color: #28a4c9;
}

5. Xác định vị trí hiển thị chữ với text-indent

Nếu bạn muốn chữ hiển thị ở một vị trí nào đó tính từ góc trái trên cùng (tính theo pixels) thì bạn dùng thuộc tính text-indent. Thuộc tính này thường dùng để gắn trong nội dung thẻ a của logo và sau đó dùng nó để ẩn text đi.

Ví dụ: Cho nội dung bên trong thẻ div biến khỏi màn hình

Ta sử dụng text-indent và giá trị của nó là số pixel lớn hơn kích thước màn hình (tính theo số âm).

XEM DEMO

.hide-text{
    text-indent: -9999px
}

6. Lời kết

Bài này ta tìm hiểu được 6 thuộc tính định dạng cho text, những thuộc tính này khá căn bản nhưng hay dùng. Tuy nhiên vẫn còn nhiều thuộc tính nhưng ta ít khi dùng tới và mình cũng không thể nào biết và liệt kê hết ra được. 

BÀI KẾ SAU
BÀI KẾ TIẾP

Nguồn: code24h.com

Bài liên quan

Bài 03: Các thuộc tính trong thẻ HTML

1. Thuộc tính trong HTML Các phần tử HTML có thể có các thuộc tính. Các thuộc tính cung cấp thêm các thông tin cho một phần tử HTML Các thuộc tính luôn luôn được chỉ định trong thẻ bắt đầu . Các thuộc tính đi với nhau thành từng cặp là tên/giá trị, ví dụ: name="value" Cú ...

Tạ Quốc Bảo viết 3 tuần trước

Các thuộc tính CSS trong HTML

Định dạng HTML với CSS CSS là viết tắt của Cascading Style Sheets. CSS mô tả các phần tử HTML được hiển thị như thế nào trên màn hình, giấy hoặc trên các phương tiện khác. CSS tiết kiệm rất nhiều công việc. Nó có thể kiểm soát bố cục của nhiều webpage cùng một ...

Trịnh Tiến Mạnh viết 14:45 ngày 07/09/2018

Bài 2 – Thuộc tính CSS Text

Bài học này mình sẽ hướng dẫn các bạn thuộc tính CSS Text, giúp bạn trình bày văn bản đẹp và chuyên nghiệp theo đúng chuẩn định dạng dành cho một tài liệu. Bạn thường hay vào các website tuy nhiên rất nhiều trang có nội dung bài viết thường rất sơ sài về trình bày bố cục không hợp lý. Trường ...

Trần Trung Dũng viết 16:52 ngày 04/09/2018

Bài 1 – Thuộc tính CSS Background

CSS Background là thuộc tính để định dạng màu nền và hình nền cho một đối tượng, các thuộc tính bao gồm: Background-color Background-image Background-repeat Background-attachment Background-position Ví dụ minh họa với từng thuộc tính: 1.1. Background-color Màu ...

Trần Trung Dũng viết 16:49 ngày 04/09/2018

Kết hợp các thuộc tính CSS

Bài tập Trong phần bài tập HTML/XHTML chúng ta đã xây dựng gần như hoàn chỉnh phần cấu trúc HTML, giờ đây chúng ta sẽ sử dụng những gì đã học về CSS để tiếp tục hoàn thành trang web mẫu này. Từ kết quả của bài tập HTML/XHTML, chúng ta sẽ thêm thư mục css , bên trong có chứa file style.css ...

Trịnh Tiến Mạnh viết 11:33 ngày 18/08/2018
0