Ka ka, hum nay ngồi buồn lôi PTS vọc cái nì

Mới tập làm swirl, chưa hài lòng lắm

http://www.smashingmagazine.com/2007/09/27/10-usability-nightmares-you-should-be-aware-of/

RIP – My Old blog!

Below you’ll find a brief overview of css-galleries you can explore inspiration from.

• CSS Beauty
  CSS Beauty focuses on providing its audience with a database of well designed CSS based sites, as well as news and happenings on the CSS Design Community. It showcases designers work and serves as inspiration for those looking to build CSS based websites.
• CSS Blast
  Russian CSS Showcase
• CSSBloom
  CSS Gallery with Blog’s and Online Portfolio’s
• CSSGreen
  CSS Gallery Of Great Design and valid Web Sites
• CSSBrain
  CSS gallery with comments.
• CSS Clip
  Web Design Inspiration and Gallery
• CSS Collection
  CSS collection web sites without tables
• CSS-Demo
  CSS Showcase
• CSS Design Yorkshire
  A gallery of CSS web design in Yorkshire UK
• CSS Drive- Categorized CSS gallery and examples
  CSS gallery, code samples, tutorials, and moreCSS Collection
• CSSelite
  We are glad you like our site, that’s why we save every single entry we make so you can get real inspiration from the best of the bests!
• CeeSeS
  CSS Gallery – We are the BalkaniCSS!
• CESKO
  CSS Showcase – Slovenia
• Creative-Pakistan
  Creative-Pakistan.com is a platform to showcase web and CSS designs of creative Pakistani web desginers
• CSSFill
  CSSFILL provides free CSS based layouts and templates
• CSS Galaxy
  CSS Gallery with voting and comments.CSS Hazard
  CSS Inspiration and Gallery
• CSS Heaven
  CSS Gallery – submit your own css design and view a gallery full of creative design inspiration. The submitted designs can be rated
• CSS ImportCSS
  The no-frills CSS Gallery
• CSS-Mania
  CSSmania, the most updated css showcase all over the globe
• CSS Princess
  CSS princess is showcase gallery of beautiful css sites. You can find web sites primarily done completly with css , without tables.
• CSS Reboot
  CSS Gallery – The CSS Reboot is a community event for web professionals and enthusiasts. This November 1st at 18:00 GMT Rebooters from all over the world will launch their web standards-based redesigns
• CSS Remix
  A Fresh Blend of the Best CSS Web Design
• CSS smooth operator // Tite site collection
  Tite site collection, conforms to Web Standards and designed with CSS
• CSS Thesis
  A Gallery of CSS based web sites, ranked by votes.
• csstux – The best dressed sites on the web
  A gallery of inspiring web site design and resources, focused primarily on sites using cascading style sheets.
• CSS Vault – The Web’s CSS Site
  A repository of sites using cascading style sheets and a list of resources
• CSS Website
  Gallery of Css Design Website. Submit your site.
• CSS Zen Garden: The Beauty in CSS Design
  A demonstration of what can be accomplished visually through CSS-based design. Classic!
• Data Tables and Cascading Style Sheets Gallery
  The CSS Table Gallery is a showcase of how CSS and data tables can work together to create usable and pretty results.
• Design Shack – Inspirational CSS and Blog Design
  Design Shack offers regular examples of great CSS, standards based design to help inspire and create. We feature any website which shows off some flair, and doesn’t fit into the standard pattern we come to expect from CSS design.
• Liquid Designs
  Liquid Designs is a gallery of websites designed with liquid layouts using XHTML and CSS
• Piepmatzel
  collecting best practice web standards design examples
• Proestilo
  CSS/XHTML Gallery all standard complient.
• showcase GR
  The best of Greek CSS web design
• Standards Reboot
  Standards Reboot is all about the use of standards in web design. This site was built to take a back seat and showcase your talent.
• Style Crunch
  StyleCrunch is a css and standards websites gallery
• Stylegala – Web Design Publication
  Stylegala is an online resource and inspiration guide for web agencies, designers and developers who take interest in websites that combine the powers of design, web standards and CSS.
• Submit CSS
  Submit your own css design and view a gallery full of creative design inspiration
• Unmatched Style
  Unmatched Style is a constantly growing community dedicated to acknowledging those who have made exceptionally gorgeous web sites using Cascading Style Sheets and web standards. By recognizing these exceptionally beautiful designs, other designers and businesses can get inspired and find a direction they may wish to take with their own web sites.
  
• W3 Compliant Sites: Sites designed to comply with W3C Web Site Standards
  A collection of web standards compliant web sites and their designers
• Webdigity
  CSS gallery
• Web Standards Awards
  Awarding web sites that successfully combine form and function
• Well Designed CSS Sites

Read more!

1. Deciding on Price Alone.

While the cost of a designer is an important factor that should always be a factor in the decision making process, it shouldn’t dictate who you choose without also considering a number of other factors. If you are building a website for a business, that website will become a value-adding asset of the business. Try not to look at it as just a financial drain, but an asset that has a chance to bring new customers and opportunities.

By choosing the lowest-priced option you may not get a website that meets your needs. On the other hand, high price doesn’t necessarily equal high quality. Some lower-priced designers may give you a better end result and better service than some high-priced design firms.

You should make your decision based on a number of factors including price, the quality of their portfolio, their level of communication with you, the time line you’re working with, etc.

2. Not Considering Specialties.

If you are not very familiar with web design it may be easy to overlook the fact that there are several different areas or types of design that a particular designer may specialize in. Obviously, to get the best results you’ll want to find someone who specializes in, or at least has experience with, your type of project.

For example, if you are interested in a minimalistic design, don’t choose someone because they have a portfolio full of flash-based websites with lots of bells and whistles. Likewise, if you’re looking for bells and whistles, don’t choose someone who specializes in minimalistic design.

This sounds kind of obvious, but many times the specialization is ignored when trying to decide between a few different options. For the best results you should have a good idea of what style of website you want, and base your search on finding someone who meets your needs.

3. Not Considering Future Updates and Maintenance.

Regardless of how well your new website is built, it will require updates and maintenance from time-to-time. Most designers offer these services at an hourly rate or as part of a package, but this is something you shouldn’t assume. Talk to potential designers about the possibility of them performing maintenance and what charges would be involved.

Typically, you’ll get the best results by having the original designer also do the updates and maintenance. No one else will know the website as well as the designer. However, you may have someone in your office or on staff that is capable of making updates, which should also be considered in this case.

The costs of maintenance should always be considered, and just as important, the costs of not being able to perform maintenance should be considered. If you hire a designer and are then unable to get updates completed, your website may quickly become out of date and ineffective.

4. Hiring Someone Who Does Not Build Search Engine-Friendly Websites.

It’s possible to have a great-looking website that is built horribly for search engines. While search engine optimization involves much more than the structure of the site, starting with a solid foundation will give you the best chance to compete.

If you are not very familiar with web design or SEO it may be difficult for you to evaluate the structure of a website. In this case, the best thing to do is ask potential designers how search engines influence the decisions they make during the design process. Ideally, websites should be built for people (the real visitors) but it should not interfere with the search engine spiders/robots that come to crawl the site.

5. Being Overly Influenced by a Wow Factor.

