WEBBLOGVN.COM » lap trinh 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 Đặc điểm của một số thuộc tính CSS – Sự khác nhau của IE và chuẩn chung http://webblogvn.com/blog/d%e1%ba%b7c-di%e1%bb%83m-c%e1%bb%a7a-m%e1%bb%99t-s%e1%bb%91-thu%e1%bb%99c-tinh-css-s%e1%bb%b1-khac-nhau-c%e1%bb%a7a-ie-va-chu%e1%ba%a9n-chung/ http://webblogvn.com/blog/d%e1%ba%b7c-di%e1%bb%83m-c%e1%bb%a7a-m%e1%bb%99t-s%e1%bb%91-thu%e1%bb%99c-tinh-css-s%e1%bb%b1-khac-nhau-c%e1%bb%a7a-ie-va-chu%e1%ba%a9n-chung/#comments Thu, 01 Apr 2010 15:45:52 +0000 admin http://webblogvn.com/blog/?p=1961 Trong việc thiết kế web bây giờ thì các webmaster thích sử dụng ngôn ngữ CSS, tuy nhiên không phải trình duyệt nào cũng hỗ trợ tốt cho các thuộc tính của CSS, đặc biệt là trình duyệt Internet Explore của MS. Vậy làm sao trong  quá trình thiết kế để cho site của bạn hiện thị rõ trên các trình duyệt . bài viết được trích từ thegioiweb.vn sẽ cho bạn rõ

Các vấn đề sẽ đề cập
1. IE and the box model
2. IE versions and Doctype modes

IE and the box model

Cho dù bạn có thích hoặc căm ghét, Internet Explorer của Microsoft vẫn là một trình duyệt chính đựơc sử dụng hiện nay. Điều đó có nghĩa là vài điểm bạn cần xem xét khi thiết kế để khắc phục một vài điểm chưa hợp lý về CSS.
Một ví dụ dơn giản là một số phiên bản của IE thể hiện các hộp (box model) một cách khác biệt so với các trình duyệt chuẩn. Và các file CSS của bạn nhìn trên IE sẽ khác so với các trình duyệt còn lại như: firefox, opera.

Với một hộp vuông có chiều rộng 200px và được bạn gán thuộc tính “padding:20px; border:20px;” thì chiều rộng chuẩn của nó sẽ được tính như sau

Chiều rộng thể hiện
chiều rộng chuẩn (200px) + padding (20px+20px) + borders (20px+20px) = 280px.


Thế nhưng một vài phiên bản của IE sẽ tính ra chiều rộng bằng công thức: content, padding and borders together = 200px.

Theo http://css.maxdesign.com

Bài viết liên quan

]]> http://webblogvn.com/blog/d%e1%ba%b7c-di%e1%bb%83m-c%e1%bb%a7a-m%e1%bb%99t-s%e1%bb%91-thu%e1%bb%99c-tinh-css-s%e1%bb%b1-khac-nhau-c%e1%bb%a7a-ie-va-chu%e1%ba%a9n-chung/feed/ 0 Bo góc với CSS3 http://webblogvn.com/blog/bo-goc-v%e1%bb%9bi-css3/ http://webblogvn.com/blog/bo-goc-v%e1%bb%9bi-css3/#comments Sun, 19 Jul 2009 08:25:50 +0000 admin http://webblogvn.com/blog/?p=1408 Trước kia khi chúng ta muốn thực hiện định dạng một góc vuông mà bo bốn góc thì chúng ta cần phải dùng đến Javascript hoặc những kỹ thuật khá phức tạp (kỹ thuật 4 div hoặc 3 div). Tuy nhiên hiện nay CSS3 cho phép chúng ta thực hiện điều đó hết sức đơn giản.

Để minh chứng cho điều đó sau đây chúng ta cùng thực hiện một kỹ thuật đơn giản đó là bo góc cho một box vuông với CSS3.

Chưa bo góc….

Chúng ta thực hiện kỹ thuật bo góc của box vuông với đoạn code sau:

<div style=”-moz-border-radius: 5px; -webkit-border-radius: 5px; border: 1px solid #CCCCCC; padding: 10px;” >

Kết quả

Liệu đã được như mong muốn?

