5分钟学一学Web,10款前端必备的CSS工具

CSS 参考文档

2015/08/03 · CSS ·
CSS

本文由 伯乐在线 –
刘健超-J.c
翻译,艾凌风
校稿。未经许可,禁止转发!
英文出处:tympanus.net。欢迎插手翻译组。

咱俩早就在 Codrops 上揭橥了新章节:CSS
参考文档。大家明天就来谈谈它,看看究竟加了哪些新特性让学习 CSS
变得更简便实际。

亚洲必赢官网 1

Codrops
是最励志的网站之一。是的,我是稍稍偏袒的,但本身肯定你也允许这一真情。

比方您正在寻求灵感,那您在此处就可以找到许多新意资源,它们能让您的脑壳里也会彰显一多个想法。我欣赏那些网站的说辞之一是:Manoela 和
Pedro 提供的资源自然会给大家留下长远印象。

倘诺您在搜寻如何学习使用 CSS
属性的艺术,你可以在那里找到很多源代码来上学。但假若你想学学更加多关于属性的基础知识:属性定义,差距的取值,以及各样值的含义和机能,或是其余。而你能在那里找到任何你正在寻觅的资源,这岂不是万分圆满?

一年前,我们觉得,即使 Codrops
有一些章节供读者来学学 CSS 属性,那会是一件动人心弦的事。因而,将 Codrops
创设成为一个为用户提供灵感来源和读书CSS 的美好平台。那是 Manoela
向我提议的想法,而就在几天后,我起来起首举行了。

就此,在过去的一年里(不到一年),大家给 Codrops 新增了一个板块:CSS
参考文档
。大家越发激动能够在终极与大家享用这一果实。

整套伊始难,那篇参考文档仍在不停向上,我们都很努力地革新它,使其更为完善。如果你有任何改良的指出,或发现错误,都可交付到那边 GitHub
repo。

摘要: 推荐书小编编辑推荐:《图解CSS3》:焦点技术与案例实战
资深Web前端专家历时两载的经历与脑子之作,意在根据最新CSS3业内撰写最权威的CSS3学学资料和备查手册理论知识系统且周到,以图解的主意讲解CSS3的种种职能

Web
Components是W3C制定的一种标准,可用来创设独立的Web应用组件,主要涵盖以下4个模块:模板元素,HTML
Import,Shadow DOM,自定义元素。

对于web开发来说,CSS是最得力的鼓吹页面、设置页面布局的技巧。但难题是,CSS是一种标记性语言,语法结构分外的松懈、不如履薄冰。WEB程序员会日常发现自己的或旁人的CSS文件里有大气的冗余代码或错误或可以大批量优化的地方。如若您时不时选择静态编程语言(比如,Java,C语言)等,你会发觉实用的IDE工具会给编程带来巨大的频率,像Eclipse那样的可以实时自动分析代码难点的购并开发环境就是一个典型的例子。那么,CSS程序员有没有这么的增援工具呢?。

参考文档

Codrops 的 CSS
参考文档包罗了一个条目列表入口:CSS 属性CSS 功能CSS
数据类型
CSS @规则CSS
伪类/伪拔取器/伪元素
。每个条目都定义和讲述了CSS
的性质、功效、数据类型、@规则或伪类/伪选取器/伪元素。

亚洲必赢官网 2

而外以上 5 类条目,还有一类就是 CSS 概念。CSS 概念中的每个条目都带有具体 CSS
概念或完整的风味指引

CSS 概念条目充当了一组有关属性的全局条目。比如,Flexbox 和 Counters
是五个概念,所以它们都有和好的条款。每个条目都表明其定义含义和用途,还隐含了其属性的定义与范例。

那就是说,一个 CSS 条目到底是什么的吧?

亚洲必赢官网 3

推荐书小编编辑推荐:《图解CSS3》:宗旨技术与案例实战

资深Web前端专家历时两载的经验与脑子之作,意在按照最新CSS3标准撰写最高尚的CSS3读书资料和备查手册理论知识系统且周详,以图解的不二法门讲解CSS3的各个机能和特色,包罗大批量实战案例,直观易懂,实战性强


5分钟学一学Web,10款前端必备的CSS工具。上面将要介绍的10款工具都是一对在线的选择,你不须要将它们安装到自己的微处理器上,只要能联网,你就足以应用它们。超过一半的那个工具使用起来都特其余简约,但也有亟待技术的地点。假若你在运用它们的经过中有哪些感受感受,请留在评论里享受给我们。

CSS 条目结构

亚洲必赢官网 4

各种条目拥有一个头顶和智能搜索模块,而底部描述了该条款所属体系。下边某章节就介绍那一个智能搜索特性。

各种 CSS
条目首要由那个几有的组成:描述官方语法属性值范例线上演示浏览器协助长远精通连带条文。每部分或者由五个小一些组成。

叙述章节你可以学到 CSS
属性、功效、接纳器等用法。该有的基本上是概念的概念和更为求证。

在概念部分后就是有的综述,包涵官方语法、初阶值、该 CSS
特品质应用到哪边要素上以及属性值是还是不是辅助过渡(备注:CSS 3 的
transition-property)。有些类目不要求本节,所以,它是否存在取决于你正在翻阅哪个类目。

属性值章节里会定义与叙述每个取值。其余,倘诺一个 CSS 特性没有一组值(如:@
规则),那么该章节就会被省略掉。

你会在范例章节里看看选拔 CSS 特性的案例
– 包罗首要的代码片段和运转结果的截图(即使有截图)。

线上演示章节里含有一个或四个线上演示的案例,这么些案例中,有局地是来源于范例章节的,有时会选取额外的案例。由于运行结果着重于浏览器的支撑,所以线上演示的案例可能会有用来呈现运行结果的截图(若是浏览器不支持该
CSS 特性)。

须求留意的是,很多条文都包蕴部分线上演示,其中有的是置于在讲述章节内。

