Trước hết, bạn hãy xem demo một trang sử dụng CSS để chỉnh sửa giao diện: http://vnvista.com/i-shine (hãy xem từ đầu tới cuối trang, thử rê chuột lên link tiêu đề các bài viết...) Blog này dùng skin VnVista Lolita, và trong phần ẩn ở dưới là đoạn mã CSS mà blog này sử dụng:
Blog ở VnVista cho phép bạn sử dụng CSS để chỉnh sửa giao diện. Với CSS bạn có thể thay đổi hầu hết các phần giao diện của bạn, từ ảnh nền, màu link, cỡ chữ, font chữ, thanh trượt, con trỏ cho tới kích thước các phần trên trang web. Bài này sẽ giới thiệu một số đoạn CSS để chỉnh sửa một số phần dễ nhìn thấy nhất trên blog bạn. Nếu chưa biết CSS thì bạn có thể dựa vào những đoạn mã này để chỉnh sửa các phần khác của blog, vì CSS (Cascading Style Sheet) đơn giản chỉ là những dòng lệnh quy định giao diện của một trang web và rất dễ học.
Để nhập CSS cho blog của bạn, hãy vào Thiết lập chính cho blog trong Bảng điều khiển của bạn rồi tìm dòng sau:
QUOTE
Nếu bạn muốn chỉnh sửa thêm giao diện blog với CSS, hãy click vào đây
Click vào link ở dòng này để mở khung nhập CSS.
-------oOo-------
Ok, should be ready now. Đầu tiên chúng ta sẽ thử thay đổi thanh trượt của blog (trong IE) bằng cách nhập đoạn mã sau vào khung CSS:
Sau khi click OK để cập nhật thiết lập, giờ bạn hãy thử vào lại blog bạn để xem thay đổi (nếu thấy mọi thứ vẫn như cũ thì bạn hãy nhấn F5 để refresh trang web - cả với những phần chỉnh sửa sau cũng vậy). Bạn có thấy một thanh trượt mới?
Bạn có thể download một ứng dụng nhỏ (flash) để tạo thanh trượt với màu sắc theo ý mình tại đây. Khi chạy chương trình và tạo được một thanh trượt như ý rồi, bạn hãy copy đoạn mã CSS ở giữa mà chương trình tạo ra từ body { ...cho tới... } - bỏ hai dòng :
CODE
<style type="text/css"> <!--
và
CODE
--> </style>
ở đầu và cuối đi. Dán đoạn mã này vào khung CSS cho blog của bạn là ok.
Vậy là xong cái thanh trượt. Như các bạn thấy đấy, CSS không có gì là phức tạp cả. Tiếp theo chúng ta sẽ chỉnh sửa ảnh nền cho trang web.
Trong thiết lập chính cho web cá nhân, bạn có thể nhập link ảnh nền cho blog của bạn. Ảnh nền này sẽ đượt 'lát' (tile) đều trang web. Tuy nhiên nếu bạn lại muốn ảnh nền chỉ xuất hiện ở một vị trí xác định nào đó trên trang web, hoặc ảnh nền đứng nguyên trong khi các khối trên trang web di chuyển lên xuống, hay ảnh nền chỉ 'lát' theo chiều ngang hoặc dọc... thì hãy dùng CSS.
Trước khi bắt đầu, hãy bỏ ảnh nền mà bạn đang sử dụng cho blog hiện giờ nếu có (cũng ở trong thiết lập chính).
Quy định ảnh nền cho trang web hết sức đơn giản. Chúng ta hãy xét một ví dụ: nếu bạn muốn có một phông nền màu xanh, ở chính giữa có ảnh một bông hoa và cố định ở đó, trong khi các khối bên trên có thể di chuyển lên xuống... (demo: my blog), thì hãy nhập đoạn mã sau vào khung CSS (nhập tiếp theo đoạn mã thanh trượt ở trên nếu bạn dùng nó, bắt đầu bằng một dòng mới):
CODE
body { background: green url(http://img201.imageshack.us/img201/941/hoawc6.gif) 50% 50% no-repeat fixed; }
Trong đoạn mã trên:
+ green: Màu nền (xanh lá cây). Bạn có thể dùng một số từ khóa cho màu như red, green, gray, darkblue, lightbrown, chocolate... hoặc dùng mã của màu, như #FFFFFF (trắng) #FF0000 (đỏ), #06CF03... (bạn có thể xem 1 bảng màu & mã của chúng tại đây, hoặc trong chương trình tạo mã thanh trượt download ở bài viết trước cũng có bảng màu và mã của chúng)
+ url(http://img201.imageshack.us/img201/941/hoawc6.gif): Ảnh nền. Bạn có thể thay link trong đó bằng link một ảnh khác.
+ 50% 50%: Quy định vị trí ảnh nền, ở đây là ở giữa trang. 50% đầu là quy định vị trí tương đối theo chiều ngang (trục x), còn 50% thứ hai quy định vị trí theo chiều dọc (trục y). Nếu muốn ảnh nền ở góc dưới bên phải thì bạn hãy thay bằng 100% 100%, góc dưới bên trái là 0 100%, ở chính giữa phần nửa dưới trang web thì là 50% 75%... Ngoài ra bạn cũng có thể dùng đơn vị px (pixel) thay cho % để quy định vị trí tuyệt đối của ảnh, VD: 300px 400px (% là vị trí tương đối - dù màn hình ở độ phân giải 800x600 hay 1024x800 pixel thì ảnh vẫn luôn ở một vị trí tương đối mà bạn quy định so với màn hình hoặc trang web. Ngoài ra, nếu bạn không quy định vị trí ảnh nền - tức xóa 50% 50% ở dòng trên đi - thì vị trí mặc định sẽ là 0 0 - tức là ảnh sẽ ở góc trên bên trái màn hình).
+ no-repeat: Quy định ảnh sẽ không được 'lát' (tile) khắp trang web, mà chỉ xuất hiện một lần. Nếu bỏ từ khóa này thì ảnh sẽ được mặc định copy thành nhiều bản để dải đều cả trang theo cả chiều ngang và dọc. Nếu muốn ảnh chỉ được dải theo chiều ngang thì hãy thay no-repeat bằng repeat-x, chỉ được dải theo chiều dọc là repeat-y
+ fixed: Quy định ảnh sẽ ở một vị trí cố định trên màn hình chứ không bị di chuyển cùng các thành phần khác của trang web khi người dùng kéo trang web lên xuống hoặc sang hai bên. Nếu không muốn ảnh cố định như vậy thì bạn chỉ việc xóa từ fixed đi là xong.
------------
Vậy là bạn đã biết cách sử dụng CSS để quy định ảnh nền theo ý muốn của mình rồi đấy Như các bạn đã thấy, CSS hoàn toàn không có gì phức tạp! Nếu bạn có viết sai chỗ nào đó thì cũng không ảnh hưởng gì tới trang web - những chỗ sai đơn giản sẽ bị trình duyệt bỏ qua không thực hiện mà thôi
CSS là ngôn ngữ chuẩn quy định giao diện trang web - những gì bạn vừa đọc ở trên về CSS không phải là áp dụng riêng cho blog ở VnVista, mà cho tất cả mọi trang web...
Trong đoạn mã trên (nhớ là cuối mỗi dòng có dấu ; ):
+ background: url(http://img156.imageshack.us/img156/8531/1jy2.jpg): quy định ảnh nền cho thanh tiêu đề. Nếu không muốn dùng ảnh nền mà sử dụng màu nền thì bạn chỉ việc viết như sau: background: red; (thay red bằng bất kỳ màu nào bạn thích)
+ color:green: quy định màu chữ (ở đây là xanh lá cây) + font-family: Arial, Helvetica, sans-serif: Quy định font chữ trên thanh tiêu đề. Trình duyệt sẽ dùng font Arial, nếu máy tính người dùng ko có font này thì sẽ dùng font Helvetica, nếu ko có thì sẽ dùng một font sans-serif khác... Bạn chú ý đừng dùng các font ko phổ biến mà windows ko có sẵn, vì có thể máy bạn có nhưng máy người xem thì ko... + font-size: 15px: kích thước font chữ (đơn vị pixel) + font-weight: bold: quy định chữ đậm. Nếu muốn chữ thường thì thay bold bằng normal + text-decoration: underline: chữ gạch chân + font-style: italic: chữ in nghiêng
Bạn hãy thay đổi các thông số ở trên theo ý muốn (thay link ảnh nền, màu chữ, kích cỡ...). Bạn cũng có thể bỏ bất kỳ thuộc tính nào trong các thuộc tính trên (chỉ việc xóa dòng đó đi) & trang web sẽ sử dụng mặc định.
Trên thanh tiêu đề của khối bài viết là một link chứ không phải text bình thường. Khi rê chuột qua link bạn sẽ thấy link thay đổi. Để chỉnh sửa thay đổi đó, bạn hãy dùng đoạn mã sau:
Ở đoạn CSS trên, các thuộc tính quy định link giữa hai dấu { và } cũng giống như ở phần trên thôi: background quy định nền của link khi rê chuột lên (có thể dùng ảnh nền hoặc màu nền), color: white quy định màu link, text-decoration: underline quy định link sẽ được gạch chân...
Dựa vào các ví dụ trên & thay các thông số thích hợp là bạn có thể có những thanh tiêu đề theo ý muốn rồi đó
Nếu bạn không thích các con trỏ trong phần thiết lập Các hiệu ứng cho web, bạn có thể sử dụng một con trỏ khác. Sau đây là đoạn mã để thay con trỏ cho blog của bạn (trước hết bạn hãy đổi lại con trỏ hiện giờ thành con trỏ bình thường trong phần Các hiệu ứng cho web - đó là con trỏ đầu tiên trong các con trỏ ở đó):
CODE
body { cursor: url(http://vnvista.com/forums/style_images/mouse/mouse34.ani); }
thay link ở trên bằng link tới con trỏ mà bạn muốn sử dụng (con trỏ phải có định dạng .ani)
Nếu biết thêm chút ít về CSS, các bạn có thể chỉnh sửa được hầu như toàn bộ giao diện blog của bạn. Bài viết này chỉ nói qua cách thay đổi một số phần dễ thấy nhất trên blog, ngoài ra các chi tiết khác dù là nhỏ nhất cũng có thể được thay đổi. Hi vọng một vài ví dụ nhỏ mà chủ đề này vừa đưa ra sẽ giúp các bạn có chút cơ sở ban đầu để tìm hiểu kỹ hơn về CSS nếu bạn có nhu cầu, & quan trọng hơn là giúp bạn thấy được các đoạn mã của một trang web cũng không có gì phức tạp lắm, ngoài ra, cũng khá thú vị đấy chứ
Chú ý: Trong phần Chỉnh sửa giao diện cho trang thông tin của bạn, bạn cũng có thể nhập CSS để thay đổi giao diện. Các đoạn CSS ở các bài hướng dẫn trên cũng có thể áp dụng cho trang thông tin của bạn.
mình có thể lấy các skin có sẵn ở trong invisionfree được k ?
Skin invisionfree thì mình cũng chưa tìm hiểu nên không biết các class trong đó có giống với invision power không (chắc cũng không khác nhiều - vì cùng là invision power). Bạn cứ thử xem sao.
admin cho mình hỏi tại sao mình up đoạn mă HTML vao Css ma ko đc ....Admin có thể mở thêm phần khung tạo HTML đc ko ....Nhok có wweb vởi các menu siêu đpẹ www.javacriptbank.com xin amin read dùm
Bài viết đã được chỉnh sửa bởi nhokna_xixon: Oct 3 2006, 12:11 PM