Có một vấn đề nảy sinh đó là hiện tại không phải trình duyệt nào cũng hỗ trợ chúng ta làm với CSS3, đối với một số trình duyệt cũ thì cũng ta vẫn phải sử dụng những kỹ thuật cũ để thực hiện bo góc. Còn với một số trình duyệt như Mozila/Firefox, Safari 3 thì chúng ta thỏa sức sáng tạo với những kỹ thuật của CSS3.

Bài viết liên quan

]]> http://webblogvn.com/blog/bo-goc-v%e1%bb%9bi-css3/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 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/ 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/#comments Fri, 03 Jul 2009 15:38:01 +0000 admin http://webblogvn.com/blog/?p=1347
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/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 Cách viết giản lược trong CSS http://webblogvn.com/blog/cach-vi%e1%ba%bft-gi%e1%ba%a3n-l%c6%b0%e1%bb%a3c-trong-css/ http://webblogvn.com/blog/cach-vi%e1%ba%bft-gi%e1%ba%a3n-l%c6%b0%e1%bb%a3c-trong-css/#comments Thu, 18 Jun 2009 15:12:51 +0000 admin http://webblogvn.com/blog/?p=1290
Nếu bạn là người thực sự muốn tìm hiểu về CSS, thì bạn không thể không tìm hiểu cách viết giản lược(shorthand) trong CSS. Cách viết này thực sự mang lại những lợi ích và tiện lợi khi bạn sử dụng CSS.
Trước khi đi vào phân tích những tiện lợi mà nó mang lại, tôi xin lấy một ví dụ đơn giản như sau. Giả sử rằng chúng ta muốn định dạng cho một thẻ <div> có đường viền bao quanh thì chúng ta cần phải viết.

border-width: 1px;
border-style: solid;
border-color: #CC0000;

Thay vì phải viết như vậy chúng ta chỉ cần viết

border: 1px solid #CC0000;

Qua ví dụ đơn giản ở trên ta có thể thấy cách viết này mang lại cho chúng ta một số lợi ích sau. Thứ hai

  1. Thứ nhất: nó giúp chúng ta giảm thiểu được đáng kể thời gian phải viết mã CSS.
  2. Thứ hai: bạn cứ tưởng tượng rằng file CSS của bạn có tới vài ngìn dòng và dung lượng lên tới vài trăm Kb, thì cách viết này còn giúp bạn giảm thiểu được đáng kể dung lượng của file CSS và giúp bạn dễ dàng theo dõi hơn, khi số lượng dòng của trang được giảm xuống.

Sau đây tôi xin đi vào chi tiết một số thuộc tính trong CSs mà chúng ta có thể dùng cách viết giản lược.

1. Thuộc tính Color

