Css

676 views
566 views

Published on

css indications for Yahoo! from my friends

Published in: Technology, Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
676
On SlideShare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
10
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Css

  1. 1. CSS - Cascading Style Sheets
  2. 2. <ul><li>CSS là viết tắt của cụm từ Cascading Style Sheets được hiểu một cách đơn giản đó là cách mà chúng ta thêm các kiể u hiển thị (font chữ, kích thước, màu sắc...) cho một tài liệu Web . </li></ul><ul><li>Nếu xem trang Web là một cơ thể thì HTML là khung xương, còn CSS là da thịt. </li></ul>
  3. 3. <ul><ul><li>Viết ngay trong trang HTML, trong vùng của thẻ <HEAD>. (còn gọi là Internal Style Sheets ) </li></ul></ul><ul><ul><li>Viết ngay trong phần thuộc tính của mỗi thẻ mà nó muốn tạo hiệu ứng. (còn gọi là Inline Style Sheet ) </li></ul></ul><ul><ul><li>Viết trong một file riêng biệt có phần mở rộng là .css. (hay còn gọi là External Style Sheets ) </li></ul></ul>
  4. 4. External Style Sheets <ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li><link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot; /mystyle.css &quot;medial=&quot;all&quot; /> </li></ul><ul><li></head> </li></ul><ul><li><body> </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul>
  5. 6. Các CSS code cơ bản trong Y! 360plus
  6. 7. <ul><li>/*TẠO BACKGROUND*/ </li></ul><ul><li>Background fixed: </li></ul><ul><li>BODY.blog_my {BACKGROUND:url(link hình nền) #000000 fixed;} </li></ul><ul><li>Top and bottom: </li></ul><ul><li>body{background:#C6EBEF;} </li></ul><ul><li>#doc2, #doc{background:#C6EBEF url( http://360themes.com/beta/images/themes/top/e8a36c4f0f16e8f18b5a41ce3dc0b87a.jpg ) no-repeat center top;} </li></ul><ul><li>#bd{background:transparent url( http://360themes.com/beta/images/themes/bottom/c8b27ce53e2609a5be89610c2165107e.jpg ) no-repeat center bottom;} </li></ul><ul><li>/*HOME BUTTON*/ </li></ul><ul><li>div.backhomtbtn a.backtomyblog {background:url( http://vnupload.com/files/210738home_icon_[].png ) no-repeat 40%;height:50px;} </li></ul>Tạo background, tạo nút Home
  7. 8. /*TITLE BAR*/ #article_list_module .rc_bd .rc_bc .hd, .hd .titlebar .hd, #friendlist_module .hd, .mod-relatives .titlebar{background:transparent url( http://nktpro.com/360plus/transparent_title.png ) repeat-x left top;} /*BLAST TRONG SUỐT*/ #blast .rc_bc .bd{background-color:transparent;background-image:url( http://nktpro.com/360plus/transparent_bg.png) ;} #blast .rc_ft, #blast .rc_ft div{background:transparent no-repeat left top;} #blast .rc_ft {background:transparent url( http://nktpro.com/360plus/blast-sw.png ) no-repeat left bottom;} #blast .rc_ft div {background:transparent url( http://nktpro.com/360plus/blast-se.png ) no-repeat right bottom;} #blast .rc_bd{background:transparent url( http://i320.photobucket.com/albums/nn350/znyans/Transparent/blast_lside.png ) repeat-y 0% 50%;} #blast .rc_bd div.rc_bc{background:transparent url( http://i320.photobucket.com/albums/nn350/znyans/Transparent/blast_rside.png ) repeat-y right top;} Tạo nút Home, thay thanh Title bar, làm Blast trong suốt
  8. 9. <ul><li>/*ICON*/ </li></ul><ul><li>/*Bài mới nhất*/ </li></ul><ul><li>#article_new h2{ </li></ul><ul><li>background:transparent url( http://www.nktpro.com/360plus/ico_star.png ) no-repeat left top;} </li></ul><ul><li>/*Thư mục riêng*/ </li></ul><ul><li>#folder h2{ </li></ul><ul><li>background:transparent url( http://www.nktpro.com/360plus/ico_folder.png ) no-repeat left top;} </li></ul><ul><li>/*Album*/ </li></ul><ul><li>#feature_album h2{ </li></ul><ul><li>background:transparent url( http://www.nktpro.com/360plus/ico_photo.png ) no-repeat left top} </li></ul><ul><li>/*Comment mới nhất*/ </li></ul><ul><li>#comment_new h2{ </li></ul><ul><li>background:transparent url( http://www.nktpro.com/360plus/ico_pens.png ) no-repeat left top;} </li></ul><ul><li>/*Cập nhật ngày*/ </li></ul><ul><li>#update_date h2{ background:transparent url( http://www.nktpro.com/360plus/ico_calendar.png ) no-repeat left top;} </li></ul>Tạo icon
  9. 10. Để tìm hiểu kỹ hơn về CSS, các bạn có thể truy cập http://forums.360themes.com Chuyên mục Yahoo! 360plus
  10. 11. <ul><li>body.blog_my,body.blog_my_index, </li></ul><ul><li>body.comment_listing,body.trackback_listing, </li></ul><ul><li>body.blog_archives_folder,body.blog_archives_date </li></ul><ul><li>,body.blog_archives_all, body.post_rte, </li></ul><ul><li>body.post_doodle, body.guestbook, </li></ul><ul><li>body.comment_list, body.subscribe_list, </li></ul><ul><li>body.post_gb, body.profile_view, body.gallery, body.photo_big, body.slideshow, </li></ul><ul><li>body.photo_upload_pc, body.photo_upload_gallery </li></ul><ul><li>{background :#ma_mau url(Link Anh Nen ) no-repeat fixed bottom;} </li></ul>
  11. 12. <ul><li>Repeat : Ảnh sẽ tự động lặp và tràn đều cho nền Blog nếu kích cỡ ảnh không đủ </li></ul><ul><li>Bao gồm 2 thuộc tính : </li></ul><ul><ul><li>Repeat-x : lặp theo chiều ngang </li></ul></ul><ul><ul><li>Repeat-y : lặp theo chiều dọc. </li></ul></ul><ul><ul><li>No-repeat : Ảnh không lặp. </li></ul></ul><ul><li>Fixed : Ảnh đứng yên khi kéo thanh cuộn chuột </li></ul>
  12. 13. <ul><li>body{background:#cc99ff;} </li></ul><ul><li>/* Màu nền của theme, nên thay đổi trùng với màu ảnh nền để tăng tính thẩm mỹ cho theme*/ </li></ul><ul><li>#doc2, #doc{background:#cc99ff url( Link ảnh Top ) no-repeat center top ;} </li></ul><ul><li>/* mau nen cua theme va link hinh top-theme nay thay doi duoc*/ </li></ul><ul><li>#bd{background:transparent url( Link ảnh Bottom ) no-repeat center bottom;} </li></ul>
  13. 14. <ul><li>.col-150 .rc_bd .rc_bc .bd {background: none ;} </li></ul><ul><li>.col-600 .rc_bd .rc_bc .bd {background: none ;} </li></ul><ul><li>.col-150 .rc_bd .rc_bc .hd .titlebar .hd,.col-150 .rc_bd .rc_bc .hd .titlebar{background: none ;} </li></ul><ul><li>.col-600 .rc_bd .rc_bc .hd .titlebar .hd,.col-600 .rc_bd .rc_bc .hd .titlebar{background: none ;} </li></ul>
  14. 15. <ul><li>Nền Các Module Chính và Phụ : </li></ul><ul><li>Code: </li></ul><ul><li>.col-150 .rc_bd .rc_bc .bd {background:transparent;} </li></ul><ul><li>.col-600 .rc_bd .rc_bc .bd {background:transparent;} </li></ul><ul><li>Nền Tiêu Đề các Module : </li></ul><ul><li>Code: </li></ul><ul><li>.col-150 .rc_bd .rc_bc .hd .titlebar .hd,.col-150 .rc_bd .rc_bc .hd .titlebar{background:transparent;} </li></ul><ul><li>.col-600 .rc_bd .rc_bc .hd .titlebar .hd,.col-600 .rc_bd .rc_bc .hd .titlebar{background:transparent;}.col-150 .rc_bd .rc_bc .hd .titlebar .hd, {background:transparent;} </li></ul>
  15. 16. <ul><li>Đối với 2 Module phụ : Bạn có thể thêm vào sau đọan transparent bằng dòng url(Link ảnh) với link ảnh nền : </li></ul><ul><li>.col-150 .rc_bd .rc_bc .bd {background:transparent url(Link ảnh nền) ;} </li></ul><ul><li>Đối với Module chính : Cũng thêm dòng url() : </li></ul><ul><li>.col-600 .rc_bd .rc_bc .bd {background:transparent url(Link ảnh nền);} </li></ul><ul><li>Nền tiêu đề các Module : (col-150 là Module phụ, col-600 là module chính) </li></ul><ul><li>.col-150 .rc_bd .rc_bc .hd .titlebar .hd,.col-150 .rc_bd .rc_bc .hd .titlebar {background:transparent url(Link ảnh tiêu đề);} </li></ul><ul><li>.col-600 .rc_bd .rc_bc .hd .titlebar .hd,.col-600 .rc_bd .rc_bc .hd .titlebar{background:transparent url(Link ảnh tiêu đề);} </li></ul>
  16. 17. <ul><li>Ảnh nền trong mỗi Entry: </li></ul><ul><li>.mod-alist-full .main-bd{background:#FFFFFF url(http://xxxx.jpg);} </li></ul><ul><li>Ảnh nền của tiêu đề mỗi Entry: </li></ul><ul><li>.mod-alist-full.mail-hd{background:#FFFFFF url(http:xxx.jpg)} </li></ul><ul><li>Module Bài Viết : </li></ul><ul><li>#article_list_module .bd, .mod-alist-full .main-bd {background:transparent;} </li></ul>
  17. 18. <ul><li>Code Chung Cho Các Module trở thành trong suốt : </li></ul><ul><li>#friendlist_module .bd,#comment_new .bd,#profile_highlight .bd,#search_module .bd, #folder .bd,#article_new .bd,#update_date .bd,#search .bd,#calendar .bd,#statistic .bd{background:transparent;} </li></ul><ul><li>Cách thêm nền vào Module : </li></ul><ul><li>Các bạn dùng Code như sau ( Thay Link ảnh vào nhé ) </li></ul><ul><li>#friendlist_module .bd,#comment_new .bd,#profile_highlight .bd,#search_module .bd, #folder .bd,#article_new .bd,#update_date .bd,#search .bd,#calendar .bd,#statistic .bd{background:transparent url(Link Ảnh);} </li></ul>
  18. 19. <ul><li>Cách Thay nền cho Từng Module : </li></ul><ul><li>1> Module New Comment : </li></ul><ul><ul><li>Code: </li></ul></ul><ul><ul><li>#comment_new .bd{background:transparent url(Link Ảnh);} </li></ul></ul><ul><li>2> Module Bài Mới : </li></ul><ul><ul><li>Code: </li></ul></ul><ul><ul><li>#article_new .bd{background:transparent url(Link Ảnh);} </li></ul></ul><ul><li>3> Module Profile ( Nick Name) : </li></ul><ul><ul><li>Code: </li></ul></ul><ul><ul><li>#profile_highlight .bd{background:transparent url(Link Ảnh);} </li></ul></ul>
  19. 20. <ul><li>4> Module Search (Tìm Kiếm) : </li></ul><ul><ul><li>Code: </li></ul></ul><ul><ul><li>#search_module .bd{background:transparent url(Link Ảnh);} </li></ul></ul><ul><li>5> Module Thư Mục : </li></ul><ul><ul><li>Code: </li></ul></ul><ul><ul><li>#folder .bd{background:transparent url(Link Ảnh);} </li></ul></ul><ul><li>6> Module Cập Nhật Ngày ( Update) : </li></ul><ul><ul><li>Code: </li></ul></ul><ul><ul><li>#update_date .bd{background:transparent url(Link Ảnh);} </li></ul></ul><ul><li>7> Module Lịch: </li></ul><ul><ul><li>Code: </li></ul></ul><ul><ul><li>#calendar .bd{background:transparent url(Link Ảnh);} </li></ul></ul>
  20. 21. <ul><li>8> Module Thống Kê : </li></ul><ul><ul><li>Code: </li></ul></ul><ul><ul><li>#statistic .bd{background:transparent url(Link Ảnh);} </li></ul></ul><ul><li>9> Module FriendList : </li></ul><ul><ul><li>Code: </li></ul></ul><ul><ul><li>#friendlist_module .bd{background:transparent url(Link Ảnh);} </li></ul></ul><ul><li>10> ModuleTự Tạo : </li></ul><ul><ul><li>Đối với Module tự tạo bạn thay đổi x bằng số thứ tự của Module trong Blog và paste vào CSS nhé : </li></ul></ul><ul><li>Code: </li></ul><ul><ul><li>#user_mod_1000x .bd{background:transparent url(Link Ảnh);} </li></ul></ul>
  21. 22. <ul><li>#friend-list .rc div, #friendlist_module .rc div, .rc div, #subscribe_highlight .rc div, #mod-tagged-frd-article .rc div {background:transparent url( Ngang Tren ) repeat-x right bottom;} </li></ul><ul><li>#friend-list .rc, #friendlist_module .rc, .rc, #subscribe_highlight .rc, #mod-tagged-frd-article .rc {background:transparent url (Goc tren ben trai ) no-repeat left bottom;} </li></ul><ul><li>#friend-list .rc_bd div.rc_bc, #friendlist_module .rc_bd div.rc_bc, .rc_bd div.rc_bc, #subscribe_highlight .rc_bd div.rc_bc, #mod-tagged-frd-article .rc_bd div.rc_bc {background:transparent url( Doc fai ) repeat-y right top;} </li></ul><ul><li>#friend-list .rc_bd, #friendlist_module .rc_bd, .rc_bd, #subscribe_highlight .rc_bd, #mod-tagged-frd-article .rc_bd {background:transparent url( doc trai ) repeat-y left top;} </li></ul><ul><li>#friend-list .rc_ft div, #friendlist_module .rc_ft div, .rc_ft div, #subscribe_highlight .rc_ft div, #mod-tagged-frd-article .rc_ft div {background:transparent url( Ngang Duoi ) repeat right top;} </li></ul><ul><li>#friend-list .rc_ft, #friendlist_module .rc_ft, .rc_ft, #subscribe_highlight .rc_ft, #mod-tagged-frd-article .rc_ft {background:transparent url( Goc duoi ben trai ) no-repeat left top;} </li></ul>
  22. 23. <ul><li>/* Border cua Blast trong suot*/ </li></ul><ul><li>#blast .rc div {background:transparent url(http://i292.photobucket.com/albums/mm19/themesplus2000/rcne-blue.png) no-repeat right bottom;} </li></ul><ul><li>#blast .rc {background:transparent url(http://i292.photobucket.com/albums/mm19/themesplus2000/rcnw-blue.png) no-repeat left bottom;} </li></ul><ul><li>#blast .rc_bd div.rc_bc {background:transparent url(http://i292.photobucket.com/albums/mm19/themesplus2000/rce-blue.png) repeat-y right top;} </li></ul><ul><li>#blast .rc_bd {background:transparent url(http://i292.photobucket.com/albums/mm19/themesplus2000/rcwe-blue.png) repeat-y ;} </li></ul><ul><li>#blast .rc_ft {background:transparent url(http://i292.photobucket.com/albums/mm19/themesplus2000/blastsw-blue.png) no-repeat left bottom;} </li></ul><ul><li>#blast .rc_ft div {background:transparent url(http://i292.photobucket.com/albums/mm19/themesplus2000/blastse-blue.png) no-repeat right bottom;} </li></ul><ul><li>/* Ket Thuc*/ </li></ul>
  23. 24. <ul><li>#statistic h2{background:transparent url(Link) no-repeat left;height:18px;} </li></ul><ul><li>#article_new h2{background:transparent url(Link) no-repeat left top;} </li></ul><ul><li>#photo_highlight h2{background:transparent url(Link) no-repeat left top;} </li></ul><ul><li>#folder h2{background:transparent url(Link) no-repeat left;} </li></ul><ul><li>#rss_output .bd a{height:25px;background:transparent url(Link) no-repeat left;height:20px;text-align:center;} </li></ul><ul><li>#search_module h2{background:transparent url(Link) no-repeat left top;} </li></ul><ul><li>#comment_new .titlebar .hd h2 {background:transparent url(Link) no-repeat left bottom;height:40px;} </li></ul><ul><li>/* Mod tu tao : #user_mod_1000x */ </li></ul>
  24. 25. <ul><li>/*button HP 100x25*/ </li></ul><ul><li>div.backhomtbtn a.backtomyblog {background:transparent url( Link Button )no-repeat;} </li></ul><ul><li>Hiệu ứng chữ cho tên nick name </li></ul><ul><li>#profile_highlight .nickname a {color:#0066CC;font-family:Comic Sans MS;font-size:130%;font-weight:bold;font-style:italic;text-decoration:blink;} </li></ul>
  25. 26. <ul><li>Làm trong suốt module tâm trạng </li></ul><ul><li>#mod_lifeline div.bd {background:transparent !important;} </li></ul><ul><li>#mod_lifeline div.rc_bc {background:transparent ) !important;} </li></ul>
  26. 27. <ul><li>Làm trong suốt module hình ảnh blog </li></ul><ul><li>#gallery_list .bd {background:none;}#photo_enlarge .bd, #photo_enlarge .ft {background:none;} </li></ul><ul><li>#photo_enlarge .ft #post_rte_create, #photo_comment .bd {background:none;}#photo_enlarge .c_photo_enlarge .ft {background:none;} </li></ul><ul><li>#photo_enlarge .bd .c_photo_enlarge .bd {background:none;}#gallery_list .ft .pagination .pagination {background:none;} </li></ul><ul><li>#gallery_list .ft .pagination {background:transparent url(Link Ảnh) repeat left top;}/*Thanh hiển thị số trang*/ </li></ul>
  27. 28. <ul><li>Làm trong suốt module hình ảnh blog (tt) </li></ul><ul><li>#photo_highlight .ft .more {background:transparent url(http://i292.photobucket.com/albums/mm19/themesplus2000/vnteamplus/titel-vnteam-plus.png) repeat-x right top;} </li></ul><ul><li>#photo_highlight .ft .more a {font-size:110%;font-style:italic;font-weight:bold;color:#ffffff;} </li></ul>
  28. 29. <ul><li>Làm trong suốt phần Profile Info </li></ul><ul><li>#profile_info , #profile_info .bd #blog_profile .bd, #profile_info .bd #personal_profile .bd, #profile_info .bd #introduction_profile .bd, #profile_info .bd #personal_profile .bd th , #profile_info th {background:none;} </li></ul>
  29. 30. <ul><li>Thay các icon trong các module </li></ul><ul><li>#comment_new .bd ul li {background:transparent url(link) no-repeat left top;} </li></ul><ul><li>#subscribe_highlight .folder li a{background:url(link) no-repeat 4px 0;font-size:13px;} </li></ul><ul><li>#folder .bd ul li {background:transparent url(link) no-repeat 7px top;} </li></ul><ul><li>#article_new .bd ul li {background:transparent url(link) no-repeat 7px top;} </li></ul>
  30. 31. <ul><li>Làm trong suốt phần comment trong bài viết </li></ul><ul><li>.cmt-mod-alist #comments-listing .extend-hd, .cmt-mod-alist #comments-listing .extend-bd .alist-comment {background: none ;} </li></ul><ul><li>.alist-comment #comment_container *, .cmt-mod-alist #comments-listing , .cmt-mod-alist #comments-listing .alist-comment {background: none ;} </li></ul>
  31. 32. <ul><li>#mod_lifeline .list td a.blog_emo_25_1{background:url(link icon 25) no-repeat 0 0;} </li></ul><ul><li>#mod_lifeline .list td a.blog_emo_25_2{background:url(link icon 25) no-repeat 0 -25px;} </li></ul><ul><li>#mod_lifeline .list td a.blog_emo_25_3{background:url(link icon 25) no-repeat 0 -50px;} </li></ul><ul><li>#mod_lifeline .list td a.blog_emo_25_4{background:url(link icon 25) no-repeat 0 -75px;} </li></ul><ul><li>#mod_lifeline .list td a.blog_emo_25_5{background:url(link icon 25) no-repeat 0 -100px;} </li></ul><ul><li>#mod_lifeline .list td a.blog_emo_25_6{background:url(link icon 25) no-repeat 0 -125px;} </li></ul>
  32. 33. <ul><li>#mod_lifeline .list td a.blog_emo_25_7{background:url(link icon 25) no-repeat 0 -150px;} </li></ul><ul><li>#mod_lifeline .list td a.blog_emo_25_8{background:url(link icon 25) no-repeat 0 -175px;} </li></ul><ul><li>#mod_lifeline .list td a.blog_emo_25_9{background:url(link icon 25) no-repeat 0 -200px;} </li></ul><ul><li>#mod_lifeline .list td a.blog_emo_25_10{background:url(link icon 25) no-repeat 0 -225px;} </li></ul><ul><li>#mod_lifeline .list td a.blog_emo_25_11{background:url(link icon 25) no-repeat 0 -250px;} </li></ul><ul><li>#mod_lifeline .list td a.blog_emo_25_12{background:url(link icon 25) no-repeat 0 -275px;} </li></ul>
  33. 34. <ul><li>#mod_lifeline .list td a.blog_emo_50_1{background:url(link icon 50) no-repeat 0 0;} </li></ul><ul><li>#mod_lifeline .list td a.blog_emo_50_2{background:url(link icon 50) no-repeat 0 -50px;} </li></ul><ul><li>#mod_lifeline .list td a.blog_emo_50_3{background:url(link icon 50) no-repeat 0 -100px;} </li></ul><ul><li>#mod_lifeline .list td a.blog_emo_50_4{background:url(link icon 50) no-repeat 0 -150px;} </li></ul><ul><li>#mod_lifeline .list td a.blog_emo_50_5{background:url(link icon 50) no-repeat 0 -200px;} </li></ul><ul><li>#mod_lifeline .list td a.blog_emo_50_6{background:url(link icon 50) no-repeat 0 -250px;} </li></ul>
  34. 35. <ul><li>#mod_lifeline .list td a.blog_emo_50_7{background:url(link icon 50) no-repeat 0 -300;} </li></ul><ul><li>#mod_lifeline .list td a.blog_emo_50_8{background:url(link icon 50) no-repeat 0 -350px;} </li></ul><ul><li>#mod_lifeline .list td a.blog_emo_50_9{background:url(link icon 50) no-repeat 0 -400px;} </li></ul><ul><li>#mod_lifeline .list td a.blog_emo_50_10{background:url(link icon 50) no-repeat 0 -450px;} </li></ul><ul><li>#mod_lifeline .list td a.blog_emo_50_11{background:url(link icon 50) no-repeat 0 -500px;} </li></ul><ul><li>#mod_lifeline .list td a.blog_emo_50_12{background:url(link icon 50) no-repeat 0 -550px;} </li></ul><ul><li>.mod-alist-full .main-hd h1 em, .mod-alist-titlebar-1 h2 a em, .mod-alist-titlebar h2 a em, .mod-alist-brief table a em, #myblog-article-compose #mood li em{background:#ffffff url(link icon 25) no-repeat;} </li></ul>
  35. 36. <ul><li>Tất cả các Code trình bày trong Bài các bạn có thể xem chi tiết và lấy Code tại Blog : </li></ul><ul><li>http://vn.myblog.yahoo.com/w.dephia </li></ul><ul><li>Or </li></ul><ul><li>http://vn.myblog.yahoo.com/cyvp_perfectlad200304 </li></ul><ul><li>Or </li></ul><ul><li>http://vn.myblog.yahoo.com/vunguyen-blog </li></ul><ul><li>Bài viết tổng hợp: </li></ul><ul><li>http://vn.myblog.yahoo.com/w-dephia/article?mid=650 </li></ul>

×