Có rất nhiều hướng dẫn CSS có sẵn trên mạng Internet nhưng vài hướng dẫn có ích. Trong bài này bạn sẽ tìm thấy 5 bước để viết mã css tốt hơn cho các dự án tiếp theo trang web của bạn. Tôi hy vọng bạn sẽ thích thú với hướng dẫn này.

1. ResetCss

Bạn nên thường xuyên sử dụng thiết lập lại Cho dù nó có thể được Eric Meyer Thiết lập lại, các Reset YUI, hoặc thiết lập lại tùy chỉnh của riêng bạn, chỉ cần sử dụng một cái gì đó.

Mục tiêu của một tờ kiểu dáng thiết lập lại là trình duyệt để giảm mâu thuẫn trong những thứ như đường cao mặc định, lợi nhuận và kích thước phông chữ của đề mục, vv - Eric Meyer

  html, body, div, span, applet, đối tượng, h1, h2, h3, h4, h5, h6, khung nội tuyến, 
  blockquote, pre, Abbr, chữ viết tắt, địa chỉ, lớn, trích dẫn, code, del, dfn, em, 
  font, img, ins, kbd, q, s, samp,, tiểu nhỏ đình công, mạnh mẽ, sup, tt, var, 
  dd, dl, dt, fieldset, hình thức, nhãn, truyền thuyết, bảng, chú thích, tbody, tfoot, 
  thead, tr, th, td, đầu vào, chọn, textarea 

  ; padding : 0 ; } (Margin: 0; padding: 0;) 


  ; padding : 0 ; } * (Margin: 0; padding: 0;) 

2. CSS Shorthand

Một trong những tính năng tốt nhất và quan trọng của CSS là khả năng viết mã một cách giảm thiểu.

Không đúng luật

  ( 
  margin-top: 10px; 
  margin-right: 7px; 
  margin-bottom: 10px; 
  margin-left: 7px; 

  padding-top: 10px; 
  padding-right: 7px; 
  padding-bottom: 10px; 
  padding-left: 7px; 

  font-size: 12px; 
  font-weight: bold; 
  ; font-family: Arial, Verdana, Tahoma, sans-serif; 
  ) 

Mã xác

 : 10px 7px 10px 7px ; padding : 10px 7px 10px 7px ; font :bold 12px Arial, Verdana, Tahoma, sans-serif ; } (Margin: 10px 7px 10px 7px; padding: 10px 7px 10px 7px; font: bold 12px Arial, Verdana, Tahoma, sans-serif;) 

3. Không được sử dụng rất nhiều các lớp học và Mã's

Tôi đã nhận thấy rằng hầu hết những người mới bắt đầu thêm các lớp học và ID để hầu hết mọi phần tử trên trang, đó không phải là required.There là một số ví dụ dưới đây của những gì tôi đang đề cập đến.

Không đúng luật

 class = "wrapper" > <p class = "heading" > <strong class = "subheading" > Welcome </strong> </p> <p class = "linka" > <a href = "#" class = "link" > Home </a> </p> <p class = "linkb" > <a href = "#" class = "link" > About </a> </p> <p class = "linkc" > <a href = "#" class = "link" > Services </a> </p> <p class = "linkd" > <a href = "#" class = "link" > Contact </a> </p> </div> <div id = "wrapper" class = "wrapper"> <p class = "heading"> <strong class = "subheading"> Chào mừng </ strong> </ p> <p class = "linka"> <a href = "#" class = "link"> Trang chủ </ a> </ p> <p class = "linkb"> <a href = "#" class = "link"> Giới thiệu </ a> </ p> <p class = "linkc"> <a href = "#" class = "link"> Dịch vụ </ a> </ p> <p class = "linkd"> <a href = "#" class = "link"> Liên hệ </ a> </ p> </ div> 

Đây là mã chính xác

Mã xác

 > <h1> Welcome </h1> <ul> <li> <a href = "#" > Home </a> </li> <li> <a href = "#" > About </a> </li> <li> <a href = "#" > Services </a> </li> <li> <a href = "#" > Contact </a> </li> </ul> </div> <div id = "wrapper"> <h1> Welcome </ h1> <ul> <li> <a href = "#"> Trang chủ </ a> </ li> <li> <a href = "#"> Giới </ a> </ li> <li> <a href = "#"> Dịch vụ </ a> </ li> <li> <a href = "#"> Liên hệ </ a> </ li> < / ul> </ div> 

4. Tổ chức bạn Stylesheet

Hãy tổ chức stylesheet của bạn để nó được dễ dàng tìm thấy những điều và các mặt hàng có liên quan được gần nhau. Sử dụng ý kiến một cách hiệu quả. Ví dụ, có các ví dụ sẽ cho bạn biết làm thế nào để tổ chức các stylesheet của bạn

  / * Reset * / 
   elements Hủy bỏ lề và các yếu tố padding 

  / * Các yếu tố cơ bản * / 
  Xác định phong cách cho các yếu tố cơ bản: cơ thể, h1, h2, h3, h4, h6, ol, ul, dl, p vv 

  / * Chung Các lớp * / 
  Xác định phong cách cho các lớp học chung chung: những điều đơn giản như loại bỏ dưới đáy,  
  nổi để hai bên vv  
  / * Cơ bản Giao diện * / 

  / * Cơ bản Giao diện * / 
  Xác định phong cách cho bố trí cơ bản: tiêu đề.  chân trang, bên vv 

  / * Header * / 
  Xác định phong cách cho header 

  / * Nội dung * / 
  Xác định phong cách cho khu vực nội dung 

  / * Footer * / 
  Xác định phong cách cho chân trang 

  / * Etc * / 
  Tiếp tục 

5. Sử dụng có điều kiện Stylesheets

Internet Explorer là buggy nhất của tất cả các trình duyệt. May mắn thay, bạn có thể sử dụng ý kiến có điều kiện để quản lý các CSS đó là phục vụ cho IE. Nếu tôi cần nó tôi có một stylesheet ie6.css gọi là mục tiêu mà các phiên bản cũ hơn của IE. Nó cho phép tôi để quản lý CSS cho các trình duyệt cũ hơn một cách nhanh chóng và dễ dàng.

Ví dụ ở đây là các

  <!--[ if LTE IE 6]> 
 
 
  href = "ie6.css" type = "text/css" media = "screen"  / > <link rel = "stylesheet" href = "ie6.css" type = "text/css" phương tiện truyền thông = "screen" /> 
 
  -- > <! [Endif] -> 

Kết luận

Đây chỉ là một số mẹo giúp tôi viết code tốt hơn. Tôi hy vọng rằng hướng dẫn, cũng sẽ giúp bạn ghi tốt hơn và sạch mã. Lời khuyên này áp dụng cho các dự án của bạn hiện tại và kế tiếp, và bạn chắc chắn sẽ đánh giá cao những nỗ lực.

Nếu bạn nghĩ rằng có thể được hướng dẫn chi tiết hơn, Hãy chia sẻ với chúng tôi. Thảo luận với chúng tôi

nếu bạn muốn nhận được nhiều cảm hứng từ chúng tôi, hãy xem xét việc đăng ký vào nguồn cấp dữ liệu của chúng tôi bằng RSS, hoặc bằng email.

Filed under: Css, Hướng dẫn bởi admin