使目標元素透明度改變
opacity 可設定範圍: 0 ~ 1.0 // 0 為完全透明。
<h1>標題測試</h1>
h1 {
display: inline-block;
background: red;
}
- border-collapse: 假設我有個表格長這樣: <table> <tr> <th>標題一</th> <th>標題二</th> <th>標題三</th> </tr>
Wilson Chen changed 2 years agoView mode - 在 CSS 製作時，可以被編輯的項目樣式: 以此 HTML ul 做範例: <ul> <li>2008:團團圓圓到台灣</li> <li>2013:圓仔出生</li> <li>還沒有其他熊貓</li> </ul>Wilson Chen changed 2 years agoView mode
- 什麼是 default value 指 HTML Tag 本身具備的 CSS 效果: <h1>，本身的文字大小就比較大，font-size 就非常明顯。 <div>，本身具備 - display:block;等。 透過 box-model 瀏覽並且觀察 Tag 本身的 default stylingWilson Chen changed 2 years agoView mode
- position 的 normal flow: 一般來說，再不設定 position 時，HTML 元素會根據瀏覽器的畫面大小，由左至右邊，由上至下去排列所有的「元素」。 本節要講節 positon: absolute 範例中有三個 box，在黑色區域內 針對前面所提及的: 一般來說所有元素都會遵循物件自身的 display 規則來排列，例如 box 都是 display: block;Wilson Chen changed 2 years agoView mode
- 如何開始產生 position: relative ? 沿用 CSS 27. 章節最後的 code 針對想要控制的 box，下關鍵字: position: relative; // 例如我當下要控制 box2: 由左邊推擠至右邊: 100px .box2 { background: #ffebcd;Wilson Chen changed 2 years agoView mode
- CSS position 在預設的屬性值共有5個: 1. static 2. relative 3. absolute 4. Fixed 5. Sticky 在一般情況下，任何的 HTML 元素，再不做任何的 CSS 設定時 所存在的當下位置都會是 static。Wilson Chen changed 2 years agoView mode
- 要知道 inline-block，需要先知道哪些是 inline or block? 參考 W3C HTML Block and Inline Elements Here are the block-level elements in HTML: 這些都是 block tag: <address> <article>Wilson Chen changed 2 years agoView mode
- 嘗試在 anchor tag 設定長寬: 初始 code <a class="link" href="#"> 我是一個連結 </a> a.link { color: cornsilk;Wilson Chen changed 2 years agoView mode
- % 在設定 width height 時，會相對去看父層的長寬度。 假設我們有一個外框，它的長寬條件為: 500px <div class="container"> <div class="box"></div> </div> .container {Wilson Chen changed 2 years agoView mode
- 增加一個 a 標籤: // survey - 譯: 民意調查 // 設定資料絕對路徑: ./xxxx.html <a class="survey" href="./myForm.html">熊貓問卷調查</a> // cssWilson Chen changed 2 years agoView mode
- 基本的設定: <h1>this is h1.</h1> h1 { color: white; background-color: blue; width: 200px; height: 150px; }Wilson Chen changed 2 years agoView mode
- <h1>fubon gurdian</h1> border 方框的範例: h1 { background-color: brown; color: white; // 線框粗度 線框樣式 顏色，其 value 可以自由搭配不受順序影響。 border: 10px solid black;Wilson Chen changed 2 years agoView mode
- 設定的習慣: 單獨設定個別 padding: 以上圖為例，假設我作出以下設定，結果如下: button.example { padding-top: 1rem; padding-right: 2rem; padding-bottom: 1.5rem;Wilson Chen changed 2 years agoView mode
- 何謂 box model: 開啟網頁時，打開右鍵－檢查: 可以發現一個類似盒子的模型圖，而裡面有幾個非常重要的屬性 四個你一定要知道的屬性: content - 元素本身 padding - 留白:Wilson Chen changed 2 years agoView mode
- 認識 background 原理及應用: background-color: 有兩個 h1 隊名範例: <h1> fubon guardinas </h1>Wilson Chen changed 2 years agoView mode
- 通常文字內容，例如中文的話，每段新的內容都會習慣空2格的留白。 前面我們有學到 rem 這個屬性/值，我們可以預設我們的中文段落空 2rem 也就是每則段落都預設給它空了2格，可使文字內容更為美觀! p { font-weight: 400; text-indent: 2rem; } 若為 px，可先觀察該段落是文字預設大小為多少，即: px *2 = text-indent 的絕對數值。Wilson Chen changed 2 years agoView mode
- 設定網頁字體 可參考，font stack 網站 這裡有詳細分析目前各種字體在各裝置上的普遍程度， 選擇字體在開發上尤其重要。 因為開發者無法保證一些特殊字體在各使用者上均有這些特殊字體。 font-family 屬性，預設網頁文字字體群組 在 CSS 設定該屬性:Wilson Chen changed 2 years agoView mode
