week3.md - Paouser/wp109b GitHub Wiki
- CSS
- 寫法 body{ background-color: } ; p{ color: ; text-align: ; } ; h1{ font-family: ; font-size: ; } ;
- 被標記的內容樣式會統一
#代號 { 格式 }id="代號">文字
這時"文字"的格式會按照 #代號 - 重複使用 p.代號 { 格式 }
文字
文字
一次性 p#代號 { 格式 }文字
- 格式重複使用 p class="代號1 代號2"
- 註解 /* 註解內容 */ HTML註解
- 顏色寫法與HTML相同
- 可以同時寫顏色與邊框
- 透明度 div.代號 { opacity: 透明度(數字); }
- 自定義透明度
- #代號 .blacking { 格式 }
文字
- 背景
- 可以用圖片 background-image : url("圖檔");
- 可以重複(指定座標 X軸或Y軸) background-repeat: repeat-x;
- 不重複 background-repeat: no-repeat;
- 邊界
- p.代號 { border-style: 格式 ;}
- 顏色 border-color: (顏色);
- 指定邊線 border-( top ; right ; bottom ; left ;)-style: ( 格式 );
- p { border : (大小) px (格式) (顏色); }
-
* /* 參考資料 : https://www.w3schools.com/css/css_boxmodel.asp
- 高度 height : (數字) px;
- 文字
- 線條 text-decoration:
- 文字上方 text-decoration: overline;
- 文字中 text-decoration: line-through;
- 文字下 text-decoration: underline;
- 大小寫 text-transform:
- 指定大寫 text-transform: uppercase;
- 指定小寫 text-transform: lowercase;
- 開頭大寫 text-transform: capitalize;
- 空格 text-indent: (數字)px;
- 文字間距 letter-spacing: (數字)px;
- 陰影 text-shadow: (座標X軸)px (座標Y軸)px (模糊度)px (顏色);
- 字體 font-style:
- 無 font-style: normal;
- 斜體 font-style: italic;
- 例 :p.b{ font: italic (斜體) small-caps (開頭更大轉換小寫) bold (粗體) (字體大小)px/(行距)px; }
- 文字大小font-size:
- 連結
- 未點擊 a:link { color:(顏色) }
- 點擊後 a:visited { color:(顏色) }
- 鼠標在連結上 a:hover { color:(顏色) }
- 鼠標按住 a:active { color:(顏色) }
- 也可以設定背景顏色background-color:
- 標記 list-style-type:
- 空心圓 ul.a { list-style-type : circle; }
- 方形 ui.b { list-style-type : square; }
- 羅馬數字 ol.c { list-style-type : upper-roman; } (連續性 用ol)
- 小寫英文 ol.d {list-style-type : lower-alpha; } (連續性 用ol)
- 代碼標記 div p { 格式 }
*在到中間找尋
- 例:div p { 格式 }
* /* 參考資料 : https://www.w3schools.com/css/css_boxmodel.asp