WEBBLOGVN.COM » css http://webblogvn.com/blog Chia sẻ kiến thức Web |Blog | Forum | Free Download | Free ebook | Free soft | Free game | Free source | Relax Mon, 06 Sep 2010 11:39:15 +0000 http://wordpress.org/?v=2.8 en hourly 1 Kỹ thuật tải ảnh trước bằng CSS http://webblogvn.com/blog/k%e1%bb%b9-thu%e1%ba%adt-t%e1%ba%a3i-%e1%ba%a3nh-tr%c6%b0%e1%bb%9bc-b%e1%ba%b1ng-css-2/ http://webblogvn.com/blog/k%e1%bb%b9-thu%e1%ba%adt-t%e1%ba%a3i-%e1%ba%a3nh-tr%c6%b0%e1%bb%9bc-b%e1%ba%b1ng-css-2/#comments Mon, 06 Sep 2010 11:39:15 +0000 admin http://webblogvn.com/blog/?p=2287 Trong file CSS của bạn có sử dụng đến một số ảnh background, nhưng những ảnh đó sẽ không được trình duyệt tải về trong bộ đệm (cache) trên máy ngay từ đầu, mà khi nào sử dụng đến thì nó mới được tải về. Chính vì vậy đôi khi nó sẽ sinh ra độ trễ khi chúng ta lần đầu tiên khi vào trang Web.

Chúng ta lấy một ví dụ như sau: Giả sử rằng trong thẻ <a> của bạn có sử dụng hai ảnh, một ảnh làm dùng để hiển thị ngay từ đầu, còn một ảnh khác sử dụng cho thuộc tính :hover. KHi lần đầu tiên bạn vào Website khi hover chuột lên thẻ <a> đó thì nó sẽ không hiển thị anh thử hai ngay mà sau một khoảng thời gian khoảng 2 đến 3 giây sau thì mới hiện tùy theo tốc độ đường truyền.

Để khắc phục điều đó chúng ta có một thủ thuật (tips) nhỏ như sau:

Đối với một số ảnh mà chúng ta cần sử dụng làm background trong file css, mà chúng ta không muốn có độ trễ như ví dụ trên thì chúng ta cần có biện pháp tải trước những ảnh đó về máy.

Chúng ta sẽ đặt toàn bộ các ảnh mà muốn tải trước về vào trong một thẻ CSS như sau:

#preLoadImages {
  width: 0px;
  height: 0px;
  background: url(../images/anh1.gif);
  background: url(../images/anh2.gif);
  background: url(../images/anh3.gif);
  ...
}

Bạn có thể đặt đoạn mã CSS trên vào trong file CSS của bạn, hoặc đặt vào trong thẻ <head> của trang. Ví dụ

  <html>
    <head>
      <style type="text/css">
        #preLoadImages {
          width: 0px;
          height: 0px;
          background: url(../images/anh1.gif);
          background: url(../images/anh2.gif);
          background: url(../images/anh3.gif);
          ...
        }
      </style>
    </head>

Sau đó chúng ta đặt đoạn thẻ <div id=”prLoadImages”> trên vào ngay dưới thẻ <body> của Website của bạn. Khi trình duyệt đọc tới thẻ <div> đó nó sẽ load toàn bộ những ảnh được liệt kê trong danh sách trên vào trong bộ đệm của trình duyệt.

<body>
  <div id="preLoadImages"></div>
...

Theo CSSYeah

Bài viết liên quan

]]> http://webblogvn.com/blog/k%e1%bb%b9-thu%e1%ba%adt-t%e1%ba%a3i-%e1%ba%a3nh-tr%c6%b0%e1%bb%9bc-b%e1%ba%b1ng-css-2/feed/ 0 Phương pháp viết mã CSS http://webblogvn.com/blog/ph%c6%b0%c6%a1ng-phap-vi%e1%ba%bft-ma-css/ http://webblogvn.com/blog/ph%c6%b0%c6%a1ng-phap-vi%e1%ba%bft-ma-css/#comments Mon, 06 Sep 2010 11:36:31 +0000 admin http://webblogvn.com/blog/?p=2284 Việc viết mã CSS cũng giống như bạn lập trình với ngôn ngữ PHP, C#,… tất cả đều cần có một bố cục khoa học, hệ thống để dễ dàng phát triển cũng như kiểm tra phát hiện lỗi (nếu có). Dưới đây là một vài hướng dẫn giúp bạn làm việc với CSS khoa học hơn:

Chú thích cho mã CSS giúp người khác đọc file CSS sẽ biết thêm những thông tin cần thiết về file CSS nói riêng và về tác giả nói chung. Việc chú thích mã ở những ngôn ngữ khác quan trọng ra sao thì chú thích mã ở CSS cũng quan trọng như vậy. Sau đây là mẫu chú thích một đoạn mã CSS rất tốt;

