Khi bạn thiết kế website thì ngoài phần html thì css là thành phần quan trọng thứ 2, 1 website đẹp, code gọn thì bạn cần phải nắm rõ cấu trúc và syntax của css ! Dưới đây là 20 thủ thuật và bạn nên áp dụng ngay trong file css của bạn !

1. Use reset.css

   When it comes to rendering CSS styles, browsers like Firefox and Internet Explorer have different ways of handling them. reset.css resets all fundamental styles, so you starts with a real blank new stylesheets.

   Here are few commonly used reset.css frameworks – Yahoo Reset CSS, Eric Meyer’s CSS Reset, Tripoli

2. Use Shorthand CSS

   Shorthand CSS gives you a shorter way of writing your CSS codes, and most important of all – it makes the code clearner and easier to understand.

   Instead of creating CSS like this

   view plaincopy to clipboardprint?

   1. .header {
        
   2.       background-color: #fff;
        
   3.       background-image: url(image.gif);
        
   4.       background-repeat: no-repeat;
        
   5.       background-position: top left; 
        
   6.     }  

   It can be short-handed into the following:

   view plaincopy to clipboardprint?

   1. .header {
        
   2.       background: #fff url(image.gif) no-repeat top left
        
   3.     }  

   More – Introduction to CSS Shorthand, Useful CSS shorthand properties

3. Understanding Class and ID

   These two selectors often confuse beginners. In CSS, class is represented by a dot "." while id is a hash ‘#". In a nutshell id is used on style that is unique and don’t repeat itself, class on the other side, can be re-use.

   More – Class vs. ID | When to use Class, ID | Applying Class and ID together

4. Power of

5. a.k.a link list, is very useful when they are use correctly with
   or
   , particulary to style a navigation menu.

   More – Taming Lists, Amazing LI

   • Forget , try

     One of the greatest advantage of CSS is the use of

     to achieve total flexibility in terms of styling.

     are unlike

     , where contents are ‘locked’ within a

     ‘s cell. It’s safe to say most layouts are achievable with the use of and proper styling, well maybe except massive tabular contents. More – Tables are dead, Tables Vs. CSS, CSS vs tables CSS Debugging Tools It’s always good to get instant preview of the layout while tweaking the CSS, it helps understanding and debugging CSS styles better. Here are some free CSS debugging tools you can install on your browser: FireFox Web Developer, DOM Inspector, Internet Explorer Developer Toolbar, and Firebug. Avoid Superfluous Selectors Sometimes your CSS declaration can be simpler, meaning if you find yourself coding the following: ul li { ... }   ol li { ... }   table tr td { ... }   They can be shorten down to just li { ... }   td { ... }   Explanation: will only exist within or and and will only be inside so there’s really not necessary to re-insert them. Knowing !important Any style marked with !important will be taken into use regardlessly if there’s a overwriting rule below it. view plaincopy to clipboardprint? .page {  background-color:blue !important;    background-color:red; }   In the example above, background-color:blue will be adapted because it’s marked with !important, even when there’s a background-color:red; below it. !important is used in situation where you want to force a style without something overwriting it, however it may not work in Internet Explorer. Replace Text with Image This is commonly practice to replace title from a text based title to an image. Here’s how you do it. view plaincopy to clipboardprint? h1 {    text-indent:-9999px;    background:url("title.jpg") no-repeat;    width:100px;    height:50px;    }   Explanation: text-indent:-9999px; throws your text title off screen, replaced by an image declared by background: {...} with a fixed width and height. Understand CSS Positioning The following article gives you a clear understanding in using CSS positioning – position: {...} More – Learn CSS Positioning in Ten Steps CSS @import vs There are 2 ways to call an external CSS file – respectively using @import and . If you are uncertain which method to use, here’s few articles to help you decide. More – Difference Between @import and link Designing Forms in CSS Web forms can be easily design and customize with CSS. These following articles show you how: More – Table-less form, Form Garden, Styling even more form controls Get Inspired If you are looking around for nicely designed CSS-based website for inspiration, or just simply browsing to find some good UI, here are some CSS showcase site we recommend: CSS Remix CSS Reboot CSS Beauty CSS Elite CSS Mania CSS Leak Need more? Here’s a round up of 74 CSS Galleries. Rounded Corners in CSS This following article gives you an idea how to create cross-browser compatible rounded borders with CSS. Keep CSS Codes Clean If your CSS codes are messy, you are going to end up coding in confusion and having a hard time refereing the previous code. For starters, you can create proper indentation, comment them properly. More – 12 Principles For Keeping Your Code Clean, Format CSS Codes Online Typography Measurement: px vs em Having problem choosing when to use measurement unit px or em? These following articles might give you a better understanding on the typography units. More – Units of Measurement in CSS, CSS Font size explained, Using Points, Pixels, Ems, or Percentages for CSS Fonts CSS Browsers Compatibility Table We all know each browser has different ways of rendering CSS styles. It’s good to have a reference, a chart or a list that shows the entire CSS compatibility for each browser. CSS support table: #1, #2, #3, #4. Design Multicolumns in CSS Having problem getting the left, middle and right column to align properly? Here are some articles that might help: In Search of the Holy Grail Faux Columns Top reasons your CSS columns are messed up Litte Boxes (examples) Multi-Column Layouts Climb Out of the Box Absolute Columns Get a Free CSS Editors Dedicated editors are always better than a notepad. Here are some we recommend: More – Simple CSS, Notepad ++, A Style CSS Editor Understanding Media Types There are few media types when you declare CSS with . print, projection and screen are few of the commonly used types. Understanding and using them in proper ways allow better user accessibility. The following article explains how to deal with CSS Media types. Like and share: Tin Cùng Chuyên Mục 8 Plugins to Turn Your WordPress Site to a Mobile App (8/26/2016) Hướng dẫn cài đặt livechat bằng Facebook cho website (12/8/2015) rop 20 giao diện miễn phí đầy đủ chức năng cho open source (10/30/2015) Hiệu ứng hình ành instagran đẹp với Css Gram (10/30/2015) 20 Tips thủ thuật trong wordpress cực kỳ hữu ích (10/23/2015) 36 giao diện website bánh cực đẹp (10/23/2015) Trình duyệt hỗ trợ HTML5/CSS3 2015 (10/23/2015) 36 Giao diện website bánh đẹp - sang trọng (8/8/2015) Bảng Chi tiết Trình Duyệt Hỗ Trợ HTML 5 (8/8/2015) 25 Free CSS HTML Login Form Templates (6/21/2015) 49 mẫu website miễn phí Responsive HTML5 CSS3 (6/21/2015) Thủ thuật tăng tốc load website hữu ích trong lập trình (6/19/2015) The Best CSS Reset Stylesheets (6/19/2015) Hướng dẫn tạo chọn màu cho sản phảm - Jquery Color Pickup Product (5/10/2015) 3 lỗi thường mắc phải khi thiết kế website responsive (4/28/2015) Hướng dẫn dùng Owl Carousel hiển thi 2 hàng sản phẩm khi chuyển qua lại (11/23/2014) Cách chọn màu phù hợp phối logo và website (11/15/2014) 20 thủ thuật CSS dành cho người mới bắt đầu học (11/1/2014) 45 mẫu web HTML5 And CSS3 miễn phí mà bạn không nên bỏ lỡ ! (9/26/2014) Cách tạo scrollable splash screen với CSS3 và jquery (5/31/2014) Trang 1 / 1 Bạn đã đọc tin này chưa ?