请务必检查浏览器的支持程度,以确定你所采纳的浏览器是还是不是辅助您正在翻阅的表征。

由于有无数关于 CSS
特性和专题的可以阅读资源,深深明白章节就带有了值得一读的好好资源链接,其中有个专业文档链接,它概括了
CSS 将要引入的特点。

内容简介

《图解css3:要旨技术与案例实战》是境内知名的web前端专家历时两载的脑力之作,按照新型的css3作文,融入了小编在css领域近10年的使用经验,意在将本书创设成为css3世界最尊贵和实用的正式创作,供没有经验的读者系统学习,供有经历的读者参考备查。
《图解css3:大旨技术与案例实战》理论知识系统周全,详细讲解了选拔器、边框、背景、文本、颜色、盒模型、伸缩布局盒模型、多列布局、渐变、过渡、动画、媒体、响应web设计、web字体等要旨下富含的具有css3新特色,所有那一个都巧妙地融入到案例中,而不是彻头彻尾枯燥的争执教学;讲解格局直观易懂,以图解的点子巧妙地显示了这个新特征;实战性强,既为每个知识点精心设计了小案例,也有综合性的大案例,所有案例都更加详细,有意义须求分析、设计思路和一体化代码,还有最终的机能突显。

1. 模板元素

<template>元素中得以涵盖HTML标签,样式黄岩乱弹本,这个都是可复用的。

检测浏览器是或不是协理模板特性:

var isTemplateSupported=function(){
    var tmpl=document.createElement('template');
    return 'content' in tmpl;
};

兼容性:http://caniuse.com/\#feat=template

为了拉长Web应用的品质,模板中的内容默认是不加载的,它不在DOM结构中,须求手动加载。有三种艺术:

(1)克隆节点

<template id="template1">
    ...
</template>

<div id="container1"></div>

var container=document.querySelector('#container1');
var tmpl=document.querySelector('#template1');
container.appendChild(tmpl.content.cloneNode(true));

中间,cloneNode(true)表示深克隆,目的节点的子节点也被克隆。
cloneNode(false)表示浅克隆,只克隆目标节点,不克隆目的节点的子节点。

(2)节点导入

var container=document.querySelector('#container1');
var tmpl=document.querySelector('#template1');
container.appendChild(document.importNode(tmpl.content,true));

其中,document.importNode(targetNode,true)表示深克隆。


CSS难题检查工具:CSS
Lint

Codrops Playground

在自己写条目时期,Manoela 和 Pedro 制作了 CSS
参考文档里最好的功力之一:playground

在该条款里看到的具有案例,都能被您编辑和经验,并且大家强烈指出你那样做,那样能让你更好地知道某个特性的周转和它不一样取值的结果。要求留意的是,playground
仍居于Alpha
阶段,有不可胜计表征还未曾落到实处。固然发送任何
BUG 报告、提出和评价到 playground ‘at’
codrops.com。

亚洲必赢官网 5

作译者

廖伟华,资深Web前端工程师,W3cplus创办者,目前走立时任于Ctrip
UED。中国Drupal社区主题成员之一。对HTML5、CSS3、XHTML和Sass等前端脚本语言有格外深入的认识和丰硕的实践经验,尤其令人瞩目对CSS3的探究,是境内最早切磋和动用CSS3技术的一批人。现在还关切Web产品策划、交互设计、SEO以及运动端支付。二零一二年九月刊的《程序员》杂志上公布小说“推特(Twitter)Bootstrap:前端框架利器”。

2. HTML Import

通过HTML Import能够将表面HTML文档嵌入当前的文档中。

<link rel="import" href="fileName.html" >

检测浏览器是或不是匡助HTML Import特性:

var isImportSupported=function(){
    var link=document.createElement('link');
    return 'import' in link;
};

兼容性:亚洲必赢官网,http://caniuse.com/\#feat=imports

访问引入的文档:

<link id="link1" rel="import" href="fileName.html" >

<div id="container1"></div>

var container=document.querySelector('#container1');
var externalDocument=document.querySelector('#link1').import;
container.appendChild(externalDocument.querySelector('...').cloneNode(true));

#link1会导入一个html,包罗<html>,<head>,<body>等等,
externalDocument是该html的document对象,
之所以,可以行使externalDocument.querySelector来收获html中的元素。

HTML Import扶助二种事件:load事件与error事件


亚洲必赢官网 6

智能搜索

每个条目里都有一个智能搜索模块。当然,你也得以在Codrops
首页找到它,紧靠左侧专题小说 。

亚洲必赢官网 7

比较“智能搜索”那名字,它会合作你要寻找字符串,然后从拥有 CSS
条目中回到一列结果。所以,假如你追寻明确的字符串(或一个字母),智能搜索模块会从持有条条框框中,将富含该字符串的标题形成一个下拉框。当您追寻一个实际性质时那很有用,它可以得到一些有关的连带属性(例如:border、border-top、border-bottom、bottom-right等)。

前言

