Bim’s Blog

Just another WordPress.com weblog

[Yahoo! Mash] Hướng dẫn cơ bản về CSS

Posted by bimx5 on October 9, 2007

Bài viết tiếp theo là một hướng dẫn nhỏ về CSS trong Yahoo! Mash. Các đoạn dùng font chữ Courier có kích thước nhỏ hơn là các đoạn mã CSS và giá trị của nó.

8.10.2007

Bạn là một người mới tiếp cận CSS nhưng rất muốn trang trí thêm cho trang Mash của mình? Bạn đã biết sự khác nhau giữa nền và đường viền chưa? Đừng lo lắng, bởi vì đã Leslificationifier ở đây (nghe giống quảng cáo thuốc diệt muỗi ghê ). Tôi sẽ cung cấp một số trợ giúp về CSS để mọi người có thể tự làm trang Mash riêng cho chính mình. Tất cả công việc của bạn cần làm chỉ là copy & paste nó vào ô Advanced CSS trong module Style this profile.

Thêm ảnh nền vào Mash

Để thêm ảnh nền vào Mash, trước tiên bạn cần một ảnh có trên web. Xem hướng dẫn tại đây: http://www.nthsite.com/forum/showthread.php?t=8

Giả sử đường dẫn sau khi upload hình ảnh ở phần 4 của bài hướng dẫn trên là http://img528.imageshack.us/img528/5694/newsnapshotfs6.jpg, thì bạn sẽ có đoạn code như sau

body {
   background-color:#FFFFFF;
   background-image:url(http://img528.imageshack.us/img528/5694/newsnapshotfs6.jpg);
   background-repeat:no-repeat;
   background-position:left bottom;
}

Mẫu CSS trên cho bạn một trang có màu nền trắng (#FFFFFF) và thêm hình ảnh vào phía dưới bên trái của trang. Ảnh nền của bạn sẽ không được lặp lại (no-tile) do lệnh (no-repeat). Rõ ràng, tất cả những thông số này đều có thể được thay đổi để có những hiệu quả khác nhau. Bạn có thể sử dụng 1 ảnh nhỏ, nhưng cho nó lặp lại (tile) toàn trang Mash bằng cách đổi no-repeat thành repeat. Nếu muốn nó lặp theo hàng chứ không phải từ trên xuống dưới, hãy đổi no-repeat thành repeat-x. Đổi thành repeat-y nó sẽ lặp theo cột dọc.

Muốn đổi màu nền? Chỉ cần đổi #FFFFFF thành một giá trị hex 6 ký tự khác, ví dụ #000000 (màu đen). Bạn có thể tra cứu màu sắc tại đây: http://www.seoconsultants.com/css/colors/web/safe/

Nếu muốn hình nền đứng yên trong quá trình kéo trang lên xuống bằng thanh cuộn. Hãy thêm đoạn mã sau vào trước dấu }.

background-attachment:fixed;

Tạo màu sắc cho module

Mash được cấu tạo từ những module. Thế nên sao chúng ta không “trang điểm” cho nó một chút:

.mod {
   background:#ccffff;
   border:1px dotted #ff00ff;
}

Đoạn CSS trên làm cho các module của bạn có màu n
ền là màu cây Oải Hương (cây gì ngộ phế @.@) với giá trị
#ccffff và có viền chấm, rộng 1 pixel có màu của cây hoa Vân Anh (1px dotted #ff00ff). Tương tự phần trên, nếu không thích, bạn có thể thay đổi giá trị hex để chọn những màu sắc khác cho màu nền lẫn màu viền của module. Nếu thích đường viền liền mảnh, thay thế dotted bằng solid. Hoặc đường viền dày hơn với giá trị 2px hoặc 3px.

Thay đổi font chữ

Đây là đoạn CSS bạn cần nếu muốn thay đổi font chữ của headline (tên) và body (nội dung) của các module.

.mod .hd h3 {
   font-family:Impact, Comic Sans MS, sans-serif;
   color:#00ff00;
}
.mod {
   font-family:Georgia, serif;
   color:#ff0000;
}

Hãy cẩn thận, không phải mọi font đều có thể hiển thị đúng trên mọi trình duyệt. Ví dụ, tôi không thể xem được font Impact trên trình duyệt Safari. Thay vào đó, tôi sẽ thấy sự lựa chọn tiếp theo trong danh sách: Comic Sans MS.

Trong bài viết tiếp theo, tôi sẽ giúp bạn thêm những hiệu ứng đặc biệt hơn vào Mash.

Stay tuned!

Leslie

October 8, 2007 @ 9:53 am

7 Responses to “[Yahoo! Mash] Hướng dẫn cơ bản về CSS”

  1. qua blog tao kìa, tao để css bên đó xài cũng hay😀

  2. Mr.Bim said

    Hướng dẫn mà mày😀

  3. David® said

    cũng hay đấy
    bổ ích cho cộng đồng.
    tôi cũng thường làm những việc này.
    chúc may mắn khi mỗi ngày mới bắt đầu.

  4. to’ chi~ thay’ cai tro` Mash na`y vo’ vi~n qua’
    >.<

  5. Mr.Bim said

    Vớ vẫn gì chứ @.@

  6. e ne co gang thu thap them nhieu nhieu may cai bai viet ve yahoo mash nhe vi no that su rat bo ich 7 can thiet nhat la cho toi hien gio dang xai nhung van con 1 so cai chua hieu mong dan pro nhu chu em chi day them

  7. Mr.Bim said

    Chỉ là thông tin trên mạng rồi dịch lại thôi anh, có pro gì đâu😀

    Còn 2 bài nữa chưa post lên, đầu tuần bận quá. Chắc cuối tuần mới gửi đc ^^

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: