Các kiến thức cơ bản về thiết kế/chỉnh sửa giao diện/skin/theme Yahoo! Blog (Phần 2)


Trong bài viết trước, Béo đã chia sẻ một vài hướng dẫn và kiến thức cơ bản về thiết kế/chỉnh sửa giao diện/skin/theme cho Yahoo! Blog. Trong bài viết này, Béo xin tiếp tục chia sẻ thêm một vài kiến thức nâng cao hơn chút xíu – về CSS, đồng thời chia sẻ một vài mã CSS cơ bản cần thiết. Cụ thể trong bài viết này chúng ta sẽ có các nội dung sau:

*HƯỚNG DẪN/CHIA SẺ CÁCH THIẾT KẾ TÙY CHỈNH SKIN/THEME YAHOO! BLOG

:

PHẦN II: Giới thiệu về mã/code CSS và chia sẻ một số mã/code CSS dùng để thay đổi giao diện cơ bản của Yahoo! Blog.

A. CÁC KIẾN THỨC CƠ BẢN:

1. CSS là gì?

CSS là chữ viết tắt của Cascading Style Sheets (Định kiểu/phong cách tầng/bảng). Trong Style Sheet này chứa những câu lệnh dùng để định dạng hiển thị của một trên trang web/blog. Ví dụ như: định dạng hiển thị font của chữ, màu chữ, đường viền, màu nền, căn chỉnh hình ảnh v.v..

Như việc dùng phấn, son cho để make-up của các bạn nữ, CSS cũng được dùng tương tự để trang điểm và chỉnh sửa việc hiển thị của một website/blog vậy. Đây chi là một định nghĩa vui của Béo thôi. Nhưng nôm na là vậy đấy các bạn ạ. 
Các bạn có thể vào bài viết http://vi.wikipedia.org/wiki/CSS để tìm hiểu rõ hơn về CSS nếu thích.


Mô phỏng 3D các lớp/tầng định kiểu (CSS) trong Yahoo! Blog

© Cậu ấm thơ ngây

2. Làm thế nào để sử dụng CSS trong Yahoo! Blog?

Trong platform mới này của Yahoo! 360plus, để đơn giản hóa và thuận tiện hơn cho người dùng, Yahoo! đã bỏ đi phần tùy chỉnh giao diện (skin/theme) của blog qua việc sử dụng mã CSS tùy chỉnh của người dùng (custom user css) trực tiếp trên blog. Tuy nhiên, chúng ta vẫn có thể chỉnh sửa được giao diện của blog thông qua mã CSS bằng cách nhúng mã CSS vào trong các phần mở rộng (tiện ích widget). Chi tiết việc nhúng CSS vào blog thông qua các phần mở rộng các bạn đọc ở bài viết phía dưới nhé! ^^

>>> Hướng dẫn sử dụng mã/code CSS để thiết kế/chỉnh sửa giao diện Yahoo! Blog

B. CHIA SẺ MỘT SỐ MÃ CODE CSS CƠ BẢN TRONG YAHOO! BLOG:

1. Mã/Code CSS thay nền/background cho Yahoo! Blog:

Trong Yahoo! Blog, chúng ta có 1 lớp/tầng nền móng và một tầng nền phủ toàn bộ phần hiển thị của blog. Đó là lớp/tầng định dạng HTML (Phần nền móng) và tầng định dạng BODY (phần nền phủ). Các bạn có thể xem phần hình minh họa phía dưới.


Mô phỏng 3D minh họa phần nền móng HTML và nền phủ BODY của Yahoo! Blog

Mã/code CSS thay nền cho Yahoo! Blog:

a.Thay nền phần nền móng HTML:

html { background-image: url(link ảnh nền); }

b. Thay phần nền phủ BODY:

body { background-image: url(link ảnh nền); }

Vì chúng ta có 2 lớp phủ toàn bộ ngôi nhà của chúng ta. Vì vậy chúng ta có thể tùy thích sử dụng hoặc là thẻ HTML hoặc là thẻ BODY để thay đổi nền cho toàn bộ trang. Hoặc nếu các bạn thích chơi sành điệu hơn nữa thì chúng ta có thể dùng kết hợp cả 2 thẻ định dạng này để tạo hiệu ứng chồng lớp: Dùng thẻ định dạng HTML làm nền, và dùng thẻ BODY để tạo thêm một hiệu ứng như lá bay, tuyết rơi hoặc mưa sao rơi cho blog thêm lung linh hơn.

>>> Hướng dẫn tạo hiệu ứng mưa rơi, tuyết rơi, lá bay,… trên nền/background Yahoo! Blog

*Lưu ý: Vì CSS là định kiểu dạng xếp chồng nên thuộc tính/định kiểu của các lớp phía trên sẽ che định kiểu của lớp phía dưới. Cũng giống như các bạn trang điểm vậy, các lớp nền sẽ nằm dưới cùng và lớp phấn son phía trên sẽ đè lên, che bới lớp nền đi. Vì vậy các bạn chú ý khi sử dụng nha. ^^

2. Thuộc tính – Mã/code CSS cố định ảnh nền (tạo hiệu ứng ảnh nền đứng yên khi cuộn chuột):

Để cố định ảnh nền chúng ta sử dụng thuộc tính: background-attachment: fixed;

Cụ thể nếu bạn chọn thẻ thuộc tính HTML để dựng ảnh nền thì ta sẽ có mã code sau:

_______________

html {

background-image: url(link ảnh nền); 
background-attachment: fixed;
}

hoặc viết giản lược (short-hand) lại như sau:

html {

background: url(link ảnh nền) fixed;
}

_____________

Tương tự với thẻ DODY

body {

background-image: url(link ảnh nền); 
background-attachment: fixed;
}

hoặc viết giản lược (short-hand) lại như sau:

body{

background: url(link ảnh nền) fixed;
}

____________

Ngoài các thuộc tính background-image và background-attachment Béo xin giới thiệu thêm đến các bạn một số thuộc tính khác được dùng để định dạng ảnh nền như:

  • background-color: #Mã màu – Dùng để định dạng màu nền cho trang. Nếu các bạn muốn có một nền/back ground trong suốt thì chúng ta chọn mã: transparent cho thuộc tính background-color. Cụ thể là: background-color:transparent;
  • background-repeat: (Giá trị) – Dùng để định dạng việc lặp của ảnh nền. Chúng ta có 4 giá trị cho thuộc tính background-repeat đó là:
    • repeat-x : Lặp theo trục hoành – chiều ngang
    • repeat-y : Lặp theo trục tung – chiều dọc
    • repeat : Lặp về tất cả các phía
    • no-repeat : Không lặp lại.

Ví dụ: background-repeat: repeat-x; /*Lặp hình theo trục hoành */

  • background-position: (Giá trị) – Được dùng đẻ xác định vị trí hình ảnh nền cho thành phần.
    Được sử dụng kèm với giá trị background-image. Chúng ta có tất cả
    • left : Canh trái khi hiển thị ảnh nền
    • right :Canh phải khi hiển thị ảnh nền
    • top : Canh trên xuống khi hiển thị ảnh nền
    • bottom : Canh dưới lên khi hiển thị ảnh nền.
    • center: Canh giữa khi hiển thị ảnh nền.
    • px : Canh khoảng theo pixel
    • % : Tỉ lệ hình ảnh được hiển thị

Vì có khá nhiều thuộc tính nếu để trình bày tất cả ra thì mã CSS của chúng ta sẽ có dung lượng khá lớn ảnh hưởng tới tốc độ load trang (và cả tốc độ lập trình nữa) vì vậy nên chúng ta có một cấu trúc rút gọn (viết short hand) cho thuộc tính background như sau:

*Cấu trúc rút gọn cho nhóm background:

background: | | | |

Ví dụ: html { background: transparent url(linkảnh) repeat fixed center top; }

3. Hướng dẫn/ Cách tạo hiệu ứng tuyết rơi, lá bay trên toàn blog:

Vào những ngày nóng nực đầu hè như thế này mà vào blog thấy mưa bay baytuyết rơi rơi thì thích lắm phải không các bạn?

Như mình đã chia sẻ ở phàn hướng dẫn phía trên thì việc tạo hiệu ứng mưa rơi rơi, sao rơi rơi, lá bay bay, tuyết bay bay hay trái tim rụng lã chã,… trên một background/ nền trong Yahoo! Blog thực chất là việc chồng lớp của 2 hình ảnh: Hình ảnh hiệu ứng mưa rơi, tuyết rơi,.. nằm trên lớp hình ảnh nền/back ground. Chi tiết về các tạ hiệu ứng tuyết rơi, mưa rơi, lá bay, sao bay,… các bạn đọc ở bài viết phía dưới nhé! ^^

>>> Tạo hiệu ứng mưa rơi, tuyết rơi, lá bay,… trên nền/background Yahoo! Blog

________________________

Nếu thấy thích các nội dung trong blog Béo thì hãy kết bạn với Béo bằng cách click ngay nút thêm bạn phía dưới hình đại diện của Béo và để lại cmt cho Béo để béo thêm bạn lại nha. 

Đừng quên ghé thăm blog Béo mỗi ngày để cập nhập thêm các thông tin và các bài hướng dẫn/chia sẻ mẹo nhỏ/ thủ thuật để chỉnh sửa/ tùy biến Yahoo! Asia Blog nhé. 

Mọi ý kiến đóng góp hoặc thắc mắc, các bạn có thể gửi về địa chỉ e-mail: info@yeuxa.com hoặc gửi vào phần bình luận ở cuối bài viết. Béo sẽ trả lời lại các bạn ngay khi có thể. 

Chúc các bạn ngủ ngon, chào thân ái và quyết thắng 

Trích từ blog:
http://blog.yahoo.com/cauamthongay/articles/146073/index