缘何要写那本书
CSS3是在CSS2.1基础上扩充而来,事实上,它还向来不完全成熟。有些学者会报告您,CSS3现行还用不上,甚至几年之后都不会有饱经风霜的业内公布。
近来为止CSS3还并未一套成熟的正式,其中的模块也在不断更新,更加是浏览器对CSS3特性的辅助也在不断转变,同时没有丰富的时光去上学和研究W3C官方文档和标准,致使大家学习CSS3变得进一步复杂。
为何会挑选这些时候编写那样一本图书呢?原因很粗略。对于盼望Web应用开发者而言,CSS3足以说是人心所向,那也是技巧转移的硬性须求。在其实Web应用中新正规的选拔程度正在以令人雾里看花的进程不断地改成着,众多浏览器厂商也在持续加快对CSS3新特征的支撑。在编写那本图书的进程中,我也被迫不断更新书中的浏览器扶助表格。
面对协调正在采用的浏览器,半数以上用户并不确实了然其负有的法力有多强大。当然,他们在浏览器自动更新后也许会发觉部分一线的界面变化。但她们或许不晓得,新版的浏览器对如何CSS3特性有所帮助。
本书的目的是协助开发者更好地操纵CSS3的风味,并且将新技巧利用到实际的支出当中,进步协调支付Web程序的水准。
本书面向的读者 有肯定CSS3开销经历的前端工程师。
本书能支援您系统控制CSS3的各种文化,提高技术水平和作业能力。
从事CSS3付出的前端工程师。
由于CSS3涵盖的新特色卓殊多,在付出进程少将本书看做速查手册,升高开销效用。
前端开发爱好者。
借使还不是一名前端工程师,可是对前端开发至极感兴趣,本书也能让您对流行的CSS标准和专业有一个系统和百科的认识,为上学前端知识打下基础。
本书的特性
本书最大的特色就是将CSS3特性按模块功用分类,通过理论、图解、实战的方式向我们阐释CSS3每个特性功用。
内容完善、足够、翔实。
由浅到深地执教了CSS3新特色的语法、特性以及采纳技巧。本书涵盖了CSS3广大功用模块,如CSS3拔取器特性、边框模块、文本模块、颜色模块、UI界面模块、CSS3动画模块、CSS新型盒模型以及CSS媒体询问、响应式设计等。
图解格局,直观易懂。
图解的不二法门是本写的最大特色之一,在叙述每一个CSS3特性进程都配了鲜活的实战作用,甚至每一手续都配有对应的成效图。就终于你对文字知道仍旧代码精通有所误差,实战功能图能辅助你更好地驾驭CSS3每个特性。
案例丰盛,实战性强。

3. Shadow DOM

Shadow DOM的引入就是为通晓决由封装机制的功能域造成的标题,它将Web
Components的HTML,CSS和JavaScript打包,不受外部成效域影响。

检测浏览器是或不是接济Shadow DOM特性:

var isShadowDOMSupported=function(){
    return 'createShadowRoot' in document.body;
};

兼容性:http://caniuse.com/\#feat=shadowdom

Shadow
DOM使得大家得以将一棵DOM子树插入正在渲染的文档中,每一个DOM树上的子节点,都能再有所它和谐的Shadow
DOM树。
装有至少一个Shadow DOM子树的DOM元素,称为宿主元素(host
element),也叫作Shadow host。

:宿主元素得以用:host接纳器来摘取

<div id="host1"></div>

var host=document.querySelector('#host1');
var shadowRoot=host.createShadowRoot();
shadowRoot.innerHTML='hello';

CSS Lint是一个开源的校验CSS文件质量的工具,最初是由 尼古拉斯 C. Zakas和
尼科尔e Sullivan编写的,最初版本在Velocity会议上于二〇一一年十二月宣布。CSS
Lint的检测规则包括错误的和警戒,当选取器或品质书写不科学、漏掉了大括号、多写了分店等时,会提醒解析错误,解析错误优先提醒。

浏览器支持

甭管曾几何时可用,你会看到 CanIUse.com
的浏览器包容性表格嵌入在浏览器援助章节,所以那个兼容性表格是直接保持最新的。

出于有些条目没有内置 CanIUse
的浏览器包容性表格,大家会手工将以此浏览器襄助音信写入。常见和因而测试的重点特征都收获浏览器协助,但有点特性可能会在以后被涂改。所以,即使你发觉体验过时的包容性信息,请联系大家,让大家掌握,大家会按照你的提议及时更新。

媒体评说

CSS3在前端开发中的重要性毋庸置疑,那个年来,新的CSS3专业在不停演进和完美,不过一向从未规定的正儿八经。从技术标准的角度来讲,本书应该是当前版本最新的;从知识点的涵盖面来讲,本书也是同类书中最系数的。更难能可贵的是,为了便利读者通晓,小编用多量直观的图示替代了干燥的文字,采取了图解的章程来讲课,相信那应该会很受读者欢迎。其余,本书还隐含大量实战案例,理论与实践相结合。若是你要系统学习CSS3要么在开发中还无法熟能生巧使用它,强烈推荐那本书给您。

4. 自定义元素

Web
Components规范中还规定了,倘诺在DOM中成立出一个全新的因素,那么自定义元素得以有协调的特性和章程。

检测浏览器是还是不是援助自定义元素特性:

var isCustomElementSupported=function(){
    return 'registerElement' in document;
};

兼容性:http://caniuse.com/\#feat=custom-elements

要付出一个自定义元素,必要5个步骤:成立对象,定义对象的属性,定义生命周期方法,注册新元素,增加元素。

(1)创设对象
选择Object.create来创设对象,首个参数是目的的原型,第四个参数是目的的质量。

var element=Object.create(HTMLElement.prototype);

(2)定义对象的属性
运用Object.defineProperty和Object.defineProperties那八个措施定义一个目的的习性。

Object.defineProperty(element, 'title', {
    writable:true
});

(3)定义生命周期方法
在JavaScript中,对象的生命周期是由一个个两样的情形组成的,先后顺序是:
被创建createdCallback,插入到DOM中attachedCallback,
从DOM中移除detachedCallback,对象的某一属性值更新attributeChangedCallback,

element.createdCallback=function(){
    //
};

(4)注册新元素
选取document.registerElement方法,可以在DOM中登记一个新因素。

var MyNameElement=document.registerElement('my-name',{
    prototype:element
});

// 以下向body中动态加载该元素,也可以直接在html中写<my-name>标签
var myNameElement=new MyNameElement();
myNameELement.innerHTML='hello';
document.body.appendChild(myNameElement);

将时有发生如下HTML:

<my-name>hello</my-name>

(5)扩大元素
一个因素得以用extends继承原生元素或者其他自定义元素。

var myNameElement=document.registerElement('my-name',{
    prototype:element,
    extends:'i'
});

