styling

學習CSS虛擬元素的基礎知識 虛擬元素用於樣式化元素的特定部分。 它們以兩個冒號::開頭。 有時你會在代碼中看到它們用單個冒號表示，但這只是一種為了向後兼容而支持的語法。應該使用兩個冒號來區分它們和虛擬類別。 ::before和::after可能是最常用的虛擬元素。它們用於在元素之前或之後添加內容，例如圖標。 以下是虛擬元素的列表： 虛擬元素 目標 ::after 在元素之後創建一個虛擬元素 ::before 在元素之前創建一個虛擬元素 ::first-letter 可用於樣式化一塊文本的首個字母 ::first-line 可用於樣式化一塊文本的首行 ::selection 標記用戶選中的文本 讓我們來做個例子。假設您想要設置段落的第一行字體大小稍大，這在印刷排版中很常見： p::first-line { font-size: 2rem; } 或者您想讓首個字母加粗： p::first-letter { font-weight: bolder; } ::after 和 ::before 則稍微有點不直觀。我記得在使用 CSS 添加圖標時使用過它們。 使用 content 屬性來在元素之後或之前插入任何形式的內容： p::before { content: url(/myimage.png); } .myElement::before { content: "嘿嘿！"; }

如何透過CSS處理邊框 邊框是在內邊距和外邊距之間的一層薄紗。透過編輯邊框，可以讓元素在螢幕上繪製其周邊。 你可以透過以下屬性來處理邊框： border-style border-color border-width 屬性border可以作為所有這些屬性的快捷方式使用。 border-radius用於創建圓角。 還可以使用圖像作為邊框，使用border-image及其特定的分開屬性來實現。 border-image-source border-image-slice border-image-width border-image-outset border-image-repeat 讓我們從border-style開始。 邊框樣式 border-style屬性允許您選擇邊框的樣式。您可以使用的選項有： dotted dashed solid double groove ridge inset outset none hidden 在此Codepen中查看實例：https://codepen.io/flaviocopes/pen/yraaxq 樣式的默認值是none，所以要使邊框完全顯示，您需要將其更改為其他樣式。大多數情況下，solid是個不錯的選擇。 您可以使用以下屬性為每個邊緣設置不同的樣式： border-top-style border-right-style border-bottom-style border-left-style 或者，您可以使用具有多個值的border-style來定義它們，使用常規的上-右-下-左順序： p { border-style: solid dotted solid dotted; } 邊框寬度 border-width用於設置邊框的寬度。 您可以使用預定義的值之一： thin medium（默認值） thick 或者，使用像素、em、rem或任何其他有效的長度值來表示值。 示例： p { border-width: 2px; } 您可以使用4個值來分別設置每個邊緣（上-右-下-左）的寬度： p { border-width: 2px 1px 2px 1px; } 或者，您可以使用特定的邊緣屬性border-top-width、border-right-width、border-bottom-width、border-left-width。 邊框顏色 border-color用於設置邊框的顏色。 如果您不設置顏色，邊框默認使用元素中文本的顏色。 您可以將任何有效的顏色值傳遞給border-color。...

在本文中，我們將探討多種使用 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;，則所有邊框將合併為一個：

如何使用SASS來設計React應用程式 當你使用create-react-app來建構React應用程式時，你有很多選擇來進行樣式設計。 當然，如果你不使用create-react-app，你有無數的選擇，但我們只討論create-react-app提供的選項。 你可以使用普通的class和CSS檔案、使用style屬性或CSS模組來進行樣式設計。 SASS/SCSS是非常流行的選項，許多開發人員喜愛使用它。 你可以在create-react-app 2版本中完全不需要任何配置就可以使用它。 你只需要一個.sass或.scss檔案，然後在組件中引入它： import './styles.scss' 你可以在https://codesandbox.io/s/18qq31rp3看到它正常運作的範例。

CSS 可以用來為列表添加多種樣式。 list-style-type 屬性用於設置列表所使用的預定義標記： li { list-style-type: square; } 這裡有很多可能的取值，你可以在這裡查看 https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type，其中包含了它們的外觀示例。其中一些最受歡迎的取值包括 disc、circle、square 和 none。 list-style-image 屬性用於在預定義標記不適用時，使用自定義圖片作為標記： li { list-style-image: url(list-image.png); } list-style-position 屬性允許將標記放置在列表內容的 outside（默認）或 inside ，在頁面的流動中而不是頁面外： li { list-style-position: inside; } list-style 這個縮寫屬性讓我們可以在同一行中指定所有這些屬性： li { list-style: url(list-image.png) inside; }

透過純粹的JavaScript，我們可以動態地為網頁上的元素應用樣式。 在網頁瀏覽器中，有哪些API可以達成這個目的呢？ 首先，其中最乾淨的方式之一就是為元素新增或移除類別，並使用CSS中的類別樣式。 const element = document.querySelector('#my-element') 您可以使用元素的classList屬性以及其add()和remove()方法： element.classList.add('myclass') element.classList.remove('myclass') 您也可以直接使用style屬性修改元素的每個CSS屬性，該屬性會引用元素的內嵌樣式。 例如，您可以這樣修改元素的顏色： element.style.color = '#fff' 您可以修改元素的邊框： element.style.border = '1px solid black' 您看到了color和border。您可以使用camelCase（駝峰式大小寫）來修改所有的CSS屬性，當CSS屬性名稱包含破折號時。 在這個 MDN 頁面中，您可以方便地找到一個翻譯表，其中列出了所有的CSS屬性。