ttp://www.ziticq.com/sc/3524.html

http://www.qiuziti.com/

http://www.fontke.com/

http://www.zitikoudai.com/

http://www.makefont.com/

http://www.youziku.com/

http://sicangziti.com/

http://www.pc6.com/pc/ziti/

想要PS，AI，C4D，AE等教程請(qǐng)私聊小編

5 個(gè)有趣的 JS 和 CSS 庫

時(shí)光飛逝， 每月 Tutorialzine 都會(huì)為大家分享一些有趣的前端庫。那么在本月，又準(zhǔn)備了哪些優(yōu)秀的 Web 開發(fā)資源呢？前端兒，一起來瞧瞧吧！

1. Buefy

這是一個(gè)基于 Bulma 的 Vue.js 輕量級(jí) UI 組件，而 Bulma 則是基于 Flexbox 的 CSS 庫。Buefy 具備典型的 Web 應(yīng)用程序所必備的所有組件，例如 modals、toast 以及 notifications 等動(dòng)態(tài)元素，使開發(fā)人員可以快速添加任何用戶界面到其現(xiàn)有的 Vue.js 項(xiàng)目。

項(xiàng)目地址：https://buefy.github.io/#/

2. HR.js

HR.js 是一個(gè)用于高亮并替換 DOM 中文本的零依賴庫。它的 API 簡(jiǎn)直不能再簡(jiǎn)單了。你只需要使用 CSS 選擇器來定位保存所需文本的 HTML 父元素，選擇好要高亮的單詞，并設(shè)置背景顏色，就可以搞定了。

項(xiàng)目地址：https://mburakerman.github.io/hrjs/

3. React VR

React VR 是用于創(chuàng)建在 Web 瀏覽器中運(yùn)行 VR 應(yīng)用程序的框架。它將現(xiàn)代的 API（如 WebGL 和 WebVR）與 React 的聲明式渲染進(jìn)行搭配，從而產(chǎn)生可以通過各種設(shè)備使用的體驗(yàn)。

項(xiàng)目地址：https://facebook.github.io/react-vr/

4. Tippy.js

這是一個(gè)用于動(dòng)畫工具提示的純 JavaScript 庫。Tippy.js 提供了豐富的懸停效果以及超過 20 個(gè)自定義選項(xiàng)。它也是超輕量級(jí)的庫，并具備相當(dāng)不錯(cuò)的瀏覽器兼容性。但如果出現(xiàn)個(gè)別瀏覽器不支持的情況，它會(huì)自動(dòng)退回至常規(guī)的 title 屬性。

項(xiàng)目地址：https://atomiks.github.io/tippyjs/

5. Barba.js

Barba.js 是一個(gè)無依賴的 JavaScript 庫，可用于在單頁應(yīng)用程序的視圖間創(chuàng)建平滑的過渡效果。該庫的邏輯是圍繞 PJAX（推送狀態(tài) AJAX）來設(shè)計(jì)的，繞過正常有效的 URL，并通過 XMLHttpRequest 來加載新頁面。Barba 還能確保通過 Push狀態(tài)的 API ，在應(yīng)用程序的 URL 中可以正確的反映出狀態(tài)的變化。

項(xiàng)目地址：http://barbajs.org/

6. UIkit

UIkit 是一個(gè)優(yōu)秀的輕量級(jí)前端框架，它包含了相應(yīng)的 SVG 圖標(biāo)字體以及豐富的組件。無論是外觀，還是框架，UIkit 的設(shè)計(jì)都十分的出彩。它不光具備統(tǒng)一的樣式，還有易于記憶的 API，許多自定義選項(xiàng)以及有用的修飾器類，并且它的用文檔編寫的也相當(dāng)?shù)某霰姟?/p>

項(xiàng)目地址：https://github.com/uikit/uikit

7. Haul

Haul 是一個(gè)用于開發(fā) React Native 應(yīng)用程序的命令行工具。它可以直接替代 React Native packager，提供比 Webpack 更好的支持，并能夠改進(jìn)錯(cuò)誤消息，大大減少編譯時(shí)間。Haul 也擁有出色的使用文檔，并且完全開源、可定制。

項(xiàng)目地址：https://github.com/callstack-io/haul

8. AcrossTabs

AcrossTabs 是一個(gè)用于跨瀏覽器 Tabs 間進(jìn)行通信的 JavaScript 庫，你可以使用它在不同的瀏覽器 Tabs 上打開或關(guān)閉網(wǎng)頁。由于父 Tab 可以訪問子 Tab 上有用的信息（例如 UID），所以它可以判斷子 Tab 是否依舊打開，或者已關(guān)閉。

項(xiàng)目地址：https://github.com/wingify/across-tabs

9. Stylelint

Stylelint 是一款現(xiàn)代的 CSS linter 工具，它可以幫助團(tuán)隊(duì)在樣式表中執(zhí)行固定的 CSS 標(biāo)準(zhǔn)。該庫非常強(qiáng)大，它不僅可以讓你禁止或設(shè)置白名單屬性，還能夠捕獲錯(cuò)誤以及識(shí)別 SCSS 語法。同時(shí)，Stylelint 也可完全定制，幫助你添加或去除一些規(guī)則選項(xiàng)。

項(xiàng)目地址：https://stylelint.io/

10. Iconate

這是一個(gè)非常棒的 Vanilla JavaScript 庫。通過點(diǎn)擊圖標(biāo)，它能夠幫你完成帶有豐富平滑動(dòng)畫效果的圖標(biāo)轉(zhuǎn)換。你也可以將 Iconate 與所有的 CSS 圖標(biāo)字體一同使用。即你只需在 HTML 中添加一個(gè)圖標(biāo)，并使用簡(jiǎn)單的 JavaScript API 來選擇要將其轉(zhuǎn)換為哪一種圖標(biāo)，同時(shí)選擇相應(yīng)的動(dòng)畫效果就搞定了。