Many designers use elements like Flash intros on their projects as wow factor for potential clients. While they may look great, in most industries they’ll annoy visitors and do more harm than good.

This all goes back to knowing what you want in a website and finding someone who can deliver. Try not to be wowed or swayed by an impressive piece of work that has nothing to do with your type of project.

http://www.vandelaydesign.com/blog/design/5-common-mistakes-made-when-hiring-a-web-designer/

Chúng ta sẽ bắt đầu với mẫu design trên . Hãy quan sát 1 lượt layout này, ta thấy nó khá là simple ( I like this)

• Chia các phần chính của layout:

Đầu tiên ta hãy quan sát sơ qua để có đánh giá chung về giao diện. Ta thấy nó được chia thành những phần chính như sau:

• Header
• Main content
  • Left
  • Center
  • Right
• Footer

Ta sẽ tạo các đường guide chính như sau:

Lưu ý là bề rộng của trang ta sẽ xác định vào khoảng 990px (đường guide bên cùng tay phải)

• HTML cho layout chính:

Sau khi đã có được các đường guide ta sẽ bắt tay vào viết sườn HTML cho trang, dựa trên những gì ta đã có ở phía trên.

   1: <div id="wrap">

   2:     <div id="header">

   3:         header

   4:     </div>

   5:     <div id="mainpage">

   6:         <div id="left-col">

   7:             left

   8:         </div>

   9:         <div id="main-col">

  10:             main

  11:         </div>

  12:         <div id="right-col">

  13:             right

  14:         </div>

  15:     </div>

  16:     <div id="footer">

  17:         footer

  18:     </div>

  19: </div>

Preview ta sẽ thấy giao diện của chúng ta chạy 1 hàng từ trên xuống dưới trông khá là ngộ . Và tiếp theo … Hãy bắt nó làm theo ý chúng ta. Nhưng trước tiên ta hãy làm 1 bước nhỏ nữa để preview cho chính xác.

Hãy cắt mẫu design của chúng ta theo những đường guide ở trên và insert các part đó vào.

   1: <div id="wrap">

   2:     <div id="header">

   3:         <img src="header.jpg" alt="header" />

   4:     </div>

   5:     <div id="mainpage">

   6:         <div id="left-col">

   7:             <img src="left.jpg" alt="left" />

   8:         </div>

   9:         <div id="main-col">

  10:             <img src="center.jpg" alt="center" />

  11:         </div>

  12:         <div id="right-col">

  13:             <img src="right.jpg" alt="right" />

  14:         </div>

  15:     </div>

  16:     <div id="footer">

  17:         <img src="footer.jpg" alt="footer" />

  18:     </div>

  19: </div>

Preview and U’ll c wat happen

• CSS cho Layout chính:

Ta đã có khung sườn cho giao diện của chúng ta, vấn đề còn lại bây giờ là dùng CSS để control các box vào đúng vị trí của nó.

Để dễ hiểu ta hãy nhìn vào hình trên:

A : Giao diện hiện nay chúng ta có

B : Hãy đẩy các phần tương ứng qua đúng vị trí của nó

C : Almost done!

D : Final result !

Bắt tay vào nào !

Đầu tiên copy hết đoạn CSS sau bỏ vào file CSS của bạn:

   1: /***** Global Settings *****/

   2:  

   3: html, body {

   4: border:0;

   5: margin:0;

   6: padding:0;

   7: }

   8:  

   9: body {

  10: font:100%/1.25 arial, helvetica, sans-serif;

  11: }

  12:  

  13: /***** Common Formatting *****/

  14:  

  15: h1, h2, h3, h4, h5, h6 {

  16: margin:0;

  17: padding:0;

  18: font-weight:normal;

  19: }

  20:  

  21: h1 {

  22: padding:30px 0 25px 0;

  23: letter-spacing:-1px;

  24: font:2em arial, helvetica, sans-serif;

  25: }

  26:  

  27: h2 {

  28: padding:20px 0;

  29: letter-spacing:-1px;

  30: font:1.5em arial, helvetica, sans-serif;

  31: }

  32:  

  33: h3 {

  34: font:1em arial, helvetica, sans-serif;

  35: font-weight:bold;

  36: }

  37:  

  38: p, ul, ol {

  39: margin:0;

  40: padding:0 0 18px 0;

  41: }

  42:  

  43: ul, ol {

  44: list-style:none;

  45: padding:0 0 18px 40px;

  46: }

  47:  

  48: blockquote {

  49: margin:22px 40px;

  50: padding:0;

  51: }

  52:  

  53: small {

  54: font-size:0.85em;

  55: }

  56:  

  57: img {

  58: border:0;

  59: }

  60:  

  61: sup {

  62: position:relative;

  63: bottom:0.3em;

  64: vertical-align:baseline;

  65: }

  66:  

  67: sub {

  68: position:relative;

  69: bottom:-0.2em;

  70: vertical-align:baseline;

  71: }

  72:  

  73: acronym, abbr {

  74: cursor:help;

  75: letter-spacing:1px;

  76: border-bottom:1px dashed;

  77: }

  78:  

  79: /***** Links *****/

  80:  

  81: a, a:visited {

  82: text-decoration:none;

  83: }

  84:  

  85: /***** Forms *****/

  86:  

  87: form {

  88: margin:0;

  89: padding:0;

  90: display:inline;

  91: }

  92:  

  93: input, select, textarea {

  94: font:1em arial, helvetica, sans-serif;

  95: }

  96:  

  97: textarea {

  98: line-height:1.25;

  99: }

 100:  

 101: label {

 102: cursor:pointer;

 103: }

 104:  

 105: /***** Tables *****/

 106:  

 107: table {

 108: border:0;

 109: margin:0 0 18px 0;

 110: padding:0;

 111: }

 112:  

 113:     table tr td {

 114:     padding:2px;

 115:     }

 116:  

 117: /***** Global Classes *****/

 118:  

 119: .clear             { clear:both; }

 120:  

 121: .float-left     { float:left; }

 122: .float-right     { float:right; }

 123:  

 124: .text-left         { text-align:left; }

 125: .text-right     { text-align:right; }

 126: .text-center     { text-align:center; }

 127: .text-justify     { text-align:justify; }

 128:  

 129: .bold             { font-weight:bold; }

 130: .italic         { font-style:italic; }

 131: .underline         { border-bottom:1px solid; }

 132: .highlight         { background:#ffc; }

 133:  

 134: .img-left         { float:left;margin:4px 10px 4px 0; }

 135: .img-right         { float:right;margin:4px 0 4px 10px; }

 136:  

 137: .nopadding         { padding:0; }

 138: .noindent         { margin-left:0;padding-left:0; }

 139: .nobullet         { list-style:none;list-style-image:none; }

Các bạn có thể download ở đây.

Đâu tiên là “wrap”, như ta đã xác định trang chúng ta sẽ cố định ở 990px. Ta sẽ có:

   1: #wrap {

   2:     width:990px;

   3:     margin:0 auto; /*For center alignment*/

   4: }

Tiếp theo là “mainpage”, đây là div lớn chưa cả 3 div “left-col”, “main-col” và “right-col” :

   1: #mainpage {

   2:     width:100%;

   3:     position:relative;

   4: }

Cả 2 phần này đều khá đơn giản và dễ hiểu, nên không cần giải thích gì thêm.