CSS:
  1. /*————————
  2. Screen Stylesheet
  3. version:   1.0
  4. date:      01/03/07
  5. author:    [your email]
  6. email:     [you at domain dot com]
  7. website:   [your domain]
  8. version history: [location of file]
  9. ———————*/

2. Chia CSS ra thành nhiều phần

Nếu mã CSS của bạn gồm nhiều phần và cho nhiều trang thì bạn nên chia thành nhiều file CSS để dễ quản lí và cũng để giúp cho file CSS của bạn không bị rối. Rất nhiều web developer chưa nhận thức được điều này. Họ gộp tất cả file CSS vào làm một. Và dĩ nhiên, hệ quả là họ mất nhiều thời gian hơn cho việc sửa file CSS của mình.

Chia CSS ra thành nhiều file và sử dụng chúng cùng với CSS chính bằng phương thức sau:

CSS:

  1. * Import other stylesheets
  2. —————————————*/
  3. @import url(”typography.css”)

Bên cạnh đó, phân chia ngay chính trong file CSS cũng quan trọng không kém. Hãy gộp chung những phần có cùng 1 đối tượng.

CSS:
  1. /* Header
  2. —————————————*/
  3. /* Navigation
  4. —————————————*/
  5. /* Footer
  6. —————————————*/
  7. /* Homepage
  8. —————————————*/
  9. /* Your template
  10. —————————————*/

Xoá các định dạng mặc định

Đây là điều cực kì cần thiết đối với bất kì Web developer nào. Như bạn đã biết thì mỗi trình duyệt (browser) đều hiển thị khác nhau. Phần lớn là do định dạng mặc định ở mỗi browser là khác nhau. Ví dụ sau sẽ giúp bạn xoá định dạng mặc định:

CSS:
  1. *{margin: 0;padding: 0;border: 0;}

4. Định dạng các đối tượng cơ bản:

Những đối tượng cơ bản hay được sử dụng như h1, h2, h3, … form, table, cần phải được định dạng trước tiên khi bạn bắt đầu viết mã CSS. Thói quen này giúp bạn đồng bộ được giao diện của các trang web.[

CSS:

  1. /* Forms
  2. —————————————*/
  3. input.text
  4. {
  5. padding: 3px;
  6. border: 1px solid #999999;
  7. }
CSS:
  1. /* Tables
  2. —————————————*/
  3. table
  4. {
  5. border-spacing: 0;
  6. border-collapse: collapse;
  7. }
  9. td
  10. {
  11. text-align: left;
  12. font-weight: normal;
  13. }

Chú ý: đây không phải là một chuẩn mực viết mã CSS. Vì hiện tại chưa có 1 chuẩn nào cho việc viết CSS. Dưới đây chỉ là cách viết mã CSS sao cho khoa học được tích luỹ từ những ngày tháng làm việc cùng với CSS. Hi vọng điều này sẽ bố ích cho các bạn.

Sưu tầm

Bài viết liên quan

]]> http://webblogvn.com/blog/ph%c6%b0%c6%a1ng-phap-vi%e1%ba%bft-ma-css/feed/ 0 Thuộc tính Background http://webblogvn.com/blog/thu%e1%bb%99c-tinh-background/ http://webblogvn.com/blog/thu%e1%bb%99c-tinh-background/#comments Tue, 12 Jan 2010 15:29:16 +0000 admin http://webblogvn.com/blog/?p=1876

Có 2 cách để làm nền bằng thuộc tính Background
- Dùng màu nền.
- Dùng ảnh nền.

Cú pháp như sau:
Ví dụ 1.

background:#FF0000;
background:URL(ten_file_anh.jpg) ;

Ví dụ 1 có thuộc tính background. Thuộc tính này có nhiệm vụ tạo nền cho website.
Dòng 1: Dùng màu nền. (Màu đỏ)
Dòng 1: Dùng ảnh nền. (ten_file_anh.jpg)

background-color: và background-image: có tác dụng như ví dụ 1.
background-attachment: Trượt ảnh nền theo nội dung.
Khi bạn dùng ảnh làm nền. Trong trường hợp nội dung trang web dài sẽ có 2 trường hợp có thể xảy ra đối với ảnh nền.
- Ảnh đứng im. (Ảnh nền luôn luôn đứng im mặc dù nội dung dài hay ngắn.)
- Ảnh trượt theo nội dung. (Kéo nội dung đến đâu, ảnh nền chạy theo đến đấy.)
Cú pháp:
Vií dụ 2

background-attachment: fixed;
background-attachment: none;

Trong ví dụ 2. Dòng đầu tiên sẽ làm cho ảnh nền luôn luôn đứng im.
Dòng 2 sẽ làm cho ảnh nền di chuyển theo nội dung.

