CSS

學習如何在CSS中使用顏色 默認情況下，網頁瀏覽器在使用顏色方面的渲染效果相當低劣。 我們有白色背景、黑色文字和藍色連結。這只是這樣而已。 幸運的是，CSS給了我們在設計中添加顏色的能力。 我們有以下屬性： color background-color border-color 所有這些屬性都接受一個顏色值，可以以不同的形式呈現。 命名顏色 首先，我們有CSS關鍵字定義的顏色。CSS一開始只有16個，但如今有大量的顏色名稱： [中文翻譯略] 除了“tranparent”和“currentColor”以外，它們都是CSS顏色模組4的一部分，它們是大小寫不敏感的。 維基百科有一個很好的表格可以根據名稱選擇完美的顏色。 命名顏色並不是唯一的選擇。 RGB和RGBa 您可以使用“rgb()”函數根據RGB表示法計算顏色，根據其紅綠藍部分設置顏色。範圍從0到255： p { color: rgb(255,255,255); /* white */ background-color: rgb(0,0,0); /* black */ } “rgba()”讓您可以添加alpha通道以輸入透明部分。這可以是0到1的數字： p { background-color: rgba(0,0,0,0.5); } 十六進位表示法 另一個選擇是使用十六進位表示法表示顏色的RGB部分，它由3個塊組成。 黑色，即“rgb(0,0,0)”，可以表示為“#000000”或“#000”（如果兩個數字相等，我們可以將2個數字簡化為1個）。 白色，即“rgb(255,255,255)”，可以表示為“#ffffff”或“#fff”。 十六進位表示法允許我們使用2位數來表示0到255之間的數字，因為它們可以從0到15（f）。 通過在末尾添加1或2個更多的數字，我們可以添加alpha通道，例如“#00000033”。並非所有瀏覽器都支持簡短的表示法，因此請使用全部6個數字來表示RGB部分。 HSL和HSLa 這是CSS的一個相對較新的添加。 HSL = 色相 飽和度 明度。 在這種表示法中，黑色為“hsl(0, 0%, 0%)”，白色為“hsl(0, 0%, 100%)”。 如果您對HSL比RGB更熟悉，由於您的過去知識，您肯定可以使用它。 您還可以使用“hsla()”將alpha通道添加到混合中，再次是0到1之間的數字：hsl(0, 0%, 0%, 0.5)

如何在CSS中使用display屬性 對象的display屬性決定了瀏覽器如何渲染它。 這是一個非常重要的屬性，可能是你可以使用的值最多的一個。 這些值包括： block inline none contents flow flow-root table（以及所有的table-*） flex grid list-item inline-block inline-table inline-flex inline-grid inline-list-item 還有其他一些你可能不會用到的，比如ruby。 選擇其中任何一個將會顯著改變瀏覽器對元素及其子元素的行為。 在這篇文章中，我將分析一些在其他地方沒有涵蓋到的最重要的值： block inline inline-block none 我在其他文章中對其他的值進行了介紹： table 在Tables guide中 flex 在Flexbox guide中 grid 在CSS Grid guide中 inline inline是CSS中每個元素的默認顯示值。 除了一些元素（如div、p和section）是由用戶代理（瀏覽器）設置為block外，所有的HTML標籤都是默認以行內形式顯示的。 行內元素不會應用任何邊距或填充。 高度和寬度也是如此。 你可以添加它們，但網頁上的外觀不會改變 - 它們是由瀏覽器自動計算和應用的。 inline-block 與inline類似，但是inline-block會根據你指定的寬度和高度進行應用。 block 如前所述，通常元素是以行內形式顯示的，但有一些例外，包括： div p section ul 這些元素由瀏覽器設置為block。 使用display: block，元素以垂直方式一個接一個地堆疊，每個元素佔據整個頁面的100%。 如果你設置了width和height屬性的值以及margin和padding，則這些值都將被尊重。 none 使用display: none使元素消失。它仍然存在於HTML中，但在瀏覽器中不可見。

Flexbox，也被稱為靈活盒子模型，是兩種現代佈局系統之一，與 CSS Grid 一起使用。 介紹 瀏覽器支援 啟用 Flexbox 容器屬性 對齊行或列 垂直和水平對齊 更改水平對齊 更改垂直對齊 關於 baseline 的注意事項 包裝 適用於每個單個項目的屬性 使用順序在其他項目之前/之後移動項目 使用 align-self 進行垂直對齊 根據需要增加或減少項目的大小 flex-grow flex-shrink flex-basis flex 介紹 Flexbox，也被稱為靈活盒子模型，是兩種現代佈局系統之一，與 CSS Grid 一起使用。 與 CSS Grid（雙維）相比，flexbox 是一種單維度佈局模型。它根據行或列對佈局進行控制，但不能同時進行控制。 Flexbox 的主要目標是允許項目根據您設置的某些規則填充其容器提供的整個空間。 除非您需要支援像 IE8 和 IE9 這樣的舊瀏覽器，否則 Flexbox 是一個讓您忘記使用以下工具的工具: 表格佈局 漂浮 clearfix hacks display: table hacks 讓我們深入研究 flexbox，並在非常短的時間內成為它的大師吧。 瀏覽器支援 截至撰寫本文（2018 年 2 月），它獲得了 97.66% 的用戶支援，所有最重要的瀏覽器都已實施它多年，因此即使是舊瀏覽器（包括 IE10+）也得到了支援: 雖然我們必須等待幾年讓用戶趕上 CSS Grid，但 Flexbox 是一個較舊的技術，現在可以使用。 啟用 Flexbox 通過設置...