var myNameElement=new MyNameElement();
myNameELement.innerHTML='hello';
document.body.appendChild(myNameElement);

将发出如下HTML:

<i is="my-name">hello</i>

以上(4)(5)也得以不应用构造器
间接在HTML中分头进入<my-name>和<i
is=”my-name”>,也会触发createdCallback事件。


CSS代码分析计算工具:CSS
Stats

向前看

些微被遗漏属性,它们只收获小一些浏览器匡助,甚至还没取得当今浏览器帮衬。对于它们的辨证还不是很平静,平时会转移。大家的希望是把它们增进到条目里,因为它们在将来有梦想赢得浏览器更好的协助,并且它们的验证变得平稳起来。

大家都知晓,在大家以此圈子,每一天都会有新意识。所以,我们盼望 CSS
参考文档能一贯得到成长和扩大,能随着时间持续添加额外的属性和特点。即时当前条目更新放缓。

俺们设定了一个里程碑式的对象,首先向您提供一个优秀的参照文档,并致力于不止考订它。

书摘

第1章 揭开CSS3的面纱
即使关心前端方面的技能,那么对CSS一定不会陌生,你早晚听说过CSS3。在采取CSS3此前,应该对这几个新一代样式表语言的始末有个基本通晓。
在本章中,你将明了CSS3与CSS2.1的界别,以及当前市面上主流浏览器、移动端浏览器对CSS3辅助的状态。对于尚不完全扶助CSS3的浏览器,将会为我们引入一个渐进增强的概念,用部分CSS方法来模拟CSS3的已毕形式。最终给大家不难介绍一些CSS3引入的新特点及其将来的前景。
1.1哪些是CSS3
CSS3并不是一门新的言语。假诺接触过CSS就通晓,CSS是创造网页的另一个单身但决不不重大的一片段。CSS是种层叠样式表,是一种体制语言,用来报告浏览器怎么着渲染你的Web页面。
CSS3是CSS规范的风靡版本,在CSS2.1的基本功上加码了好多强有力的新功能,以救助开发人员解决部分题材,并且不再需要非语义标签、复杂的JavaScript脚本以及图片,例如圆角功效、多背景、透明度、阴影等成效等。CSS2.1是纯粹的科班,而CSS3被细分成多少个模块组,每个模块组都有温馨的正规化。那样的功利是全方位CSS3的业内发表不会因为有的难缠的一对而影响其余模块的递进。
现在先来探望CSS3高兴的新特征。 1.1.1CSS3的新特点
CSS3规范并不是独立的,它再一次了CSS的局地情节,但在其基础上开展了广大的补偿与修改。CSS3与在此之前的几个本子对照,其转移是革命性的,就算它的一些属性还不可见被浏览器完美的支持,但却让我们看出网页样式发展的前景,让咱们更具备方向感、职分感。
CSS3新特性万分多,那里挑选部分被浏览器支持相比周到、更具实用性的新特征。
1.强硬的CSS3取舍器
使用过jQuery的人都掌握,jQuery的选用器效能强大,使用方便,CSS3接纳器和jQuery选拔器相当相近。允许设计师通过选用器直接指定须要的HTML元素,而不需要在HTML中添加不须要的类名、ID等。使用CSS3拔取器,能在Web的制作中更周到地做到布局与表现分离,设计师能轻轻松松地设计出简洁、轻量级的Web页面,并且能更好地掩护和修改样式。
2.抛弃图片的视觉效果
Web中最常见的机能包涵圆角、阴影、渐变背景、半透明、图片边框等。而这么的视觉效果在CSS中都是借助于设计师营造图纸或者JavaScript脚本来已毕的。CSS3的局地新特色可以用来创建一些奇特的视觉效果,后边的章节将为大家彰显这一个新特性是何等落到实处这几个视觉效果。
3.背景的变革
即使说CSS中的背景给您带来太多的限制,那么CSS3将牵动革命性的变通。CSS3不再局限于背景象、背景图像的利用,新特性中添加了三个新的属性值,例如background-origin、background-clip、background-size,其余,仍是可以在一个因素上安装多少个背景图片。这样,若是要统筹相比复杂的Web页面效果,就不再须要选取部分剩余标签来接济完结了。举个例子,要落到实处CSS中的滑动门效果,在CSS中大多要添加2~3个附加的竹签来辅助达成,那么CSS3中的那一个新特性可以在一个标签中完结同样的职能。
4.盒模型变化
盒模型在CSS中是重点,CSS中的盒模型只好促成部分主导的作用,对于有些奇异的功力须要基于JavaScript来完毕。而在CSS3中那一点取得了很大的立异,设计师可以一向通过CSS3来贯彻。例如,CSS3中的弹性盒子,那个特性将给我们引入一种全新的布局概念,能轻易已毕各样布局,越发是在移动端的布局,它的意义越来越强大。我们将在第7章、第8章见识它的神通。
5.阴影效果

5. 新增的CSS选择器

(1):unresolved
当自定义元素被加载并登记到DOM时,浏览器将精选出相当的要素,然后依据该因素所在的生命周期将它升级。
在那几个升级进度中,那个因素将揭穿给浏览器,此时它是绝非此外样式的。
俺们可以由此选用:unresolved伪类选用器,幸免没有样式的内容闪现。

my-name:unresolved::after{
    content:'Registering Element ...';
    color:red;
}

(2):host
Shadow DOM的宿主元素得以由此:host伪接纳器来博取到。

:host{
    text-transform:uppercase;
}

(3)::shadow
宿主的Shadow DOM子树可以透过::shadow伪元素选拔器应用样式。

:host::shadow h1{
    color:orange;
}

:Shadow
DOM是:host的伪元素,而不是子元素,因而:host::shadow中间无法加空格

(4)::content
content插入点元素可以透过::content伪元素应用样式。

:host ::content b{
    color:blue;
}