Bài viết liên quan

]]> http://webblogvn.com/blog/thu%e1%bb%99c-tinh-background/feed/ 0 Menu CSS 4 http://webblogvn.com/blog/menu-css-4/ http://webblogvn.com/blog/menu-css-4/#comments Sat, 19 Dec 2009 15:59:02 +0000 admin http://webblogvn.com/blog/?p=1828 Bạn muốn tạo cho mình một cái menu các chuyên mục của blog mình, web mình một cách chuyên nghiệp , có dạng như của webblogvn.com/blog chẳng hạn nhưng mà trình độ về CSS chưa cao thì sao? Hãy xem và tham khảo đoạncode này nhé

<script type=”text/javascript”>
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
for (var i = 1; i<=10; i++) {
if (document.getElementById(’smenu’+i)) {document.getElementById(’smenu’+i).style.display=’none’;}
}
if (d) {d.style.display=’block’;}
}
</script>

<style type=”text/css”>
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: absolute;
top: 1em;
left: 1em;
width: 10em;
}

#menu dt {
cursor: pointer;
background: #A9BFCB;
height: 20px;
line-height: 20px;
margin: 2px 0;
border: 1px solid gray;
text-align: center;
font-weight: bold;
}

#menu dd {
position: absolute;
z-index: 100;
left: 8em;
margin-top: -1.4em;
width: 10em;
background: #A9BFCB;
border: 1px solid gray;
}

#menu ul {
padding: 2px;
}
#menu li {
text-align: center;
font-size: 85%;
height: 18px;
line-height: 18px;
}
#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
}

#menu li a:hover {
text-decoration: underline;
}

#mentions {
font-family: verdana, arial, sans-serif;
position: absolute;
bottom : 200px;
left : 10px;
color: #000;
background-color: #ddd;
}
#mentions a {text-decoration: none;
color: #222;
}
#mentions a:hover{text-decoration: underline;
}
</style>
<dl id=”menu”>
<dt onmouseover=”javascript:montre(’smenu1′);”><a href=”#”>Menu 1</a></dt>

<dd id=”smenu1″ onmouseover=”javascript:montre(’smenu1′);” onmouseout=”javascript:montre();”>
<ul>
<li><a href=”#”>Sub Menu 1.1</a></li>
<li><a href=”#”>Sub Menu 1.2</a></li>
<li><a href=”#”>Sub Menu 1.3</a></li>
</ul>
</dd>

<dt onmouseover=”javascript:montre(’smenu2′);” onmouseout=”javascript:montre();”>Menu 2</dt>

<dd id=”smenu2″ onmouseover=”javascript:montre(’smenu2′);” onmouseout=”javascript:montre();”>
<ul>
<li><a href=”#”>Sub Menu 2.1</a></li>
<li><a href=”#”>Sub Menu 2.2</a></li>
</ul>
</dd>

<dt onmouseover=”javascript:montre(’smenu3′);” onmouseout=”javascript:montre();”>Menu 3</dt>

<dd id=”smenu3″ onmouseover=”javascript:montre(’smenu3′);” onmouseout=”javascript:montre();”>
<ul>
<li><a href=”#”>Sub Menu 3.1</a></li>
<li><a href=”#”>Sub Menu 3.1</a></li>
<li><a href=”#”>Sub Menu 3.1</a></li>
<li><a href=”#”>Sub Menu 3.1</a></li>
<li><a href=”#”>Sub Menu 3.1</a></li>
<li><a href=”#”>Sub Menu 3.1</a></li>
</ul>
</dd>

<dt onmouseover=”javascript:montre(’smenu4′);” onmouseout=”javascript:montre();”>Menu 4</dt>

<dd id=”smenu4″ onmouseover=”javascript:montre(’smenu4′);” onmouseout=”javascript:montre();”>
<ul>
<li><a href=”#”>Sub Menu 4.1</a></li>
<li><a href=”#”>Sub Menu 4.1</a></li>
</ul>
</dd>
</dl>

Demo

Theo phpbasic

Bài viết liên quan

]]> http://webblogvn.com/blog/menu-css-4/feed/ 0 Những điều cần biết khi viết mã CSS http://webblogvn.com/blog/nh%e1%bb%afng-di%e1%bb%81u-c%e1%ba%a7n-bi%e1%ba%bft-khi-vi%e1%ba%bft-ma-css/ http://webblogvn.com/blog/nh%e1%bb%afng-di%e1%bb%81u-c%e1%ba%a7n-bi%e1%ba%bft-khi-vi%e1%ba%bft-ma-css/#comments Fri, 16 Oct 2009 15:15:06 +0000 admin http://webblogvn.com/blog/?p=1697
Như chúng ta đã biết ở bài viết trước mình đã có lần để cập đến vấn đề “làm việc tốt với các trình duyệt (browser)” bằng cách sử dụng CSS để xóa đi những định dạng mặc định của từng browser.

