Trong thiết kế web, việc trình bày và định dạng nội dung rất quan trọng, Bên cạnh nội dung tốt thì nội dung còn phải được được trình bày rõ ràng, mạch lạc. Bài viết này chúng ta sẽ cùng tìm hiểu một số thuộc tính định dạng văn bản trong CSS.
1. Định dạng màu chữ (Text color)
Thuộc tính color sẽ định dạng màu chữ cho một thành phần nào đó trên trang web. Giá trị của thuộc tính color là các giá trị màu mà CSS hỗ trợ (tên màu trong tiếng Anh, hệ RGB và hệ Hex).
Mặc định, khi không được khai báo thì CSS trình duyệt sẽ quy định màu chữ của toàn bộ trang là màu đen.
Mặc định, khi không được khai báo thì CSS trình duyệt sẽ quy định màu chữ của toàn bộ trang là màu đen.
Giả sử bây giờ chúng ta muốn màu chữ toàn bộ trang là màu đen, các liên kết có màu vàng cam, các thành phần h1 có màu xanh, thì ta sẽ viết CSS như sau:
body{ color: #000}a{ color: #f98000 }h1{ color: blue } 2. Thuộc tính text-align
Thuộc tính text-align giúp chúng ta canh chỉnh văn bản cho các thành phần trong trang web. Thuộc tính này có 4 giá trị:
§ left: canh trái
§ right: canh phải
§ center: canh giữa
§ justify: canh đều
3. Thuộc tính text-decoration
Thuộc tính text-decoration được sử dụng để thêm vào các hiệu ứng gạch chân (underline), gạch xiên (line-through), gạch đầu (overline), và hiệu ứng nhấp nháy (blink).
§ Đoạn văn bản hiển thị với thuộc tính text-decoration:none
§ Đoạn văn bản hiển thị với giá trị underline
§ Đoạn văn bản hiển thị với giá trị blink
§ Đoạn văn bản hiển thị với giá trị overline
Thuộc tính text-decoration được sử dụng nhiều nhất để loại bỏ hiệu ứng gạch chân trong các liên kết. Đoạn mã sau sẽ loại bỏ hiệu ứng gạch chân của tất cả các liên kết:
a{ text-decoration: none } 4.Thuộc tính text-transform
Thuộc tính text-transform
Thuộc tính text-transform quy định chế độ in hoa hoặc in thường của đoạn văn bản mà không phụ thuộc vào đoạn văn bản gốc trong HTML.
Các giá trị của thuộc tính text-transform bao gồm:
§ uppercase: hiển thị với kiểu chữ in Hoa
§ lowercase: hiển thị với kiểu chữ in thường
§ capitalize: In hoa các ký tự đầu tiên trong mỗi từ
§ none: không áp dụng (Giá trị mặc định)
Ví dụ sau quy định tất cả các thành phần h1 được hiển thị với kiểu chữ in Hoa.
h2{ text-transform: uppercase } 5. Thuộc tính text-indent
Thuộc tính text-indent
Khi thuộc tính text-indent được khai báo, dòng đầu tiên của một đoạn văn bản sẽ được thụt đầu dòng một khoảng. Giá trị của thuộc tính text-indent là các đơn vị đo cơ bản (cm, px, em…).
Đoạn mã sau sẽ quy định dòng đầu tiên của tất cả các thành phần p sẽ được thụt đầu dòng một khoảng 30px
p{ text-indent: 30px }* Khi gán cho thuộc tính text-indent một giá trị âm thật lớn cho một thành phần nào đó, thì văn bản của thành phần đó sẽ không được hiện thị. Trường hợp này thường được áp dụng để quy định thuộc tính hiển thị của đoạn văn bản so với ảnh nền (chỉ có nền được hiển thị).
Ví dụ:
p.logo{ text-indent: -999999px }
Text được hiển thị so với ảnh nền
Không hiển thị khi text-indent:-999999px
6. Thuộc tính letter-spacing
Thuộc tính letter-spacing sẽ quy định khoảng cách giữa các từ trong một đoạn văn bản
Đoạn mã sau quy định các từ trong thành phần h2 có khoảng cách là 7px
h2{ letter-spacing: 7px }Tiếp theo bài Định dạng văn bản trong CSS (Phần 1), bài viết này mình sẽ đề cập đến thuộc tính font trong việc trình bày văn bản trên web. Với thuộc tính font chúng ta có thể:
§ Chọn font, hoặc họ font hiển thị trên trang web.
§ Quy định kiểu hiện thị của font.
§ Quy định kích thước font.
1. Thuộc tính font-family:
Thuộc tính font-family định nghĩa một danh sách ưu tiên các font sẽ được dùng để hiển thị một thành phần nào đó trên trang web, font có thể là tên font hoặc một họ font như sans-serif, serif…
Mỗi font được ngăn cách nhau bởi dấu phẩy (,). Theo đó, thì font đầu tiên được liệt kê trong danh sách sẽ được dùng để hiển thị trang web, nếu như trên máy chưa có font này thì font thứ hai trong danh sách sẽ được ưu tiên…, cho đến khi chọn được font có trong danh sách.
Chú ý: Đối với các font có tên nhiều hơn 1 từ như Times New Roman cần được đặt trong dấu ngoặc kép “”.
Ví dụ: chúng ta khai báo font sử dụng cho toàn bộ trang như sau:
1 | body{ font-family: Arial, "Times New Roman", Tahoma, serif; } |
2. Thuộc tính font-style:
Thuộc tính font-style định nghĩa việc áp dụng các kiểu in thường (normal), in nghiêng (italic) hay xiên (oblique) đối với font hiện tại.
Trong ví dụ bên dưới chúng ta sẽ áp dụng kiểu in nghiêng cho thành phần h1 và kiểu xiên cho h2.
Trong ví dụ bên dưới chúng ta sẽ áp dụng kiểu in nghiêng cho thành phần h1 và kiểu xiên cho h2.
h1 { font-style:italic }
h2 { font-style:oblique }
3. Thuộc tính font-variant
Hiển thị với thuộc tính small-caps
Thuộc tính font-variant được dùng để thay đổi kiểu hiển thị thông thường thành kiểu small-caps của một font.
Một font small-caps là một font sử dụng chữ in hoa có kích cỡ nhỏ hơn ở dạng in hoa chuẩn để thay thế những chữ in thường
4. Thuộc tính font-weight:
Thuộc tính font-weight mô tả cách thức thể hiện của font chữ là ở dạng thường hay in đậm. Mặc định khi không khai báo thì font chữ hiển thị ở dạng thường. Các giá trị của thuộc tính font-weight:
§ normal: hiển thị ở dạng thường (mặc định)
§ bold: hiển thị ở dạng in đậm
Đoạn mã sau quy định thành phần p có class=”bold” hiển thị dạng in đậm:
1 | p.bold{ font-weight: bold } |
Đoạn văn bản này được hiển thị ở dạng in đậm khi khai báo thuộc tính font-weight với giá trị bold.
Một số trình duyệt hỗ trợ mô tả độ in đậm bằng các con số từ 100 – 900.
5. Thuộc tính font-size:
Thuộc tính font-size quy định kích cỡ font chữ của một thành phần nào đó. Đoạn mã sau quy định kích cỡ chung cho cho toàn bộ trang web là 14px:
1 | body{ font-size: 14px } |
Đoạn văn bản này có kích cỡ là 15px khi áp dụng thuộc tính font-size: 15px
Cách viết tắt đối với thuộc tính font
Cũng giống như thuộc tính border, background chúng ta cũng có thể viết tắt đối với thuộc tính font như sau:
h1 { font-style: italic; font-variant:small-caps; font-weight: bold; font-size: 12px; font-family: arial,verdana,sans-serif; }
Cấu trúc viết tắt cho thuộc tính font như sau:
font :[font-style] [font-variant] [font-weight] [font-size] [font-family]
Nếu bạn thấy bài viết hữu ích, hãy nhấn +1 và các liên kết chia sẻ để website ngày càng phát triển hơn. Xin cám ơn bạn!
Nguồn: WWW.IBM.COM
No comments:
Post a Comment