Phần tiếp theo khá khó, đó là 3 div con của “mainpage”

Đầu tiên ta nhận định ta sẽ cần kéo 2 cột left và main sang trái và cột right sang phải.

   1: #left-col{

   2:     float:left;

   3: }

   4: #main-col{

   5:     float:left;

   6: }

   7: #right-col{

   8:     float:right;

   9: }

Preview! Excellent!! Right ??

To be continue ……!!!

• Header:
  • Topnav:
  • Menu nav:
  • Banner – logo:
• Left:
• Main:
• Right:
• Footer:

“Can we put frames and flashing images on my website? I like the way they look.”

“I want my business press release to start with a poem my 5 year old son wrote.”

Sounds familiar, right? Due to the destructive nature of these requests, I’ve learned to call these types of clients “Self-Destructing Clients”. They want us to deliver the best results, but their requests are preventing their own success. My experience with these clients taught me so many lessons that I now know how to nip the problem in the bud, fix existing problems, and communicate better. Hopefully, you can learn from my own experiences rather than going through that difficult road yourself.
Go Media Arsenal

Recognize these clients before you sign the contract

The first thing you can do is to recognize the Self-Destructing Client the minute they walk into the door. If you do most of your work online, you need to do this within a couple of emails. For example, you may receive a query about your web design services. Your potential client might say “I want you to make me a page that looks like this”, with a link to a website that looks like it was made in 1997. It has a background MIDI file playing, flashing bright yellow cursive text, and frames. It would’ve given anyone conjunctivitis. Apparently, this is what your potential client wants.

Now, this request wouldn’t be a big deal if your potential client wanted a page where design wasn’t very important. However, design will be the primary factor if the client also wants a “professional look” that would make their business look established, as if it were a Fortune 500 company.

Obviously, either this prospect has bad taste or hasn’t been looking at websites of Fortune 500 companies. This person is obviously a Self-Destructing Client.

As you’ve probably noticed, it’s easy to spot Self-Destructive Clients based on their examples of the desired finished product. You can automate this step by including it in your standard client questionnaire. (You have one, right?) Apart from basic contact information, it should also include the following: “List down 3 websites/ illustrations/ articles that best represent what you want me to do:” Your potential client’s answers will give you a better look at their expectations and their understanding of what you can do for them.

Now that you have a Self-Destructing Client on your hands, what do you do?

If you haven’t signed the contract yet, it helps to educate the client about what’s best for her needs. You don’t do this by writing her a lengthy email that resembles a college course for your field. Here are some tips on how to show a Self-Destructing client that her requests are bad for business:

• Give it a polite start. Try to give your message in the most tactful way possible. “Although the examples you listed are great, they don’t seem to be the best solution for you right now.”
  List the reasons why you think that your client’s examples aren’t ideal, and support your statements. Don’t just say “Because yellow text on black background hurts my eyes”. Not only is that insulting, but you’re also implying that she has bad taste. Instead, say “Other design options are better” and link to a study or news item that shows research about blue (or some other color) being the optimal choice if you want to give a professional impression.
• Give your own examples of what would work best. At the end of the email, make your own example list of what will work better as a finished product (preferably, use similar companies or organizations).
• Make it short. Your client probably doesn’t have the time or patience to read a lengthy email. Plus, writing lengthy explanations can sound self-indulgent.

Doing this will gain your potential client’s trust, especially since you’ve just displayed that you are truly knowledgeable in your field. If she still hesitates, you can show her the work you’ve done for previous clients as “case studies” – and make them sound as good as they really are. “ABC Company wanted the same things you did at first, but I just applied my expertise and they’ve just told me a month ago that my redesign caused a 200% increase in sales.” Sometimes, educating the client and showing case studies is enough for them to go from self-destruct to success.

What if my Self-Destructing Client is very insistent on these absurd requests?

One thing you can do for stubborn Self-Destructing clients is to make them a deal. Tell them that you’re a real expert in your field and that you’ve seen good results repeatedly come out of your efforts. If they let you do it your way and they get the results they want – whether it’s sales, comments from visitors, etc. – then they get to keep the work you made. If they don’t get the results that they wanted, then you promise to redo everything their way, no matter how absurd the outcome (of course you don’t tell them the part about absurdity). Of course, this requires you to have the following things: a concrete way to measure results, unbreakable confidence in your own work, and the luxury of time to redo the project should they be unhappy with the results. If you’re delivering a high quality product, odds are they’d be happy with your work and recommend you to friends.

Making this kind of deal is only a great solution if you really know, whether from experience or hard facts, that you can deliver the results they want. Otherwise, this would be a very risky move. Be sure that you are informed, skilled, and determined enough to make it work.

Even if you offer potential clients this deal, some of them won’t want any part of it. In the end, either of you has to give in. At this point, it’s your call whether to accept the job or to tell your client that you obviously can’t give them what they want from you and that they should look for other freelancers who can. If you need the extra income, doing the job won’t hurt – just don’t add it to your portfolio if you don’t think it’s your best work. However, if you can afford to walk away from the job, I suggest that you do. Obviously, this person won’t trust your decisions and expertise. Accepting the job means encountering multiple frustrations along the way. In the end it’s a choice between money and your sanity.

   1: #ypf-profile,#ypf-guestbook {

   2:     height:500px;

   3:     overflow:auto;

   4: }

Bạn cũng có thể chỉnh lại độ cao, hoặc sử dụng đoạn code này cho các box khác:

2.Làm sao để tạo background cho 1 box nào đó khác với các box khác :

Bạn dùng selector để trỏ tới box mà bạn muốn change background:

#ypf-profile : About me

#ypf-guestbook

#ypf-blurt

#ypf-contacts : Friends list

#ypf-tags

#ypf-pet

#ypf-style

Ngoài ra các modules khác sẽ có 1 dãy số đằng sau, bạn cần view source để tìm đúng ID của nó:

VD: #ypf-mosh-blob-1192302472 : Content mob blog

Cách tìm như sau, bạn viewsource (FF ctrl_U) bấm ctrl_F để tìm kiếm và ghõ : ypf-mosh-blob sau đó copy cả dãy số phí sau nó.

RSS cũng tìm tương tự như vậy

Sau đó bạn dùng đoạn code như sau:

   1: #id {

   2:     background: #mã màu /*nếu bạn muốn vừa có màu nền vừa có hình nền*/ url('link hình') left /*có thể dùng center,right*/ top /*Có thể dùng center, bottom*/ repeat /*Có thể dùng repeat-x(lặp theo chiều ngang) repeat-y(lặp theo chiều dọc) no-repeat (không lặp)*/ fixed /*có hoặc không, nếu có fixed hình nền sẽ đứng im tại 1 vị trí khi bạn kéo thanh cuộn*/

   3: }

3.Làm thế nào để ẩn 1 box nào đó:

   1: #id{display:none}

ID xin xem phía trên.

Trong trường bạn ẩn box style bạn cần phải bấm vào “This í fugly” ở bên cạnh avatar của bạn, sau đó vào box style dòng đó đi là ok