Lần này, các bạn sẽ được biết đến những điều cần tránh trong khi viết mã HTML và CSS nếu bạn muốn website của mình hiển thị tốt ở hầu hết các browser.

1. Không bao giờ sử dụng padding cho các đối tượng có độ rộng cố định (fixed width)

Đây là nguyên tắc cơ bản vì cách căn lề của Internet Explorer khác với các trình duyệt khác và cũng là 1 lỗi của trình duyệt này. Lỗi này được gọi là “Box Model Bug” hình dưới là một hình ảnh minh họa cho lỗi này.

Bạn có thể thấy rằng độ rộng của đối tượng “được” cộng thêm khi hiển thị ở IE nếu như có padding. Vậy đơn giản là không dùng padding cho các đối tượng có độ rộng cố định (fixed width).

2. Cố định cỡ chữ bằng đơn vị % và em

Thông thường các browser hiển thị cỡ chữ theo cách khác nhau nếu như bạn chưa định cỡ cho chúng. Khi mới bắt đầu học CSS, chúng ta thường định dạng cỡ chữ theo cách sau:

PLAIN TEXT

CSS:

  1. h1 {font-size:18px;}

  2. h2 {font-size:16px;

Dòng mã là cách cơ bản, nhưng vấn đề là ở IE người xem sẽ không thể thay đổi cỡ chữ. Điều này rất cần thiết với những người để độ phân giải cao. Nhưng bạn đừng lo, có một giải pháp khác tốt hơn, hãy dùng % và em để định dạng cỡ chữ như sau:

PLAIN TEXT

CSS:

  1. body {font-size:62.5%;}

  2. h1 {font-size:1.8em;}

  3. h2 {font-size: 1.6em;}

3. Không nên dùng đơn vị 100%

Sử dụng 100% để căn chiều rộng của một đối tượng rất dễ gặp rủi ro trong việc bố trí kết cấu của website vì mỗi trình duyệt hiển thị chiều rộng 100% rất khác biệt. Theo kinh nghiệm bản thân thì những lần thử định vị 100% thì gần như rất khó có thể đạt được kết quả tốt nhất. Hãy chọn một con số khác có thể là nhỏ hơn 100% (95% có thể sẽ tốt hơn). Hoặc đơn giản hơn là hãy… cố định nó.

4. Không dùng 0px để định chiều cao

Các browser không thích việc bạn chọn 0px để định chiều cao cho đối tượng và thưởng hiển thị nó theo cách bạn… không muốn chút nào. Nếu có thể hãy thay nó bằng 1px sẽ tốt hơn rất nhiều.

PLAIN TEXT

CSS:

  1. height:1px

5. Không dùng “>” trong CSS

Mình đã từng thấy có người, thậm chí rất nhiều người viết mã CSS như sau:

PLAIN TEXT

CSS:

  1. #menubar&gt;a {color:#cccccc;}

Với dòng mã CSS như trên IE6 sẽ không hiểu và không thể hiển thị được định dạng trên. Hãy dùng đoạn mã dưới đây, sẽ an toàn hơn rất nhiều.

PLAIN TEXT

CSS:

  1. #menubar a {color:#cccccc;}


Theo letunglam

Bài viết liên quan

]]> http://webblogvn.com/blog/nh%e1%bb%afng-di%e1%bb%81u-c%e1%ba%a7n-bi%e1%ba%bft-khi-vi%e1%ba%bft-ma-css/feed/ 0 10 lý do để học CSS ,DIV thay cho Table http://webblogvn.com/blog/10-ly-do-d%e1%bb%83-h%e1%bb%8dc-css-div-thay-cho-table/ http://webblogvn.com/blog/10-ly-do-d%e1%bb%83-h%e1%bb%8dc-css-div-thay-cho-table/#comments Wed, 19 Aug 2009 15:18:47 +0000 admin http://webblogvn.com/blog/?p=1506
Sử dụng CSS hiệu quả sẽ tương tự như sử dụng cấu trúc nội dung với HTML. Với cấu trúc HTML, chúng ta chỉ giữ lại các tag cho đoạn văn, các tag tiêu đề

1. Xây dựng một nền tảng để thay thế các phương thức cổ điển của Web. Tổ chức World Wide Web Consortium (W3C) tạo ra CSS để thay thế các bảng (table), các thẻ font, frame và các dạng “hack” thẻ HTML để tạo hiệu quả cho website Với tôi, CSS mang lại hiệu quả công việc cao hơn. Nhìn cái tag font rối rắm là tôi thấy nản. Coder muốn sửa chữa gì cũng mệt vì sự rối rắm của nó. Trong trường hợp muốn thay đổi về thiết kế của code, bạn lại đụng tới khá nhiều mảng của coder. Còn nếu sử dụng css, việc chỉnh sửa rất đơn giản, không phụ thuộc vào coder.