参考:
WEB COMPONENTS CURRENT
STATUS
Learning Web Component
Development

亚洲必赢官网 8

你的举报

理所当然,你的评价和汇报对我们是非常首要的。毕竟,那个参考文档是为你们而做的,所以大家想确保您能在那边找到其余你必要的东西。

咱俩会在特意采访难题和建议的 Github
库上采访你的举报与指出。

找到
BUG?找到一处必要更新的音讯?有错别字?有改革参考文档的提出?希望我们在概念条目添加某个
CSS 概念?那就在
Github
尽情提交难点啊。我要好也会日常寻找难点和答复你的题材,并按照需求尽可能多和及早展开编制和换代。假如您想立即拿到关于条目或请求的回复,可以在
推文(Tweet) 发音信给我。

目录

《图解css3:主题技术与案例实战》 前 言 第1章 揭开css3的面罩 1 1.1
什么是css3 1 1.1.1 css3的新特点 2 1.1.2 css3的发展情状 4 1.1.3
现在能动用css3啊 5 1.1.4 使用css3有何样便宜 5 1.2 浏览器对css3的支撑状况6 1.2.1 经典回想:图说浏览器大战 7 1.2.2 浏览器的市场份额 8 1.2.3
主流浏览器对css3帮助情况 9 1.3 渐进增强 11 1.3.1 渐进增强与优雅降级 11
1.3.2 渐进增强的优点 12 1.4 css3的现状及未来 13 1.4.1 何人在使用css3 13
1.4.2 css3的前途 14 1.5 本章小结 14 第2章 css3选用器 15 2.1
认识css采纳器 15 2.1.1 css3选用器的优势 15 2.1.2 css3选拔器分类 16 2.2
基本选项器 16 2.2.1 基本选项器语法 16 2.2.2 浏览器包容性 17 2.2.3
实战经验:使用基本选项器 17 2.2.4 通配接纳器 18 2.2.5 元素选择器 18
2.2.6 id选择器 18 2.2.7 类选取器 19 2.2.8 群组选用器 20 2.3 层次接纳器
21 2.3.1 层次选拔器语法 21 2.3.2 浏览器包容性 21 2.3.3
实战经验:使用层次选用器选用元素 21 2.3.4 后代选取器 23 2.3.5 子接纳器
23 2.3.6 相邻兄弟拔取器 24 2.3.7 通用兄弟选取器 25 2.4 动态伪类接纳器 25
2.4.1 动态伪类选拔器语法 26 2.4.2 浏览器包容性 26 2.4.3
实战经验:美化按钮 27 2.5 指标伪类选取器 29 2.5.1 目的伪类选取器语法 29
2.5.2 浏览器包容性 30 2.5.3 实战经验:制作手风琴效果 30 2.6
语言伪类选择器 33 2.6.1 语言伪类选用器语法 33 2.6.2 浏览器包容性 34
2.6.3 实战经验:定制差别语言版本引文风格 34 2.7 ui元素情状伪类拔取器 36
2.7.1 ui元素状态伪类拔取器语法 36 2.7.2 浏览器兼容性 36 2.7.3
实战经验:bootstrap的表单元素ui状态 37 2.8 结构伪类选用器 41 2.8.1
重温html的dom树 41 2.8.2 结构伪类选拔器语法 42 2.8.3 浏览器包容性 43
2.8.4 结构伪类选择器中的n是怎么样 44 2.8.5 结构伪类接纳器的利用办法详解 47
2.8.6 实战经验:css3美化表格 61 2.9 否定伪类选取器 66 2.9.1
否定伪类接纳器语法 66 2.9.2 浏览器包容性 67 2.9.3 实战经验:改变图片效果
67 2.10 伪元素 69 2.10.1 伪元素::first-letter 69 2.10.2
伪元素::first-line 70 2.10.3 伪元素::before和::after 70 2.10.4
伪元素::selection 72 2.11 属性选取器 73 2.11.1 属性选拔器语法 73 2.11.2
浏览器包容性 74 2.11.3 属性选拔器的运用方法详解 75 2.11.4
实战经验:创建个性化链接样式 81 2.12 本章小结 84 第3章 css3边框 85 3.1
css3边框简介 85 3.1.1 边框的着力属性 85 3.1.2 边框的档次 86 3.1.3
何人在选用css3边框 88 3.2 css3边框颜色属性 88 3.2.1
border-color属性的语法及参数 88 3.2.2 浏览器兼容性 90 3.2.3
border-color属性的优势 90 3.2.4 实战经验:立体渐变边框效果 91 3.3
css3图片边框属性 91 3.3.1 border-image属性的语法及参数 92 3.3.2
border-image属性使用方法 92 3.3.3 浏览器包容性 99 3.3.4
border-image属性的优势 100 3.3.5 实战经验:按钮圆角影子效果 100 3.4
css3圆角边框属性 105 3.4.1 border-radius属性的语法及参数 105 3.4.2
border-radius属性使用情势 107 3.4.3 浏览器包容性 114 3.4.4
border-radius属性的优势 115 3.4.5 实战经验:制作相当图形 115 3.5
css3盒子阴影属性 118 3.5.1 box-shadow属性的语法及参数 118 3.5.2
box-shadow属性使用办法 119 3.5.3 浏览器包容性 129 3.5.4
box-shadow属性的优势 130 3.5.5 实战经验:制作3d找寻表单 130 3.6 本章小结
133 第4章 css3背景 134 4.1 css3背景属性简介 134 4.1.1 背景的宗旨属性 134
4.1.2 与背景相关的新增属性 137 4.2 css3背景原点属性 137 4.2.1
background-origin属性的语法及参数 137 4.2.2
background-origin属性使用方法 138 4.2.3 浏览器包容性 140 4.3
css3背景裁切属性 141 4.3.1 background-clip属性的语法及参数 141 4.3.2
background-clip属性使用办法 143 4.3.3 浏览器包容性 147 4.4
css3背景尺寸属性 148 4.4.1 background-size属性的语法及参数 148 4.4.2
background-size属性使用方法 149 4.4.3 浏览器包容性 152 4.4.4
实战经验:制作全屏背景 153 4.5 内联元素背景图像平铺循环方式 154 4.6
css3多背景属性 154 4.6.1 css3多背景语法及参数 155 4.6.2 css3多背景的优势
156 4.6.3 浏览器包容性 156 4.6.4 实战经验:制作花边框 157 4.7 本章小结
159 第5章 css3文本 160 5.1 css3文本简介 160 5.2 css3文本阴影属性 161
5.2.1 text-shadow属性的语法及参数 162 5.2.2 浏览器包容性 162 5.2.3
实战经验:制作立体文本 163 5.3 css3溢出文件属性 166 5.3.1
text-overflow属性的语法及参数 166 5.3.2 浏览器包容性 166 5.3.3
text-overflow属性使用方式 167 5.3.4 实战经验:制作固定区域的博客列表 168
5.4 css3文本换行 170 5.4.1 word-wrap属性 170 5.4.2 word-break属性 173
5.4.3 white-space属性 177 5.4.4 文本换行技巧 179 5.4.5 文本换行技术比较180 5.5 本章小结 180 ☆第6章 css3颜色特性 181 6.1 网页中的色彩特性 181
6.1.1 网页色彩的变现原理 181 6.1.2 web页面的安全色 182 6.1.3 色彩方式183 6.2 css3透明属性 184 6.2.1 opacity属性的语法及参数 184 6.2.2
opacity浏览器包容性 185 6.2.3 实战经验:制作透明过渡色块 185 6.3
css3颜色形式 187 6.3.1 rgba颜色格局 187 6.3.2 hsl颜色格局 190 6.3.3
hsla颜色方式 194 6.3.4 rgba和hsla颜色情势里面的拔取 196 6.3.5
rgba/hsla的ie包容方案 196 6.3.6 rgba/hsla滤镜格式 197 6.4 本章小结 197
第7章 css3盒模型 198 7.1 css盒模型简介 198 7.1.1 什么是盒模型 198 7.1.2
重置盒模型解析方式 199 7.2 css3盒模型属性 200 7.2.1
box-sizing属性的语法及参数 200 7.2.2 浏览器包容性 201 7.2.3
实战经验:box-sizing拯救了布局 202 7.3 css3情节溢出属性 209 7.3.1
overflow-x和overflow-y属性的语法及参数 209 7.3.2 浏览器包容性 209 7.4
css3擅自缩放属性 210 7.4.1 resize属性的语法及参数 210 7.4.2 浏览器包容性
210 7.4.3 实战经验:修改文本域随意调整大小的作用 210 7.5 css3外概略属性
211 7.5.1 outline属性的语法及参数 211 7.5.2 浏览器包容性 212 7.5.3
outline和border的自查自纠 212 7.5.4 实战经验:模仿边框效果 213 7.6 本章小结
213 第8章 css3伸缩布局盒模型 214 8.1 flexbox模型基础知识 214 8.1.1
css中的布局格局 214 8.1.2 flexbox模型的功能 215 8.1.3
flexbox模型中的术语 215 8.1.4 flexbox模型规范情形 218 8.1.5
flexbox模型浏览器包容性 218 8.1.6 flexbox模型语法变更 219 8.2
旧版本flexbox模型的宗旨使用 221 8.2.1 伸缩容器设置display 222 8.2.2
伸缩流方向box-orient 224 8.2.3 布局顺序box-direction 226 8.2.4
伸缩换行box-lines 229 8.2.5 主轴对齐box-pack 232 8.2.6 侧轴对齐box-align
237 8.2.7 伸缩性box-flex 242 8.2.8 突显顺序box-ordinal-group 246 8.2.9
实战经验:box制作自适应的三列等高布局 249 8.3
混合版本flexbox模型的着力采取 253 8.3.1 伸缩容器设置display 253 8.3.2
伸缩流方向flex-direction 254 8.3.3 伸缩换行flex-wrap 257 8.3.4
伸缩流方向与换行flex-flow 259 8.3.5 主轴对齐flex-pack 259 8.3.6
侧轴对齐flex-align 262 8.3.7 堆栈伸缩行flex-line-pack 266 8.3.8
伸缩性flex 271 8.3.9 突显顺序flex-order 273 8.4
新本子flexbox模型的中坚选择 275 8.4.1 伸缩容器display 275 8.4.2
伸缩流方向flex-direction 276 8.4.3 伸缩换行flex-wrap 276 8.4.4
伸缩流方向与换行flex-flow 277 8.4.5 主轴对齐justify-content 277 8.4.6
侧轴对齐align-items和align-self 278 8.4.7 堆栈伸缩行align-content 280
8.4.8 伸缩性flex 281 8.4.9 显示顺序order 285 8.5
综合案例:跨浏览器的三列布局 288 8.6 本章小结 292 第9章 css3多列布局 293
9.1 css3多列布局简介 293 9.1.1 浏览器包容性 293 9.1.2 css3多列布局的特性
294 9.2 css3多列布局基本属性 295 9.2.1 columns属性的语法及参数 295 9.2.2
浏览器包容性 295 9.2.3 实战经验:web页面的多列布局 296 9.3
css3多列布局列宽属性 297 9.3.1 column-width属性的语法及参数 297 9.3.2
实战经验:浏览器依据窗口宽度变化调整列数 298 9.4 css3多列布局列数属性
302 9.4.1 column-count属性的语法及参数 302 9.4.2 实战经验:展现固定列数
302 9.5 css3多列布局列间距属性 303 9.5.1 column-gap属性的语法及参数 304
9.5.2 实战经验:设置列间距 304 9.6 css3多列布局列边框样式属性 306 9.6.1
column-rule属性的语法及参数 306 9.6.2 实战经验:设置列边框 307 9.7
css3多列布局跨列属性 309 9.7.1 column-span属性的语法及参数 310 9.7.2
实战经验:作品标题跨列显示 310 9.8 css3多列布局列中度属性 311 9.9
本章小结 311 ☆第10章 css3渐变 312 10.1 css3渐变简介 312 10.1.1
什么是色标 312 10.1.2 浏览器包容性 313 10.2 css3线性渐变 314 10.2.1
css3线性渐变语法与参数 315 10.2.2 css3 线性渐变的焦点用法 317 10.2.3
自定义css3线性渐变 324 10.2.4 实战经验:css3制作渐变按钮 325 10.3
css3径向渐变 333 10.3.1 css3径向渐变语法 333 10.3.2
css3径向渐变的属性参数 334 10.3.3 css3径向渐变的骨干用法 335 10.3.4
实战经验:css3径向渐变制作圆形图标按钮 350 10.4 css3重复渐变 353 10.4.1
css3重复线性渐变 353 10.4.2 css3重复径向渐变 354 10.4.3
实战经验:制作记事本纸张效果 354 10.5 综合案例:css3渐变制作纹理背景 355
10.6 本章小结 357 第11章 css3变形 358 11.1 css3变形简介 358 11.1.1
css变形属性及函数 358 11.1.2 浏览器包容性 359 11.2 css变形属性详解 360
11.2.1 transform属性 360 11.2.2 transform-origin属性 363 11.2.3
transform-style属性 370 11.2.4 perspective属性 372 11.2.5
perspective-origin属性 377 11.2.6 backface-visibility属性 380 11.3 css3
2d变形 385 11.3.1 2d位移 385 11.3.2 2d缩放 390 11.3.3 2d旋转 394 11.3.4
2d倾斜 396 11.3.5 2d矩阵 398 11.4 css3 3d变形 403 11.4.1 3d位移 404
11.4.2 3d缩放 406 11.4.3 3d旋转 407 11.4.4 3d矩阵 409 11.5 多重变形 410
11.5.1 2d多重变形制作立方体 410 11.5.2 3d多重变形制作立方体 412 11.6
综合案例:3d变形制作出品音信突显 413 11.7 本章小结 416 ☆第12章 css3过渡
417 12.1 css3接入简介 417 12.1.1 如何创立简单的联网 417 12.1.2
浏览器兼容性 418 12.1.3 css3过渡属性 418 12.2 css3过渡子属性详解 420
12.2.1 指定过渡性质transition-property 421 12.2.2
指定过渡所需时间transition-duration 423 12.2.3
指定过渡函数transition-timing-function 425 12.2.4
指定过渡延迟时间transition-delay 431 12.2.5 两个css3连贯效果 433 12.3
css3触发过渡 434 12.3.1 伪元素触发 434 12.3.2 媒体询问触发 436 12.3.3
javascript触发 436 12.4 css3对接技术 437 12.4.1 一个整机的连结 437
12.4.2 可对接的属性 438 12.4.3 优先的接入属性 439 12.4.4
过渡的初叶和终止为auto 439 12.4.5 隐式过渡 439 12.4.6
开关状态的不相同过渡方式 440 12.4.7 大致无以复加延期的交接 441 12.4.8
通过硬件加快过渡越发流畅 441 12.4.9 过渡和伪元素 442 12.5
综合案例:纯css3制作css dock导航效果 443 12.6 本章小结 449 第13章
css3动画 450 13.1 css3动画简介 450 13.1.1 浏览器包容性 450 13.1.2
css3动画属性 451 13.2 关键帧 452 13.2.1 @keyframes的功效 452 13.2.2
@keyframes的语法 453 13.2.3 浏览器包容性 454 13.3 css中为元素运用动画
454 13.3.1 使用@keyframes注明动画 454 13.3.2 调用@keyframes注解的卡通
456 13.4 css3动画子属性详解 457 13.4.1 调用动画animation-name 457 13.4.2
设置动画播放时间animation-duration 458 13.4.3
设置动画播放格局animation-timing-function 458 13.4.4
设置动画发轫广播的时光animation-delay 458 13.4.5
设置动画播放次数animation-iteration-count 458 13.4.6
设置动画播放方向animation-direction 458 13.4.7
设置动画的播音状态animation-play-state 459 13.4.8
设置动画时间外属性animation-fill-mode 459 13.5
综合案例:全屏slidershow效果 459 13.6 本章小结 464 第14章
媒体特性与responsive设计 465 14.1 媒体类型 465 14.1.1 media type设备档次
465 14.1.2 媒体类型引用方法 466 14.2 媒体特性 467 14.2.1 media
query和css属性集合 467 14.2.2 常用media query设备特性 468 14.2.3
浏览器兼容性 468 14.2.4 media query使用方法 468 14.3 responsive布局概念
470 14.3.1 responsive设计特点 471 14.3.2 responsive中的术语 471 14.3.3
responsive布局技巧 473 14.3.4 meta标签 474 14.4 本章小结 475 第15章
嵌入web字体 476 15.1 @font-face模块介绍 476 15.1.1 浏览器兼容性 476
15.1.2 @font-face语法 477 15.1.3 使用字体图标的优势 477 15.2
落成@font-face 478 15.2.1 使用@font-face自定义字体 478 15.2.2
讲明字体来源 479 15.2.3 创制种种字体 481 15.2.4 调用字体 483 15.3
综合案例:将图标转换成web字体 483 15.3.1 创造一个图标字体 483 15.3.2
准备插图 484 15.3.3 导入到icomoon 485 15.3.4 从icomoon中导出字体 485
15.3.5 下载字体文件 485 15.3.6 调用字体 486 15.4 本章小结 486

