Bản in cho chủ đề

Người gửi: Tacaza Aug 24 2006, 03:02 AM

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 http://vnvista.com/forums/index.php?automodule=blog&cmd=ucp_main cho blog trong Bảng điều khiển của bạn rồi tìm dòng sau:



Click vào link ở dòng này để mở khung nhập CSS.



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 http://www.mediafire.com/?6j50qndsbi9xbdp. 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 :

và

ở đầu và cuối đi. Dán đoạn mã này vào khung CSS cho blog của bạn là ok.

Người gửi: Tacaza Aug 24 2006, 04:13 AM

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: http://vnvista.com/tacaza), 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):

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 http://www.webmonkey.com/webmonkey/reference/color_codes, 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...

Người gửi: Tacaza Aug 25 2006, 05:04 AM

Tiếp theo chúng ta sẽ thử thay thanh tiêu đề của các khối. VD đây là một thanh tiêu đề của khối:



Bạn chỉ cần nhập một đoạn mã như sau (bắt đầu trên một dòng mới trong khung CSS):

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 đó

Người gửi: Tacaza Aug 25 2006, 05:23 AM

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ỏ ở đó):

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)

Người gửi: Tacaza Aug 25 2006, 05:37 AM

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ứ

Người gửi: Thank you ^_^ Dec 7 2008, 09:03 PM

18 thành viên đã cám ơn người lập chủ đề:
http://vnvista.com/forums/index.php?showuser=14216, http://vnvista.com/forums/index.php?showuser=8554, http://vnvista.com/forums/index.php?showuser=5488, http://vnvista.com/forums/index.php?showuser=12270, http://vnvista.com/forums/index.php?showuser=13602, http://vnvista.com/forums/index.php?showuser=10259, http://vnvista.com/forums/index.php?showuser=20304, http://vnvista.com/forums/index.php?showuser=32214, http://vnvista.com/forums/index.php?showuser=35616, nguyen_tan_thu

Người gửi: Tacaza Aug 25 2006, 08:18 PM

Chú ý: Các bạn có thắc mắc gì cứ hỏi ở đây, nhưng hãy viết tiếng Việt có dấu nhé

Người gửi: dohuynhthanhhai Aug 26 2006, 09:41 AM

Thanks nhiều nhé!!! Học hỏi nhiều điều lắm lắm đó..............
Có gì bổ sung nhớ báo Louis 1 tiếng nhé!!!

Người gửi: nguyencuonguhmainhe Aug 26 2006, 02:32 PM