2. Tăng tốc độ website.
Thời gian load một website sẽ nhanh hơn. Dung lượng của một trang web sẽ nhẹ hơn 50% so với cách làm cổ điển.
Theo cơ sở của DOM thì:
- Table: web browser phải load cả <table>…</table> thì mới có thể dựng thành DOM tree và hiển thị ra màn hình.
- Div: chỉ cần load <div>..</div> là đã có thể dựng được DOM tree và hiển thị.
Như vậy, quá trình hiển thị 1 trang table-less sẽ nhanh hơn 1 trang table. Hơn nữa, cùng 1 cấu trúc nhưng DOM tree của table sẽ lớn và phức tạp hơn của div rất nhiều, điều này cũng ảnh hưởng đến bộ nhớ và tốc độ xử lý của browser.
Chưa kể, cùng 1 trang nhưng nếu dùng table thì code HTML sẽ lớn hơn dùng div. Code CSS có dùng div có thể sẽ lớn hơn, nhưng CSS được load 1 lần, sau đó được cache trên client.

3.Thời gian phát triển website nhanh hơn
Thông qua một thao tác về thiết kế: thay đổi CSS, thì hàng ngàn trang web sẽ được thay đổi theo.

4. Typography thể hiện ngầu hơn
CSS có khả năng kiểm soát mạnh mẽ hơn tag FONT rất nhiều. Chúng ta có thể kiểm soát chiều cao giữa các dòng, thay màu font, các font theo họ – tức là không có font này, sẽ tự chọn font tiếp theo trong danh sách, và nhiều nhiều hơn thế.

5. Dễ viết
Bạn có thể tạo và thay đổi CSS dễ dàng như khả năng làm code HTML thủ công.

6.Khả năng phát triển.
Sử dụng CSS hiệu quả sẽ tương tự như sử dụng cấu trúc nội dung với HTML. Với cấu trúc HTML, chúng ta chỉ giữ lại các tag cho đoạn văn, các tag tiêu đề (H1 -> H6), bảng dành cho một số ít bảng biểu đặc biệt, bạn sẽ tăng khả năng đáp ứng lượng khách viếng thăm mà không cần xây dựng một phiên bản độc lập để giảm tải.

7. Thiết kế dành cho in ấn cũng đẹp như dành cho web. CSS hỗ trợ tốt cho một khi bạn cần in ra, chẳng hạn in ấn, hay PowerPoint

8. Dễ kiểm soát thông qua vị trí các thành phần trên web. Việc đánh ID trên từng thẻ DIV, sẽ dễ dàng hơn cho bạn khi cần kiểm soát và hỗ trợ tốt cho Ajax.

9. Các trang web tách biệt phần thiết kế và nội dung. Giữ lại thiết kế trong một file liên kết, bạn có thể tiết kiệm nhiều thời gian khi cần thêm bớt các thành phần của một trang web.

10. Cải thiện vị trí trong các website tìm kiếm. Với cách sử dụng HTML cho phần nội dung mà thôi, bạn đã loại bỏ các tag định dạng phức tạp cho thiết kế. Điều này là cho các website tìm kiếm index (tạo chỉ mục) website của bạn tốt hơn, và sẽ là tăng thứ hạng của website.

Bài viết liên quan

]]> http://webblogvn.com/blog/10-ly-do-d%e1%bb%83-h%e1%bb%8dc-css-div-thay-cho-table/feed/ 0 Tạo Menu dạng tab http://webblogvn.com/blog/t%e1%ba%a1o-menu-d%e1%ba%a1ng-tab/ http://webblogvn.com/blog/t%e1%ba%a1o-menu-d%e1%ba%a1ng-tab/#comments Sun, 19 Jul 2009 08:03:05 +0000 admin http://webblogvn.com/blog/?p=1404 Trong chúng ta tôi giám chắc rằng không còn ít người vẫn còn mặc cảm với những menu dạng tab, không phải vì nó xấu mà luôn nghĩ rằng làm nó khó và cấu trúc của nó rất phức tạp. Chính bản thân tôi trước đây cũng như vậy. Nhưng thực ra có phải như vậy không? để trả lời câu hỏi đó bây giờ chúng ta cùng nhau thử Style cho một kiểu tab đơn giản để xem nó có thực sự khó như chúng ta vẫn thường nghĩ không?.

Trong menu dạng này bao giờ cũng gồm 2 phần, phần 1 để chứa các tab và phần thứ hai là phần để chứa nội dung của các tab. để có hình dung rõ hơn chúng ta sẽ xem hình ảnh minh họa dưới đây.

Đầu tiên chúng ta sẽ định dạng cho phần khung của tab như sau:

div#wrapper {
  margin: 50px;
  padding: 0;
}