Css
Stats是一款在线CSS代码分析工具,输入网站CSS网址即可进展CSS代码分析。Css
Stats是前者网页设计师分析网站CSS代码的利器,可以计算CSS代码里的规则、字体大小、宽度中度、颜色数等等。

留在最终的部分话

咱俩把整个心血都放到了那几个参考文档,希望它能为您提供更加实用的读书资源。我梦想你能从参考文档里学到尽可能多地东西,因为我也在写的长河中学会了广大。

并且我们也指望您喜欢经过小小改造的 Codrops !

非凡感谢您的开卷。此外,别忘了到
参照文档 看看哦!

打赏接济自己翻译越多好文章,谢谢!

打赏译者

对于网页设计师而言分享网页CSS代码是必要求做的作业,计算网站设计里使用了略微种字体、多少种字体大小、多少种颜色、背景颜色有稍许种,只有对CSS代码有一个详细的计算数字才能分析出来整个网站设计出来之后的机能。Css
Stats还提供热门网站的CSS分析数据,例如谷歌(谷歌)、雅虎、推特、FaceBook、Tumblr等网站。

打赏接济自己翻译更多好小说,谢谢!

任选一种支付办法

亚洲必赢官网 9
亚洲必赢官网 10

2 赞 2 收藏
评论

CSS代码优化压缩工具:CSS
Shrinks