tacaza ui anh bổ sung thêm nha cang` nhiu` cang` tốt

Người gửi: hoatulip18 Aug 26 2006, 11:16 PM

cac anh chị ơi
post thêm đi
em tham khảo với được không???
em chân thành cảm ơn

Người gửi: Tacaza Aug 28 2006, 12:56 PM

Chú ý: Trong phần http://vnvista.com/forums/index.php?automodule=network&cmd=ucp_profile_look 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.

Demo: http://vnvista.com/forums/index.php?automodule=network&cmd=profile&mid=3514

Người gửi: bonghonglua Sep 16 2006, 05:28 AM

xài fireox thì CSS ko có tác dụng dzới thanh trượt

Người gửi: phongnhu Sep 21 2006, 06:15 PM

mình có thể lấy các skin có sẵn ở trong invisionfree được k ?

Người gửi: Tacaza Sep 21 2006, 07:16 PM

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.

Người gửi: nhokna_xixon Oct 3 2006, 12:09 PM

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

Người gửi: kitty19862000 Oct 3 2006, 03:14 PM

Tac !!! Tac !!! Sao em làm cái thanh trượt hông được

Có mấy cái cursor đẹp lắm ..màh file gif ... tìm hoài ko thấy cái nào đổi được thành .ani hết

Người gửi: Tacaza Oct 3 2006, 03:44 PM

Có thể sau này vnvista sẽ cho chỉnh sửa HTML của toàn bộ blog, nhưng hiện giờ thì chưa được. Hiện giờ javascript cũng chưa được cho phép sử dụng (vì hacker có thể dùng javascript để lấy mật khẩu (mặc dù đã được mã hóa) của người khác, chèn virus vào trang web...).



Thanh trượt & chuột chỉ khi dùng IE mới thấy thôi em ạ (Nhưng em yên tâm, khoảng 98% số người vào vnvista dùng IE )

Con đổi từ ảnh gif sang file .ani thì em thử dùng chương trình sau: http://www.torry.net/tools/graph/cursor/anisetup.exe (hoặc search google với từ khóa "convert gif into ani cursor" nhé)

Người gửi: nhokna_xixon Oct 3 2006, 05:13 PM

thế bây giờ làm ko đc hả chán..cỡ nhiu thời gian nữa ạ

Người gửi: Tacaza Oct 4 2006, 10:48 AM

Cả sau này có khi bạn cũng không làm được, vì có thể vnvista sẽ không bao giờ cho phép sử dụng javascript (rất nhiều blog còn ko cho dùng html chưa nói gì tới javascript, & những blog lớn nhất thế giới cũng ko cho phép dùng javascript).

Người gửi: quangninh2910 Nov 6 2006, 10:24 AM

làm ơn chỉ dùm đi.mới làm mà.post nhiều bài vào.cám ơn nha

Người gửi: secret Jan 21 2007, 11:27 AM

hu hu em có 1 ảnh định dạng *.swf muốn upload làm logo nhưng hình như blog không hiện logo định dạng dó.Ai biết chỉ dùm em?????

Người gửi: anhsangtinhyeu Feb 4 2007, 01:04 AM

Thú vị thật
càng đi sâu vào CCS mình càng thấy thú vị tuyệt quá

Người gửi: phanlinhtrang Feb 5 2007, 08:28 AM

tại sao ko sử dung các menu này trực tiêp trên giao diện của mỗi cá nhân

Người gửi: white_rose Apr 15 2007, 10:10 AM

liệu có thể chỉnh thanh trượt thành có hình bằng mã CSS ko?
tui muốn biết thêm nhiều hơn về những tác dụng của CSS, ai bít nhìu chia sẻ với tui nha.

Người gửi: kerochan Jun 11 2007, 08:34 AM

Mình thấy blog của các bạn khác có kích thước bề ngang khá rộng, có thể xếp được các khối thành 2 bên, ở giữa là bài viết mà chiều rộng mỗi khối khoảng 250px, chiều rộng bài viết gần gấp đôi, phía dưới có thanh trượt để xem. Cho mình hỏi làm sao chỉnh sửa được như thế? Ở blog của mình nếu xếp các khối sang 2 bên thì phần bài viết ở giữa sẽ bị ép lại trông rất xấu
Xin hướng dẫn dùm.

Người gửi: anhsangtinhyeu Jun 11 2007, 07:57 PM

Khi nào thì blog ở http://www.vnvista.com cho phép tạo plâylist với tất cả các định dang chứ không bó hẹp là định dạng mp3 nhỉ vậy admin

Người gửi: SEAngels_AllForU_1010 Jul 23 2007, 08:52 AM

cho em hoi .. em muon tao. hình nền bg co' top với bottom giong như ben 360.yahoo thì fải làm sao
Nhờ anh cho em đoạn mã CSS đó có được ko vậy.

Người gửi: shinichi749 Jul 24 2007, 10:34 PM

Cho em hỏi làm thế nào để tạo logo bằng CSS ạ .

Người gửi: haily Jul 25 2007, 09:30 PM

Nếu muốn học CSS thì các bạn có thể http://www.vndownloads.info/fileshare/getFile/TVRFNE1qWXdNekUyTXc9PQ/. Ebook bằng tiếng anh đó !!!

Người gửi: SEAngels_AllForU_1010 Jul 27 2007, 08:31 AM

tãi sao blog vnvista ko hổ trợ tạo hình nền bg theo kiểu top với bottom nhỉ ..làm như thế thì việc tạo giao diện sẽ dễ dàng và sẽ có nhiều giao diện dẹp hơn nhiều

Người gửi: trungkien033 Sep 10 2007, 01:21 PM

các bạn oi mình đã copy nguyên mã css thiết kế sẵn (của trang vnvista.com)nhưng vào "thiết lập chính"không tìm được chỗ nào paste.Mình không biết làm như thế nào?Giúp mình với nhé.Minh dã mất nhiều thời gian lắm rồi.Mình cũng đã đọc kỹ hướng dẫn và thử nhiều lần nhưng không được.Chán

Người gửi: Tacaza Sep 10 2007, 01:45 PM

Bạn vào phần http://vnvista.com/forums/index.php?automodule=blog&cmd=ucp_theme rồi click vào nút http://vnvista.com/forums/index.php?automodule=blog&cmd=ucp_theme&action=createtheme , ở trang tạo giao diện, ở dưới cùng có dòng :

Bạn click vào đó để nhập mã CSS cho giao diện của mình nhé.

Và bạn nhớ đánh dấu vào lựa chọn Sử dụng giao diện này cho blog? ở bên trên.

Người gửi: maylaai00 Nov 30 2007, 12:03 AM

sao tui kô đổi dc hình nền của blog nhỉ,có bác nào chỉ rõ hơn cho tui về cách đổi hình nền của blog kô

Người gửi: cuongpro.st88 Dec 7 2007, 04:50 PM

Bạn cũng có thể tạo một giao diện cho riêng mình ở đây
Bạn Tìm Câu Chữ Như Trên Rồi
Click Vào Chữ Vào Đây Sau Đó:Copy Và Pase

Người gửi: hong_ngoc123 Feb 7 2008, 11:26 PM

sao mà có vẻ rắc rối quá............trong hơi khó hiểu.........nếu muốn thay đổi màu blog cho chữ thì làm sao !?..........thanks