Kỹ năng CSS liên quan đến text dành cho việc chỉnh sửa Template (Mẫu)

Blogger cho phép bạn tự thay đổi mã nguồn và bất kỳ yếu tố nào mình muốn. Để chỉnh sửa thành công bạn phải am hiểu được những gì mình cần làm và ý đồ mình muốn thực hiện. Để làm chủ được Template (Mẫu) của Blogger, sau bài viết về margin và padding, bài viết này cung cấp cho bạn một số kỹ năng về CSS liên quan đến text có trong mã nguồn Template (Mẫu).

FONT CHỮ

Như đã biết, một vài Template của Blogger không hiển thị đúng tiếng Việt của chúng ta. Vậy thì làm thế nào để khắc phục? Bạn có thể đọc bài viết trước đây để khắc phục. Tuy nhiên hôm nay chúng ta sẽ làm theo một cách khác: Sửa trực tiếp từ Edit HTML (Chỉnh sửa HTML). Đăng nhập Blogger.com, vào Template (Mẫu), chọn Edit HTML (Chỉnh sửa HTML), kéo thanh trượt và bạn quan sát dòng (Ở đây là ví dụ):

<variable name="bodyfont" description="Text Font" type="font" default="normal normal 100% Georgia, Serif" value="normal normal 100% Verdana, sans-serif">
<variable name="headerfont" description="Sidebar Title Font" type="font" default="normal normal 78% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif" value="normal normal 78% Arial, sans-serif">
<variable name="pagetitlefont" description="Blog Title Font" type="font" default="normal normal 200% Georgia, Serif" value="normal normal 200% Verdana, sans-serif">
<variable name="descriptionfont" description="Blog Description Font" type="font" default="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif" value="normal normal 78% Arial, sans-serif">
<variable name="postfooterfont" description="Post Footer Font" type="font" default="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif" value="normal normal 78% Verdana, sans-serif">

Trong đó:

bodyfont: Font bài đăng
headerfont: Font tiêu đề
pagetitlefont: Font tên blog
descriptionfont: Font miêu tả blog
postfooterfont: Font footer

default là giá trị mặc định được người thiết kế Template chọn, value là giá trị hiện thời mà blog bạn sử dụng. Để hiển thị được tiếng Việt có dấu bạn phải dùng một trong các font này: Verdana, Times, Arial. Trong ví dụ trên, giá trị mặc định của headerfont: normal normal 78% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif lần lượt là font-style, font-weight, font-size, font-family. Đây là dạng viết tắt của các thuộc tính font trong CSS.

Tên của biến này được dùng ở nhiều vị trí nên người ta đã định nghĩa nó ở phía trên và sử dụng dùng cho một thành phần nào đó phía dưới, dấu $ được thêm vào trước tên biến phía trước chẳng hạn #header h1{ font: $pagetitlefont;}. Tương tự như vậy bạn thấy $descriptionfont, $postfooterfont,..

MÀU CHỮ

Giống như font chữ, thuộc tính màu chữ cũng được tạo bằng các biến. Bạn có thể dùng trang web hay link này hoặc chọn từ đây để lấy mã màu cho blog của mình.

bgcolor: Màu nền
textcolor: Màu chữ
linkcolor: Màu link
pagetitlecolor: Màu tên blog
descriptioncolor: Màu miêu tả blog
titlecolor: Màu tiêu đề bài đăng
bordercolor: Màu đường viềng
sidebarcolor: Màu tiêu đề trên sidebar
sidebartextcolor: Màu chữ trên sidebar
visitedlinkcolor: Màu link đã đọc


Cú pháp

color: #sáu_ký_tự;

Ví dụ: Màu trắng

color:#ffffff;

KÍCH THƯỚC CHỮ

font-size: từ_khóa;

Các từ khóa xx-small, x-small, small, medium, large, x-large, và xx-large lần lượt cho kích thước từ nhỏ đến lớn. Ví dụ: font-size: medium;

Ở đây người tạo Template đã dùng %. Ví dụ: font-size: 200%;

NÉT CHỮ

font-weight: từ_khóa;

Các số từ 100 -> 900 thể hiện nét chữ nhạc nhất đến đậm nhất. Ngoài ra bạn có thể dùng các từ khóa: normal (400), bold (700), bolder (900) và lighter (100). Ví dụ: font-weight: bolder;


KIỂU CHỮ

font-style: từ_khóa;

Các từ khóa normal, italic lần lượt cho các kiểu chữ bình thường (mặc định), nghiêng,

VỊ TRÍ CHỮ

text-align: từ_khóa;

Các từ khóa left, right, center, justify lần lượt dùng để canh vị trí trái phải, giữa hoặc đều cả hai bên cho chữ hoặc văn bản.

TRANG TRÍ TEXT

text-decoration: từ_khóa;

Các từ khóa none, underline, overline, line-through lần lượt dùng để xóa thuộc tính gạch dưới cho liên kết, gạch dưới, gạch trên đầu, và gạch ngang qua text.


CHUYỂN DẠNG CHỮ

text-transform: từ_khóa;

Các từ khóa capitalize, uppercase, lowercase, hoặc none lần lượt chuyển văn bản sang viết hoa ký tự đầu, viết hoa, viết thường hoặc bình thường. Ví dụ: Tại header (với các template có header) bạn sẽ thấy: text-transform: uppercase;

KHOẢNG CÁCH GIỮA CÁC DÒNG
(Trong MS Word là line spacing)

line-height: giá_trị;

Giá trị là số, chiều dài hoặc %. Ví dụ: ….

KHOẢNG CÁCH GIỮA CÁC TỪ
(Ví dụ: Hello là một từ)

word-spacing: giá_trị;

Chúc bạn chỉnh sửa thành công.