关于小编:刘健超-J.c

亚洲必赢官网 11

前端,在路上…
个人主页 ·
我的文章 ·
19 ·
    

亚洲必赢官网 12

亚洲必赢官网 13

CSS Shrinks
能够非凡醒目标滑坡你的CSS体积大小。很多Web程序员编写的CSS代码里有雅量的冗余语法,空白空间等,那款工具能在不影响您的CSS的正确性的状态下,优化CSS的语法,去除无用的空格和空行,明显的压缩CSS的交由,多量的滑坡带宽的浪费。

CSS代码整理工具:ProCSSor

亚洲必赢官网 14

ProCSSor
除了提供基本优化CSS代码功效,还提供了大批量的自定义选项。比如,让您设定CSS规则,CSS属性,CSS语法的优化选项。它还提供了对新型CSS3属性、规则中各样浏览器里的不匹配替代方案。

Codrops CSS
语法参考

亚洲必赢官网 15

Codrops CSS
参考情节充裕而完善,并且界面清爽间接,你可以应用那么些工具领会CSS里最要害而周到的学识。它的CSS知识库分成了数个类型,包涵伪类,属性,函数,数据类型,概念,规则等。

CSS3浏览器兼容协助景况询问工具:Can I
Use

亚洲必赢官网 16

“Can I
Use”在此地您能找到所有web新特点在逐一品牌浏览器以及各品牌浏览器差距版本的包容性,当您通晓您针对的用户都在运用什么浏览器时,那写table将对您建设网站有很大扶持。打开caniuse.com,该网站首页将具有HTML5、CSS3等web新特性罗列出来,即使您想查看某个特性在分化浏览器种的同盟意况,点击一下就足以。比如,看一下@font-face
Web
fonts在依次浏览器中的包容性,点击CSS区域中的第一项,会看出一个报表,列出装有浏览器的版本,用差距颜色代表每个浏览器对@font
face Web
fonts的扶助,被标识为褐色的代表不扶助,浅灰色代表有些辅助。图中列出的浏览器还包罗一些部手机平板设备浏览器,例如Android系统浏览器。如此周全,设计网站时,可以根据网站针对的用户有接纳的使用CSS和Javascript的高档特性,提升用户体验。