項(xiàng)目地址：https://bitshadow.github.io/iconate/

11. React-Datasheet

React-Datasheet 是一個(gè)用于向應(yīng)用程序添加類似 Excel 數(shù)據(jù)表的 React 組件。你可以對(duì)單元格進(jìn)行自由編輯、分組選擇、復(fù)制、粘貼、刪除等操作。另外，在 GitHub 上還有三個(gè)有用的示例，供你參考。即基本的表，帶有公式的表以及嵌套組件的表。

項(xiàng)目地址：https://github.com/nadbm/react-datasheet

12. Pure CSS

這是一個(gè)輕量級(jí)、響應(yīng)式的純 CSS 模塊框架。整個(gè)庫在 gzip 壓縮后，僅有 3.8 kb 的大小，如果你僅使用其中的一部分模塊，那 CSS 真是小到?jīng)]有朋友了！同時(shí)，它模塊包括了基本樣式集、響應(yīng)格網(wǎng)、表單組件、按鈕、表格和菜單，適用于任何的 Web 項(xiàng)目。

項(xiàng)目地址：https://purecss.io/

13. Simple Icons

Simple Icons 是一個(gè)涉及知名品牌（涵蓋社交網(wǎng)絡(luò)、應(yīng)用程序、服務(wù)等）的免費(fèi)圖標(biāo)合集。這些圖標(biāo)都是用 SVG 制作的，所以它們可以被縮放到任何尺寸，不用擔(dān)心圖片的像素。而大多數(shù)圖標(biāo)的大小都低于 500 字節(jié)。

項(xiàng)目地址：https://simpleicons.org/

14. Chroma.js

Chroma.js 是一個(gè)用于處理顏色的微型 JavaScript 庫。它提供了豐富的 API，以及超過 50 種用于操縱顏色的功能，讓你可以使用色彩模式切換，改變亮度和飽和度，創(chuàng)建漸變比例等許多實(shí)用的色階處理方法。

項(xiàng)目地址：https://github.com/gka/chroma.js

15. Weex

Weex 是一個(gè)構(gòu)建跨平臺(tái)的移動(dòng)應(yīng)用程序框架，類似于 React Native，但適用于 Vue.js. 你可以利用 HTML、CSS 和 JavaScript 編寫應(yīng)用程序，并將其以 Android 和 iOS 客戶端的形式呈現(xiàn)。該框架有許多內(nèi)置的組件、API 和其他有用的功能。

項(xiàng)目地址：https://weex.apache.org/

感謝你的閱讀。若你有所收獲，歡迎點(diǎn)贊與分享。

注：

1. 本文版權(quán)歸原作者所有，僅用于學(xué)習(xí)與交流；

2. 如需轉(zhuǎn)載譯文，煩請(qǐng)按下方注明出處信息，謝謝！

英文原文：15 Interesting JavaScript and CSS Libraries for May 2017

作者：Danny Markov

譯者：IT程序獅

譯文地址：http://www.jianshu.com/p/99b66b214bbd

更多文章推薦

1. 10個(gè)基于 JavaScript 的機(jī)器學(xué)習(xí)實(shí)例

2. 2017年4月：前端與設(shè)計(jì)資源集

3. 2017年4月：15個(gè)有趣的JS和CSS庫

4. 2017年3月：15個(gè)有趣的JS和CSS庫

tyle 屬性用于改變 HTML 元素的樣式。

<html>

<body style="background-color:PowderBlue;">

<h1>Look! Styles and colors</h1>

<p style="font-family:verdana;color:red">

This text is in Verdana and red</p>

<p style="font-family:times;color:green">

This text is in Times and green</p>

<p style="font-size:30px">This text is 30 pixels high</p>

</body>

</html>

HTML 的 style 屬性

style 屬性的作用：

提供了一種改變所有 HTML 元素的樣式的通用方法。

樣式是 HTML 4 引入的，它是一種新的首選的改變 HTML 元素樣式的方式。通過 HTML 樣式，能夠通過使用 style 屬性直接將樣式添加到 HTML 元素，或者間接地在獨(dú)立的樣式表中（CSS 文件）進(jìn)行定義。

不贊成使用的標(biāo)簽和屬性

在 HTML 4 中，有若干的標(biāo)簽和屬性是被廢棄的。被廢棄（Deprecated）的意思是在未來版本的 HTML 和 XHTML 中將不支持這些標(biāo)簽和屬性。

這里傳達(dá)的信息很明確：請(qǐng)避免使用這些被廢棄的標(biāo)簽和屬性！

應(yīng)該避免使用下面這些標(biāo)簽和屬性：

HTML 樣式實(shí)例 - 背景顏色

background-color 屬性為元素定義了背景顏色：

<html>
<body style="background-color:yellow">
<h2 style="background-color:red">This is a heading</h2>
<p style="background-color:green">This is a paragraph.</p>
</body>
</html>

HTML 樣式實(shí)例 - 字體、顏色和尺寸

font-family、color 以及 font-size 屬性分別定義元素中文本的字體系列、顏色和字體尺寸：

<html>
<body>
<h1 style="font-family:verdana">A heading</h1>
<p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>
</body>
</html>

HTML 樣式實(shí)例 - 文本對(duì)齊

text-align 屬性規(guī)定了元素中文本的水平對(duì)齊方式：