警告：此文章已經過時，可能無法反應目前的技術狀態。 自動焦點 當頁面加載時，<input autofocus="autofocus" />會將焦點放在指定的HTML元素上。 下載文件 <a href="file.pdf" download="pdf-file">下載</a>將下載指定的文件，並提供文件名。 隱藏元素 儘管將表現放在HTML中並不理想，但<div hidden="hidden"></div>有時會派上用場。 關閉（或打開）拼寫檢查 操作系統設定了拼寫檢查功能，它有時可能會妨礙使用者輸入 - <input type="text" spellcheck="true|false">有助於解決此問題。 自動建議文字輸入控件 <input list="mylist" name="mylist" > <datalist id="mylist"> <option value="CSS"> <option value="HTML"> <option value="PHP"> <option value="Jquery"> <option value="Wordpress"> </datalist>

介紹一款幫助您編寫現代 CSS 的優秀工具：PostCSS。PostCSS 是一個非常流行的工具，允許開發者編寫 CSS 預處理器或後處理器。 簡介 為何如此受歡迎 安裝 PostCSS CLI 最受歡迎的 PostCSS 插件 Autoprefixer cssnext CSS Modules csslint cssnano 其他有用的插件 和 Sass 有何不同？ 簡介 PostCSS 是一個工具，允許開發者編寫 CSS 預處理器或後處理器，稱為插件。有許多插件提供了許多功能，有時候 “PostCSS” 這個詞代表的是工具本身，以及插件生態系統。 PostCSS 插件可以通過命令行運行，但通常是在構建時由任務運行程序調用的。 插件化的架構為您所需的所有與 CSS 相關的操作提供了一個共同的基礎。 注意：儘管叫做 PostCSS，它不僅僅是 CSS 後處理器，但它可以用於構建它們，以及其他東西 為何如此受歡迎 PostCSS 提供了幾個功能，可以深度改善您的 CSS，並與您選擇的任何構建工具良好集成。 安裝 PostCSS CLI 使用 Yarn： yarn global add postcss-cli 或者使用 npm： npm install -g postcss-cli 完成之後，postcss 命令將在您的命令行中可用。 例如，此命令將在 css/ 文件夾中包含的 CSS 文件上運行 autoprefixer 插件，並將結果保存在 main.css 文件中：...

學習如何使用 Vue 創建單一檔案來封裝一個組件的所有相關內容，集中管理外觀和行為。 一個 Vue 組件可以在一個 JavaScript 檔案（.js）中這樣聲明： Vue.component('component-name', { /* 選項 */ }) 或者： new Vue({ /* 選項 */ }) 也可以在一個 .vue 檔案中指定。 這個 .vue 檔案非常酷，因為它允許你在一個檔案中定義以下內容： JavaScript 邏輯 HTML 代碼模板 CSS 樣式 所有這些內容都包含在一個檔案中，因此它得名為單檔元件。 以下是一個例子： <template> <p>{{ hello }}</p> </template> <script> export default { data() { return { hello: 'Hello World!' } } } </script> <style scoped> p { color: blue; } </style> 所有這些都是可能的，感謝 webpack 的使用。Vue CLI 讓這一切變得非常容易並且支援開箱即用。在沒有 webpack 設置的情況下，無法使用 ....

了解 Electron，這是由 GitHub 開發的跨平台框架，用於建立創新且非常受歡迎的跨平台應用程式。 Electron 是一個使用 JS、HTML 和 CSS 來建立跨平台桌面應用程式的免費開源工具，由 GitHub 開發。 許多非常受歡迎且成功的應用程式都使用了 Electron，包括 VS Code、Slack、Discord 等等。 Electron 是一個宏大的專案，它革命性地改變了原生桌面應用程式的開發方式，使之成為可能以 JavaScript 為基礎的過程。 需要注意的是：在 Electron 出現之前，已經有其他工具可以用 JavaScript 來開發桌面應用程式，但 Electron 讓這種開發方式更加普及。 尤其是 Electron 可以用於建立跨平台的桌面應用程式。在此之前，沒有任何工具可以讓你在不同平台上運行相同的應用程式。 直到 2014 年，Electron 首次發布。 快速了解 Electron 的內部結構 Electron 基本上是將 Chromium 渲染庫和 Node.js 打包在一起（Chromium 是由 Google 開源的專案，用於構建 Chrome 瀏覽器）。 你既可以使用由 Chromium 提供的畫布，運行 V8 JavaScript 引擎，也可以使用任何 Node.js 套件並運行自己的 Node.js 代碼。 你可以把它想象成桌面版的 Node.js。它本身不提供任何 GUI 元素，而是讓你使用 HTML、CSS 和 JavaScript 來創建使用者界面。 Electron 旨在提供核心功能，同時保持速度快、體積小、精簡。這些核心功能可以滿足所有應用程式的需求。 你可以使用 Electron 創建哪些類型的應用程式 你可以創建各種不同類型的應用程式，包括：...

