css簡單快速入門 · python-網頁到放棄

>[success] # 簡單的css 快速上手 >[danger] ##### 三種css樣式使用 ~~~ 1.內聯樣式 <a stytle="backgoroud:red"></a> 2.<head> 標簽內的 <style> 標簽 3.<link> 標簽中的外聯 ~~~ >[danger] ##### 三種主要選擇器 ~~~ 1.元素選擇器 2.class類選擇器 3.id 選擇器 ~~~ >[danger] ##### 三種樣式優先級(從高到低) ~~~ 1.!important 2.內聯樣式 3.按順序執行 ~~~ >[danger] ##### 選擇器樣式優先級 ~~~ 1.!important 2.內聯樣式 3.id 選擇器 4.class 選擇器 5.元素選擇器 ~~~ >[danger] ##### display -- 決定標簽的呈現狀態 ~~~ 1.none 隱藏 2.block 塊級顯示占一行 3.inline 行內 4.inline-block 行內塊 ~~~ >[danger] ##### 盒子模型組成 ~~~ 1.content 內容 2.padding 內邊距 3.border 邊框 4.margin 外邊距 ~~~ >[danger] ##### position -- 定位元素 ~~~ 1.static 默認定位 2.relative 相對定位, 相對于自己本來應該在的位置 3.absolute 絕對定位, 行為有點奇怪 4.fixed 固定定位, 相對位置是整個窗口 ~~~ >[danger] ##### top left bottom right 定位 ~~~ 1.非 static 元素可以用 top left bottom right 屬性來設置坐標 2.非 static 元素可以用 z-index 屬性來設置顯示層次 ~~~ >[danger] ##### overflow屬性 ~~~ 1.visible 默認 2.auto 需要的時候加滾動條 3.hidden 隱藏多余元素 4.scroll 就算用不著也會強制加滾動條 ~~~ >[danger] ##### 屬性縮寫 ~~~ margin: top right bottom left margin: (top/bottom) (right/left) margin: top (right/left) bottom background-color: #233; background-image: url(bg.png); background-repeat: no-repeat; background-attachment: fixed; /* 背景圖片隨滾動軸的移動方式 */ 簡寫如下, 順序不要緊 border: 10px blue solid; ~~~ >[danger] ##### 居中設置 ~~~ block 元素居中, 兩步走 1, 設置自己的寬度 2, 設置自己的 margin: 0 auto; inline inline-block 元素居中設置父元素的 text-align 屬性 text-align: center; ~~~ >[danger] ##### 清除浮動 ~~~ 很重要的 float 屬性用 clear float 的方法撐起父元素假設要被撐起來的父元素是 .gua-float .gua-float::after { content: ""; display: block; clear: both; } ~~~ >[danger] ##### 偽元素 ~~~ 創建一個 css 生成的元素 ::after ::before ~~~