欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
您的位置:DIVCSS5首页 > CSS工具 >

前端工程师或设计师必备手册,CSS工具教学

 

前端工程师或设计师必备手册,CSS工具教学转发收藏就对了

CSS Reference和HTML Reference来自同一开发者,从站点名称你应该可以知道两者差异,CSS Reference主要专注于网站阶层式样式表(Cascading Style Sheets,简称CSS)语法参数,网站宗旨「通过示例学习」和我们熟悉的参考手册差不多,实际上许多在线教学也都是从实例来学习语法操作。

CSS Reference将所有CSS标签都列在网站中,同时提供快速检索功能,当你点击任一标签后会开启详细使用教学,使用者可从设定方式对照示例,就能得出如何将某个语法正确运用到你的网页设计。

更重要的是CSS Reference让你真正了解每个语法标记如何使用,而不用从百度去翻找不一定正确(或可能过时)的网络文章。

就如同HTML Reference一文写道,我认为所有学习都必须有参考手册,用于更全面的了解及对照查询,包括CSS当然也是如此,尤其CSS 3又出现许多新的语法和设定方式,若没有参考手册很容易疏漏。若你属于前端工程师或设计师,CSS是每天日常,将网站加入书签就对了。

站点名称:CSS Reference

网站连接:http://cssreference.io/

使用教学

STEP 1

开启CSS Reference网站后,会发现它长得跟HTMLReference.io差不多,不过在细部设计上颜色倒没有用得那么复杂。

上方Collections收录一些CSS主题,例如动画、背景、Flexbox、位置、过场动画及排版,下方则有搜寻框及所有CSS属性,目前一共收录129个。

前端工程师或设计师必备手册,CSS工具教学转发收藏就对了

STEP 2

开启关于文字排版主题分类,能找到一些很常用于文字设计的样式类别,例如:font-family、font-size、color、text-align、letter-spacing等等,每个语法都有设定示例、说明并显示成效于右侧供开发者参考。

前端工程师或设计师必备手册,CSS工具教学转发收藏就对了

比较容易遇到的定位(Positioning)设定,如果你和我一样时常搞不太清楚的话,从这网站的示例应该更能清楚理解。

前端工程师或设计师必备手册,CSS工具教学转发收藏就对了

STEP 3

每一个CSS属性都会有详细的设定说明,例如很常用到的font-style,可以变更文字样式,加上斜体或粗体等等,各种设定方式都有对应的示例,即使看不懂英文叙述也没关系,从这里亦能学习每个属性要如何使用。

前端工程师或设计师必备手册,CSS工具教学转发收藏就对了

STEP 4

其他例如很常遇到的padding、margin等CSS属性,一样可以在CSS Reference说明手册找到非常详细的介绍及使用方式,通过图片说明就能更容易理解,假如你想快速复制每个属性内容,只要点击语法即可快速复制到剪贴板。

前端工程师或设计师必备手册,CSS工具教学转发收藏就对了

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/css-tool/t50769.shtml

我要分享到:

必备CSS教程 Essential CSS Tutorials

必备HTML基础教程 Essential HTML Tutorials

如对文章有任何疑问请提交到DIV CSS论坛,或有任何网页制作CSS问题立即到CSS论坛发贴求解 或 直接DIVCSS5网页顶部搜索遇到DIVCSS疑问。
CSS教程文章修订日期:2018-08-17 11:01 原创:DIVCSS5
本文www.divcss5.com DIVCSS5版权所有。