Cascading Style Sheets (CSS)

CSS文件告诉浏览器如何显示HTML文件。

为什么CSS必须?

CSS把HTML文件的内容和展示分离出来,并且让你可以重用这些展示方式。

CSS文件如何从服务器获取?

HTML文件一般包含了渲染其展现方式的CSS文件。浏览器获取到CSS文件后会渲染HTML文件的展现方式。

Google Chrome Web Developer Tools shows how CSS is separate from the HTML content.

 

View source screenshot for the fsp.css file in index.html.

CSS预处理器 preprocessors

CSS预处理器把一种语言编辑成CSS代码,让网页设计师能够书写可维护的前端代码:

  • Sass 是流行的预处理器,也被认为是最强大的预处理器。
  • LESS 是另一种预处理器,因为Bootstrap Framework 采用LESS,带动LESS快速流行。
  • Stylus 被认为是第三大流行的CSS预处理器。

CSS预处理器资源

  • The Advanced Guide to HTML and CSS book has a well-written chapter on preprocessors.
  • Sass vs LESS provides a short answer on which framework to use then a longer more detailed response for those interested in understanding the details.
  • How to choose the right CSS preprocessor has a comparison of Sass, LESS and Stylus.
  • Musings on CSS preprocessors contains helpful advice ranging from how to work with preprocessors in a team environment to what apps you can use to aid your workflow.

CSS框架

CSS资源

CSS学习清单

  1. Create a simple HTML file with basic elements in it. Use the python -m SimpleHTTPServer command to serve it up. Create a <style></style> element within the <head> section in the HTML markup. Play with CSS within that style element to change the look and feel of the page.
  2. Check out front end frameworks such as Bootstrap and Foundation and integrate one of those into the HTML page.
  3. Work through the framework’s grid system, styling options and customization so you get comfortable with how to use the framework.
  4. Apply the framework to your web application and tweak the design until you have something that looks much better than generic HTML.