Ngôi sao gần nhất cách Trái Đất 4.3 năm ánh sáng. Như vậy tương đương với 40 triệu triệu kilometers. Gần mà sao em chẳng bao giờ nhìn thấy được ngôi sao đó nhỉ L. Nhưng hằng ngày, em luôn thấy 1 ngôi sao tỏa sáng, dù sáng hay tối, ngôi sao ấy vẫn hiện diện. Ngôi sao ấy xa với mọi người nhưng thật gần với em. Và anh biết không? Ngôi sao ấy rất đặc biệt vì chẳng ai nhìn thấy được ngoại trừ em :”>. .

Magic huh? Ngôi sao đó là món quà bí mật mà thượng đế đã dành tặng cho em đó. Em giấu ngôi sao ấy ở 1 nơi cũng rất bí mật :”>… Trong time em đó J. Để mỗi khi em gục ngã, ngôi sao ấy lại tỏa sáng soi lối cho em. Để mỗi khi em cô đơn, ngôi sao ấy lại tỏa sáng sưởi ấm trái tim em. Để mỗi khi em hạnh phúc, ngôi sao ấy lại tỏa sáng chia sẻ cùng em. Ngôi sao của em. Ngôi sao ngốc nghếch của em…

From my lil fox … luv you so much … mah lil baby candy

http://www.feedfinder.net/webground/main.shtml

Nội dung bài này sẽ gồm có:

1. Chèn hình vào Blog.
2. Canh chỉnh chữ trong Y!Mash (Đừng xem thường, hehe)

OK, chúng ta bắt tay vào làm bài nèo. Nhưng trước hết xin mời các bạn ôn lại bài cũ

• Căn bản CSS (Ứng dụng trên Y!Mash)
• Một số tag HTML thường sử dụng

1. Chèn hình vào Blog:

Có thể 1 số bạn cho rằng bài viết này là hơi dư, nhưng bạn khoan hẵng nóng vội.

Như các bạn đã biết, cách chèn hình vào blog khá là đơn giản.

<img src=”link hình />

Hoặc <img src=”link hình”></img>

Thật đơn giản phải không, nhưng kết quả là ….

Như thế này đây >”<

Nhưng như vậy thì quá xấu phải không nào ?

Chúng ta muốn hình nằm bên phải, và dòng chữ nằm xung quanh bao gọn tấm hình như thướng thấy khi ta làm word, hoặc trên các web báo chí online

Ok, nếu như bạn đã từng học html hoặc qua trường lớp, và như JaL được biết đến hơn 90% website VN ngày nay vẫn dùng cách này, đó là sử dụng table trong trường hợp này.

Hãy xem source của trang web vừa rồi.

   1: <td>

   2: <p class="Title">Kỷ lục mới của Internet2 là 100 Gb/giây</p>

   3: <table align="left" border="0" cellpadding="3" cellspacing="0" width="1">

   4: <tbody><tr>

   5: <td><img alt="Ảnh: Info.gov.hk." src="Net2.jpg" border="1" height="100" width="130"></td></tr>

   6: <tr>

   7: <td class="Image" align="right">Ảnh: <em>Info.gov.hk</em>.</td></tr></tbody></table>

   8: <p class="Lead">Mạng siêu tốc này đạt tốc độ 10 Gb/giây, nhanh hơn hàng nghìn lần so với kết nối băng rộng tại gia đình. Sử dụng 10 bước sóng ánh sáng qua một cáp đơn, các nhà cung cấp có thể tăng tổng băng thông lên 100 Gb/giây.</p>

   9: <p class="Normal">Nhờ đó, phim <em>The Matrix</em> chất lượng cao sẽ được tải trong nháy mắt thay vì nửa phút nếu dùng mạng <a href="/Vietnam/Vi-tinh/2004/09/3B9D6353/" class="Normal">Internet2 cũ</a> hay vài giờ qua đường broadband hiện nay.</p>

  10:  

  11: <p class="Normal">Trong buổi thử nghiệm hôm 9/9, tiến sĩ Carl Lundstedt thuộc Đại học Nebraska-Lincoln (Mỹ) đã thiết lập đường truyền kết nối trường này với khu nghiên cứu Fermilab ở Batavia, Illinois và gửi đi 1/3 terabyte dữ liệu trong 5 phút.</p>

  12: <p class="Normal">Internet2, do hãng truyền thông Level 3 Communications (Mỹ) quản lý và hoạt động song song với mạng Internet thông thường, giúp hơn 200 trường đại học, cơ quan chính phủ và khu công nghiệp Mỹ chia sẻ những khối lượng thông tin lớn với nhau theo thời gian thực. </p>

  13: <p class="Normal">Mỗi đơn vị này được trang bị 10 bộ kết nối 10 Gb/giây, mỗi bộ hoạt động trên một bước sóng riêng, cộng lại thành băng thông 100 Gb/giây. Các nhà phát triển Internet2 cho hay trong thời gian tới, họ có thể nâng cấp mạng lên 100 bước sóng.</p>

  14: <p class="Normal" align="right"><strong>Phương Thúy</strong> (theo <em>ArsTechnica</em>)</p>

  15: </td>

Đây là đoạn code dùng để trình bày cho bài báo http://vnexpress.net/Vietnam/Vi-tinh/2007/10/3B9FB243/

Poor them, các bạn hãy để ý, từ dòng 3 đến dòng 5, ta sẽ có 1 table <table> </table>  bao gồm 2 dòng <tr> </tr> 1 cột <td> </td> được tạo ra chỉ để … chèn 1 tấm hình vào bài viết T_T. Và cứ 1 tấm hình như vậy, ta sẽ phải có … 1 table T_T.

Còn đây là kĩ thuật của JaL, và cũng là modern solution cho vấn đề này.

Ta hãy mở CT soạn thảo CSS lên nào.

Ta sẽ làm tấm hình nằm bên trái của đoạn văn tương tự như trang vừa rồi.

Hãy ghõ vào:

   1: .img-left{

   2: float:left;

   3: }

Sau đó copy và paste vào Y!Mash của bạn (Thêm vào code cũ của bạn nhé, đừng xóa code cũ đi)
OK, ta hãy bắt đầu 1 viết code HTML nào:

   1: <p class="Title">Kỷ lục mới của Internet2 là 100 Gb/giây</p>

   2: <img alt="Ảnh: Info.gov.hk." src="http://vnexpress.net/Vietnam/Vi-tinh/2007/10/3B9FB243/Net2.jpg" border="1" height="100" width="130" class="img-left">

   3: <td class="Image" align="right">Ảnh: <em>Info.gov.hk</em>.</td></tr></tbody></table>

   4: <p class="Lead">Mạng siêu tốc này đạt tốc độ 10 Gb/giây, nhanh hơn hàng nghìn lần so với kết nối băng rộng tại gia đình. Sử dụng 10 bước sóng ánh sáng qua một cáp đơn, các nhà cung cấp có thể tăng tổng băng thông lên 100 Gb/giây.</p>

   5: <p class="Normal">Nhờ đó, phim <em>The Matrix</em> chất lượng cao sẽ được tải trong nháy mắt thay vì nửa phút nếu dùng mạng <a href="/Vietnam/Vi-tinh/2004/09/3B9D6353/" class="Normal">Internet2 cũ</a> hay vài giờ qua đường broadband hiện nay.</p>

   6:  

   7: <p class="Normal">Trong buổi thử nghiệm hôm 9/9, tiến sĩ Carl Lundstedt thuộc Đại học Nebraska-Lincoln (Mỹ) đã thiết lập đường truyền kết nối trường này với khu nghiên cứu Fermilab ở Batavia, Illinois và gửi đi 1/3 terabyte dữ liệu trong 5 phút.</p>

   8: <p class="Normal">Internet2, do hãng truyền thông Level 3 Communications (Mỹ) quản lý và hoạt động song song với mạng Internet thông thường, giúp hơn 200 trường đại học, cơ quan chính phủ và khu công nghiệp Mỹ chia sẻ những khối lượng thông tin lớn với nhau theo thời gian thực. </p>

   9: <p class="Normal">Mỗi đơn vị này được trang bị 10 bộ kết nối 10 Gb/giây, mỗi bộ hoạt động trên một bước sóng riêng, cộng lại thành băng thông 100 Gb/giây. Các nhà phát triển Internet2 cho hay trong thời gian tới, họ có thể nâng cấp mạng lên 100 bước sóng.</p>

  10: <p class="Normal" align="right"><strong>Phương Thúy</strong> (theo <em>ArsTechnica</em>)</p>

