###### tags : `資訊筆記` # 💻 HTML&CSS筆記 [toc] ## ![image alt](https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/1200px-HTML5_logo_and_wordmark.svg.png =70x70)HTML5 ### 段落 - **ol**: 以序列表示 type：1(數字)、A(大寫英文字母)、a(小寫英文字母)、l(大寫羅馬數字)、i(小寫羅馬數字) - **ul** 以bulleted方式標列 - **li**: 標示條列項目 ```html5= <!doctype html> <html> <head> <title>編號</title> </head> <body> <h3>編號與項目</h3> <ol><!--會以凸排顯示--> <li>以序列表示</li> </ol> <ul><!--會以凸排顯示--> <li>以bulleted方式標列</li> </ul> </body> </html> ``` - **dl**: 為表列項目， - **dt**: 為表列的標題，dd是標題的說明 - ### 超連結、圖片、音效與影片 - 絕對路徑 `＜img src = "網址">` - 相對路徑 `<img src = "檔案位置">` - 超連結 `<a href="連結網址">連結名稱</a>` ### 表格表單 - table是建立表格的主要元素 - 常用元素如下 | 元素 | 說明 | | -------- | -------- | | table | 加入表格 | | tr | 在表格中加入列 | | th | 在列中加入設定為表頭標題的儲存格 | | td | 在列中加入儲存格 | - 常用屬性如下 | 屬性 | 說明 | | ------ | ---------------------------- | | width | 利用像素(px)或百分比設定寬度 | | height | 利用像素(px)或百分比設定高度 | | cellpadding | 設定文字或圖片跟表格邊框的距離 | | cellspacing | 設定表格欄位間的距離 | | bgcolor | 設定表格背景顏色 | ## ![image alt](https://upload.wikimedia.org/wikipedia/commons/thumb/d/d5/CSS3_logo_and_wordmark.svg/1200px-CSS3_logo_and_wordmark.svg.png =50x) CSS3 *要找特定 class id 時能利用 ctrl+f 來尋找* *全域選擇+boder可以看清楚每個box的模樣* ### 顏色與文字設定 - **font-size**:文字大小 smaller、larger、em、rem、px、pt - **font-weight**:文字粗細 normal、bold、lighter、bolder - **font-style**:文字斜體 normal、italic(斜體)、oblique - **font-variant**:文字變體 normal、small-caps - **color**:文字顏色、background-color:背景顏色 - **text-transform**:文字大小寫轉換: uppercase(全大寫)、lowercase(全小寫)、capitalize(第一個字母大寫) - **text-decoration**: none、underline、overline(頂線)、line-trough(刪除線) ### 段落與表列設定 - **line-height**:行高 - **letter-spacing(字母)、word-spaceing(文字)**:文字間距 - **text-align**:文字對齊 left、right、center、justify(左右齊行) - **vertical-align**:垂直對齊 top, bottom, or middle - **text-indent**: 首行縮排 - **list-style-type**: 項目符號及編號 - **text-shadow**: `語法: 水平位移距離 垂直位移距離 模糊長度 顏色` ### 超連結 - **:link**:文字預設 - **:visited**:被點選後的樣式 - **:hover**:滑過文字後的樣式 - **:active**:選按文字未放開的樣式 - **:focus**:元素被聚焦的樣式 ### 背景及框線 - **background-color**:背景顏色 - **background-image**:背景圖片 - **background-repeat**:背景圖片重複顯示 no-repeat、repeat-x(在x軸重複顯示)、repeat-y(在y軸重複顯示)、repeat - **background-size**: cover - **opacity**:透明度 介於0.0(透明)~1.0(不透明)之間 - **linear-gradient**:線性漸層 `background: linear-gradient(方向, 漸層顏色, 漸層顏色2...) ` ### 盒子模型 ![](https://i.imgur.com/tJGt04c.png) - **border**(最外圍):外框 - **padding**:內側距離 - **marging**:外部邊界 - **box-sizing**:設定box-model大小 content-box：實際寬高＝所設定的數值＋border＋padding bord-box：實際寬高＝所設定的數值(已包含border和padding) #### 框線 - **border-style**:設定框線樣式 | 設定 | 說明 | | ------ | ----------- | | none | 沒有框線 | | hidden | 不顯示框線 | | dotted | 虛線 | | dashed | 破折號線 | | solid | 實線 | | double | 雙線 | - **border-width**: 框線寬度 `border-style:數值/百分比/thin/medium/thick` - **border-color**: 框線顏色 - **border-radius**: 圓角框線 - **box-shadow**: 區塊陰影 `box-shadow: 水平位移距離 垂直位移距離 模糊長度 延伸長度 顏色` - **inset**: 內部陰影 - **border-top-, border-left-, border-bottom-, border-right-** #### 版面定位 - **display**:區塊元素和行內元素狀態 inline(行內元素)、block(區塊元素)、none(不顯示) - **visibility**:顯示或隱藏元素 visible、hidden - **float**:浮動元素 left、right、none - **clear**:去除浮動元素 - **position**:元素位置(**重要**) | 設定 | 說明 | | --------- | ---------------------------------| | static | 預設方式，不顯示位置 | | relative | 以元素現在位置來指定位置 | | abosolute | 以元素的父層元素為基準起始點來設定 | | fixed | 以瀏覽器的左上角為基準點來指定位置 | #### flexbox:較靈活的box model ![](https://i.imgur.com/RB9vJKy.png) - **display** flex: 預設，布局方式與 block 幾乎類似 inline-flex: 和 inline-block 也是幾乎雷同 lex-direction - **flex-direction**: Flexbox 內容元素的「排列方向」 row：預設值，由左到右，從上到下 row-reverse：與 row 相反 column：從上到下，再由左到右 column-reverse：與 column 相反 - **justify-content**:內容元素與整個 Flexbox 的「水平對齊」位置 flex-start：預設值，對齊最左邊的 main start flex-end：對齊最左邊的 main end center：水平置中 space-between：平均分配內容元素，左右元素將會與 m-ain start 和 main end 貼齊 space-around：平均分配內容元素，間距也是平均分配 - **align-items**:決定了內容元素與整個 Flexbox 的「垂直對齊」位置 flex-start：對齊最上面的 cross start flex-end：對齊最下面的 cross end center：垂直置中 stretch：預設值，將內容元素全部撐開至 Flexbox 的高度 baseline：以所有內容元素的基線作為對齊標準 ### display 屬性 自由設定網頁元素的顯示類型 語法: ```css dispaly: 參數; ``` - **block** 區塊元素 - **inline** 行內元素