Bày tỏ IT

Nếu điều này trong blog của một số ... nghĩ rằng nó đã được tốt đẹp cho danh mục này cho ref trong tương lai .... cũng có thể là một câu hỏi phỏng vấn quan trọng mà bạn sẽ hỏi một số ngày ....

Viết một đoạn của CSS sẽ hiển thị một đoạn văn trong màu xanh trong trình duyệt cũ hơn, màu đỏ trong các trình duyệt mới hơn, xanh lá cây trong IE6 và đen trong IE7

#content p{color:blue}
html>body #content p {color:red}
* html #content p{color:green}
html>body #content p {*color:black;}

Đi xe đạp lại Buzzword và Phát triển Web có nghĩa là không có khác nhau. Bảo tồn năng lượng, trong nỗ lực!

Trong những năm của văn bản CSS và tạo ra HTML từ thiết kế, tôi đã theo một vài thực hành tốt nhất, trong việc theo đuổi của tiết kiệm thời gian và năng lượng trong những gì chúng ta thường hạn như "Wheel Re-Phát minh ra các". Thời gian và thời gian một lần nữa, tôi đã nói với bản thân mình, rằng tôi phải tạo ra một mẫu, một số lại có thể sử dụng tiêu chuẩn CSS rằng tôi sẽ sử dụng ra khỏi hộp trong công việc tương lai của tôi. Mặc dù không hoàn toàn nhưng tôi đã quản lý để đạt được một số mục tiêu.

Trong thúc đẩy hơn nữa, sử dụng của CSS, tôi có một cái nhìn tại các khuôn khổ CSS thường có sẵn cho chúng tôi và quyết định đưa vào sử dụng, vì đây là những cố gắng và thử nghiệm và tạo ra bởi các nhà phát triển có kinh nghiệm nhiều hơn bản thân mình. Quan trọng hơn "TRÁNH tái phát minh ra".

Mặc dù phổ biến kiến ​​thức cho cựu chiến binh, tôi đã cố gắng để viết một số khái niệm quan trọng / tốt nhất-thực hành / suy nghĩ đã đi vào việc tạo ra những khuôn khổ này, để làm cho XE ĐẠP RE của CSS có thể. Hy vọng điều này sẽ giúp một số nhà phát triển CSS chỉ là về và gần đây lên bandwagon CSS!

Phím Re-đi xe đạp của CSS:

Sử dụng Công ước đặt tên

Điều này có phải là yếu tố quan trọng nhất trong việc đưa ra các CSS / HTML lại có thể sử dụng. Đưa ra tên phù hợp cho các phần tử trang cho phép sử dụng lại các thành phần trang và phong cách của họ với ít hoặc sửa đổi. Trong phù hợp với lập luận này, Thậm chí HTML5, trong một sự thay đổi thay đổi lớn hơn người tiền nhiệm của nó, là để giới thiệu một số thẻ tức là cấu trúc. <article>, <section>, <header>, <aside>, và <nav> HTML5 sẽ mang lại? ]. Ngay cả với HTML 4 (hoặc thấp hơn), nó là tốt nhất để đặt tên cho phần tiêu chuẩn của trang của bạn consistanly như trong ví dụ đơn giản dưới đây ...

Hãy nhớ rằng, Hầu hết các trang trên dự án của bạn, sẽ có các yếu tố cốt lõi cùng một cấu trúc. Xác định những yếu tố cốt lõi trang phổ biến ....

  <div id="container">
    <div id="header"> ... </ div>
    <div id="nav"> ... </ div>
    <div id="sidebar"> ... </ div>
    <div id="footer"> ... </ div>
   </ Div> 

