Friday, September 14, 2007

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

Đăng ký dịch vụ lưu trữ đám mây: Dropbox, Mediafire, OneDrive. Sau khi đăng ký xong, cài đặt phần mềm cho Windows hoặc ứng dụng điện thoại - máy tính bảng để đồng bộ dữ liệ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.

Tham gia Cộng đồng sử dụng Blogger Việt Nam trên Facebook, giải đáp thắc mắc, mẹo vặt, chia sẻ kinh nghiệm sử dụng Blogger (BlogSpot)...

7 comments:

  1. her her! bài vít sai kìa bạn. #000000 là màu đen ko fải màu trắng đâu.

    ReplyDelete
  2. @anonymous, cám ơn. Tôi đã cập nhật lại. Nhiều khi đánh chữ mà không kiểm tra lại nên sai là ... chuyện thường.

    ReplyDelete
  3. cái này hay quá. mình đang cần mấy cái này để làm font blog đẹp hơn này. Mà liệu có thể thêm những font chữ đẹp đẹp như font cheri , copleted in him dc ko :D

    ReplyDelete
  4. Mình đã xem blog của bạn nhiều lần, đã chỉnh sữa template nhưng từ khi chuyển sang tên miền tùy chỉnh thì site không hiển thị tốt trong IE, banner và nút link bi mất. trong khi trước đó (chưa đỗi tên miền) nó vẫn OK trong cả 2 trình duyệt.Giờ không biết giải quyết sao nũa. site www.hocpsd.com/

    ReplyDelete
  5. minh da tham khao cac bai viet cua ban.nhung no chi van dung cho cac mau blogger co san..ko the van dung neu nhu ta thay doi giao dien khac

    ReplyDelete
  6. mình có 1 đoạn css thế này . admin có thể tối ưu cho mình được không vì nó làm cho trình duyệt tải chậm hơn

    * html button.button2,* html input.button2{padding-bottom:0;margin-bottom:1px;height:24px;padding-right:3px;padding-left:3px}*+html button.button2,*+html input.button2{height:24px;padding-right:3px;padding-left:3px}*+html button.button2 img{vertical-align:middle}* html button.button2 img{vertical-align:middle}button.bbcode{border:1px solid #e3adad

    email mình là majquang@gmail.com

    ReplyDelete

Cám ơn đã đọc bài viết. Bạn có thắc mắc, gợi ý hoặc bình luận xin chia sẻ bên dưới. Hãy viết bằng tiếng Việt có dấu để mọi người dễ đọc hơn. Xin đừng spam!

Do gần đây nhận rất nhiều spam bán thuốc từ nước ngoài, tạm thời để bình luận bạn bắt buộc phải có tài khoản OpenID hoặc Google. Chức năng này sẽ được khôi phục khi trình trạng spam được cải thiện. Xin lỗi về sự bất tiện này.