Yahoo! Mash là gì? Kiến thức cơ bản về CSS dành cho việc chỉnh sửa hồ sơ ở Yahoo! Mash

Thời gian vừa qua sự việc diễn viên tuổi teen Hoàng Thùy Linh đóng phim XXX đã làm xôn xao cộng đồng Blogger Việt Nam, các diễn đàn cũng như một số trang web đưa tin nóng xoay quanh vụ scandal này. Sự tai tiếng rồi cũng sẽ qua, hãy tha thứ cho người có lỗi và chúng ta lại tiếp tục cuộc sống học tập hay lao động thường nhật. Hôm nay tôi giới thiệu với các bạn một vài kiến thức về CSS dùng để chỉnh sửa style của bạn ở Yahoo! Mash.

Yahoo! Mash là gì?

Cái tên Yahoo! Mash ngày càng được nhiều người biết đến sau khi hãng Yahoo! chính thức công bố sẽ đóng cửa Yahoo! 360 và công bố sẽ phát triển một dịch thay thế Yahoo! 360 vào đầu năm tới. Đây quả là tin buồn cho cộng đồng blogger Việt Nam quen thuộc và thích sự đơn giản của Yahoo! 360. Yahoo! Mash hứa hẹn cung cấp nhiều tính năng nổi bậc kế thừa từ các mạng xã hội khác như MySpace, Facebook,... bên cạnh các tính năng kết nối giữa những người dùng từ Yahoo! 360. Yahoo! Mash hứa hẹn sẽ trở thành mạng xã hội ảo cạnh tranh với những tên tuổi nổi bậc khác trên thế giới, trong khi đó tại Việt Nam đây sẽ là cái tên thống trị cộng đồng ảo bởi sự phổ biến, áp đảo của số lượng người dùng các dịch vụ Yahoo! khác (Yahoo! Mail, Yahoo! Messenger, Flickr...).

Chỉnh sửa giao diện chính ở Yahoo! Mash thông qua CSS

Yahoo! Mash đang trong quá trình hoàn thiện và bố sung nhiều module khác vì vậy bài viết về các tính năng tôi xin hẹn lại thời gian tới. Bây giờ chúng ta sẽ tìm hiểu cách chỉnh sửa hồ sơ ở Yahoo! Mash thông qua một số kiến thức về CSS. Đây là thay đổi chính làm cho Yahoo! Mash của bạn không giống với bất cứ người nào. Các thay đổi này liên quan đến: màu nền, hình nền, màu đường viền, kiểu đường viền,...

THAY ĐỔI BẰNG KHUNG ĐIỀU CHỈNH