Thiết lập lại kiểu mặc định (CSS Đặt lại): Cho dù bạn sử dụng một khuôn khổ hoặc viết riêng của bạn, bạn phải cung cấp CSS Đặt lại [ CSS Đặt lại là gì? ], vì chúng làm giảm hoặc đôi khi loại bỏ hình ảnh mâu thuẫn xảy ra giữa các trình duyệt khác nhau. Nói một cách đơn giản CSS Thiết lập lại cơ chế thiết lập phong cách của phần tử HTML để các giá trị số không hoặc null, do đó trọng các giá trị mặc định của trình duyệt họ có thể đặt ra. Cung cấp một slate sạch để thiết lập các thuộc tính của các yếu tố khoảng trống của bất kỳ mặc định User-Agent [ CSS2.1 User Agent Bảng Phong cách mặc định . Tất cả các khuôn khổ CSS có cơ chế thiết lập lại. Nếu bạn đang viết riêng của CSS Đặt lại, một lời cảnh cáo rằng nếu bạn quên để thiết lập lại một tài sản quan trọng, có thể dẫn đến các vấn đề qua trình duyệt, đó là rất khó khăn để gỡ lỗi. Hãy nhớ rằng, Giữ một bản sao của phong cách thiết lập lại và thả chúng vào mỗi dự án mới bạn tạo ra.

  cơ thể, div, dl, dt, dd, ul, ol, li,
  h1, h2, h3, h4, h5, h6,
  trước, hình thức, fieldset, đầu vào, lựa chọn, textarea,
  p, blockquote, bàn, th, td
  {
    border: 0px;
    margin: 0;
    padding: 0;
  } 

Thiết lập mặc định (Styles cơ bản) để yếu tố:

Sau khi bạn đã thiết lập (không hoặc null) các giá trị mặc định của thuộc tính nhất định của một số yếu tố HTML, là cần thiết để áp dụng một số phong cách trên tất cả các thể hiện của những yếu tố này. Những thiết lập mặc định có thể khác nhau theo thiết kế hoặc theo các thực hành tốt nhất bạn làm theo.

Hầu hết các CSS khuôn khổ, luôn luôn giới thiệu một số mặc định mới, ngoài việc cài đặt lại phong cách trình duyệt mặc định.
Những mặc định là khoảng trống mặc định User-Agent (bị tước đi bởi Thiết lập lại CSS), những điều này sẽ phù hợp trên các trình duyệt.

Hãy nhớ rằng, phong cách cơ bản được sử dụng để thiết lập phong cách mà sẽ được sử dụng thiết kế rộng. ví dụ.

  html {font-size: 77%; font-family: Arial, sans-serif;}
 mạnh mẽ, h1, h2, h3, h4, h5, h6 {font-weight: in đậm;} 

Tóm tắt Styles cho các thành phần HTML thông thường và lớp học chung:

Hầu hết các dự án bao gồm một vài trang sẽ có các phần tử HTML thông thường được sử dụng trên trang web, ví dụ như để sắp xếp Một số hình thức, cảnh báo và lỗi, Popups Tuỳ chỉnh, LightBoxes ... Kể từ khi thành phần này được sử dụng trên một lần nữa qua các dự án, sẽ là hữu ích để cung cấp một thiết lập các lớp học liên kết với các phong cách được xác định trước cho các thành phần và bạn có thể tiết kiệm cho mình rất nhiều thời gian.

Ngoài việc xác định phong cách định nghĩa có thể tái sử dụng cho các thành phần HTML thông thường, chúng ta có thể phong cách trừu tượng các lớp học liên quan đến màu sắc, kiểu chữ, bố trí ngay cả. Bản thân tôi có xu hướng bạn sử dụng ... các lớp học phổ biến như clearfix, Font08, FontGrey, AlignL, DisplayB.

  hình thức đầu vào {border: 0px; background: # ffffff; padding: 10px 0px; _padding: 0px 0px; chiều cao: 26px; color: # 000000; line-height: 30px; font-size: 1.1em;}
 hình thức textarea {border: 0px; background: # ffffff; color: # 000000; font-size: 0,9 em; line-height: 1.5em; tràn: có thể nhìn thấy;}
 Fbold {font-weight: in đậm màu: # cccccc;}.
 Fgrey {color: # 666666;}
 Flightgrey {color: # bbbbbb;}
 Clearfix {rõ ràng: cả hai;}.
 Chia {biên giới-top: 1px solid # 647B06; biên giới-bottom: 1px solid # 9CC00A; height: 0px;}.
 Displayb {display: block;}. Displayn {display: none;}.
 Alignr {text-align: right}. Alignc {text-align: center}
 Floatr {float: right;}. Floatl {float: left;} 

Bản sửa lỗi cho quirks trình duyệt phổ biến

Trình duyệt khác nhau thực hiện mã CSS và cung cấp các mức độ khác nhau hỗ trợ cho các chi tiết kỹ thuật của CSS. Các kết quả này .... "Browser quirks", chúng tôi phát triển được để lại để giải quyết. Đặc biệt, IE6 ám ảnh hầu hết các lập trình CSS với một thời hạn cuối cùng để đáp ứng. Các tin tốt là kinh nghiệm đã mang lại cùng nhau sửa lỗi có thể tái sử dụng những vấn đề này (Thường được gọi là CSS Hacks ).

Hãy nhớ rằng, Giữ các hacks / sửa chữa tiện dụng

  / * Zoom sau đây: 1 quy tắc đặc biệt là cho IE6 + IE7.  * /
    * Html. Clearfix,
    * Đầu tiên con + html clearfix {
           zoom: 1;
      } 

Tinh chỉnh CSS của bạn

• Thói quen đi xe đạp lại không sẽ đến với bạn trong ngày. Nó có để phát triển. Vì vậy, kế hoạch Re-Đi xe đạp của bạn. Chịu đựng điều này trong tâm trí bạn có thể mặc định phong cách trừu tượng, định nghĩa kiểu chữ, bố cục, kiểu phần tử HTML. Hãy thử nghĩ về phía trước.
• Ngoài ra nhìn lại dự án trước đây của bạn, nó sẽ giúp xác định phong cách mà bạn có xu hướng sử dụng thường xuyên trên porjects. Tóm tắt nó.
• Hủy bỏ bất kỳ phong cách không sử dụng. Thực hành này sẽ giữ cho khung CSS của bạn từ một triệu chứng phổ biến được gọi là "Sưng phù"
• Hủy bỏ phong cách lặp đi lặp lại.
• Xây dựng một tập hợp các phong cách linh hoạt đến cổng nó qua các dự án.

A Look At Khung CSS

Cuối cùng. Nếu bạn được truyền cảm hứng và có ý định sử dụng một hoặc nhiều các khuôn khổ CSS, Heres là nhanh chóng danh sách của một số những người nổi tiếng ....

• 960 lưới hệ thống : 960 hệ thống lưới điện là một nỗ lực để sắp xếp công việc phát triển web bằng cách cung cấp kích thước thường được sử dụng, dựa trên một chiều rộng 960 pixel. Có ba phiên bản: 12, 16 và 24 cột, có thể được sử dụng riêng rẽ hoặc song song. Tư tưởng không có gì là bạn không thể tạo cho riêng bạn một cách dễ dàng, khuôn khổ cung cấp cho lưới điện cho các mẫu in ở định dạng PDF, mà ta có thể sử dụng để phác thảo designs.Bet trang của bạn, Nó sẽ tạo một ấn tượng chuyên nghiệp, nếu bạn mang theo một vài tờ khi bạn đi đến một khách hàng để thu thập yêu cầu giao diện người dùng. Nó cũng cung cấp các mẫu lưới cơ bản cho phần mềm thiết kế phổ biến như Fireworks, Flash, InDesign, Illustrator, Photoshop, Visio, cung cấp một "khởi đầu cho mười" để bắt đầu công việc thiết kế của bạn.
• Kế hoạch chi tiết : Kế hoạch cung cấp rõ ràng phân loại các tập tin CSS Đặt lại, lưới, hình thức, In, Typography, bổ trợ cho các nút, tab và sprites. Nó cũng cung cấp hỗ trợ cho trình duyệt IE như là một riêng biệt bao gồm.
• SenCSs : Không giống như trên, SenCSs (phát âm Sense), không có định nghĩa CSS cho Layout. Nó không bao gồm phông chữ, paddings, lợi nhuận, bảng biểu, danh sách, tiêu đề, blockquotes, hình thức và nhiều hơn nữa.
• BlueTrip : yêu cầu bồi thường ban đầu của nó nổi tiếng là vậy, nó là một sự kết hợp của các tính năng tốt nhất được cung cấp bởi những người khác các khuôn khổ khác như Blue in, Trip Oli ... từ nơi nó được tên của nó. Tính năng của nó bao gồm 24 cột lưới, phong cách kiểu chữ, phong cách orm, in ấn, các nút.
• YUI Grids : Mang lại cho bạn do Mạng lưới phát triển Yahooo, hỗ trợ chất lỏng-width (100%) bố trí cũng như bố trí cài sẵn chiều rộng cố định tại 750px, 950px và 974px, và khả năng dễ dàng tùy chỉnh để bất kỳ số nào. Như bạn thấy, nó về mặt kỹ thuật chỉ bố trí thành phần. YUI cũng cung cấp HTML / CSS bộ cho các phần tử trang khác
• YAML (Yet Another Giao diện multicolumn)
• Emastic

Hãy nhớ rằng, bằng cách sử dụng CSS khuôn khổ không có nghĩa rằng bạn là lười biếng để tạo ra một trong những của riêng bạn ... Điều đó ngụ ý rằng bạn là thông minh để học hỏi từ những người khác kinh nghiệm những sai lầm, TIẾT KIỆM THỜI GIAN và tăng năng suất!

CSS hoàn thành 10 năm tồn tại năm này! Những người đã được khoảng một thời gian, kiếm được bánh mì của họ (hoặc không) bằng cách sử dụng CSS, sau đó bạn có thể biết làm thế nào chúng tôi đã được đói cho một lựa chọn tốt của phông chữ. Ngay cả với việc thiếu các phông chữ, thiết kế giống như những người có CSS Zen Garden đã sử dụng hình ảnh nền CSS để thay thế phông chữ trong việc theo đuổi thực hiện một số công lý cho thiết kế của họ. Chúng tôi cũng đã cố gắng hacks ® Flash / JavaScript để đạt được mục tiêu thiết kế của chúng tôi. Bởi không có phương tiện này là một cách sai lầm để có được các phông chữ mà chúng ta mong muốn vào thiết kế web của chúng tôi, nhưng chắc chắn, nó không phải là cách hấp dẫn nhất. và năm trong thiết kế web, như tôi, đã hoàn toàn dựa vào mười hay phông chữ cho thiết kế của họ.

Phát triển gần đây trong các tiêu chuẩn web và các định dạng phông chữ làm cho nó có thể làm cho văn bản HTML trong các kiểu chữ khác hơn so với các phông chữ mặc định cũ. Đi kèm trong "@ fontface" decleration CSS.

@ Fontface provids một giải pháp để liên kết đến tập tin font chữ thực tế và lấy nó từ trang web. Sử dụng @ fontface, thiết kế có thể sử dụng phông chữ mà không cần phải đóng băng các văn bản như hình ảnh nền. Thực hiện là rất thẳng về phía trước, như hình dưới đây, nhưng như tất cả những điều tốt đẹp có một phần CON nó, không phải tất cả các trình duyệt hỗ trợ một "phông chữ". Nếu bạn đang có kế hoạch sử dụng @ fontface trong trang web với yêu cầu hỗ trợ trình duyệt chéo, sau đó bạn sẽ phải cung cấp nguồn cho các loại font khác nhau của cùng một.

1. TrueType - định dạng được thiết kế để xem xét tốt trên màn hình. Giới thiệu đặc biệt của Windows trình duyệt (Chrome).
2. OpenType (CFF) - Định dạng này là tốt hơn cho công việc in ấn và không phải luôn luôn nhìn tốt trên Windows.
3. EOT - Bạn cần định dạng này nếu bạn muốn nhắm mục tiêu Internet Explorer. IE sẽ không sử dụng bất kỳ định dạng khác. EOT của chúng tôi sẽ được coi là "Lite, kể từ khi họ không nén cũng không phải lĩnh vực hạn chế.
4. SVG - Đây là một định dạng XML được hỗ trợ bởi một số trình duyệt bao gồm cả iPhone.
5. WOFF - qua trình duyệt, định dạng phông chữ web chỉ là trọng lượng nhẹ (dữ liệu phông chữ là ZIP) và có thể được biên dịch với một trong hai TrueType hoặc PostScript (CFF) phác thảo. Nó hiện đang được hỗ trợ bởi FireFox 3,6 +.

Sử dụng @ fontface

  @ Font-face {
 font-family: 'CalligraphyFLFRegular';
 src: url ('CalligraphyFLF.eot');
 src: địa phương ('CalligraphyFLF), địa phương (' CalligraphyFLF), định dạng url (CalligraphyFLF.woff ') (WOFF'), url ('CalligraphyFLF.ttf') định dạng (truetype '), url (' CalligraphyFLF định dạng. svg # CalligraphyFLF ') (' svg ');
 }
 @ Font-face {
   font-family: "kiểu chữ";
   src: url ("fonts / font_filename.eot");
   src: địa phương ("tên thay thế"), địa phương ("Alternatename)
     url ("fonts / font_filename.woff") định dạng (WOFF "),
     url ("fonts / font_filename.otf") định dạng ("OpenType"),
     url ("fonts / font_filename.svg # font_filename") định dạng ("svg");
   }
 h2 {font-family: "mặt chữ", Georgia, serif;} 

Như bạn có thể nhìn thấy từ ví dụ trên, bao gồm các phông chữ kiểu chữ được lựa chọn, một trong những liên kết đến một tập hợp các fonttypes cho cùng một kiểu chữ. Do đó người ta gọi nó là "Font Kit".
Có Kits Font có sẵn một cách rõ ràng cho phép liên kết với các tài sản CSS font-mặt dưới End User License Agreement (EULA).

Nguyên ích WebFont:

• @ Font-mặt nhúng phông chữ trang wiki tại http://webfonts.info/wiki/index.php?title=Main_Page
  
• Ray Larabie . Ông là một nhà thiết kế phông chữ nổi tiếng, người đã thực hiện hàng trăm các phông chữ TrueType thú vị tự do có sẵn để sử dụng trên web. Phông chữ của ông là thanh lịch, trang trí, và vui tươi.
• Dieter Steffmann là một nhà thiết kế font chữ tuyệt vời. Ông cũng đã thực hiện nhiều phông chữ đẹp có sẵn cho bất cứ ai sử dụng.
• Font cửa hàng : cung cấp các phông chữ được thiết kế đặc biệt để sử dụng web. Hơn 30 của các gia đình FontFont thành công nhất hiện nay có sẵn như là FontFonts Web. FontShop cũng có một WebFont người sử dụng hướng dẫn chi tiết http://www.fontshop.com/blog/newsletters/pdf/webfontfontuserguide.pdf
  
• Font Squirrel : Giới thiệu tất cả các phông chữ Font Squirrel cung cấp để sử dụng với @ nhúng CSS font-mặt. Font Squirrel cung cấp một số lượng ấn tượng của loại hình, làm cho nó chết đơn giản để chọn một trong ra ngoài, và handily cung cấp bộ dụng cụ "- kiểu chữ của sự lựa chọn của bạn, trong một số định dạng, đóng gói với bản demo HTML & CSS sử dụng rất hiện tại @ font-face cú pháp . Họ cũng cung cấp một cách để làm cho @ font-mặt bộ dụng cụ . Nếu bạn muốn sử dụng kiểu chữ đã được cấp phép một cách thích hợp (những cái mà đi kèm với máy tính của bạn không nhất thiết phải được), máy phát điện sản xuất EOT, SVG, và hey! WOFF các tập tin.

Thời gian và một lần nữa, tất cả các trình duyệt khác nhìn thấy hành xử như đã nói bởi các quy tắc w3c, xoắn ốc IE bạn của tinh thần phát triển bằng cách ném một cơn giận, mà dường như không có một sửa chữa. Chỉ cần như vậy là một vấn đề này trong IE7.

Vấn đề bản Tuyên Bố:
I và có thể nhiều người trong số các nhà phát triển web nghiêm trọng khác đã nhận thấy hơn nhiều lần, rằng khi có được lồng vào nhau nổi trong bố trí, di chuột qua một số liên kết (tag anchor), các container có chứa dường như thay đổi một vài điểm ảnh ở bên phải . Tôi đã cố gắng google giải pháp cho vấn đề này, nhưng hầu như không tìm thấy bất kỳ câu trả lời hợp lý tại sao và khi nó xảy ra (mà có thể giúp ngăn chặn vấn đề này xảy ra), vì thế tôi đã không bao giờ tìm thấy một giải pháp rõ ràng cho vấn đề này hoặc ...

Có thể Giải pháp:
Trong kinh nghiệm, tôi có phần trăm thông báo 90% tức là thời gian, vấn đề này được cố định bằng cách thêm một tài sản zoom trong định nghĩa CSS của container mis-hành xử ...

 # Somediv {
       zoom: 1;
 }

một lần nữa lý do là không rõ ràng ... cố gắng này ...
Một số yếu tố trong IE có một "hasLayout" tài sản, mà là "đúng" theo mặc định. Nhiều hình ảnh CSS hành vi, ví dụ, một bộ lọc alpha chỉ hoạt động trên một yếu tố mà hasLayout. và {Zoom: 1} có vẻ như để cung cấp cho các yếu tố tài sản mục tiêu hasLayout .... Hữu ích? Tôi không nghĩ như vậy ...

Sở hữu zoom cũng có vẻ để hỗ trợ bởi Chrome, nhưng dint sử dụng của nó dường như làm cho nhiều tác động xấu đến bố trí của tôi ... thử nó, nó làm việc cho bạn ... nếu nó không, đánh dấu trang này dưới "craps CSS"

Hôm qua, sau khi vấn đề tôi gặp phải với các Đặt lại CSS trong Google Chrome ... Tôi nghĩ đào sâu hơn một chút vào khu vực của Sheets (US) Đại lý tài ...
Tìm thấy bảng này trên các giá trị mặc ​​định của CSS2.1 Sheets User Agent Kiểu ... (đối với những người không biết những gì "Sheets của thành viên (US) Đại lý" là theo User Agent Style Sheets (Đặc điểm kỹ thuật) là gì .

Đối với một danh sách đầy đủ của CSS 2.1 mặc định User Agent Style Sheets bấm vào đây

Hôm qua, giống như mọi "Ngày Hog đất" khác, tôi đã được làm việc trên một số bố trí CSS / tableless. Tất cả sẽ tốt trong IE 7, FF 3 và Chrome, cho đến khi đột nhiên, tôi thấy một số lợi nhuận chưa ignorable nhìn thấy chỉ trong Google Chrome. Mặc dù rất kỳ lạ và worring, Đó là một số lỗi / vấn đề mới mà tôi đã đi qua, cuối cùng cũng đã có một số gia vị trong công việc trần tục của tôi. Sad (nhưng tốt đẹp) đã cố định trong vòng vài phút của tàu thăm dò ...

Về cơ bản, Nó trông giống như Google Chrome bỏ qua CSS Đặt lại (margin: 0px). Nó thực sự được gây ra bởi các stylesheet đại diện người sử dụng (-webkit-padding-bắt đầu: 40px). Vì vậy, các giải pháp đã được thiết lập lại phong cách này bằng cách thiết lập padding: 0 hỏng yếu tố.
Một cách tốt để ngăn chặn vấn đề này xảy ra với bất kỳ yếu tố là sử dụng một phần còn lại CSS toàn cầu như sau

* {Margin: 0; padding: 0;}

User Agent Style Sheets (Đặc điểm kỹ thuật) là gì?
Trích đoạn sau đây được lấy từ http://meiert.com/en/blog/20070922/user-agent-style-sheets/ liên kết tiếp theo, để đọc thêm về Sheets (US) Agent tài

CSS 1 giới thiệu các ý tưởng bằng cách nói rằng mỗi User Agent (UA, thường là một trình duyệt web "hoặc" khách hàng web ') sẽ có một phong cách trang mặc định mà trình bày các tài liệu một cách hợp lý - nhưng cho là nhàm chán - cách. CSS 2 nói rằng các đại lý người sử dụng phù hợp phải áp dụng 1 tấm phong cách mặc định (hoặc cư xử như thể họ có) và rằng mặc định bảng phong cách 1 đại lý người sử dụng của cần trình bày các yếu tố ngôn ngữ tài liệu có đáp ứng kỳ vọng trình bày chung cho các ngôn ngữ tài liệu; CSS 3 là có thể có cùng một tâm trí.

Kể từ khi các chi tiết kỹ thuật CSS để nó để triển khai có sử dụng một phong cách trang "thực sự" để hiển thị mặc định hay không, nó không đáng ngạc nhiên mà bạn không tìm thấy một phong cách trang mặc định trong thư mục cài đặt của mỗi trình duyệt. Không giống như Internet Explorer của Microsoft cũng như Opera, ví dụ (và như xa như tôi biết), Gecko trình duyệt như Firefox và Netscape Navigator (nhìn cho "html.css") mà còn Konqueror làm cho nó khá đơn giản để hiểu được phong cách mặc định của họ.

Một tut nhanh chóng. Đây là một cái gì đó đơn giản và tốt đẹp bằng cách sử dụng POWER của CSS ... nhưng khó khăn concieve (và chắc chắn không phải là tôi) để bắt đầu với. Thêm DropShadow, có thể là một mảnh bánh cho nhiều người trong chúng ta, bằng cách sử dụng một số công cụ chỉnh sửa hình ảnh như Photoshop và Fireworks.
Lý do tại sao, tôi đã lựa chọn hiệu ứng bóng đổ bằng cách sử dụng CSS, thường là trong khi tạo ra một thiết kế trang / html của một ứng dụng, yêu cầu giữ iterating. Những gì tôi có nghĩa là, một trang web hiện có với nhiều hình ảnh, giống như những hiển thị freinds danh sách hoặc thư viện hình ảnh, nó sẽ rất khó để tái xử lý toàn bộ tải trọng của hình ảnh đã được đã được dỡ xuống để thêm hoặc loại bỏ các bóng tối, cho rằng vấn đề.
Vì vậy, Nếu bạn đã làm được một chút suy nghĩ về phía trước trong khi tạo ra các HTMLS thêm các bộ phận phòng, hay thường tình hình là bạn có một logic vòng tạo ra các biểu tượng / hình thu nhỏ trong XSL, PHP. JAVA hoặc bất kỳ ngôn ngữ lập trình / kịch bản khác, bạn có thể thêm nó vào bất cứ lúc nào, sau đó chỉ là vấn đề của các hiển thị và ẩn các bóng tối bằng cách sử dụng tài sản hiển thị CSS, theo các khách hàng bao giờ thay đổi yêu cầu ... Tôi havn't làm điều này loại suy nghĩ về phía trước trước khi điều này ... nhưng ahev bắt đầu ngay bây giờ!

Trong ví dụ dưới đây, hình ảnh ban đầu là bóng tối miễn phí và dropshadows được áp dụng theo yêu cầu! CŨNG, tôi đã đi thêm một chút, bằng cách sử dụng các thủ đoạn của Tut trước đây của tôi (Well! này có thể là ngắn nhất của Hướng dẫn khác nhau, do đó, nó chỉ hợp lý gọi họ là "Tut" 's) Sử dụng tài sản Clip CSS cho hiện chỉ

Hình ảnh Gốc

CSS DropShadow Kết quả

Demo | Tải về sourcefiles

Tại sao tôi muốn hiểu được điều này? ... Humm!!

Hầu hết các nhà văn CSS sẽ đồng ý rằng CSS Clip tài sản có lẽ là một trong những tài sản chưa được sử dụng hầu hết CSS. Đó là thực sự cho tôi và hạnh phúc nhất để bỏ qua nó, cho đến khi tôi bắt đầu sửa đổi Knob trượt các phần MooTools HAI (Pin) (với Dải Chỉ số) .

Có một gợi ý tốt từ một trong những người sử dụng thành phần để sửa đổi phần trượt bằng cách sử dụng cắt bớt hình ảnh backgroud (chống lại một bộ phận biến chiều rộng) để chỉ ra phạm vi thanh trượt. Như vậy đến thời gian của tôi để vui vẻ, nhưng un-điều lệ (đối với tôi ofcourse) vùng biển của tài sản Clip CSS.

Vâng! nó có thể được khó khăn như thế nào? Không có nhiều ở tất cả các ... YES và NO. Cú pháp để sử dụng tài sản Clip CSS là khá ngay thẳng, nhưng ý nghĩa / usuage là một chút croocked. Với một bộ nhớ của tôi như thế, mọi lúc tôi ngồi để làm lại trên Script trượt của tôi ... Tôi có tokeep đề cập trở lại để sử dụng tài sản CLIP này, để nhắc nhở bản thân mình logic mà tôi đã tạo ra trong kịch bản của tôi .... Do đó! cho bút xuống, với một hy vọng để ghi nhớ nó trong tương lai (và cũng vì lợi ích của những người có vẻ boggled Sở hữu Clip CSS)

CSS Clip làm gì?

Clip là một phần của mô-đun hiệu ứng hình ảnh của CSS 2.1. Đơn giản chỉ cần đặt, công việc của nó là để đặt một cửa sổ có thể nhìn thấy trên đầu trang của một đối tượng đang bị cắt bớt, do đó cắt hình ảnh và tạo hình thu nhỏ mà không cần phải tạo ra các tập tin bổ sung (tôi đã đặt tính năng này để sử dụng tốt hơn trong phần trượt )

Sử dụng tài sản Clip CSS, bạn có thể tạo ra một clipping bằng cách sử dụng hình dạng rect. Giống như nhiều thuộc tính CSS khác (như lợi nhuận đệm, ...), sử dụng rect yêu cầu bốn tọa độ Top, Right, Bottom, Left (TRBL). Bản chất croocked của tài sản này phản ánh khi bạn xem xét kỹ hơn ở đoạn tính toán khu vực cắt, bằng cách sử dụng các tọa độ (gửi não vào một quăng trong một thời gian). Bây giờ để gây nhầm lẫn bạn phía dưới bắt đầu từ phía trên, và phải bắt đầu từ bên trái. . Bạn thấy những gì tôi nói? .... Do đó này bài ...

Sự nhầm lẫn chút này có thể dễ dàng biến mất, với điều này giải thích hình ảnh của tài sản Clip / rect CSS như dưới đây!!!

CSS Clip Yêu cầu

Nhiệm vụ chúng tôi đã bắt đầu là clip hình ảnh Hình thu nhỏ sau đây thành một hình ảnh squarer tìm kiếm (và cũng là một hình ảnh góc rộng)

Thumbnal / Hình ảnh ban đầu	Clip Yêu cầu đối với sqaure Thumbmail

CSS Clip Kết quả

Demo | Tải về sourcefiles

Trước khi chúng tôi đã phải đối phó với CSS để tạo ra bố cục trang của chúng tôi, việc sắp xếp một số nội dung bên trong một ô trong bảng dường như chỉ trẻ em chơi. Đơn giản chỉ cần thiết lập "align" tài sản "valign" của bảng để có sự liên kết của sự lựa chọn của bạn, mảnh bánh!
Với bố trí CSS, mặc dù chúng tôi có "theo chiều dọc-align" tài sản cho các yếu tố, nó không có vẻ như đơn giản như "sắp xếp" hoặc tài sản "valign". Để được specifiic nhiều hơn "theo chiều dọc-align" không bao giờ có vẻ như để giải quyết bất kỳ vấn đề của bạn, đặc biệt là nếu được viết một phần của qua trình duyệt CSS.

Nếu không có việc sử dụng các bảng HTML, VẤN ĐỀ trung vào đối tượng, là một hình ảnh hoặc một số văn bản trong một bộ phận chứa, có thể được tất cả các UI / CSS phát triển cơn ác mộng tại một số điểm. Vấn đề này tiếp tục ngoại suy lo lắng của bạn sắp xếp, nếu các đối tượng được làm trung tâm năng động trong tự nhiên, tức là khi chiều cao của nó là biến (không rõ chiều cao).

Mặc dù có là không có giải pháp được gọi thẳng về phía trước sẽ làm việc trên phạm vi của các trình duyệt chúng ta phải đối phó với các giải pháp mà tôi đã cố gắng để đi đến không có vẻ làm việc trong các trình duyệt mà tôi đã thử nó trong (IE6, IE 7 , FF).

GIẢI PHÁP:
Trong các trình duyệt như Mozilla, Opera và Safari, lạ hành xử "theo chiều dọc-align" tài sản có thể được đưa đến giác quan của nó, chỉ đơn giản bằng cách thiết lập "hiển thị" tài sản của các bộ phận có chứa tế bào bảng "(display: table-cell) .

Vấn đề vẫn còn với gia đình của các trình duyệt IE, người, nhưng dường như không hiểu những gì với tài sản "bàn di động" và không biết gì như họ, họ chỉ cần bỏ qua nó. Các giải pháp đưa ra dưới đây, mặc dù đơn giản, quảng cáo một DOM vài yếu tố HTML của bạn để làm cho mọi việc xảy ra.

CSS và HTML trông như thế này
.outer_container {
display: table;
text-align:center;
height: 140px;
width:140px;
position: relative;
overflow: hidden;
float:left;
margin:0px 10px 0px 0px;
}
.obj_container {
display: table-cell;
vertical-align: middle;
#position: absolute;
#top: 50%;
#left:50%;
}
.obj{
#position: relative;
#top: -50%;
#left:-50%;
margin:0px auto 0px auto;
}

HTML: -
<div class="outer_container">
<div class="obj_container">
<div class="obj"> <img src="image1.jpg"/> <br/> views: 3456 </ div>
</ Div>
</ Div>

Kết quả trông như thế này:

xem demo ở đây | Tải tập tin Source (tải về 452 lần)

TOP Align CSS
.obj_container_top {
display: table-cell;
vertical-align: top;
#position: absolute;
#top: 0%;
#left:50%;
}
.obj_top{
#position: relative;
#top: 0%;
#left:-50%;
margin:5px auto 0px auto;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
color:#cccccc;
}

HTML: -
<div class="outer_container">
<div class="obj_container_top">
<div class="obj_top"> <img src="image1.jpg"/> <br/> views: 1234 </ div>
</ Div>
</ Div>

Kết quả trông như thế này:

BOTTOM Align CSS
.obj_container_bottom {
display: table-cell;
vertical-align: bottom;
#position: absolute;
#bottom: 0%;
#left:50%;
}
.obj_bottom {
#position: relative;
#bottom: 0%;
#left:-50%;
margin:5px auto 0px auto;
}
HTML: -
<div class="outer_container">
<div class="obj_container_bottom">
<div class="obj_bottom"> <img src="image1.jpg"/> <br/> views: 1234 </ div>
</ Div>
</ Div>

Kết quả trông như thế này:

xem demo ở đây | Tải về tại đây

Có vẻ như lứa tuổi, kể từ khi tôi đã cố gắng tìm một giải pháp hợp lý cho vấn đề này liên kết. Nhưng bây giờ với giải pháp này, tôi cảm thấy hòa bình ít.

Với hy vọng rằng một ngày nào đó

• tài sản liên kết dọc trong CSS sẽ làm việc như nó bên trong một ô trong bảng, KHÔNG phải đánh bại nhiều quanh co
• Ít nhất, thiết lập margin-top: tự động và lề dưới: tự động, sẽ cho kết quả tương tự như với margin-left và thiết lập lề bên phải để tự động
• Cuộc chiến trình duyệt sẽ có một ngày nào đó.
• Có chỉ ONE trình duyệt cho tất cả.

Tải về CSS và HTML của các giải pháp trên đây (tải về 452 lần) ... cho dễ hiểu, CSS không được tối ưu hóa

PS: Và bằng cách này, đó là hình thu nhỏ của một số hình ảnh tôi đã nhấp vào ...

CSS cho trình duyệt IE không: không có thông tin cho các nhà phát triển CSS, CSS các Selectors trẻ em như ví dụ dưới đây, không có vẻ làm việc trong IE.

ví dụ như div span> {một số css}, có nghĩa là "khi một yếu tố span là một đứa trẻ (và không một cháu hoặc con lớn lớn ...) của một phần tử phân chia".

Nhưng chúng tôi sử dụng CON này để lợi thế của chúng tôi. Trong lịch sử, chọn con đã được sử dụng để ẩn CSS lệnh từ IE. Đơn giản chỉ cần bằng cách đặt html>body ở phía trước của bất kỳ lệnh CSS IE sẽ bỏ qua nó:

html>body .foo { CSS commands go here ;}

Điều này làm việc bởi vì <body> luôn luôn là một đứa trẻ của <html> - nó có thể không bao giờ là một đứa cháu lớn cháu của <html> .

IE 7 hiểu chọn con, bạn có để chèn một thẻ lời bình trực tiếp sau khi lớn hơn dấu hiệu IE 7 sau đó sẽ không hiểu được điều này chọn (những người hiểu biết lý do tại sao?) Và do đó sẽ hoàn toàn bỏ qua lệnh này CSS.

html> /**/ body .foo { CSS commands go here ;}

Nếu chưa nhìn thấy những trước khi, có một chi thông qua sau đây

• Bình luận có điều kiện: Duex sử-Phần IES của bạn Chỉ
• CSS hack: Javascript, CSS, HTML cho Firefox chỉ
• Đối với IES của bạn Chỉ