Trang chủ » Đồ họa » HTML/CSS

Học HTML CSS - Các thuộc tính cho Text (văn bản)

910 99
Đây là bài mở đầu cho loạt bài viết tìm hiểu về các thuộc tính quan trọng trong CSS mà bạn cần nắm. Một trong các loại thuộc tính đơn giản nhất nhưng lại dùng nhiều nhất là các thuộc tính được dùng để thay đổi cách hiển thị của văn bản, được gọi là Text Styles.
loading...

Text Styles trong CSS hiện tại có khoảng 13 thuộc tính được sử dụng bao gồm căn lề văn bản, trang trí văn bản, định hướng văn bản,….Cụ thể là có các thuộc tính thường dùng sau:

  • text-align: Căn lề văn bản.
  • text-decoration: Trang trí văn bản.
  • text-indent: Thêm khoảng trống trước văn bản theo chiều ngang từ trái sang phải.
  • text-shadow: Thêm bóng cho văn bản.
  • text-transform: Tùy chỉnh việc hiển thị chữ in hoa.

Tham khảohttps://developer.mozilla.org/en-US/docs/Web/CSS/Reference

 

 

 

text-align

Thuộc tính text-align này sẽ giúp bạn tùy chỉnh canh lề cho các đoạn văn bản bên trong website. Thuộc tính này hỗ trợ cho bạn các giá trị sau:

01
02
03
04
05
06
07
text-alignleft; // Căn lề văn bản từ bên trái
 
text-alignright; // Căn lề văn bản từ bên phải
 
text-aligncenter; // Căn lề văn bản từ chính giữa
 
text-alignjustify; // Căn lề văn bản đều hai bên

Xem ví dụ sự khác nhau của các giá trị text-align tại đây.

text-decoration

Thuộc tính này sẽ giúp bạn trang trí lại văn bản hiển thị trên tài liệu theo một số kiểu nhất định
 

01
text-decorationoverline underline line-throughnone
  • overline: gạch trên chữ
  • underline: gạch dưới chữ
  • line-through: gạch ngang chữ
  • none: không có gạch gì cả

Ví dụ:

Ngoài ra thuộc tính này còn có thêm một số thuộc tính con của nó nhưng lại chưa được hỗ trợ bởi các trình duyệt thông dụng, đó là text-decoration-color, text-decoration-line và text-decoration-style.

text-indent

Thuộc tính này sẽ tạo ra một khoảng trắng bên trái của văn bản (hoặc bên phải của văn bản với các ngôn ngữ hiển thị từ phải sang trái), giá trị của nó là số kèm theo đơn vị đo lường.

Ví dụ:

01
02
03
04
05
p {
   text-indent15px;
   text-indent15%;
   text-indent1.5pt;
}

text-shadow

Thuộc tính này để thêm bóng đổ cho văn bản nếu bạn thích sự bóng bẩy.

Cách viết như sau:

01
text-shadow: [màu sắc] [tọa độ x y] [độ mờ];

Trong đó, tọa độ x-y là giá trị kiểu đo lường và số đứng trước được xem là x và đứng sau là y, độ mờ nếu không khai báo thì có giá trị là 0 và giá trị của độ mờ luôn đứng sau giá trị của tọa độ.

Ví dụ:

01
02
03
#title {
   text-shadowblue 2px 3px 4px;
}

Đoạn trên nghĩa là văn bản mang id #title sẽ có bóng đổ màu xanh, tọa độ x là 2px, tọa độ y là 3px vàđộ mờ là 4px.

Ngoài ra, bạn cũng có thể tạo ra nhiều bóng đổ cho một văn bản bằng cách viết nhiều đoạn cú pháp và mỗi đoạn sẽ được cách nhau bằng dấu phẩy, ví dụ:

01
text-shadowred 2px -1px 3pxblue -2px 1px 2px;

Ví dụ thực tế:

text-transform

Nếu bạn muốn tùy chỉnh việc hiển thị chữ in hoa hay in thường trong đoạn văn bản mà không cần viết thủ công cả đoạn văn bản thì có thể sử dụng thuộc tính text-transform này.

Thuộc tính này có 3 giá trị chính là capitalize (in hoa chữ cái đầu tiên của mỗi từ), uppercase (in hoa cả đoạn văn bản), lowercase (viết thường cả đoạn văn bản) và none (không có gì cả).

Ví dụ:

01
#title { text-transformuppercase; }

Có một vấn đề bạn nên lưu ý là ở giá trịcapitalize, nó chỉ có tác dụng với chữ cái đầu tiên của văn bản, còn các chữ cái tiếp theo nó vẫn hiển thị theo cách văn bản mà bạn soạn ra.
 

Nguồn thachpham.com

HTML và CSS căn bản dành cho người mới bắt đầu

HTML và CSS căn bản dành cho người mới bắt đầu Đăng bởi: Tài Liệu Tin Học 22-05-2015 mục HTML/CSS

HTML/CSS có thể nói là khởi đầu của mọi tất cả vấn đề liên quan tới web, dù bạn là người làm nghành nào, miễn là có đụng tới quản trị web thì ít nhất phải biết qua hai cái này. Nếu bạn có ý định học lập trình web thì lại càng nên thành thạo hai cái này, nếu bạn là blogger chuyên viết bài thì cũng nên nắm cái này.

Bạn có thể là một blogger viết rất tốt, nhưng liệu bạn đã sử dụng thành thục các thẻ HTML và vùng chọn CSS căn bản chưa? Nếu câu trả lời là chưa thì điều đó đang hạn chế tiềm năng blogging của bạn đấy. Bạn có thể cầm gạch lên và bảo:

HTML và CSS căn bản dành cho người mới bắt đầu

964 Lượt xem