Có rất nhiều cách để định nghĩa một màu trong CSS, chúng ta có thể định nghĩa theo hệ số Hexa(trong hệ màu RGB), hoặc chúng ta có thể viết tên màu (ví dụ: white, red…). Nhưng cách định nghĩa theo hệ số Hexa được sử dụng thông dụng nhất. Để định nghĩa theo hệ Hexa chúng ta sẽ đặt dấu (#) ở trước sau đó đến các thông số màu (ví dụ: #003366). Dãy các thông số màu được chia làm 3 phần tương ứng với ba màu Red, Green, Blue (00: Red | 33: Green | 66: Blue). Trong cách định nghĩa hệ số màu ta cũng có cách viết giản lược như sau: #000000 có thể viết #000 hoặc #003366 có thể viết #036

2. Thuộc tính margin và padding.

margin-top: 10px;
margin-right: 15px;
margin-bottom: 20px;
margin-left: 25px;

Được thay thế bằng

margin: 10px 15px 20px 25px; /* top | right | bottom | left */

Tương tự với thuộc tính padding

padding-top: 10px;
pading-right: 15px;
padding-bottom: 20px;
padding-left: 25px;
padding: 10px 15px 20px 25px; /* top | right | bottom | left */

Cả hai thuộc tính margin và padding có hai chú ý như sau: nếu trong trường hợp có hai thông số.

margin: 10px 20px; /* top bottom | right left */
padding: 10px 20px; /* top bottom | right left */

Thì thông số thứ nhất tương đương với top và bottom còn thông số thứ hai tương đương với right và left

Trong trường hợp margin và padding có 3 thông số:

margin: 10px 20px 15px; /* top | right left | bottom */
padding: 10px 20px 15px; /* top | right left | bottom */

Thì thông số thứ nhất tương đương với top, thông số thứ hai tương đương với right và left, thông số thứ 3 tương đương với bottom

3. Thuộc tính border.

border-with: 1px;
border-style: solid;
border-color: #CC0000;

Sẽ viết thành

border: 1px solid #CC0000; /* width | style | color */

4. Thuộc tính background.

background-color: #CC0000;
background-image: (image url);
background-repeat: no-repeat; /* repeat-x, repeat-y */
background-position: top left;

Tương đương với

background: #CC0000 url('/image url') no-repeat top left;

5. Thuộc tính font

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

Dạng viết giản lược

font: 1em/1.5em bold italic small-caps Arial,Verdana,Sans-serif;

5. List type

list-style: none;

Có nghĩa là

list-style-type: none;

Bạn cũng có thể sử dụng thuộc tính list-style-position và list-type-image để định dạng cho danh sách không có thứ tự unordered lists, sử dụng hình ảnh cho mỗi dòng và sử dụng list-type-style là hình vuông trong trường hợp không hiển thị được ảnh. Và hai cách viết dưới đây là như nhau.

list-style:square inside url('/image.gif');

là giản lược cho

list-style-type: square;
list-style-position: inside;
list-style-image: url('/image.gif');

6. Outline

Thuộc tính này rất ít dùng vì có rất ít các trình duyệt hiện tại hỗ trợ thuộc tính này, hiện tại chỉ có một số trình duyệt hỗ trợ thuộc tính này Safari, OmniWeb và Opera. Cách viết giản lược các thuộc tính này như sau:

outline-color: #000;
outline-style: solid;
outline-with: 2px;

Cách viết giản lược sẽ là

outline: #000 solid 2px;

Theo cssyeah

Bài viết liên quan

]]> http://webblogvn.com/blog/cach-vi%e1%ba%bft-gi%e1%ba%a3n-l%c6%b0%e1%bb%a3c-trong-css/feed/ 0 Căn bản về CSS http://webblogvn.com/blog/can-b%e1%ba%a3n-v%e1%bb%81-css/ http://webblogvn.com/blog/can-b%e1%ba%a3n-v%e1%bb%81-css/#comments Wed, 01 Oct 2008 05:49:39 +0000 admin http://webblogvn.com/blog/can-b%e1%ba%a3n-v%e1%bb%81-css/ CSS là từ viết tắt của Cascading Style Sheets : công dụng dùng để trang trí trang web của bạn, và thông thường được gắn với các ngôn ngữ như là HTML, PHP, dùng làm nổi bậc trang web và hình ảnh trang web của bạn.

Mỗi khi bạn bắt đầu một Style Sheets, thì bắt buộc mở bằng <HEAD> và kết thúc bằng </HEAD> và tiếp theo sau đó là khai báo <STYLE> và kết thúc bằng </STYLE>
và sau những bước trên thì bạn có thể nhìn thấy nguyên đoạn code như sau
<head>
<style>
và ở giữa này là nơi bạn thêm vào sau này
</style>
</head>

Và sau đây là cấu trúc của CSS:
Tag {definition1; definition2;…..; definition n}
ví dụ sau đây về dòng lệnh của CSS:
H2 {font-size: 16pt; font-style: italic; font-family: arial}

Và sau đây chúng ta tìm hiểu về những cách hàm trong CSS:

1. Tìm hiểu về cách trang trí của font chữ:

a. font-family là dùng để khai báo kiểu loại font nào bạn sử dụng
ví dụ: H2 {font-family: arial}

b. font-style: là dùng để khai báo kiểu chữ bạn dùng trong style, bình thường hay nghiêng
ví dụ H3 {font-style: normal}

c. font-weight và font-variant: là dùng để trang trí kiểu font bạn đang dùng như là sáng (light), đậm (bold)
ví dụ A:link {font-weight: demi-light}

d. text-align: là vị trí nằm của font trong trang web, có 3 kiểu là nằm sang trái (left), phải (right) và ở giữa là (center)
ví dụ: H1 {text-align: center}

