23 June 2016

Một số loại css, html rất quan trọng và hay sử dụng mà chúng ta quên hoặc chưa từng dùng

1- overflow (Hay sử dụng để che đi phần không mong muốn)



Kết quả ta được

2-Span (Hiển thị đoạn văn trên cùng dòng với thẻ p nói cách khác là can thiệp vào được thẻ p)

-từ đó ta có thể css cho span thành chữ có style riêng biệt khác p



3- fist-leter (Chữ in hoa đầu tiên của đoạn văn)

  p::first-letter {
      font-size: 200%;
      color: #8A2BE2;

  }
4 - Absolute (Absolute phải nghe theo body)
#container {
/*Khi chưa dùng relative*/
}
#container #logo1 {

position:absolute;
}
#container #logo2 {

position:absolute;
}
#container #logo3 {

position:absolute;
}
#container #logo4 {

position:absolute;

}

#container {
position:relative; //Khi sử dụng relative
}
#container #logo1 {

position:absolute;
}
#container #logo2 {

position:absolute;
}
#container #logo3 {

position:absolute;
}
#container #logo4 {

position:absolute;

}


5- Animatable (Hiệu ứng bằng css nâng cao)
http://leaverou.github.io/animatable


======Hướng dẫn viết css tối ưu nhất======


1. Không sử dụng thiết lập toàn cầu

Sử dụng thiết lập toàn cầu để loại bỏ các mặc định về margin và [padding] từ tất cả các phần tử [HTML] tuyệt đối không sử dụng. Nó không chỉ chậm mà còn không hiệu quả nhưng bạn phải xác định margin và padding cho mỗi yếu tố khi cần nó. Thay vì đó hãy sử dụng tập hợp các thiết lập CSS như của Eric Meyer.

Không tốt 
*{ margin:0; padding:0; }



