整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
想要PS，AI，C4D，AE等教程請私聊小編
5 個有趣的 JS 和 CSS 庫
時光飛逝， 每月 Tutorialzine 都會為大家分享一些有趣的前端庫。那么在本月，又準備了哪些優秀的 Web 開發資源呢？前端兒，一起來瞧瞧吧！
這是一個基于 Bulma 的 Vue.js 輕量級 UI 組件，而 Bulma 則是基于 Flexbox 的 CSS 庫。Buefy 具備典型的 Web 應用程序所必備的所有組件，例如 modals、toast 以及 notifications 等動態元素，使開發人員可以快速添加任何用戶界面到其現有的 Vue.js 項目。
項目地址：https://buefy.github.io/#/
HR.js 是一個用于高亮并替換 DOM 中文本的零依賴庫。它的 API 簡直不能再簡單了。你只需要使用 CSS 選擇器來定位保存所需文本的 HTML 父元素，選擇好要高亮的單詞，并設置背景顏色，就可以搞定了。
項目地址：https://mburakerman.github.io/hrjs/
React VR 是用于創建在 Web 瀏覽器中運行 VR 應用程序的框架。它將現代的 API（如 WebGL 和 WebVR）與 React 的聲明式渲染進行搭配，從而產生可以通過各種設備使用的體驗。
項目地址：https://facebook.github.io/react-vr/
這是一個用于動畫工具提示的純 JavaScript 庫。Tippy.js 提供了豐富的懸停效果以及超過 20 個自定義選項。它也是超輕量級的庫，并具備相當不錯的瀏覽器兼容性。但如果出現個別瀏覽器不支持的情況，它會自動退回至常規的 title 屬性。
項目地址：https://atomiks.github.io/tippyjs/
Barba.js 是一個無依賴的 JavaScript 庫，可用于在單頁應用程序的視圖間創建平滑的過渡效果。該庫的邏輯是圍繞 PJAX（推送狀態 AJAX）來設計的，繞過正常有效的 URL，并通過 XMLHttpRequest 來加載新頁面。Barba 還能確保通過 Push狀態的 API ，在應用程序的 URL 中可以正確的反映出狀態的變化。
項目地址：http://barbajs.org/
UIkit 是一個優秀的輕量級前端框架，它包含了相應的 SVG 圖標字體以及豐富的組件。無論是外觀，還是框架，UIkit 的設計都十分的出彩。它不光具備統一的樣式，還有易于記憶的 API，許多自定義選項以及有用的修飾器類，并且它的用文檔編寫的也相當的出眾。
項目地址：https://github.com/uikit/uikit
Haul 是一個用于開發 React Native 應用程序的命令行工具。它可以直接替代 React Native packager，提供比 Webpack 更好的支持，并能夠改進錯誤消息，大大減少編譯時間。Haul 也擁有出色的使用文檔，并且完全開源、可定制。
項目地址：https://github.com/callstack-io/haul
AcrossTabs 是一個用于跨瀏覽器 Tabs 間進行通信的 JavaScript 庫，你可以使用它在不同的瀏覽器 Tabs 上打開或關閉網頁。由于父 Tab 可以訪問子 Tab 上有用的信息（例如 UID），所以它可以判斷子 Tab 是否依舊打開，或者已關閉。
項目地址：https://github.com/wingify/across-tabs
Stylelint 是一款現代的 CSS linter 工具，它可以幫助團隊在樣式表中執行固定的 CSS 標準。該庫非常強大，它不僅可以讓你禁止或設置白名單屬性，還能夠捕獲錯誤以及識別 SCSS 語法。同時，Stylelint 也可完全定制，幫助你添加或去除一些規則選項。
項目地址：https://stylelint.io/
這是一個非常棒的 Vanilla JavaScript 庫。通過點擊圖標，它能夠幫你完成帶有豐富平滑動畫效果的圖標轉換。你也可以將 Iconate 與所有的 CSS 圖標字體一同使用。即你只需在 HTML 中添加一個圖標，并使用簡單的 JavaScript API 來選擇要將其轉換為哪一種圖標，同時選擇相應的動畫效果就搞定了。
項目地址：https://bitshadow.github.io/iconate/
React-Datasheet 是一個用于向應用程序添加類似 Excel 數據表的 React 組件。你可以對單元格進行自由編輯、分組選擇、復制、粘貼、刪除等操作。另外，在 GitHub 上還有三個有用的示例，供你參考。即基本的表，帶有公式的表以及嵌套組件的表。
項目地址：https://github.com/nadbm/react-datasheet
這是一個輕量級、響應式的純 CSS 模塊框架。整個庫在 gzip 壓縮后，僅有 3.8 kb 的大小，如果你僅使用其中的一部分模塊，那 CSS 真是小到沒有朋友了！同時，它模塊包括了基本樣式集、響應格網、表單組件、按鈕、表格和菜單，適用于任何的 Web 項目。
項目地址：https://purecss.io/
Simple Icons 是一個涉及知名品牌（涵蓋社交網絡、應用程序、服務等）的免費圖標合集。這些圖標都是用 SVG 制作的，所以它們可以被縮放到任何尺寸，不用擔心圖片的像素。而大多數圖標的大小都低于 500 字節。
項目地址：https://simpleicons.org/
Chroma.js 是一個用于處理顏色的微型 JavaScript 庫。它提供了豐富的 API，以及超過 50 種用于操縱顏色的功能，讓你可以使用色彩模式切換，改變亮度和飽和度，創建漸變比例等許多實用的色階處理方法。
項目地址：https://github.com/gka/chroma.js
Weex 是一個構建跨平臺的移動應用程序框架，類似于 React Native，但適用于 Vue.js. 你可以利用 HTML、CSS 和 JavaScript 編寫應用程序，并將其以 Android 和 iOS 客戶端的形式呈現。該框架有許多內置的組件、API 和其他有用的功能。
項目地址：https://weex.apache.org/
感謝你的閱讀。若你有所收獲，歡迎點贊與分享。
注：
本文版權歸原作者所有，僅用于學習與交流；
如需轉載譯文，煩請按下方注明出處信息，謝謝！
英文原文：15 Interesting JavaScript and CSS Libraries for May 2017
作者：Danny Markov
譯者：IT程序獅
譯文地址：http://www.jianshu.com/p/99b66b214bbd
1. 10個基于 JavaScript 的機器學習實例
2. 2017年4月：前端與設計資源集
3. 2017年4月：15個有趣的JS和CSS庫
4. 2017年3月：15個有趣的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 元素，或者間接地在獨立的樣式表中（CSS 文件）進行定義。
不贊成使用的標簽和屬性
在 HTML 4 中，有若干的標簽和屬性是被廢棄的。被廢棄（Deprecated）的意思是在未來版本的 HTML 和 XHTML 中將不支持這些標簽和屬性。
這里傳達的信息很明確：請避免使用這些被廢棄的標簽和屬性！
應該避免使用下面這些標簽和屬性：
HTML 樣式實例 - 背景顏色
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 樣式實例 - 字體、顏色和尺寸
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 樣式實例 - 文本對齊
text-align 屬性規定了元素中文本的水平對齊方式：
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