Ờ dòng 2 như các bạn thấy, toàn bộ table, tr, td đều đã bị JaL remove đi, thay vào đó là class img-left cho 1 div bao quanh tấm hình và dòng chú thích.

Vậy vấn đề ở đây chính là đoạn CSS của chúng ta, chính thuộc tính float:left xác định rằng div chứa tấm hình sẽ nằm bên phải và được các thành phần xung quanh bao bọc lấy . Ta cũng có thể sử dụng float:right để nằm tấm hình nằm bên phải 1 cách dễ dàng.

Tuy nhiên … kết quả vẫn chưa như ý ta muốn :-<, tấm hình nằm quá sát những chữ xung quanh, hãy giải quyết vấn đề này đơn giản bằng cách thêm padding cho div như sau:

   1: .img-left{

   2: float:left;

   3: padding:0 5px;

   4: }

Nếu bạn vẫn có nhớ bài trước, thì bạn sẽ biết rằng ở đây ta đang qui định padding-top:0px, right:5px, bottom:0px, và left :5px;

Save lại đoạn code của ta và … yeah ^^, (JaL không test nên có thể pading hơi lớn, các bạn có thể để 2px thử)

Simply ? Và bạn có thể sử dụng <div class=”img-left”></div> cho bất cứ chỗ nào bạn muốn, cho dù là hình, hay chữ

Đây là 1 số kết quả :

Như bạn thấy tấm hình đã nằm như ta mong muốn

Và tương tự cho chữ I (Drop cap effect, like word ý ^^ )

Nhưng, hãy khoan mừng vội … Chúng ta có 1 lỗi nhỏ ở đây …

