10 Thủ thuật CSS mà bạn cần biết

Chia sẻ: Abcdef_44 Abcdef_44 | Ngày: | Loại File: PDF | Số trang:6

Thêm vào BST

Báo xấu

111
lượt xem 19
download

Download Vui lòng tải xuống để xem tài liệu đầy đủ

Trong quá trình thực hành và làm việc với CSSCascading Style Sheets chúng ta sẽ gặp những vấn đề xảy ra rất thường xuyên, để giải quyết chúng một cách nhanh chóng thì chúng ta cần phải biến những cách xử lý của các vấn đề đó trở thành những phản xạ của riêng mình. Do đó trong bài viết này tôi xin 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. Tôi hy vọng rằng sau khi đọc xong bài viết này các bạn...

Chủ đề:

Bình luận(0) Đăng nhập để gửi bình luận!

Lưu

Nội dung Text: 10 Thủ thuật CSS mà bạn cần biết

10 Thủ thuật CSS mà bạn cần biết - Phần I Trong quá trình thực hành và làm việc với CSSCascading Style Sheets chúng ta sẽ gặp những vấn đề xảy ra rất thường xuyên, để giải quyết chúng một cách nhanh chóng thì chúng ta cần phải biến những cách xử lý của các vấn đề đó trở thành những phản xạ của riêng mình. Do đó trong bài viết này tôi xin 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. Tôi 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: view source print? 1.font-weight: bold; 2.font-style: italic; 3.font-variant: small-caps;
4.font-size: 1em; 5.line-height: 1.5em; 6.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. view source print? 1.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. view source print? 1.... 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 view source print? 1.div.class1 { 2.background: #CC0000; 3.} 4. 5.div.class2 { 6.background: #00000FF; 7.} 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:
view source print? 1.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. view source print? 1. 2. 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.