Sau khi đăng nhập Yahoo! Mash (http://mash.yahoo.com) bạn chọn thực đơn My Profile và tìm module Style this profile để tiến hành chỉnh sửa. Nói thêm về khái niệm module. Yahoo! Mash quản lý từng dịch vụ riêng biệt. Mỗi khung trên hồ sơ đảm nhận một dịch vụ riêng do người lập trình viết gọi là module, có thể kéo thả đến vị trí khác. Ví dụ dưới đây là một module dùng để ấy ảnh từ Flickr.

Bây giờ chúng ta làm quen với khung chỉnh đơn giản này, nhập hoặc lựa chọn thông tin từng mục:

1. Hình nền

Background Image URL: Nhập link đến hình (Có thể lưu hình này ở các trang chia sẻ ảnh trực tuyến). Ở đây định dạng hình ảnh không ghi rõ, như vậy bạn không bị giới hạn ảnh phải là .jpg như ở Yahoo! 360. Đây quả là tin vui cho những ai thích dùng ảnh động (ảnh có phần mở rộng .gif).

Kế bên liên kết đến hình bạn chọn thuộc tính ở thực đơn xổ xuống. Trong đó:

- Tile: Hình ảnh lặp đầy màn hình (Thích hợp cho hình nền có kích thước nhỏ, hình ảnh sẽ lặp lại lắp đầy cửa sổ trang)

- Center: Hình ảnh nằm giữa màn hình (Thích hợp cho hình nền có kích thước đúng kích thước chuẩn, kích thước được dùng nhiều nhất 1024 x 768 pixels, hình ảnh chỉ hiện thị một lần)

- Bottom: Hình ảnh dưới màn hình (Thích hợp cho hình nền có kích thước ngang đúng kích thước chuẩn, kích thước ngang được dùng nhiều nhất 1024 pixels, hình ảnh chỉ hiện thị một lần)

- Top: Hình ảnh trên màn hình (Thích hợp cho hình nền có kích thước ngang đúng kích thước chuẩn, kích thước ngang được dùng nhiều nhất 1024 pixels, hình ảnh chỉ hiện thị một lần)

Fixed position: Cố định vị trí hình nền, nghĩa là hình nền sẽ đứng yên khi bạn kéo chuột lên xuống.

2. Màu sắc: Nhập hoặc click vào ô kế bên để chọn giá trị màu

Module Color: Màu nền của module

Font Color: Màu chữ

Border Color: Màu đường viền

Link Color: Màu link

THAY ĐỔI BẰNG MÃ LỆNH

Chưa dừng lại, bạn có thể thay đổi chúng bằng CSS nâng cao khi click vào show advanced CSS. Khung ở chế độ này sẽ hiển thị như hình. Bạn đưa vào đây các đoạn mã ở hướng dẫn dưới, nhấn Preview để xem trước, Apply hay Cancel để sử dụng hay hủy bỏ. Click switch to basic mode quay lại như cách thay đổi trên.

Đây là đoạn mã sử dụng hình nền:

body {
background-color: #giá_trị_màu_thập_lục;
background-image: url(liên_kết_đến_hình_ảnh);
background-repeat: từ_khóa_lặp;
background-position: từ_khóa_canh_dọc từ_khóa_canh_ngang;
background-attachment: từ_khóa;
}

Giải thích:

background-color (màu nền), background-image (hình nền), background-repeat (hình nền lặp), background-position (vị trí hình nền), background-attachement (cố định kiểu nền)

giá_trị_màu_thập_lục: sáu ký tự giá trị màu, bạn có thể lấy từ bài viết này hay trang web www.colorschemer.com
liên_kết_đến_hình_ảnh: liên kết đến ảnh
từ_khóa_lặp: repeat (lặp), repeat-y (lặp dọc), repeat-x (lặp ngang), no-repeat (không lặp)
từ_khóa_canh_dọc: top(trên), center(giữa), bottom(dưới)
từ_khóa_canh_ngang: left(trái), center(giữa), right(phải)
từ_khóa: scroll (cuộn), fixed (cố định)

Đây là đoạn mã sử dụng tên hay tiêu đề của module

.mod .hd h3 {
font-family: font_chữ;
color: #giá_trị_màu_thập_lục;
font-weight: kiểu_chữ;
font-size: kích_thước_chữ;
}

Giải thích:

font-family (font chữ), color (màu chữ), font-weight (kiểu chữ), font-size (kích thước chữ)

font_chữ: Hãy dùng một trong các font: Arial, Vernada, Times, Tahoma để hiển thị tiếng Việt
kiểu_chữ: bold (đậm), italic (nghiêng)
kích_thước_chữ: Hãy dùng giá trị phần trăm để hiển thị kích thước lớn hay nhỏ hơn so với bình thường. Ví dụ: 200%.

.mod {
background: #giá_trị_màu_thập_lục;
border: giá_trị_đậm_nét_của_đường_viềnpx kiểu_đường_viềng #giá_trị_màu_thập_lục;
font-family: font_chữ;
color: #giá_trị_màu_thập_lục;
font-size: kích_thước_chữ;
}

Giải thích:

Background (màu nền), các thuộc tích khác tương tự như trên. Riêng với đường viền (border) như sau:

giá_trị_đậm_nét_của_đường_viền: hay đơn vị điểm ảnh của màn hình, là độ dày hay mỏng của đường viền, thường bạn sẽ dùng 1, 2, 3 hay nhiều hơn. Nếu không dùng thì hãy bỏ đi, nhưng hồ sơ của bạn sẽ trông xấu gớm!

kiểu_đường_viền: dotted (kiểu chấm), dashed (kiểu gạch), solid (kiểu liền nét)

Ngoài ra bạn còn có thể bổ sung thêm text-align(canh vị trí text), line-height (khoảng cách giữa các dòng), word-spacing (khoảng cách giữa các từ)

text-align: từ_khóa;
line-height: giá_trị_đơn_vị_điểm_ảnh_màn_hình;
word-spacing: giá_trị_đơn_vị_màn_hình;

Giải thích:

từ_khóa: left(trái, mặc định), center(giữa), right(phải)
giá_trị_đơn_vị_điểm_ảnh_màn_hình: giá trị pixel

Lưu ý: Bạn có thể sử dụng hình nền cho các module bằng cách chèn đoạn mã liên quan đến hình nền tương tự như trên. Khi đó, bạn chỉ cần dùng màu nền cho hồ sơ (background-color) là đủ.

Ví dụ về một CSS hoàn chỉnh của một hồ sơ:

body {
background-color: #47a4ab;
background-image: url(http://img.avatars.yahoo.com/users/1ZWtxUv09AAEBWIE_sI82IrgQ17UE.large.jpg);
background-repeat: repeat;
background-position: center;
background-attachment: fixed;
}

.mod .hd h3 {
font-family:Arial, sans-serif;
color:#ffff00;
font-weight: bold;
font-size:150%;
}

.mod {
background:#9de0f1;
border:1px solid #ff00ff;
font-family: Vernada, sans-serif;
color:#000000;
text-align: right;
font-size:105%;
}

Yahoo! Mash hiện đang ở phiên bản thử nghiệm, để dùng thử bắt buộc bạn phải có người mời. Hãy để lại địa chỉ email của bạn dưới comment của bài viết này hoặc gửi thư đến dv2n@yahoo.com tôi sẽ gửi invitation cho bạn. Ngoài ra nếu bạn sử dụng lại bài viết của tôi đề nghị ghi rõ nguồn gốc. Đó là cách tôn trọng công sức của tác giả cũng như tôn trọng chính bạn. Thêm vào đó bạn có thể đăng ký nhận các bài viết cập nhật qua email nằm bên góc trái trên cùng.

Chúc bạn một ngày vui.

Dropbox, dịch vụ lưu trữ đám mây, chia sẻ và đồng bộ dữ liệu giữa điện thoại di động, tablet, laptop và desktop. Tài khoản miễn phí 2.25GB! Bạn có thể kiếm thêm tối đa đến 18GB khi giới thiệu thêm người đăng ký Dropbox (mỗi người mà bạn giới thiệu đăng ký và cài đặt thành công Dropbox, bạn được 500MB!)