Khi đoạn văn của bạn ngắn hơn tấm hình … thì những đoạn văn sau vẫn bị tấm hình chèn, không xuống đoạn mới được ( .

Thông thường cách đơn giản nhất là … thêm tag <br /> (Xuống hàng) cho đến hết độ dài của tấm hình .

Nhưng … cách đó đã quá xưa rồi, hãy dùng phương pháp chính thức được sử dụng rộng rãi ngày nay .

Và với phương pháp này … bạn chẳng cần làm gì nhiều . Y!Mash đã làm sẵn, ta chỉ việc sử dụng, ka ka ka, vì chính Y!Mash cũng dùng phương pháp này ý :”>.

Sau khi inspect sườn CSS của Y!Mash, JaL phát hiện ra chính class clearfix làm điều này, hehe

Và đây là code HTML đạt được

   1: <p class="Title">Kỷ lục mới của Internet2 là 100 Gb/giây</p>

   2: <div class="clearfix"><div class="img-left"><img alt="Ảnh: Info.gov.hk." src="http://vnexpress.net/Vietnam/Vi-tinh/2007/10/3B9FB243/Net2.jpg" border="1" height="100" width="130"></div>

   3: <p class="Lead">Mạng siêu tốc này đạt tốc độ 10 Gb/giây, nhanh hơn hàng nghìn lần so với kết nối băng rộng tại gia đình. Sử dụng 10 bước sóng ánh sáng qua một cáp đơn, các nhà cung cấp có thể tăng tổng băng thông lên 100 Gb/giây.</p>

   4: <p class="Normal">Nhờ đó, phim <em>The Matrix</em> chất lượng cao sẽ được tải trong nháy mắt thay vì nửa phút nếu dùng mạng <a href="/Vietnam/Vi-tinh/2004/09/3B9D6353/" class="Normal">Internet2 cũ</a> hay vài giờ qua đường broadband hiện nay.</p>

   5: </div>

   6: <!--Tui mún chỗ này ngắt đoạn văn mùm -->

   7: <p class="Normal">Trong buổi thử nghiệm hôm 9/9, tiến sĩ Carl Lundstedt thuộc Đại học Nebraska-Lincoln (Mỹ) đã thiết lập đường truyền kết nối trường này với khu nghiên cứu Fermilab ở Batavia, Illinois và gửi đi 1/3 terabyte dữ liệu trong 5 phút.</p>

   8: <div class="img-left"><font size="+6">I</font></div>

   9: nternet2, do hãng truyền thông Level 3 Communications (Mỹ) quản lý và hoạt động song song với mạng Internet thông thường, giúp hơn 200 trường đại học, cơ quan chính phủ và khu công nghiệp Mỹ chia sẻ những khối lượng thông tin lớn với nhau theo thời gian thực.Mỗi đơn vị này được trang bị 10 bộ kết nối 10 Gb/giây, mỗi bộ hoạt động trên một bước sóng riêng, cộng lại thành băng thông 100 Gb/giây. Các nhà phát triển Internet2 cho hay trong thời gian tới, họ có thể nâng cấp mạng lên 100 bước sóng.

  10: <p class="Normal" align="right"><strong>Phương Thúy</strong> (theo <em>ArsTechnica</em>)</p>

, đơn giản phải không nào

Nói tóm lại ta sẽ có code như sau:

   1: <div class="clearfix">

   2:     <div class=img-left"><img src="link hình" /></div>

   3:     Nội dung ở đây

   4: </div>

   5: Và đây là một đoạn văn khác không bao quanh tấm hình

Thật đơn giản !!!

2. Canh chỉnh chữ trong blog

Tôi muốn chia khung Y!Mash tui thành 3 cột.

Tui thì mún 2 cột.

Tui mún 5 cột lun ( siD, tham thế =.=”)

Tui mún chữ canh trái, nằm ở giữa, canh phải, canh đều 2 bên lề (justify)

Tui mún chữ … etc và etc …

=.=” Tất cả sẽ được giả đáp ở đây.

2 cột, 3 cột, 5 cột, bao nhiêu có bấy nhiêu

Hãy tận dụng lại những thứ đã dùng ở bài 1

   1: <div class="clearfix">

   2:     <div class="img-left" style="width:50%">Nội dung cột 1</div>

   3:     <div class="img-left" style="width:50%">Nội dung cột 2</div>

   4: </div>

CSS:

   1: .img-left{

   2: float:left;

   3: padding:0 5px;

   4: width:50%;

   5: }

Nếu bạn muốn có 3 cột 4 cột, bạn chỉ việc lặp lại div có class=”text-left”, và tính % kích thước, xong , so clear, so fun

Và ta cũng học được thêm 1 điều nữa, bạn có thấy dòng style=”width:50%” chứ, đây là 1 cách khác để gán style vào cho 1 đối tượng (Phần 1 bài tut CSS mình có nói ý)

Ứng dụng : Hãy thử trình bày 1 bài thơ như thế này xem nào:

Recently we’ve listed 50 Beautiful CSS-based web-design of 2006 and chosen some of the most beautiful and inspiring dark web-designs. Now we’ve selected 45 more fresh, clean and impressive designs. Let’s take a look.

1. Eurovision Song Contest – Helsinki 2007

2. - VG DESIGN -

3. Internet Dreams web site design

4. 13 strides

5. Alex Buga – Graphic Designer

6. Djin

7. Design Disease – Feel my symptoms

8. Luis Alarcón, Blog

9. Scrapbook Your Memories

10. Lost and Found | The Found Bin

11. Yellowlane | So much time. So little to do.

12. Realizzazione siti web Viareggio, Studio grafico viareggio, Toscana

13. PISA Trekking – Aventura Levada a Sério

14. Urban Originals – Women’s Bags, Belts, Shoes, Jewellery – Australia

15. The Ituloy Angsulong Experience

16. Cube Club Chemnitz

17. Niťárna Česká Třebová – příze pro vyšívání a pletení

18. Fresh news

19. Arcsin | Webbyrå

20. 3pix Studio

21. Galuppi’s in Pompano Beach for Wedding Receptions

22. scpgt | matt northam

23. sparklette.net

24. A-FILM

25. Jindra Holy

26. The Collective Commercial Works of Drew Europeo

27. THOMSON Consumer Brand Portal

28. Carbonmade: Your online portfolio.

29. luke stevens | design + consulting

30. AnyGivenFriday

31. Porfolio of Stephano Dinamarca Fernández

32. Disco – Mac Disc Burning

33. Ajans Peri ~ 2007

34. sebdesign.eu | graphic and web design | online portfolio

35. Trojan Records

36. CaraWilliams.com.au

37. Intabill – Dedicated Merchant Accounts…

38. Café Rouge – Restaurant – Bar – Café

39. :. JUNTA DE FREGUESIA DE CASTELO BRANCO .:

40. Kloobik.org : retour à l’Open Source

41. kara burke illustrations : prints

42. Infiniti Mixed Media

43. James’ living diary

44. Ubersuper

45. Zvik.com Designs

Though the main focus of a web design remains an excellent look and feel of the website but still some designing parameters have to be followed for making the website SEO friendly. Especially in case of shopping websites where shopping cart has to be operated, fast uploading of the website is must. It is because all of your customers may not have the facility of broadband. The second important thing for the success of shopping websites is security. In this regards unix hosting is recommended as the best available option.

From Mashing Magazine

<p> </p>: Dùng để xác định 1 đoạn văn bản

Điểm khác biệt giữa <span> và <p> :

Ở đây ta cùng qui định thuộc tính background màu đỏ cho tag <span> (trên) và tag <p> (dưới).

Như ta thấy tag <span> có ảnh hưởng đến từng dòng text, trong khi tag <p> ảnh hưởng đến toàn bộ paragraph.

Nếu bạn có điều kiện tìm hiểu hơn, bạn sẽ biết rằng tag <span> có thuộc tính là display:inline, còn tag <p> có thuộc tính là display:block

Ứng dụng: tag <span> thường được ứng dụng để áp thuộc tính cho 1 đoạn văn bản ngắn.

<div> </div>: Thường được dùng để thiết kế, giàn trang trong những web site ngày nay, gần giống tag <p> và <span>, nhưng có thể chứa được nhiều thành phần hơn, và có nhiều thuộc tính hơn.

<span>, <p>, <div> : điều thú vị của chúng ta là ở 3 tag này, tag <p> được ra đời đầu tiên ^^, sau đó khi HTML 4.0 ra đời, tag <span> và tag <div> được giới thiệu, với 2 thuộc tính <span> display:inline và <div> display:block. Chính tag <span> và tag <div> đã góp phần không nhỏ trong công nghệ web ngày nay, có thể nói 2 tag này đã tạo lên 1 cuộc “cách mạng” mới trong công nghệ thiết kế web, WEB 2.0. Nếu view source của các trang web lớn, ta sẽ thấy các tag này được ứng dụng rất nhiều .

<h1> đến <h6>: Dùng để định header cho các đoạn văn bản mà không cần phải chình font-size.

<ul> </ul>: Bắt đầu 1 danh sách không đánh số thứ tự.

<ol> </ol>: Bắt đầu 1 danh sách có đánh số thứ tự.

<li> </li>:  Liệt kê các items trong 1 danh sách.

VD:

   1: <ul>

   2: <li>Danh mục 1</li>

   3: <li>Danh mục 2</li>

   4: <li>Danh mục 3</li>

   5: <li>Danh mục 4</li>

   6: </ul>

   7: <ol>

   8: <li>Danh mục 1</li>

   9: <li>Danh mục 2</li>

  10: <li>Danh mục 3</li>

  11: <li>Danh mục 4</li>

  12: </ol>

Ta sẽ có kết quả:

Ngoài chức năng trên, ta còn có thể ứng dụng tag <ul> và <li> để tạo menu ^^, nhưng ở bài khác JaL sẽ hướng dẫn các bạn sau

<img>: Chèn hình ảnh ^^.

VD:

   1: <img src="http://hieu.info/phong/sign.jpg" />

Các bạn lưu ý, phía sau của tag img, ngay trước dấu > ta phải có 1 dấu /, đây là qui tắc của XHTML.

<a> </a>: Chèn 1 đường link đến trang khác

VD:

   1: <a href="http://j3ltl24cy.wordpress.com/"> Link đến trang của JaL </a>

Sẽ có kết quả : Link đến trang của JaL

Bài thực hành sẽ có sớm, mong các bạn đón đọc.

Nhưng trước khi viết ta cần có 1 số chuẩn bị.

Đầu tiên là software, các bạn cần có 1 software để viết CSS thật tốt, JaL khuyên nếu có điều kiện nên sử dụng Dreamweaver CS3, nhưng dành cho người mới bắt đầu mình khuyên nên sử dụng Rapid CSS 2007 (Rất tốt, có khả năng edit cả HTML, hỗ trợ bạn viết bài trên Mash), các bạn có thể download tại đây

Sau khi cài đặt xong, các bạn cần chỉnh lại 1 chút để dễ dàng sử dụng.

Đầu tiên các bạn vào menu Options – Preference. Trong mục Text editor, chọn Auto Complete và chỉnh delay xuống khoảng 100 hoặc nhỏ hơn (JaL để 1 viết cho lẹ )

Ok vậy là ta đã có thể bắt đầu 

JaL xin phép được bỏ qua phần giới thiệu vốn đã đầy rẫy trên internet để bắt đầu ngay phần chính của chúng ta.

1 . Các dịnh dạng được định nghĩa trong CSS chỉ đến cùng 1 đối tượng sẽ có thứ tự ưu tiên từ dưới lên trên, nói 1 cách đơn giản, styles nào nằm dưới sẽ ghi đè lên styles ở phía trên

VD 1:

 1: #chuy { 

 2: color:red; 

 3: } 

 4: #chuy{ 

 5: font-weight:bold; 

 6: }