e. text-decoration: là dùng để trang trí kiểu font như là italic, blink…
ví dụ: A:visited {text-decoration: blink}

f. text-indent: dùng để size (kích cỡ) mà bạn đang dùng, thông thường dùng là <p> và </p> và khai báo đơn vị là in, cm, pixel
ví dụ : P {text-indent: 1in}

g. word-spacing: dùng để khoảng cách giữa các từ.
ví dụ: P {word-spacing: 10px}

h: letter-spacing: dùng để khoảng cách giữa các chữ
ví dụ: P {letter-spacing: 10px}

i. color: dùng để hiển thị màu cho kiểu chữ
ví dụ: H3 {color: #FFFFFF}
Để hiển thị đoạn màu bạn muốn, thì bạn nên vào photoshop và chọn màu bạn thích và sẽ hiện thị ra mã số và bạn chọn mã số đó.

2.Chúng ta tìm hiểu về Margin/Background: khi bạn dùng thì nó sẽ ảnh hưởng đến toàn bộ trang web của bạn.

a. margin-left: đoạn canh lề bên trái

b. margin-right: đoạn canh lề bên phải

c. margin-top: đoạnh canh lền trên cùng
ví dụ chúng ta có thể dùng như sau
BODY {margin-left: 2in}
P {margin-right: 12cm}
BODY {margin-top: 45px}

d. margin: có thể khai báo chúng một lúc cho top, right và left như sau
P {margin: 3in 4cm 12px}

e. line-height: là khoảng cách giữa các dòng chữ
ví dụ: TEXT {line-height: 10px}

f. background-color: là dùng để hiển thị màu nền của trang web
ví dụ:
BODY {background-color: #ffffff}

g: background-image: bạn có thể dùng một tấm hình để làm background cho trang web bạn
ví dụ:
BODY {background-image: http://www.page.com/dog.jpg}

h. background-repeat: là dùng để lập lại hình nền theo trục tọa độ x và y.
Ví dụ:
BODY {background-repeat: repeat-y}

i. background-attachment: là dùng để gán hình, hình ảnh nền của trang web bạn, nó ko có thể di chuyển.
ví dụ:
BODY{background-attachment: fixed}

3.Chúng ta tìm hiểu về Position và Division:

a. Position: là dùng để định vị một ví trí xác định nào đó
<IMG src=”joe.jpg”>

b. left: là dùng để hình ảnh nằm về vị trí bên trái bao nhiêu
<IMG src=”joe.jpg”>

c. right: là dùng để hình ảnh nằm về vị trí bên phải bao nhiêu
<IMG src=”joe.jpg”>

d. Top: là dùng để định vị trí trên top của screen
<IMG src=”joe.jpg”>

e. Width: là dùng để xác định chiều ngang của tấm hình của bạn là bao nhiêu
<IMG src=”joe.jpg”>

f. height: là dùng để xác định chiều cao của tấm hình
<IMG src=”joe.jpg”>

g. overflow: là khi tấm hình của bạn quá kích cỡ cho phép thì nó có thể dùng những chức năng sau hidden, visible, scroll
<IMG src=”joe.jpg”>
và sau đây là đoạn code khi bạn nhìn thấy trong web:
<BODY> </STYLE>

Chúng ta sẽ đi tìm hiểu từng phần, phần thứ nhất chúng ta sẽ tìm hiểu vể TEXT: ví dụ dòng chữ sau
<STYLE> a:link { color: blue; text-decoration: none } a:active { color: red; text-decoration: none } a:visited { color: blue; text-decoration: none } a:hover { color: green; text-decoration: underline } </STYLE>

a:link là để hiển thị khi bạn nhìn thấy màu chữ là xanh
a:ative là để hiển thị màu đỏ khi bạn click vào dòng chữ đó
a:visited là để hiển thị màu xanh khi bạn nhìn thấy
a:hover là để hiện thì màu xanh lá cây khi bạn dùng con chuột đặt lên dòng chữ đó
Text-decoration: là dùng để trang trí dòng chữ ví dụ underline là gạch dưới
và sau đây là những code có tác dụng tương tự như trên nhưng thay đổi màu:
a.tree:link { color: green; text-decoration: none }
a.tree:active { color: yellow; text-decoration: none }
a.tree:visited { color: red; text-decoration: none }
a.tree:hover { color: orange; text-decoration: underline }
a.dog:link { color: blue; text-decoration: none }
a.dog:active { color: red; text-decoration: none }
a.dog:visited { color: blue; text-decoration: none }
a.dog:hover { color: green; text-decoration: underline }

<a href=”index.html” class=”tree”>Index</a>
Bạn có thể dùng đoạn text trên link đến một trang web nào khác như là nhothuong.html và cấu trúc luôn bắt đầu bằng <a> và kết thúc </a> href=” là dùng để link đến trang web mà bạn muốn tới.” Còn class=”tree” là dùng để khai báo tên của class đó.
Đây cũng là đoạn code cũng có tác dụng như trên
<a href=”index2.html” class=”dog”>Index2</a>
Và sau đây là những đoạn code, bạn có thể trang trí thêm làm để xung thêm chức năng của nó.
<STYLE> a:link { color: green; text-decoration: none } a:active { color: yellow; text-decoration: none } a:visited { color: green; text-decoration: none } a:hover { color: green; text-decoration: underline; background: #F9EDED } </STYLE>
<STYLE> a.link { color: green; text-decoration: none } a.active { color: yellow; text-decoration: none } a:visited { color: green; text-decoration: none } a.hover { color: orange; text-decoration: underline; font-family : Verdana, Arial, Helvetica, sans-serif; } </STYLE>
<STYLE> a.link { color: green; text-decoration: none } a.active { color: yellow; text-decoration: none } a:visited { color: green; text-decoration: none } a.hover { color: orange; text-decoration: underline; font-size:40pt } </STYLE>
<STYLE> a.link { color: green; text-decoration: none } a.active { color: yellow; text-decoration: none } a:visited { color: green; text-decoration: none } a.hover { color: orange; text-decoration: underline; font-weight: bold} </STYLE>
<STYLE> a.italic:link { color: green; text-decoration: none } a.italic:active { color: yellow; text-decoration: none } a:italic:visited { color: green; text-decoration: none } a.italic:hover { color: orange; text-decoration: underline; font-style: italic} </STYLE>

Bạn muốn đưa con trỏ của bạn vào CSS chỉ cần dùng dòng sau
CURSOR: url(tencontro.ani);

Tiếp theo sau chúng ta tìm hiểu về scroll bar trong CSS
ví dụ đoạn code sau:
<STYLE> BODY { scrollbar-base-color: orange; scrollbar-arrow-color: green; scrollbar-DarkShadow-Color: blue; } </STYLE>

scrollbar-base-color: orange; là hiển thị màu cam, cho nguyên thanh bar từ trên xuống dưới
scrollbar-arrow-color: green; là hiển thị màu xanh, cho 2 cái mũi tên lên và xuống
scrollbar-DarkShadow-Color: blue; là hiện thị bóng màu xanh của thanh scroll
scrollbar-base-color: là hình để hiển thị toàn bộ màu của thanh scroll
scrollbar-Face-Color: là để hiển thị màu trên bề mặt của thanh scroll
scrollbar-Highlight-Color: là để hiện thì màu hightlight của thanh scroll
Bài viết về các tùy biến trong giao diện ( rất tốt cho bạn nào muốn thay đổi màu sắc của skin forum )

Chèn ảnh nền vào phần nhập nội dung bài viết:
Vào Style & Templates/ Manager Style/ Main CSS
Tại phần Soạn thảo WYSIWYG ta thay phần màu nền background thành
#F5F5FF url(images/misc/anhnen_text_box.gif) no-repeat center

Trong đó tên “anhnen_text_box.gif” là tên ảnh mà bạn muốn chèn đặt tại thư mục images/misc/
Thế thui

Làm viền cho nút
Ta tới phần Nút (Button)
Thay vào giá trị màu nền là: #E4E7F5
Thêm vào ô thuộc tính CSS đặc biệt (phía bên phải của ô màu nền ấy):
BORDER-RIGHT: #5182c2 1px dotted; BORDER-TOP: #5182c2 1px dotted; BORDER-LEFT: #5182c2 1px dotted; BORDER-BOTTOM: #5182c2 1px dotted;

Trong đó tên “anhnen_text_box.gif” là tên ảnh mà bạn muốn chèn đặt tại thư mục images/misc/
Thế thui

Làm viền cho nút
Ta tới phần Nút (Button)
Thay vào giá trị màu nền là: #E4E7F5
Thêm vào ô thuộc tính CSS đặc biệt (phía bên phải của ô màu nền ấy):
BORDER-RIGHT: #5182c2 1px dotted; BORDER-TOP: #5182c2 1px dotted; BORDER-LEFT: #5182c2 1px dotted; BORDER-BOTTOM: #5182c2 1px dotted;

Sau đó bạn có thể thay các thuộc tính như:
màu sắc viền (#5182c2)
Độ dày viền : 1px dotted

Chèn ảnh nền vào thẻ Body của trang chủ. Cái này nếu biết cách sử dụng thì sẽ rất hữu ích
Tại phần Trang nền (Background page) ngay bên dưới phần Body đó ta nhập thuộc tính vào ô màu nền như sau:
#FFFFFF url(images/misc/dot.gif)

Sau đó bạn có thể thay các thuộc tính như:
màu sắc viền (#5182c2)
Độ dày viền : 1px dotted

Chèn ảnh nền vào thẻ Body của trang chủ. Cái này nếu biết cách sử dụng thì sẽ rất hữu ích
Tại phần Trang nền (Background page) ngay bên dưới phần Body đó ta nhập thuộc tính vào ô màu nền như sau:
#FFFFFF url(images/misc/dot.gif)

Trong đó tên ảnh là “dot.gif” đặt trong thư mục “images/misc/”

Category Strips
‘Category Strips’ được dùng với hai mục đích. Nó được dùng để chỉ ra một ‘Chuyên mục’ diễn đàn, và nó cũng được sử dụng như một kiểu giao diện cho nội dung thanh tiêu đề của hầu hết các bảng.
Nếu ta muốn chèn ảnh vào phần thanh tiêu đề của “Chuyên mục” thì ta nhập vào ô màu nền như sau:
#FFFFFF url(images/misc/table_header_bg.gif) repeat-x top left

Trong đó #FFFFFF (màu trắng) là màu nền còn ảnh nền thì các bạn cũng đã hiểu với phần trên.
Lưu ý rằng các bạn phải chú trọng cả đến màu ảnh nền và màu Font. Để cho 2 cái có độ tương phản cho dễ đọc

Màu đầu tiên (First color) và màu thứ hai (Second color)
Mô tả:
Hầu hết các bảng trong diễn đàn dùng màu đầu tiên hoặc thứ hai cho màu nền. Đặt thuộc tính để sử dụng ‘Màu đầu tiên’ tại đây.
Màu đầu tiên là màu nền của phần nội dung bài viết khi bạn xem chủ đề
Màu thứ hai là màu nền của phần có chứa tên sử dụng, Avatar, danh hiệu… của người viết bài
Các bạn nên sửa cho phù hợp với tông màu của màu nền diễn đàn một cách hài hoà.

Sau đây là thiết lập giao diện của tôi đã thực hiện. Tôi cho rằng giao diện này sửa thêm một vài chi tiết nữa thì chẳng kém giao diện của anh Admin bên này. Chú ý rằng giao diện đẹp thì phải đi đôi với bộ nút đẹp. Các bạn nên sắm cho mình một bộ nút ăn ý với giao diện. Còn bây giờ đây là phần giao diện của tôi:

Body
Giữ nguyên thiết lập gốc
———-
Trang nền (Background page)
Màu nền: #FFFFFF url(images/misc/dot.gif)
Màu Font: #000000
——————————
<td>, <th>, <p>, <li>
Giữ nguyên thiết lập gốc
————————-
Viền bảng
Giữ nguyên thiết lập gốc
——————————-
Category Strips
Màu nền: #FFFFFF url(images/misc/tm.gif) no-repeat center
Màu Font: #003366
Liên kết CSS bình thường
Màu nền: transparent
Màu Font: #003366
Text decoration: None
Liên kết CSS đã vào:
Màu nền: transparent
Màu Font: #666666
Text decoration: None
Liên kết CSS Hover
Màu nền: transparent
Màu Font: #006699
Text decoration: underline
—————————————–
Table Header
Màu nền: #FFFFFF url(images/misc/table_header_bg.gif) repeat-x top left
Màu Font: #003366
Liên kết CSS bình thường
Màu nền: transparent
Màu Font: #003366
Text decoration: None
Liên kết CSS đã vào:
Màu nền: transparent
Màu Font: #666666
Text decoration: None
Liên kết CSS Hover
Màu nền: transparent
Màu Font: #006699
Text decoration: underline
————————————–
Table Footer
Màu nền: #FFFFFF
Màu Font: #003366
Liên kết CSS bình thường
Màu nền: transparent
Màu Font: #003366
Text decoration: None
Liên kết CSS đã vào:
Màu nền: transparent
Màu Font: #666666
Text decoration: None
Liên kết CSS Hover
Màu nền: transparent
Màu Font: #006699
Text decoration: underline
———————————-
Màu đầu tiên Màu thứ hai
Màu nền: #FFFFFF
Màu Font: #003366
Thuộc tính CSS đặc biệt:
border: 1px solid #E5E5E5;
———————————-
Soạn thảo WYSIWYG
Màu nền: #F5F5FF url(images/misc/anhnen_text_box.gif) no-repeat center
Màu Font: #003366
Thuộc tính CSS đặc biệt:
BORDER-RIGHT: #5182c2 1px dotted; BORDER-TOP: #5182c2 1px dotted; BORDER-LEFT: #5182c2 1px dotted; BORDER-BOTTOM: #5182c2 1px dotted;
————————-
Ô nhập liệu
Thuộc tính CSS đặc biệt:
BORDER-RIGHT: #5182c2 1px dotted; BORDER-TOP: #5182c2 1px dotted; BORDER-LEFT: #5182c2 1px dotted; BORDER-BOTTOM: #5182c2 1px dotted;
———————————-
Nút (Button)
Màu nền: #E4E7F5
Thuộc tính CSS đặc biệt:
BORDER-RIGHT: #5182c2 1px dotted; BORDER-TOP: #5182c2 1px dotted; BORDER-LEFT: #5182c2 1px dotted; BORDER-BOTTOM: #5182c2 1px dotted;
————————————
Menu
Small Font
Time Color
Được giữ nguyên thiết lập gốc
————————————-
Navbar Text
Màu nền: #FFFFFF
Màu Font: #003366
————————————-
Highlighted Font
Màu nền: #FFFFFF
Màu Font: #FF0000
————————————
Panel Surround
Màu nền: #D5D8E5 url(images/gradients/gradient_panelsurround.gif) repeat-x top left
Màu font: #000000
———————————
Panel (Forms)
Màu nền: #E4E7F5 url(images/gradients/gradient_panel.gif) repeat-x top left
Màu font: #000000
——————————–
<legend>
Giữ nguyên
——————————–
Điều khiển menu Popup
Màu nền: #FFFFFF
Màu Font: #003366
Thuộc tính CSS đặc biệt:
padding: 3px 6px 3px 6px;
white-space: nowrap;
Liên kết CSS bình thường
Màu nền: #FFFFFF
Màu Font: #003366
Text decoration: None
Liên kết CSS đã vào:
Màu nền: #FFFFFF
Màu Font: #666666
Text decoration: None
Liên kết CSS Hover
Màu nền: #FFFFFF
Màu Font: #006699
Text decoration: underline
——————————-
Popup Menu Body
Giữ nguyên
——————————-
Tùy chọn dòng cho Menu Popup
Màu nền: #FFFFFF
Màu Font: #000000
Thuộc tính CSS đặc biệt
white-space: nowrap;
cursor: pointer;
Liên kết CSS bình thường
Màu nền: #FFFFFF
Màu Font: #22229C
Text decoration: None
Liên kết CSS đã vào:
Màu nền: #FFFFFF
Màu Font: #22229C
Text decoration: None
Liên kết CSS Hover
Màu nền: #FFFFFF
Màu Font: #FFFFFF
Text decoration: None
———————————
Menu chuyển nhanh
Item selected
Màu nền:#FFFFFF
Màu Font: #003366
———————————

Bài viết liên quan

]]> http://webblogvn.com/blog/can-b%e1%ba%a3n-v%e1%bb%81-css/feed/ 0