Tốt 
*{ margin:0; padding:0; } 



  • html, body, div, dl, dt, dd, ul,  h1, h2, h3,  pre, form, label, fieldset, input, p, blockquote, th, td { margin:0; padding:0 }  
  • table { border-collapse:collapseborder-spacing:0 }  
  • fieldset, img { border:0 }  
  • ul { list-style:none }
  • - See more at: http://webdeveloperplus.com/css/tips-to-write-better-css-code/#sthash.gPgfSZ2t.dpuf

      html, body, div, dl, dt, dd, ul,  h1, h2, h3,  pre, form, label, fieldset, input, p, blockquote, th, td { margin:0; padding:0 }  
      table { border-collapse:collapseborder-spacing:0 }  
      fieldset, img { border:0 }  
            ul { list-style:none }

      2. Không dùng Hacks IE 

      Mặc dù CSS hacks có thể có ích cho việc duy trì một cái nhìn nhất quán của website trên các trình duyệt cũ như IE6, nhưng chúng có vấn đề ở những phiên bản mới của trình duyệt IE như IE8 hỗ trợ tiêu chuẩn CSS ở cấp độ cao và sử dụng hacks có thể loại bỏ các cách bố trí. Bạn nên sử dụng các bản trình bày có điều kiện thay vì nhắm đến các phiên bản cụ thể của IE. Ví dụ, bằng cách sử dụng dòng lệnh của code trong thẻ <head> bạn sẽ chỉ load tập tin iestypes.css khi trình duyệt là IE6 hoặc nhỏ hơn.

      Đối với thông tin trong các comment có điều kiện, hãy tham khảo bài viết quirksmode trên CSS Conditional Comments.

      Quirksmode 

      <!--[if lte IE 6]>  
      <link rel="stylesheet" type="text/css" href="styles/ie-styles.css" />  
            <![endif]--> 

      3. Sử dụng tên có ý nghĩa cho ID va class

      Giả sử bạn định nghĩa style slidebar sử dụng [class] .leftbox và sau một vài lần thiết kế lại, bạn chuyển nó qua bên phải, sau đó nó sẽ có ý nghĩa để có leftbox như tên box mà bạn vừa chuyển. Bạn nên đặt ra một vài suy nghĩ trước khi tuyên bố các class và ID cho các phần tử để chúng có ý nghĩa và dễ hiểu sau này.

      4. Tận dụng CSS inheritance

      Nếu nhiều phần tử con của phần tử cha mẹ sử dụng cùng style trên một trang web. Nó sẽ tốt hơn khi xác định chúng cho các phần tử cha mẹ của chúng và để các CSS inheritance làm tất cả mọi việc. Bạn sẽ có thể dễ dàng update code của bạn sau này và nó sẽ làm giảm kích thước file CSS đáng kể

      Không tốt





    1. #container li{ font-family:Georgia, serif; }  
    2. #container p{ font-family:Georgia, serif; }  
    3. #container h1{font-family:Georgia, serif; }
    4. - See more at: http://webdeveloperplus.com/css/tips-to-write-better-css-code/#sthash.aDjR4UEP.dpuf
      #container li{ font-family:Georgia, serif; }  
      #container p{ font-family:Georgia, serif; }  
            #container h1{font-family:Georgia, serif; }

      Tốt hơn 
            #container{ font-family:Georgia, serif; }  

        5. Kết hợp nhiều bộ chọn lọc

        Bạn có thể kết hợp nhiều bộ lọc vào trong một nếu chúng có các style nhất định phổ biến. Nó sẽ giúp bạn tiết kiệm thời gian và không gian.

        Không tốt

             h1{ font-family:ArialHelveticasans-seriffont-weight:normal; }  
             h2{ font-family:ArialHelveticasans-seriffont-weight:normal; }  
             h3{ font-family:ArialHelveticasans-seriffont-weight:normal; }

        Tốt hơn


        h1, h2, h3{ font-family:ArialHelveticasans-seriffont-weight:normal; }
        6. Sử dụng thuộc tính viết tắt 

        Sử dụng các thuộc tính viết tắt của CSS để viết code CSS nhanh hơn và giảm kích cỡ file. Các ký hiệu viết tắt có thể được sử dụng cho margin, padding, border, font, background và cũng như cho các giá trị màu sắc.

        Không tốt

        li{   

        font-family:ArialHelveticasans-serif;  
        font-size: 1.2em;  
        line-height: 1.4em;  
        padding-top:5px;  
        padding-bottom:10px;  
        padding-left:5px;  
        Tốt hơn

        li{   

        font: 1.2em/1.4em ArialHelveticasans-serif;   
        padding:5px 0 10px 5px;  
        }
        Dưới đây là một hướng dẫn đầy đủ về thuộc tính viết tắt CSS

        7. Tổ chức code CSS

        Tổ chức code CSS của bạn trong một khuôn khổ nhất định sẽ làm cho nó dễ dàng hơn khi tìm kiếm một điều gì đó sau này và giúp bạn tiết kiệm nhiều thời gian tìm kiếm một định nghĩa style cụ thể.

        Đây là một tổ chức mẫu mà bạn có thể sử dụng

        Tổ chức code CSS 
         

        /*------------------------- 
         CSS Reset 
        -------------------------*/  
          
        /*------------------------- 
            Generic Classes 
        -------------------------*/  
          
        /*------------------------- 
            Layout styles 
        -------------------------*/  
          
        /*------------------------- 
            Section specific styles 
        -------------------------*/


        8. Làm cho CSS dễ đọc hơn 

        Viết CSS dễ đọc sẽ làm cho CSS dễ dàng được tìm kiếm và update các style trình bày sau này. Nhóm tất cả các style của một phần tử trong một dòng hay mỗi style trong dòng của nó với các thụt đầu dòng thích hợp. Bạn cũng có thể kết hợp 2 kỹ thuật này lại với nhau.

        Làm cho CSS dễ đọc hơn
        /*------------------------ 
          Each Style on new line 
           ---------------------*/  
        div{   
           background-color:#3399cc;     
           color:#666;  
           font: 1.2em/1.4em ArialHelveticasans-serif;   
           height:300px;  
           margin:10px 5px;  
           padding:5px 10px 5px;  
           width:30%;  
           z-index:10;  
        }  
          
        /*------------------------ 
            All Styles on one line 
            ---------------------*/  
        div{ background-   
        color:#3399cc; color:#666; font: 1.2em/1.4em ArialHelveticasans-serif;  height:300pxmargin:10px 5pxpadding:5px 0 10px 5pxwidth:30%; z-index:10; }  

        9. Thêm comments thích hợp

        Comments có thể được sử dụng để tách các phần khác nhau của code CSS

        Thêm comments 
        /*-------------------- 
            Header 
            -----------------*/  
        #header{ height:145px; position:relative; }  
        #header h1{ width:324pxmargin:45px 0 0 20pxfloat:left;  height:72px;}  
          
        /*-------------------- 
            Content 
            -----------------*/  
        #content{ background:#fff; width:650pxfloat:leftmin-height:600pxoverflow:hidden;}  
        #content .posts{ overflow:hidden; }  
        #content .recent{ margin-bottom:20pxborder-bottom:1px solid #f3f3f3position:relativeoverflow:hidden; }  
          
        /*-------------------- 
            Footer 
            -----------------*/  
        #footerclear:both; padding:50px 5px 0; overflow:hidden;}  
        #footer h4{ color:#b99d7ffont-family:ArialHelveticasans-seriffont-size:1.1em; } 

        10. Đặt thuộc tính CSS theo thứ tự chữ cái 

        Điều này có thể là một cách khó khăn để viết CSS nhưng nó sẽ làm cho CSS của bạn dễ dàng tìm kiếm bất cứ dữ liệu nào ở những giai đoạn sau này

        Đặt thuộc tính theo thứ tự chữ cái

        div{   
        background-color:#3399cc;     
        color:  #666;  
        font:   1.2em/1.4em Arial, Helveticasans-serif;   
        height300px;  
        margin10px 5px;  
        padding:5px 0 10px 5px;  
        width:  30%;  
        z-index:10;  
          }

        11. Sử dụng Stylesheets bên ngoài

        Nó luôn là cách thực hành thiết kế tốt để tách nội dung từ phần trình bày. Đặt tất cả code CSS của bạn trong stylesheet external và sử dụng <link> để tham chiếu đến stylesheet trong trang web. Bằng cách đặt CSS trong file external, bạn có thể update style sau này tại nơi này thay vì nhìn vào các [template] html hoặc file cho styles.

        Không tốt
        <style type="text/css" >  
        #container{ .. }  
        #sidebar{ .. }  
        </style>  
           
        OR  
         <li style="font-family:Arial, helveticasans-serifcolor:#666; " >


        Tốt hơn


        <link rel="stylesheet" type="text/css" href="css/styles.css" />  
        12. Chia CSS thành nhiều file

        Nếu bạn đang làm việc trong một dự án web có

        13. Luôn thay đổi style input


        Thay đổi style input
        Thay đổi style input
        Đơn giản là vì mỗi trình duyệt nó sẽ có phong cách css riêng cho các button, textbox… Vì vậy bạn nên thay đổi phong cách cho các phần tử đó để có một phong cách chung trên các trình duyệt.

        14. Use CSS comments

        Đây là một cách tốt để tổ chức các mã của bạn và bạn nên làm điều đó đặc biệt là khi bạn có nhiều hơn 100 dòng mã css.

        15. Center horizontally

        canh-giua
        Ở đây bạn có thể nhìn thấy như thế nào để canh giữa theo chiều ngang một phần tử bên trong
        Để canh giữa theo chiều ngang cho một đối tượng, bạn phải thiết lập chiều rộng cho nó và để lề trái và phải ở chế độ auto

        16. Sử dụng nội tuyến và chặn các yếu tố một cách chính xác

        Điều này có nghĩa là nó được đề nghị cho bạn như là một nhà thiết kế / phát triển để sử dụng các yếu tố khối như “div” khi bạn cần một yếu tố ngăn chặn và không sử dụng một “span” yếu tố ví dụ như với “display: block” phong cách. Điều này là có sẵn cũng cho các yếu tố nội tuyến như “b” hoặc “i”, họ phải được sử dụng như các yếu tố nội tuyến khi có thể. Tóm lại bạn chỉ cần hiểu thẻ “span”, “i”, “b” thì nên sử dụng yếu tố “inline” (nằm trên một dòng) chứ không dùng “block” như “div”

        17. Thuộc tính CSS text-transform

        Đơn giản là bạn nên tránh việc viết in các chữ trên html thay vì dùng thuộc tính tự động viết hoa trong css

        18. Background sprites

        Sử dụng sprites tránh gây nhấp nháy khi sử dụng hiệu ứng chuyển động, hãy thử sử dụng tất cả các thời gian kỹ thuật này vì nó là tuyệt vời. Hai bài báo xuất sắc về sprites CSS nền Tôi sẽ đề nghị là alistapart.com bài báo và một smashingmagazine.com.

        19. Thuộc tính Font trong một khai báo

        Thay vì viết 3 4 dòng code để ấn định kiểu font cho đối tượng nào đó, ví dụ:
        Thì bạn chỉ cần viết một dòng duy nhất:
        Như vậy vừa tiết kiệm thời gian viết css và dung lượng file css =)))

        20. Validate, validate and validate again!


        Dễ hiểu là bạn cần kiểm tra xem css bạn viết có hợp chuẩn của tổ chức W3C hay chưa. Nếu chưa thì hãy cố gắn sửa chữa nó để được một css tối ưu nhất.

        21. KẾT HỢP CÁC THUỘC TÍNH

        Ví dụ:
        Đối với margin, thay thế
        1margin-top8px
        2margin-right4px;
        3margin-bottom8px;
        4margin-left4px;
        bạn có thể sử dụng
        1margin8px 4px 8px 4px;
        Đối với font, để thay thế
        1font-familyTahoma;
        2font-weightbold;
        3font-styleitalic;
        4font-size12px;
        bạn có thể sử dụng
        1fontitalic bold 12px Tahoma;
        Đối với background, để thay thế
        1background-imageurl(bk_main.jpg);
        2background-repeatrepeat-x;
        3background-color#ccccff;
        bạn có thể sử dụng
        1background#ccccff url(bk_main.jpg) repeat-x;

        22. NHÓM CÁC ĐỊNH DẠNG CHUNG

        Nếu bạn có 2 phần tử có những đặc tính chung bạn có thể nhóm chúng lại như ví dụ sau:
        1h2
        2{
        3    font-size16pt;
        4    color#4169e1;
        5    font-family'Trebuchet MS' Arial;
        6    margin4px 0px 2px;
        7    padding-left10px;
        8    text-decorationunderline;
        9}
        10 
        11h3
        12{
        13    font-size14pt;
        14    color#4169e1;
        15    font-family'Trebuchet MS' Arial;
        16    margin4px 0px 2px;
        17    padding-left10px;
        18    text-decorationunderline;
        19}
        Hai thẻ h2, h3 có những đặc tính chung nên
        1h2, h3
        2{
        3    color#4169e1;
        4    font-family'Trebuchet MS' Arial;
        5    margin4px 0px 2px;
        6    padding-left10px;
        7    text-decorationunderline;
        8}
        9 
        10h2
        11{
        12    font-size16pt;
        13}
        14 
        15h3
        16{
        17    font-size14pt;
        18}

        23. SỬ DỤNG SHORTHAND HEXADECIMAL ĐỂ ĐƠN GIẢN MÀU SẮC

        Ví dụ:
        1#99ff33 có thể thay bằng #9f3
        2#ff0000 có thể thay bằng #f00
        3#000000 có thể thay bằng #000

        24. SỬ DỤNG CLASSES TRONG THẺ CHA

        Để thay thế
        1<p class="myClass">Home</p>
        2<p class="myClass">About</p>
        3<p class="myClass">Contact</p>
        4<p class="myClass">Sitemap</p>
        Bạn có thể dùng
        1<div class="myClass">
        2    <p>Home</p>
        3    <p>About</p>
        4    <p>Contact</p>
        5    <p>Sitemap</p>
        6<div>

        25. KHÔNG NÊN VIẾT COMENT QUÁ PHỨC TẠP

        Như dưới đây
        1/*****************************/
        2/**********Header CSS*********/
        3/*****************************/
        Bạn có thể viết đơn giản hơn:
        1/*Header CSS*/

        26. KHÔNG NÊN VIẾT TRỰC TIẾP CSS VÀO CÁC THẺ.

        Bạn nên viết chung vào file.css.
        1<p style="font-size: 14pt ;font-family: Arial; text-decoration: underline;">Home</p>
        2<p style="font-size: 14pt ;font-family: Arial; text-decoration: underline;">About</p>
        3<p style="font-size: 14pt ;font- : Arial; text-decoration: underline;">Contact</p>
        4<p style="font-size: 14pt ;font-family: Arial; text-decoration: underline;">Sitemap</p>
        Thay thế bằng:
        1<p class="myClass">Home</p>
        2<p class="myClass">About</p>
        3<p class="myClass">Contact</p>
        4<p class="myClass">Sitemap</p>

        27. XÓA HẾT CÁC KHOẢNG TRẮNG VÀ DÒNG THỪA.

        Để giảm kích thước tập tin css, bạn nên xóa bỏ hết các khoảng trắng và dòng thừa giữa các định dạng.
        Happy coding :)

        0 nhận xét:

        Post a Comment

         

        BACK TO TOP

        Xuống cuối trang