Sẽ tương đương với

 1: #chuy { 

 2: color:red; font-weight:bold; 

 3: } 

Và các bạn cũng đặc biệt chú ý là styles được định nghĩa trực tiếp trong thẻ luôn có thứ tự ưu tiên cao nhất, nó sẽ ghi đè các styles đã được định nghĩa trước đó.

2. Cú pháp:

Như các bạn thấy ở trên 1 cú pháp hoàn chỉnh của CSS bao gồm :

Đối tượng(selector) { thuộc tính(properties): giá trị(value) ;}

VD 2:

 1: body{

 2: background:#ffffff;

 3: }

Đoạn CSS trên có nghĩa là thẻ body (bao quanh toàn bộ trang web) sẽ có màu nền là màu trắng.

Bạn cũng có thể gộp chung nhiều thuộc tính cho 1 đối tượng  như VD 1

Và đương nhiên bạn cũng có thể gộp chung nhiều đối tượng có chung thuộc tính.

 1: a,h1,h2,input{

 2: color:#cc0000;

 3: font-size:11px;

 4: }

3. Đối tượng class ( class selector ): (Hix, 1 số từ JaL dịch không đúng nghĩa, mong các bạn thông cảm, từ phần này trở đi JaL sẽ dùng ENG cho 1 số từ khó dịch)

Với class selector các bạn có thể định nhiều định dạng khác nhau cho cùng 1 đối tượng HTML

VD 3: Bạn có 2 đoạn text (được định trong cặp <p>text</p> như sau:

HTML:

 1: <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>

 2: <p>Pellentesque congue diam et augue. Morbi tellus libero, consectetuer nec, volutpat quis, egestas eu, nulla.</p>

Xuất ra web :

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Pellentesque congue diam et augue. Morbi tellus libero, consectetuer nec, volutpat quis, egestas eu, nulla.

Bạn muốn dòng trên chữ màu đỏ và dòng dưới chữ màu xanh, nhưng nếu bạn dùng cách ở VD 1 và VD 2 thì chắc chắn không được.

Giải pháp ở đây là gán cho mỗi đoạn text đó một class như sau bằng thuộc tính class=”tên_class” (HTML):

 1: <p class="red">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>

 2:  

 3: <p class="blue">Pellentesque congue diam et augue. Morbi tellus libero, consectetuer nec, volutpat quis, egestas eu, nulla.</p>

Và gán cho mỗi class đó 1 style:

 1: p.red{

 2: color:red;

 3: }

 4: p.blue{

 5: color:blue;

 6: }

Kết quả:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Pellentesque congue diam et augue. Morbi tellus libero, consectetuer nec, volutpat quis, egestas eu, nulla.

Bạn cũng có thể gán nhiều class cho cùng 1 đối tượng bằng cách chèn 1 dấu cách giữa 2 class:

 1: <p class="red center">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque congue diam et augue. Morbi tellus libero, consectetuer nec, volutpat quis, egestas eu, nulla.</p>

Để áp dụng 1 style cho nhiều đối tượng hoàn toàn khác nhau (tag P và tag A chẳng hạn) các bạn có thể định nghĩa 1 class như sau :

 1: .red{

 2: color:red;

 3: }

1 class không được bắt đầu bằng 1 chữ số hoặc kí tự đặc biệt, tốt nhất nên tránh dùng các kí tự đặc biệt trong tên class, và tuyệt đối không được có dấu cách (đọc thêm ở dưới)

4. ID selector :

Ngoài class các bạn cũng có thể gán các ID cho 1 đối tượng nào đó , và ta cũng có thể gán các styles cho id

HTML:

 1: <p id="noidung">

 2: Text here

 3: </p>

Và ta sẽ gán style lên cho id này:

 1: p#noidung{

 2: text-align: justify;

 3: font: Arial 11px #333;

 4: }

Ở dòng thứ 2, JaL sử dụng kĩ thuật short-hand để viết, JaL sẽ nói cụ thể hơn về vấn đề này cho các bạn trong 1 bài viết khác.

Tổng kết: Ở bài này ta đã có thể chập chững bắt đầu biết 1 số khái niệm căn bản nhất rồi, hãy ôn lại nào:

1. Các style trong CSS được xếp theo thứ tự ưu tiên từ dưới lên
2. Cú pháp chung của CSS : Đối-tượng1- (selector-1), Đối-tượng-2 (selector-2)  { thuộc tính 1 (properties 1): giá trị 1(value 1) ; thuộc tính 2 (properties 2): giá trị 2(value 2)}
3. 1 đối tượng HTML có thể có nhiều style bằng cách gán cho chúng ID và class

Bài thực hành: Đổi background của 1 số đối tượng trên Y!Mash:

Ở bài thực hành này, do các bạn chưa biết nhiều nên JaL sẽ cung cấp sẵn ID và class cho các bạn, hình ảnh JaL cũng sẽ cung cấp sẵn cho các bạn, nếu bạn không muốn, bạn có thề dùng hình ảnh của riêng mình.

Đây là kết quả sau khi hoàn tất :

Bây giờ thì bắt tay vào làm “lào”

Đầu tiên ta cần phải có 1 ít đồ chơi ^^.

Images:

Các bạn save file hình này về và up lên chỗ nào đó tùy thích.

Bạn cũng có thể link thẳng đến file này của mình không sao hết ^^.

Khởi động Rapid CSS nào, let’s do something really fun !!^^

Ở đây ta có 2 đối tượng cần thay đổi đó là phần header và phần border phía ngoài khung.

Ta sẽ bắt đầu từ phần đơn giản nhất, hãy đổi màu border của các box nào. Ta sẽ tác động lên class “mod” (Cách tìm chính xác class của Y!Mash JaL sẽ hướng dẫn trong 1 bài viết khác).

 1: .mod {

 2: border-color:#65aef0;

 3: }

Thuộc tính border-color chỉ ra rằng chúng ta đang tác động vào màu sắc của border.

Ở đây JaL dùng màu xanh nhạt #65aef0, các bạn cũng có thể dùng màu khác nếu thích, để có chính xác mã màu các bạn vào trang http://www.colr.org/ để chọn hoặc cũng có thể dùng chính Rapid CSS để chọn cũng được ( Khi bạn ghõ nó sẽ hiện lên 1 tùy chọn cho bạn chọn màu và tự chèn mã màu cho bạn )

Ok, copy và paste đoạn code CSS của bạn vào phần Advance CSS của Mash nào.

Save lại nhé, ta còn dùng đến nó sau này đấy.

Ok, xong phần đơn giản, bây giờ sẽ là CSS coding thực sự đây

Ta sẽ thêm background bằng hình ảnh cho header, và tạo cho nó hiệu ứng khi chuột đưa vào nó đổi màu khác.

Các bạn dùng file hình phía trên nhé, link là link tới file hình của bạn, ở trong bài viết JaL sẽ dùng link http://www.hieu.info/phong/mash/headerbg3.jpg

Phần header được chứa trong 1 div có class là “mod“, và bản thân nó có class là “hd“