Chúng ta sẽ dùng định dạng của thẻ <ol> để tạo lên các tab ở phần 1. Về nguyên tắc thì chúng ta có thể dùng một trong ba thẻ <ul>, <ol>, <dl>. Nhưng tại sao tôi lại dùng thẻ <ol>, là bởi vì một lý do nào đó mà trình duyệt của người xem không tải được CSS từ Website của bạn thì họ vẫn hiểu được cấu trúc tab của bạn. Định dạng của phần một như sau

<ol class=”tab”>
<li class=”active”>Trang chủ</li>
<a href=”gioithieu.html” title=”Giới thiệu”>Giới thiệu</a>
<a href=”sanpham.html” title=”Sản phẩm”>Sản phẩm</a>
<a href=”tintuc.html” title=”Tin tức”>Tin tức</a>

<a href=”lienhe.html” title=”Liên hệ”>Liên hệ</a>
</ol>

Bây giờ chúng ta sẽ định dạng sao cho các tab nằm trên cùng một hàng và có hình dáng của tab.

ol.tab {
  background: url(../dot.gif) repeat-x left bottom; /* ảnh 1px */
  list-style: none;
  margin: 0;
  padding: 6px 0;
  position: relative;
}

ol.tab li {
  background: #F2F5FA;
  border: 1px solid #D3DDED;
  display: inline; /* các thẻ li ở trên một dòng */
  margin-right: 5px;
  padding: 0;
}

Trong cách định dạng này ta có sử dụng một kỹ thuật nhỏ, đó là chúng ta có sử dụng một ảnh .gif có kích thước 1px x 1px để thay thế border-bottom của <ol>

Khi đang ở trong trang nào đó thì tab của trang đó sẽ có màu khác với những tab khác, do vậy chúng ta sẽ đặt cho tab đó một class là active. Vì vậy chúng ta cần phải định dạng cho riêng cho các tab active như sau:

ol.tab li.active {
  background: #FFF;
  border-bottom: 1px solid #FFF;
  font-weight: bold;
  padding: 5px 10px;
}

Tiếp theo chúng ta sẽ định dạng cho các link nằm trong thẻ

ol.tab a {
  font-weight: bold;
  margin: 0;
  padding: 5px 10px;
}

Cuối cùng bây giờ chúng ta sẽ định dạng phần chứa nội dung của mỗi tab. Phần này chỉ đơn giản là chúng ta định dạng cho thẻ <div> chứa nội dung.

div#content {
  border: 1px solid #D3DDED;
  border-top: none;
  padding: 10px;
}

Và bây giờ các bạn mở file .html bằng một trình duyệt nào đó và ngắm nhìn kết quả của mình. Các bạn thấy đấy menu dạng tab đâu có quá phức tạp đúng không các bạn? các bạn có thể tải toàn bộ ví dụ tại đây.

Download

theo cssyeah.com

Bài viết liên quan

]]> http://webblogvn.com/blog/t%e1%ba%a1o-menu-d%e1%ba%a1ng-tab/feed/ 0 Kỹ thuật làm bóng đổ cho chữ bằng CSS http://webblogvn.com/blog/k%e1%bb%b9-thu%e1%ba%adt-lam-bong-d%e1%bb%95-cho-ch%e1%bb%af-b%e1%ba%b1ng-css/ http://webblogvn.com/blog/k%e1%bb%b9-thu%e1%ba%adt-lam-bong-d%e1%bb%95-cho-ch%e1%bb%af-b%e1%ba%b1ng-css/#comments Fri, 03 Jul 2009 15:42:45 +0000 admin http://webblogvn.com/blog/?p=1350
Thông thường khi chúng ta làm bóng đổ (Shadow) cho chữ chúng ta thường dùng các phần mềm đồ họa như Photoshop, Illustrator, Firework,..vv.
Đối với những phần mềm đó thì việc tạo ra bóng đổ cho chữ hết sức đơn giản và có nhiều hiệu ứng bắt mắt, nhưng trong bài viết này tôi xin giới thiệu với các bạn một thủ thuật trong CSSCascading Style Sheets giúp bạn có thể tạo ra hiệu ứng bóng đổ giống như trong các phần mềm đồ họa. Tuy nhiên cách làm này không có nhiều hiệu ứng và kiểu dáng giống như các phẩn phềm đồ họa, nhưng nó vẫn là một cách khá tốt mà chúng ta có thể vận dụng nó để style cho WebsiteWebsite và các khái niệm liên quan của mình, sau đây là toàn bộ các bước để thực hiện.

CSS Text Shadow

Ảnh minh họa

Để tạo ra hiệu ứng cho chữ trước hết chúng ta cần tạo ra một trang HTML có định dạng như sau:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <link rel="stylesheet" type="text/css"
  href="/textshadow.css" media="all" />
  <title>CSS Text Shadow</title>
  </head>
  <body>

    <div id="wrapper">

    <div id="css-shadow">
      <h1>CSS Text shadow</h1>
      <h1>CSS Text shadow</h1>
    </div>

    <p>Lorem ipsum dolor sit amet consectetuer pretium mattis.</p>
    </div>

  </body>
