CSS工具列表
用戶界面
- I Like Your Color
輸入URL然后它會抓出其中的顏色并用16進制表示。 - CSS Multi-element Rollover Generator
使用CSS和一個圖片創(chuàng)建出一個翻轉按鈕的樣式。 - CSS Rounded Box Generator
- Ruthsarian Layouts
6個CSS頁面布局模板，包括顏色、標題等。 - Bluerobot Layout Reservoir
2欄和3欄的CSS布局框架 - Glish CSS Layout techniques
2、3、 4欄的CSS布局框架 - The Layout-o-matic
輸入頁寬、欄數(shù)和padding，它會自動生成CSS和HTML的布局框架。 - Little Boxes
w3cn.org上提供的那些布局模板 - Open Source Web Design
各種免費的完整頁面模板 - Web Builders’ Toolkit
更多的模版資源 - Iconico Online CSS Scrollbar Color Changer
- List-u-Like
一個CSS菜單生成器：輕松創(chuàng)建采用li并兼容各種瀏覽器的導航菜單。 - Nifty Corners: 無需圖片的圓角矩形
- Round Corner Stone/Icon (rcsi) V1.0
增強的圓角矩形 - Xylescope
無需下載其他站點就能輕松分析其CSS代碼。 - W3C Core Styles
- Checkliste zur Webseitengestaltung
- Testseite zur Zeilenbreite
易用性檢查
- Accessibility Valet Demonstrator
- Bobby Online Service
- Cynthia Says
- OCAWA Web Accessibility Expert
- Torquemada
使用工具對頁面進行一個完整的易用性分析方法測試，以快速辨別頁面中哪些部分存在錯誤。 - UI Site check
一個站點檢查工具，只需要輸入你的網(wǎng)址，便可以列出幾十個驗證器和易用性工具。 - WAVE 3.5 Accessibility Tool
可以提供你頁面上的易用性細節(jié)和錯誤方面的有用信息。他會用紅黃綠藍等幾種圖標來表示需要改進的頁面部分。這些圖標代表了你頁面上有關結構、內(nèi)容、可用性和易用性方面的問題細節(jié)。你可以清楚地看到當前頁面上哪些位置存在問題。 - Web-based Site Usability Checker
- WebXACT Quality &Accessibility Check
一個免費的在線服務，讓你對單個頁面進行質量、易用性和保密性問題的測試。 - Will the browser apply the rule(s)?
- TAW - Test accessibilidad web
整理和優(yōu)化
- CSS Formatter and Optimiser
能讓你選擇你的CSS更易讀還是更小。 - CSS Compressor
使用這個工具可以壓縮你的CSS使之提高載入速度和節(jié)約帶寬。 - Online CSS Compressor
多種途徑來清理并壓縮你的CSS，犧牲了可讀性來獲得相當程度的優(yōu)化和尺寸的減少。 - CSS Compressor
- CSS Syntax Checker for BBEdit and TextWrangler
- CSSTidy
CSSTidy 是一個開源的CSS解釋器和優(yōu)化工具 - CSS Tweak ~ Web Based CSS Tweaker!
CSS Tweak 會優(yōu)化你的CSS以減少文件大小和下載時間。 - Clean CSS - Optmize and Format your CSS
- Format CSS Online
自動格式化你的CSS使之便于閱讀和編輯 - Online CSS Optimizer
CSS Optimizer 優(yōu)化并減少CSS的文件尺寸 - Online CSS Optimiser/Optimizer
這個工具用于優(yōu)化CSS代碼。 - Tabifier
使HTML和CSS代碼變漂亮。 - Webucator
有一個CSS參考手冊，你還可以在上面測試你的CSS代碼 - CSS Centricle
CSS hack瀏覽器兼容一覽表 （就是w3cn.org 上的那個）
字體
- CSS Font and Text Style Wizard
你可以在這里測試用不同的字體和樣式來生成CSS源代碼。 - Em Calculator
轉換字體大小到em的工具 - text sizing - up the garden path
不同瀏覽器下字體表現(xiàn)的研究，共有264個截圖。
表單
- Accessible Form Builder
輕輕松松生成符合XHTML標準的表單。 - CSS Form Code Maker
表單生成器 - JotForm
所見即所得的表單生成器 - korhoen typeviewer
幫你查看CSS的排版效果，幫你調(diào)整使之易讀。
布局
- CssCreator -> Page Layout:
this generator will create a CSS layout that has fixed width left and/or right columns with a dynamic width center column, all the same height with header and footer. - CSS HTML PHP Website Template Maker
一個PHP - HTML - CSS模板生成器，可以生成包括頁頭和頁尾的兩欄布局的模板。 - Firdamatic
Firdamatic? 是一個無表格的布局生成器。 - Free CSS Template Code Generator
生成三欄的布局 - Layout-o-Matic
也是一個無表格的布局生成器。 - QrONE CSS Designer
在線CSS生成器 - Scriptomizers
一個CSS樣式生成器 - The Generator Form v2.90
1-3欄可定制的CSS頁面生成器。
酷站
- CSSElite
- openwebdesign.org
設計師和站長在這里分享網(wǎng)頁設計模板和資訊。 - CSS thesis
- Wow-Factor
- Web Standards Awards
- W3 Compliant Sites
- Unmatched Style
- The Weekly Standards
- CSS-Mania
- CSS Drive
- CSS Import
- CSS Zen Garden
- CSS Vault
- CSS Beauty
- Stylegala
幫助向導 / Hacks / 學習資源
- SelectOracle
Explains the structure of CSS- and HTML-documents. Enter semi-colon separated selectors or just paste in your existing rulesets into the “Direct Input area, or provide the URL of a stylesheet or an HTML document with an embedded stylesheet in the “URL Input area. English, Spanish, German and Bulgarian versions are available. - Tom Lee has a tutorial on Max-width in IE Using a CSS Expression. Word of caution: I hear using this method can be rather hairy, in some cases crashing the browser.
- Future-proof your CSS with Conditional Comments from Bruce Lawson is a great comprehensive collection of CSS’s that, when combined, addresses most of CSS issues with different browsers.
- IE Word Wrap Doppelganger Bug
這個站點展示了標題(heading)元素在IE6中換行時會留個小尾巴的bug。 - Images, Tables, and Mysterious Gaps seems like something I should’ve known already about the behavior of inline elements in strict mode. But of course it took me an hour of agony before finally realizing the ultimate truth: I’m not that smart.
- Easy CSS hacks for IE7 — IE7下可以用的CSS Hacks。
- 針對IE7, Firefox 1.5和Opera 8.5的Web瀏覽器CSS支持 一覽表。
- snook.ca on the “+ CSS hack which you can use to target IE6 and IE7 only.
- On having layout
提供了很多信息圍繞IE其特有的“渲染概念：hasLayout — one of the major causes for headache when it comes to how IE decides to pain the boundaries of certain HTML elements:- “Internet Explorer 中有很多奇怪的渲染問題可以通過賦予其“l(fā)ayout得到解決。John Gallant 和 Holly Bergevin 把這些問題歸類為“尺寸bug(dimensional bugs)，意思是這些 bug 可以通過賦予相應元素某個寬度或高度解決。這便引出關于“l(fā)ayout的一個問題：為什么它會改變元素的渲染特性，為什么它會影響到元素之間的關系？這個問題問得很好，但卻很難回答。在這篇文章中，我們專注于這個復雜問題會有那些方面的表現(xiàn)，某一方面的具體討論和范例請參考文中給出的相關鏈接。
這篇文章的中文翻譯參見承志的SharkUI：On having layout
- Negative text-indent and underline — No matter how far on the left the real text is, the underline will be stretched all the way to the right in some PC browsers, namely the Firefox.
- IE6 Multi Class Bug — Again, something that could’ve brought to my attention last week!
- …Internet Explorer fails to render backgrounds for elements that have both an ID and a class defined. For instance, #photos.background1 will display the corresponding background in IE6 for Windows, but once that has been defined, #photos.background2, #photos.background3, etc. will not be displayed.
- Ten more CSS tricks you may not know
包括少量的IE bug修復手段 - The “Holly Hack — 著名的taming IE/Win CSS display bug by assigning a dimensional value such as height:1%;
- CSS tests
很不錯的一系列CSS測試頁面 - max-width in IE
用IE的expression來模擬max-width - http://imfo.ru/csstest/css_hacks/import.php
用@import來針對不同的瀏覽器隱藏CSS的一系列方法。 - Essentials of CSS Hacking For Internet Explorer
助你對付IE的一系列建議。 - Web 瀏覽器標準支持
用圖表來比較IE 6, Firefox 1.0, 和Opera 8. - The perils of using XHTML properly
正確使用XML申明和MIME類型。 - IE Double Float Margin Bug.
小貼士
- CSS-Based Forms: Modern Solutions樣式表定義的各種漂亮注冊與登錄表單的收集。
- Hot Dates with CSS 教你怎樣使blog的日期看起來像日歷頁。
- A nice demo of experimenting with CSS-only solution to imagemap with popups using unordered list.
- Clagnut shows you how to have Line breaks in tooltips by using the carriage return entity . How utterly simple!
- Styling check boxes and radio buttons only with CSS uses 100% CSS solution (via attribute value selector and positioned background images) to serve up customized form elements. It’s semantically correct and degrades well for browsers that doesn’t support this method (IE), but is it also accessible?
- Stuart Robertson’s CSS text shadow technique seems like one of the easiest-to-implement techniques I’ve come across. It uses :before pseudo element and supports both Safari and Firefox browsers.
- From “holy crap why didn’t I think of that file… Airbag has a simple but great idea of using a ruler background images in CSS to check DIV sizing during development.
- CSS Colors: Take Control Using PHP is a wonderful tutorial from Barely Fitz on how to use PHP variables to represent colors in your CSS which you can then manipulate — quickly changing all the colors from a single source, generating new colors via algorythm, etc.
- Web Graphics has a CSS3 demo on using :target pseudo class to style anchor link targets.
- Dynamic Drive, a long time favorite DHTML code snippet depot of mine, has started a new spin-off: CSS Drive.
- A More Accessible Map — a new tutorial on ALA shows how to create an accessible map with tooltips via CSS and JS.
- Styling horizontal rules with CSS — “…Don’t waste hours trying to style horizontal rules consistently across different browsers. Instead wrap your HR in a DIV, set the HR to display none and style the surrounding DIV instead.. Now why the heck didn’t I think of that?
- CSS image preloader technique from maratz.com — using background image CSS property on images to serve as image place holders.
- stefanhayden.com shows a neat (and easy) way to make sure the client fetches new CSS with HTML update: just add a variable at the end of the CSS with eac
轉載于:https://www.cnblogs.com/standas/archive/2009/06/06/1497679.html
總結
- 上一篇： php 邮币卡源码,如何使用CSS的Gr
- 下一篇： codeql 代码审计