反省你的代码是或不是切合CSS标准:W3C CSS Validation
Service

亚洲必赢官网 17

这一个工具是用来检查你的CSS语法是或不是科学,是或不是合乎W3C
CSS标准。大家通晓从最早的IE开首,各个浏览器都落到实处了有的自己的方言,那一个方言中在各样浏览器里互不相通。但大家付出网页时,必须最大限度的考虑种种浏览器的包容性,最好的法门是信守W3C的CSS标准规范。W3C
CSS Validation
Service就是用来校验你的css中的难点,它会唤起您那多少个语法,哪些属性,那个规则是有难点的。

CodePad

亚洲必赢官网 18

Codepad.org是一个很有意思的网站,它的主页很简单,左边是可以编译并施行的程序语言,右侧则是让您输入程序的输入框,输入框的上边是一个“Run
Code”的复选钮和一个“Submit”的交由按钮。

其操作起来也卓殊简单,先选中您要编译并运行的程序语言,然后在输入框中粘贴或输入程序的原代码,然后,点击提交,你就可以看么你程序编译出错的提醒,或是执行的结果。

或是,你会觉得很无聊天,但自我认为那在一些时候会充足有用,越发是你找不到编译器而又想证多美滋(Dumex)(Friso)段代码的时候,那种时候如故相比多的。尤其是大家很难有一台可以运作具有语言的微处理器,倘使有的话,那一定是你协调的私房电脑,当您不接纳你协调的电脑时,你就会火速了。而且,我以为那项服务非凡地有意思,因为,那样一来,你居然足以在您的无绳电话机上写任何语言的程序了。

近来这一个网站襄助上边那样语言——C,C++,D,Haskell,Lua,OCaml,PHP,Perl,Plain
Text,Python,Ruby,Scheme,Tcl。

CSS动画生成工具:Gradient
Animator

亚洲必赢官网 19

那是一款利用CSS Gradient和CSS
Animation技术完结的动态背景生成工具。工具极度易用,轻松地方击几下鼠标,一个现代感十足的渐变动态背景代码就生成了。它可以让CSS渐变背景平滑地运动,大家可以设置移动的角度,移动的进度,渐变的角度。扶助所有现代浏览器以及
ie 10+。格外适合做网页开屏背景。

Web颜色工具:CSS
Colours

亚洲必赢官网 20

故名思议,那么些工具是用来便宜Web设计者查找颜色的,它提供了各样颜色的视觉效果,对于的水彩的英文名称,RGB值,16进制值,使用起来卓殊的有益。

网站地图xml地图