Viet Gian Luoc Trong Css

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; //background transparent background-color:#000; filter: alpha(opacity=50); -moz-opacity:0.5; opacity:0.5;

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;

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.

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. 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.

Làm rõ thuật ngữ (Id) và (Class) Cũng có khá nhiều bạn hỏi tôi về việc làm sao để phân biệt được id và class. Khi nào dùng id, khi nào dùng class trong quá trình thực hiện viết mã HTML và style nó trong

CSS. Trong bài viết này tôi xin giải thích kỹ hơn về hai thuật ngữ này và cách dùng chúng trong quá trình viết mã HTML. 1. Id. Đầu tiên chúng ta sẽ đi tìm hiểu về thuật ngữ id 1.1 Id là gì? id hay là index(chỉ số) được dùng để xác định một đối tượng duy nhất nào đó. Do đó trong một trang HTML của bạn mỗi đối tượng chỉ có duy nhất một id, nếu có 2 đối tượng trở lên có id giống nhau trong cùng một trang thì điều đó có nghĩa là trang đó của bạn không validate HTML. 1.2 Id dùng khi nào?. Do mỗi trang HTML mỗi đối tượng chỉ có thể có duy nhất một id chính vì vậy id được dùng cho những đối tượng nào mang tính duy nhất trong trang (ví dụ: khung viền (wrapper), menu chính (main menu),...). 1.3. Cách dùng id. Trong file CSS chúng ta sẽ dùng dấu "#" trước tên đối tượng mà chúng ta đặt là id . 2. ClassBây giờ chúng ta tiếp tục đi tìm hiểu về thuật ngữ class và cách sử dụng chúng trong quá trình viết mã HTML. 2.1 Class là gì? class hay còn gọi là lớp dùng để chỉ một lớp các đối tượng có chung các thuộc tính. Các đối tượng trong cùng một class có tính thừa kế lẫn nhau, chính vì vậy trong một trang HTML của bạn có thể có rất nhiều các đối tượng có thể thuộc một class nào đó. Ví dụ sau đây sẽ minh chứng cho các bạn về tính thừa kế và việc định nghĩa nhiều đối tượng cùng thuộc một class nào đó. Giả sử rằng chúng ta có một trang HTML như sau: Giả sử rằng chúng ta định nghĩa các thuộc tính của class="info" như sau: .info { margin: 5px 10px; padding: 10px; border: 1px solid #F0F0F0; } Bây giờ bạn muốn định nghĩa cho thẻ div nằm trong phần author có màu nền là màu đen và chữ là màu trắng thì ta chỉ cần định nghĩa thêm hai thuộc tính này còn thẻ

---

Related Documents