</html>

Để có thể định vị được các dòng text chúng ta cần định nghĩa cho thẻ <div> một kích thước nhất định, giả sử trong bài viết này tôi định nghĩa là chiều rộng là 300 pixel, chiều cao là 25 pixel. Mã CSSCascading Style Sheets như sau:

#css-shadow {
  margin: 0;
  padding: 0;
  position: relative; /* Dùng để định vị chữ */
  width: 300px;
  height: 250px;
}

Tiếp đó chúng ta sẽ định nghĩa vị trí mà màu sắc cho các dòng text, để có thể nhìn thấy bóng đổ thì ta sẽ định nghĩa cho dòng chữ ở dưới là màu xám và cách dòng chữ ở trên 2 pixel về phía phải và phía dưới. Cụ thể mã CSSCascading Style Sheets như sau:

#css-shadow h1.font {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  color: #CC0000;
}

#css-shadow h1.shadow {
  position: absolute;
  top: 2px;
  left: 2px;
  z-index: 0;
  color: #C0C0C0;
}

Một điều mà chúng ta cần hết sức chú ý đó là thuộc tính z-index:. Trong trường hợp chúng ta muốn đặt lớp (layer) nào ở phía trên thì chúng ta sẽ đặt thuộc tính z-index của lớp đó lớn hơn các lớp (layer) khác.

Kỹ thuật làm bóng đổ cho chữ bằng CSS

Theo cssyeah

Bài viết liên quan

]]> http://webblogvn.com/blog/k%e1%bb%b9-thu%e1%ba%adt-lam-bong-d%e1%bb%95-cho-ch%e1%bb%af-b%e1%ba%b1ng-css/feed/ 0 10 Thủ thuật CSS mà bạn cần biết – Phần I http://webblogvn.com/blog/10-th%e1%bb%a7-thu%e1%ba%adt-css-ma-b%e1%ba%a1n-c%e1%ba%a7n-bi%e1%ba%bft-ph%e1%ba%a7n-i/ http://webblogvn.com/blog/10-th%e1%bb%a7-thu%e1%ba%adt-css-ma-b%e1%ba%a1n-c%e1%ba%a7n-bi%e1%ba%bft-ph%e1%ba%a7n-i/#comments Wed, 24 Jun 2009 14:57:36 +0000 admin http://webblogvn.com/blog/?p=1306
Bài viết này tổng hợp ra mười thủ thuật về CSSCascading Style Sheets mà bạn cần phải biết và biến chúng thành những kỹ năng của mình. Hy vọng rằng sau khi đọc xong bài viết này các bạn sẽ tự tin hơn trong việc giải quyết các vấn đề tương tự.

1. Dùng kỹ thuật Sorthand để thực hiện viết mã CSS.

Như tôi đã trình bày trong bài viết “Cách viết giản lược trong CSS” thì việc sử dụng kỹ thuật này rất tiện ích cho quá trình bạn viết mã CSSCascading Style Sheets.

Ví dụ: Khi style cho font chữ trong CSS thông thường bạn sẽ viết như sau:

font-weight: bold;
font-style: italic;
font-variant: small-caps;
font-size: 1em;
line-height: 1.5em;
font-family: Verdana, sans-serif;

Nếu áp dụng kỹ thuật Sorthand thì chúng ta chỉ cần phải viết.

font: bold italic small-caps 1em/1.5em verdana, sans-serif;

2. Đặt hai class cho cùng một đối tượng

Thông thường khi bạn viết mã HTML bạn chỉ đặt một class cho một đối tượng. Tuy nhiên điều đó không có nghĩa rằng bạn chỉ được phép đặt duy nhất một class cho một đối tượng. Định dạng HTML cho phép bạn đặt 2 class cho cùng một đối tượng.

<div>...</div>

Như các bạn đã thấy ở trên nếu bạn muốn đặt 2 class cho cùng một đối tượng thì tên của class thứ nhất phải cách tên của class thứ hai bằng khoảng trống. Trong trường hợp hai class này đều được đặt cùng một thuộc tính thì đối tượng này sẽ được định dạng theo thuộc tính nào được viết sau.

Ví dụ cả hai class đều định nghĩa màu nền cho đối tượng

div.class1 {
background: #CC0000;
}

div.class2 {
background: #00000FF;
}

Trong trường hợp như trên thì đối tượng sẽ nhận thuộc tính background của class2. Vì class2 được định nghĩa sau và trình duyệt sẽ nhận giá trị của thuộc tính này.

3. Các giá trị mặc định của đường viền

Trong quá trình bạn style một đối tượng nào đó có thuộc tính border bạn sẽ liệt kê ra các giá trị của thuộc tính border đó. Vd:

