Tôi đang làm một số trang web-dev và các nhà thiết kế lát và xuất từ photoshop. Mã được tạo ra là khủng khiếp. Điều đầu tiên tôi đang làm là lấy mọi thứ ra khỏi các thẻ và đặt chúng vào các tệp css. Vì vậy, tôi đã tự hỏi nếu có một công cụ có thể tự động hóa điều này?thẻ html vào css tool
tôi sẽ viết kịch bản của riêng tôi, ở đây Bạn có thể mất một số cảm hứng:
này làm ngược lại, nhưng nếu Bạn thích Ruby, có thể Bạn có thể học c ode: tìm kiếm premailer trên github, Nó sử dụng đá quý Hpricot.
Tất nhiên, nếu không muốn dành nhiều thời gian mã hóa Bạn có thể sử dụng tidy:
tidy -clean your-crap-inlined-file.html
Nếu bạn của bạn-crap-inlined-file.html chứa: <p style="color:red;"> Some TEXT ...</p>
Nó sẽ thay thế nó chèn một cái gì đó như thế này
<style type="text/css">
/*<![CDATA[*/
p.c1 {color:red;}
/*]]>*/
</style>
trên đầu trang của tập tin của bạn và đồng thời nó thay thế mã nội tuyến của bạn với:
<p class="c1">Some TEXT ...</p>
HTML Tidy là một công cụ tuyệt vời. Nó sẽ không làm những gì bạn muốn chính xác, nhưng nó có thể là một khởi đầu tốt nếu bạn đang sử dụng html được tạo ra. Đây là phiên bản trực tuyến: http://infohound.net/tidy/
Đó sẽ là một công cụ thú vị.
Tôi đoán câu hỏi đầu tiên của tôi sẽ là, là mã photoshop đang làm cho sẽ được ngữ nghĩa? I E. sẽ có một <H1> làm chủ đề chính .. và <p> cho các đoạn, v.v.
Sau đó, khi nói đến css .. bạn chắc chắn sẽ không tạo mã chất lượng làm điều này. Tuy nhiên nó có vẻ như với tôi, giống như bạn không thực sự là người Front End. Điều đó khiến mọi câu trả lời trở nên khó hơn ..
Câu trả lời hay nhất: Hãy viết mã nó .. mã sẽ tốt hơn. Câu trả lời tiếp theo: Viết tay ra khỏi câu hỏi? có một số tùy chọn khác.
Hướng dẫn tốt là here .. tuy nhiên, về cơ bản nó giúp bạn viết mã.
Bạn có nghĩa là, cho Ví dụ, lấy ' blah 'và xuất ra một quy tắc CSS sẽ khớp với khoảng thời gian cụ thể đó và xác định các quy tắc đó trong CSS (thay vì thuộc tính' style')? Sẽ khá thú vị, nhưng một trường hợp lớn của người dùng báo trước, vì nếu các yếu tố liên quan không có ID, điều đó sẽ rất * dễ vỡ, phụ thuộc vào cấu trúc HTML cụ thể và bị hỏng nếu bạn thay đổi cấu trúc đó. .. –
@TJ: Anh ấy có thể muốn tự động thêm tên lớp. – SLaks
@SLaks: Bây giờ, đó là một ý tưởng hay, mặc dù các tên lớp rải rác khắp nơi (đặc biệt là những tên được nhắm vào các phần tử cụ thể) không nhất thiết là một sự cải tiến khi sử dụng 'kiểu'. Nhưng hey, đó là một sự khởi đầu, mà từ âm thanh của nó là tất cả những gì anh ta đang tìm kiếm. –