在本文中，我們將探討多種使用 CSS 去設計 Vue.js 元件的方式。 注意: 本教程使用 Vue.js 的單文件元件 最簡單的方式是在 Vue.js 元件中使用 style 標籤，就像在 HTML 中一樣： <template> <p style="text-decoration: underline">Hi!</p> </template> <script> export default { data() { return { decoration: 'underline' } } } </script> 這是最靜態的方式。如果你希望 underline 在元件的資料中被定義，你可以這樣做： <template> <p :style="{'text-decoration': decoration}">Hi!</p> </template> <script> export default { data() { return { decoration: 'underline' } } } </script> :style 是 v-bind:style 的縮寫。在本教程中，我將使用這個縮寫。 注意到我們必須將 text-decoration 用引號包起來。這是因為其中有連字符，而連字符不是有效的 JavaScript 識別符號。 你可以避免使用引號，使用 Vue.js 提供的特殊 camelCase 語法，並將其改寫為 textDecoration：...

這是一份有關如何使用CSS處理表格的簡要指南。 在過去，我們通常過度使用表格來創建華麗的頁面佈局，因為它們是唯一的選擇之一。 如今，隨著Grid和Flexbox的出現，我們可以讓表格回到它原本的作用：樣式設定。 讓我們從HTML開始。這是一個基本的表格： <table> <thead> <tr> <th scope="col">姓名</th> <th scope="col">年齡</th> </tr> </thead> <tbody> <tr> <th scope="row">Flavio</th> <td>36</td> </tr> <tr> <th scope="row">Roger</th> <td>7</td> </tr> </tbody> </table> 默認情況下，這個表格看起來並不太吸引人。瀏覽器只提供了一些標準的樣式： 當然，我們可以使用CSS來調整表格的所有元素。 讓我們從邊框開始。一個漂亮的邊框可以讓表格大有不同。 我們可以對table元素以及th和td等內部元素應用邊框樣式： table, th, td { border: 1px solid #333; } 如果加上一些外邊距，我們會得到一個漂亮的效果： 表格中常見的一個特點是可以為一行添加顏色，並為另一行添加不同的顏色。這可以使用nth-child(odd)或nth-child(even)選擇器實現： tbody tr:nth-child(odd) { background-color: #af47ff; } 這將給我們帶來以下效果： 如果在表格元素中添加border-collapse: collapse;，則所有邊框將合併為一個：

一種在移動設備上以美觀方式顯示表格的實用方法 幾天前，我通過Google 搜索控制台收到了一個警告。它在我有一個大表格的頁面上檢測到了移動端可用性問題。 這是給我帶來問題的表格： 在移動設備上，它的渲染效果相當差： 這不是一種良好的用戶體驗，也是Google 搜索控制台上的問題。如果有什麼我不希望看到的就是這樣一個錯誤/警告。尤其還是我能解決的問題。 我使用的靜態網站生成器Hugo允許我將特定於單個頁面的CSS代碼注入，只需將<style>標籤添加到Markdown文件中即可。非常方便。 因此，我開始尋找一個很好的方法來使我的表格具有響應性。我找到了這篇非常好的CSS Tricks文章：Responsive Data Tables。它來自2011年，但仍然適用！ 這個技巧是這樣的：我們希望將表格顯示為塊元素，而不是傳統CSS意義上的表格。我們通過將所有表格標題移到視圖之外，然後在表格中插入一個新的塊元素，每行都有自己的標題，就像這樣： 以下是實現上述設計的代碼： @media only screen and (max-width: 1500px) { table, thead, tbody, th, td, tr { display: block; } thead tr { position: absolute; top: -9999px; left: -9999px; } tr { border: 1px solid #ccc; } td { border: none; border-bottom: 1px solid #eee; position: relative; padding-left: 200px; margin-left: 150px; } td:before { position: absolute; top: 12px; left: 6px; width: 200px; padding-right: 40px; white-space: nowrap; margin-left: -150px; } td:nth-of-type(1):before { content: "Option"; } td:nth-of-type(2):before { content: "Description"; } td:nth-of-type(3):before { content: "Type"; } td:nth-of-type(4):before { content: "Default";} } 你希望自定義的重要部分是最後4行 - 你需要輸入每個“列”的標題，如果有更多列，則需要添加更多行。如果列較少，則可以將它們移除。...