border: 2px solid #000;

Vậy cái gì sẽ hiện thị giá trị mặc định?

  1. Border-style: Trong quá trình bạn định nghĩa đường viền (border) cho các đối tượng HTML, nếu như đối tượng phía trước được định nghĩa kiểu border như thế nào thì các đối tượng sau cũng được định nghĩa kiểu border đó ( trong trường hợp bạn không nêu ra kiểu của các đối tượng định nghĩa sau )
  2. Border-width: Khi bạn không định nghĩa rõ độ dày của đường viền cho đối tượng bạn định style thì trình duyệt sẽ lấy mặc định độ dày của đường viền đó là 1 pixel.
  3. Border-color: Màu của đường bao ngoài sẽ có màu mặc định là màu của đối tượng được bao ( trong trường hợp bạn bỏ qua thông số màu của đối tượng )

4. Định dạng CSS cho tài liệu ở dạng in ấn.

Hầu hết những Web Designer ở Việt Nam rất ít quan tâm tới vấn đề này, nhưng thực chất nó lại là một trong những vấn đề khá quan trọng trong quá trình thiết kế Web. Khi bạn bắt tay vào thiết kế thông thường bạn chỉ quan tâm tới nó hiện thị trên thiết bị đầu cuối là màn hình như thế nào, mà bạn ít khi quan tâm tới khi Website của bạn sẽ được in ra như thế nào? Trong trường hợp người duyệt Web muốn lưu lại những thông tin trên Website của bạn bằng những bản in thì bắt buộc người duyệt cần phải mất thời gian cho việc lựa chọn và xóa bỏ những đối tượng không cần thiết.

Để khắc phục điều đó bạn chỉ cần thêm một file CSS phục vụ riêng cho việc in ấn vào trong Website của bạn. Cách thức cho như sau, trên phần header của bạn ngay sau dòng lệnh chèn file CSSCascading Style Sheets bạn sẽ thêm một dòng tương tự dòng trên những có một số chỗ khác biệt.

<link type=”text/css” rel=”stylesheet” href=”/stylesheet.css” media=”screen” /> <link type=”text/css” rel=”stylesheet” href=”/printstyle.css” media=”print” />

Hai chỗ khác biệt đó là tên file CSS (printstyle.css) được sử dụng cho chế độ in và thứ hai là thuộc tính media của link phải đặt là “print” (media=”print”)

Trong file CSS này bạn sẽ tự động tắt các thành phần không cần thiết (vd: hình quảng cáo, phần tỉ giá, thời tiết,..mà thay vào đó là bạn cho hiển thị những phần nội dung mà người xem quan tâm.

Theo cssyeah

Bài viết liên quan

]]> http://webblogvn.com/blog/10-th%e1%bb%a7-thu%e1%ba%adt-css-ma-b%e1%ba%a1n-c%e1%ba%a7n-bi%e1%ba%bft-ph%e1%ba%a7n-i/feed/ 1 7 lưu ý khi thiết kế web với CSS và HTML! http://webblogvn.com/blog/7-l%c6%b0u-y-khi-thi%e1%ba%bft-k%e1%ba%bf-web-v%e1%bb%9bi-css-va-html/ http://webblogvn.com/blog/7-l%c6%b0u-y-khi-thi%e1%ba%bft-k%e1%ba%bf-web-v%e1%bb%9bi-css-va-html/#comments Wed, 24 Jun 2009 14:52:04 +0000 admin http://webblogvn.com/blog/?p=1301
1. Không sử dụng các thẻ HTML nhằm mục đích định dạng hay trình bày nội dung. Hãy nhớ rằng, các thẻ HTML chỉ phục vụ cho việc đánh dấu tài liệu, còn các thuộc tính của CSS mới được dùng cho việc định dạng nội dung.

2. Không chèn các đoạn mã css vào bên trong tài liệu HTML. Để thực hiện công việc này hãy sử dụng các class.

3. Hãy định nghĩa các đặc tính định dạng thường dùng một lần duy nhất.

4.Bạn hoàn toàn có thể áp dụng nhiều class cho một một HTML element.

5. Sử dụng selector hierarchical thay cho việc mở rộng thêm các class.

6. Hãy Sử dụng external style sheet. Chỉ sử dụng internal style sheet trong trường hợp bạn muốn có những ngoại lệ riêng cho một trang HTML nào đó.

7.Nếu cần, hãy chia nhỏ file .css thành nhiều file tùy theo ý đồ thiết kế hoặc thói quen, miễn là hợp lý và logic.

Theo glorevenhite’s blog

Bài viết liên quan

]]> http://webblogvn.com/blog/7-l%c6%b0u-y-khi-thi%e1%ba%bft-k%e1%ba%bf-web-v%e1%bb%9bi-css-va-html/feed/ 0