CSS第一章 - HackMD

--- tags: CSS,第一章 --- # CSS第一章 ## 骨架 ``` 引入方式一內嵌式 <html> <head> <title></title> <style> 在這邊寫CSS程式碼 </style> </head> <body> 內容 </body> </html> ``` ``` 引入方式二外聯式 <html> <head> <title></title> <link rel="stylesheet" href="mycss.css" /> </head> <body> 內容 </body> </html> ``` link 網頁與外部資源連結 rel 當前文件與被連結文件的關係 rel="stylesheet" 文件的外部樣式表(白話:我要連結的是css) href 引用及跳轉地址 ``` 引入方式三行內式 <html> <head> <title></title> </head> <body> 內容 <div style="color:red;font-size:20px;"> </body> </html> ``` | 引入方式 | 作用範圍 | 使用場景 | | -------- | -------- | -------- | | 內嵌式 | 一個頁面 | 小的範例 | | 外聯式 | 多個頁面 | 工作專案 | | 行內式 | 一個標籤 | 配合JS | # 選擇器 ## 標籤選擇器 ``` <p></p> 以上為前提 p{ color:red; } ``` ## 類選擇器(類名可以自己亂取) 類名可以由數字、字母、下畫線_、中畫線-組成不能以數字和中畫線-開頭一個標籤可以用多個類名，用空格隔開就好 class類名可以隨便加在任何能使用CSS的標籤 (VScode出現紅色波浪99%是程式碼錯誤) ``` <p class="one"></p> 以上為前提 .one{ color:red; } ``` ``` <p class="one two"></p> 以上為前提 .one{ color:red; } .two{ background-color:green; } ``` ## id選擇器(id名可以自己亂取) id屬性不是拿來配合CSS，是配合JavaScript用的 id正確用法為每一個id屬性值在該頁面只能用一次，亂用不一定會報錯 ``` <p id="one"></p> 以上為前提 #one{ color:red; } ``` ## 通配符選擇器基礎網站會用來設定margin和padding ``` 套用所有標籤不需要前提 *{ color:red; } ``` ``` 套用所有標籤不需要前提 *{ margin:0; padding:0; } ``` # 文字 ``` 文字大小 p{ font-size:30px; } ``` chrome預設文字大小為16px ``` 文字粗細 p{ font-weight:900; } ``` 可輸入100~900(只能整百數，所以只有9種尺寸) 正常:normal或400 加粗:bold或700 ``` 文字傾斜 p{ font-style:italic; } ``` normal 正常(不傾斜) italic 傾斜 ``` 字體 p{ font-family:微軟雅黑,黑體,sans-serif; } ``` windows預設字體:微軟雅黑 font-family:微軟雅黑,黑體,sans-serif 使用微軟雅黑，沒有就用黑體，再沒有就隨便用一種無襯線字體常見字體系列無襯線字體 >特點:文字筆畫均勻 >場合:大多數網站 >舉例:黑體、Arial 襯線字體 >特點:文字筆畫不均勻 >場合:報紙書籍 >舉例:宋體、Times New Roman 等寬字體 >特點:每個字母和文字寬度相等 >場合:寫程式 >舉例:Consolas、fira code ``` 一次設定四個文字屬性值 p{ font:italic 700 60px 宋體; font:60px 宋體; 進階寫法 font:italic 700 60px/2 宋體; } ``` font 傾斜、粗細、大小、字體(照順序寫) 複合屬性一個屬性要設定多個屬性值，每個屬性值用空格隔開 font省略只能省略傾斜、粗細 font(進階) 傾斜、粗細、大小/行高、字體(照順序寫) 行高不寫單位就是倍數 ``` 文本縮進 p{ text-indent:32px; text-indent:2em; } ``` 寫作文首段需要空兩個字，利用文本縮進就能達到效果建議適用em，1px為1像素，1em為1個字 ``` 水平對齊 p{ text-align:left; text-align:center; text-align:right; } ``` 文字類標籤可以直接居中 img要設定父元素居中 :::danger 待補充 ::: ``` 文本修飾 p{ text-decoration:underline; text-decoration:line-through; text-decoration:overline; text-decoration:none; } ``` underline 下畫線(常用) line-through 刪除線(不常用) overline 上畫線(幾乎不用) none 無裝飾線(常用) ``` 行高 p{ line-height:50px; line-height:1.5; } ``` line-height:50px; 上間距+文本高度+下間距=50px line-height:1.5; 1.5倍的意思，不用寫單位 ``` 顏色取值 p{ color:red; background-color:green; } ``` 顏色屬性值種類關鍵詞:預定義顏色名 ex:red、green、blue、yellow rgb表示法:紅綠藍三原色，每項取值0~255 ex:rgb(0,0,0)、rgb(255,255,255) rgba表示法:紅綠藍三原色加上透明度，a取值範圍0~1 ex:rgb(0,0,0,1)、rgb(255,255,255,0.5) 透明度0.5如果寫成.5不會報錯十六進制表示法:#開頭，將數字轉成十六進制表示，且兩個兩個為一組 ex:#000000、#ff0000 若類似以上兩種特殊的可簡寫成#000、#f00 ``` 標籤居中 div{ width:300px; height:300px; background-color:pink; margin:0 auto; } ``` :::danger 待補充margin:0 auto ::: # 背景背景色 background-color 背景圖片 background-image ``` div{ background-image:url(./image.jpg); } ``` 背景圖片預設會把圖片鋪很多張直到填滿背景背景圖片上可直接出現文字背景平舖(使用background-image) background-repeat ``` div{ background-repeat:repeat; background-repeat:no-repeat; 最常用，圖片只顯示一個 background-repeat:repeat-x; background-repeat:repeat-y; } ``` 背景位置(使用background-image) background-position ``` div{ background-position:right 0 右上 background-position:right bottom 右下 background-position:center center 完全居中 background-position:center 完全居中(效果跟上面一樣) background-position:50px 100px 往右移動50往下移動100 background-position:-50px -100px 往左移動50往上移動100 } ``` 背景圖只能顯示在盒子裡面水平方向 >left >center >right 垂直方向 >top >center >bottom 背景複合屬性 background ``` div{ width: 400px; height: 400px; background: pink url(./image.jpg) no-repeat center bottom } ``` ``` div{ width: 400px; height: 400px; background: pink url(./image.jpg) no-repeat 100px 50px } ``` 不照順序寫沒關係推薦順序:background color image repeat position position中的center bottom寫成bottom center是可以的，位置不變 position中的100px 50px寫成50px 100px也可以，但位置不一樣 img和background的差別 img用在公司產品圖 background用在不是很重要的小功能 # 複合選擇器 ## 後代選擇器 ``` div p { color:red; } ``` ``` <div> <p>文字</p> </div> ``` ## 後代選擇器(全選) ``` div a { color:red; } ``` ``` <div> <a>這是div裡面的a</a> <p> <a>這是div裡面的p裡面的a</a> </p> </div> ``` 變色這是div裡面的a 變色這是div裡面的p裡面的a ## 子代選擇器 ``` div>a { color:red; } ``` ``` <div> <a>這是div裡面的a</a> <p> <a>這是div裡面的p裡面的a</a> </p> </div> ``` 變色這是div裡面的a 其它不變色 ## 並集選擇器 ``` p, div, span, h1{ color:red; } ``` ``` <p>ppp</p> <div>div</div> <span>span</span> <h1>h1</h1> <h2>h2</h2> ``` ## 交集選擇器 ``` p.box{ color:red; } ``` ``` <p class="box">這是p標籤</p> <p>ppp</p> <div class="box">這是div標籤</div> ``` 交集選擇器都是緊接著的，沒有空格或標點符號如果有標籤選擇器就一定要寫在最前面 ## 偽類選擇器 ``` a:hover{ color:red; background-color:green; } ``` ``` <a href="#">這是超連結</a> ``` hover是滑鼠懸停在東西上時改變的樣式任何標籤都可以用hover # 元素顯示模式 ## 塊級元素特點 1.獨佔一行 2.寬度為默認值，高度被內容撐開 3.可自行設置寬高代表標籤 div p h系列 ul li dl dd dt form header nav footer ## 行內元素特點 1.一行可以顯示多個 2.寬度和高度被內容撐開 3.不可自行設置寬高代表標籤 a span b u i s ## 行內塊元素特點 1.一行可以顯示多個 2.可自行設置寬高 input textarea button select :::danger 特殊情況:img有行內塊元素，但在google調試工具中顯示inline ::: ## 顯示模式轉換 ``` div{ display:block display:inline-block display:inline } ``` display:inline少用 # 盒子模型外邊距 margin 邊框 border 內邊距 padding 內容 content 寬 width 高 height ``` div{ margin:50px; border:1px solid red; padding:20px; } ``` ## 邊框border 複合屬性設定:粗細、虛實、顏色實線solid 虛線dashed 點點虛線dotted border-方位名詞上top 下bottom 左left 右right 邊框單屬性 border-width:粗細 border-style:虛實 border-color:顏色 ``` 範例:做一個400x400的框框 div{ width: 380px; height: 380px; background-color: pink; border: 10px solid #000; } ``` ## 範例-新浪導航布局思路從外到內先寬高背景色放內容調內容位置控制文字細節 ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box{ height: 40px; border-top: 3px solid #ff8500; border-bottom: 1px solid #edeef0; } .box a{ width: 80px; height: 40px; /*background-color: #edeef0;*/ display: inline-block; text-align: center; line-height: 40px; font-size: 12px; color: #4c4c4c; text-decoration: none; } .box a:hover{ background-color: #edeef0; color: #ff8400; } </style> </head> <body> <div class="box"> <a href="#">新浪導航</a> <a href="#">新浪導航</a> <a href="#">新浪導航</a> <a href="#">新浪導航</a> </div> </body> </html> ``` ## 內邊距padding 普通情況 ``` div{ padding:50px; } ``` 也可當複合屬性使用設定順序為上右下左(順時針) ``` div{ padding:10px 20px 40px 80px; } ``` 三值上、左右、下 ``` div{ padding:10px 40px 80px; } ``` 二值上下、左右 ``` div{ padding:10px 80px; } ``` 範例:做一個300x300的框框，邊框10，內邊距20 300-(10x2)-(20x2)=240 ``` div{ width: 240px; height: 240px; background-color: pink; border: 10px solid #000; padding:20px; } ``` ### 內減模式承上範例 ``` div{ width: 300px; height: 300px; background-color: pink; border: 10px solid #000; padding:20px; box-sizing:border-box; } ``` ## 範例-新浪導航2 ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box{ height: 40px; border-top: 3px solid #ff8500; border-bottom: 1px solid #edeef0; } .box a{ padding: 0 16px; /* width: 80px; */ height: 40px; /* background-color: #edeef0; */ display: inline-block; text-align: center; line-height: 40px; font-size: 12px; color: #4c4c4c; text-decoration: none; } .box a:hover{ background-color: #edeef0; color: #ff8400; } </style> </head> <body> <div class="box"> <a href="#">新浪導航</a> <a href="#">新浪導航新浪導航</a> <a href="#">新浪導航新浪導航新浪導航</a> <a href="#">新浪導航新浪導航新浪導航新浪導航</a> </div> </body> </html> ``` ## 外邊距margin 普通情況 ``` div{ margin:50px; } ``` 也可當複合屬性使用設定順序為上右下左(順時針) ``` div{ margin:10px 20px 40px 80px; } ``` 三值上、左右、下 ``` div{ margin:10px 40px 80px; } ``` 二值上下、左右 ``` div{ margin:10px 80px; } ``` 版心居中 margin:0 auto margin:上下沒有左右平均分配 ``` div{ margin:0 auto; } ``` ## 默認樣式 body標籤默認margin:8 p標籤默認margin:上下16 ``` *{ padding: 0; margin: 0; } ``` ## 案例:新聞列表 ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> * { padding: 0; margin: 0; box-sizing: border-box; } .news { width: 500px; height: 400px; border: 1px solid #ccc; margin: 50px auto; padding: 42px 30px 0; } .news h2 { border-bottom: 1px solid #ccc; font-size: 30px; /* 行高1倍就是字號大小 */ line-height: 1; padding-bottom: 9px; } ul { /* 去掉列表的圓點符號 */ list-style: none; } .news li { height: 50px; border-bottom: 1px dashed #ccc; padding-left: 28px; /* 隱式垂直居中 */ line-height: 50px; } .news a { text-decoration: none; color: #666; font-size: 18px; } </style> </head> <body> <div class="news"> <h2>最新文章</h2> <ul> <li><a href="#">安安安安安安安安</a></li> <li><a href="#">安安安安安安安安</a></li> <li><a href="#">安安安安安安安安</a></li> <li><a href="#">安安安安安安安安</a></li> <li><a href="#">安安安安安安安安</a></li> </ul> </div> </body> </html> ``` ## 外邊距問題 ### 合併現象垂直布局的塊級元素，上下的margin會合併最終兩者距離為其中一元素的margin大小(取較大者) ``` <div class="one">111</div> <div class="two">222</div> ``` ``` div { width: 100px; height: 100px; background-color: pink; } .one { margin-bottom: 50px; } .two { margin-top: 50px; } ``` ### 塌陷現象互相嵌套的塊級元素，子元素的margin-top會作用在父元素上導致父元素一起往下移動 ``` <div class="father"> <div class="son">son</div> </div> ``` ``` .father { width: 300px; height: 300px; background-color: pink; } .son { width: 100px; height: 100px; background-color: skyblue; margin-top: 50px; } ``` 解決方法一、給父元素設置border-top，子元素就可以設margin-top 二、給父元素設置overflow:hidden，子元素就可以設margin-top 三、給父元素設置padding-top 四、子元素轉成行內塊五、設置浮動 ## 行內標籤問題如果想要通過margin和padding改變行內標籤的垂直位置，無法生效可以用line-height ``` <span>span</span> <span>span</span> ``` ``` span { margin: 100px; padding: 100px; line-height: 100px; } ```