Nếu ta tác động trực tiếp đến class “hd” sẽ rất nguy hiểm vì class này được dùng ở đâu hiện ta chưa biết, vì vậy tốt nhất ta nên tác động tới nó 1 cách cụ thể.

Ta dùng cách sau: selector-1>selector-2  (dấu > ) hoặc selector-1 selector-2 (dấu cách), ở đây cụ thể là mod hd , có nghĩa là chỉ những class nào có tên là hd và nằm trong class có tên là mod bị tác động. Hãy thử đoạn code sau:

 1: .mod {

 2: border-color:#65aef0;

 3: }

 4:  

 5: .mod .hd{

 6: background: #33CCFF;

 7: }

Thuộc tính background cho phép ta thay đổi màu sắc nền, hình nền, … của 1 đối tượng.

Oh yeah, bây giờ phần header của chúng ta đã có màu xanh, but … vẫn chưa có gì à nổi bật cả, thật là xấu xí.

Ta sẽ thêm hình vào cho nó.

 1: .mod {

 2: border-color:#65aef0;

 3: }

 4: .mod .hd{

 5: background:#33CCFF url('http://www.hieu.info/phong/mash/headerbg3.jpg') left top repeat-x;

 6: }

Ở dòng 4 JaL sử dụng kĩ thuật short-hand, thay vì định nghĩa nhiều thuộc tính, ta gom tất cả những thuộc tính có chung 1 đối tượng cụ thể (border, background, font, …) vào làm 1 dòng duy nhất.

Như đã nói 1 đối tượng có thể có nhiều thuộc tính, bakground cũng là 1 đối tượng.

value url( ‘ link ‘ ) dùng để xác định đường dẫn 1 file hình dùng trong background.

left top : file hình background sẽ được canh trái và phía trên của đối tượng ( Các value khác bạn sẽ thấy khi dùng các CT CSS editor, và chắc bạn cũng tự hiểu nó là gì )

reapeat-x, repeat, repeat-y, dùng để lặp lại background, default là repeat, reapeate-x sẽ có tác dụng lặp lại tấm hình theo hường ngang, và repeat-y cho chiều dọc, hãy tự thử từng cái để hiểu thêm nhé.

no-reapeat: không lặp lại background.

Save lại, sau đó copy và paste vào Y!Ma.

Được đây, nhưng có vẻ gì đó chưa ổn.

Oh! file images của chúng ta có chiều cao là 68px, và chia là 2 mảng màu, tạm thời ta sẽ chỉ dùng mảng phía trên. Nhưng 1/2 cũng là 34px; do ta chưa xác định chiều cao của phần header lên nó dòm khá là … silly.

Hãy thêm chiều cao nào

 1: .mod {

 2: border-color:#65aef0;

 3: }

 4: .mod-content .hd {

 5: padding:9px 6px 0;

 6: background:#fff url('http://www.hieu.info/phong/mash/headerbg3.jpg') top left repeat-x;

 7: height:25px;

 8: }

Thuộc tinh height chỉ ra chiều cao của 1 đối tượng

Thuộc tính padding cho phép ta canh khoảng cách từ phần rìa của đối tượng đến phần nội dung của đối tượng đó (Xem hình minh họa)

Từ trong ra ta sẽ có:

Content : Kích thước 229 x 260

Padding : phần padding sẽ cộng vào kich thước của content, vì vậy bạn có thể dùng nó để giới hạn content cách ra khỏi lề 1 khoảng nhất định (Sai trên IE6, IE6 bị lỗi)

Border: sẽ được cộng vào kích thước ta box, VD: nếu kích thước qui định là 229, border 1px, ta sẽ có kích thước thật là 230px

Margin: sẽ cộng thêm vào kích thước box, dùng để canh khoảng cách giữa đối tượng bị tác động với các đối tượng xung quanh, VD: margin:5px; sẽ khiến các đối tượng khác nằm cách đối tượng của chúng ta 5px;

Vấn đề margin và padding đối với người mới học có vẻ rất khỏ hiểu, nhưng sau này nếu có điều kiện tiếp xúc nhiều bạn sẽ nắm rõ hơn, tạm thời ta cứ nhớ nếu muốn 1 cái gì đó nằm cách những thứ xung quanh, ta dùng margin, còn canh từ ngoài lề đối tượng vào trong ta dùng padding ( Chả hiểu, cố đọc và nghiền ngẫm đi, JaL không có khiếu viết lách ).

1 số thuộc tính bao gồm 4 giá trị đó là top-left-bottom-right (theo thứ tự vậy ý) ta cần phải có 4 giá trị này, nếu thiếu 1 giá trị thì nó sẽ lấy giá trị của thằng đối xứng với nó, ở trên padding: 9px 6px 0; nghĩa là cách top 9px, cách left 6px, cách bottom 0 và cách right 6px.

Bạn có thắc mặc tại sao JaL vừa nói độ cao là 34px mà JaL lại ghi 25px ? Đơn giản vì … chúng ta có content là 25px + 9px padding = 34px, đây là kích thước của box

OK, save lại và up đoạn code của chúng ta lên, wow, now its  smooth ler

Tiếp theo, ta sẽ khiến nó … đổi màu khi đưa chuột vào.

Lúc trước ta thường dùng java để làm việc này, nhưng bây giờ hãy quên java đi, vì chúng ta đã có CSS

Ta sẽ thêm 1 pseudo-selector (hem bít dịch), pseudo mà ta sử dụng ở đây là :hover.

 1: .mod {

 2: border-color:#65aef0;

 3: }

 4: .mod-content .hd {

 5: padding:9px 6px 0;

 6: background:#33CCFF url('http://www.hieu.info/phong/mash/headerbg3.jpg') top left repeat-x;

 7: height:25px;

 8: }

 9: .mod-content .hd:hover {

 10: padding:9px 6px 0;

 11: background:#33CCFF url('http://www.hieu.info/phong/mash/headerbg3.jpg') left -34px repeat-x;

 12: color:#65aef0;

 13: height:25px;

 14: }

Dòng 9 .mod-content .hd:hover nhằm chỉ ra seletor này sẽ có tác dụng khi ta đưa chuột qua đối tượng.

Ở dòng 11 ta có 1 thay đổi nhỏ, ta dùng left -34px thay vì left top như ở trên, diểm hay chính là đây, CSS cho phép ta dời vị trí của background , ta dùng left - 34px để nói cho trình duyệt biết rằng ta muốn dời vị trí của background lên trên 34px, và chuyện gì sẽ xảy ra ???, phần màu xanh lá ban nãy chúng ta không dùng sẽ xuất hiện thay thế cho phần xanh da trời, và ta có hiệu ứng change color

color: dùng để thay đổi màu chữ

Vậy là ta đã hoàn thành công đoạn cuối cúng cho 1 header đẹp, ngày mai JaL sẽ hướng dẫn các bạn thêm 1 số phần khác.

Bài đọc thêm (Nếu chưa đủ buồn ngủ):

http://www.w3schools.com/css/css_reference.asp

http://www.w3schools.com/quiztest/quiztest.asp?qtest=CSS làm kiểm tra đê )

Mah Result:

W3Schools CSS Quiz

Result:

20 of 20

100%

Perfect!!!

Time Spent
2:09