css-總結
一、 css基本語法 css頁面引入方法： 一、外聯式：經過link標籤，鏈接到外部樣式表到頁面中 <link rel="stylesheet" type="text/css" href="CSS/main.css"> 二、嵌入式：經過style 標籤，在網頁上建立嵌入式的樣式表 <style type="text/css"> h1{ font-size:20px; color: blue; } </style> 三、內聯式：經過標籤的style 屬性，在標籤上直接寫樣式 <a href="https://www.baidu.com/" style="font-size:24px; color:yellow;">百度</a>二、 css文本設置 color：設置文字的顏色：如：color:red; font-size:設置文字的大小：如font-size:12px; font-family:設置文字的字體：如font-family:'微軟雅黑'; font-style:設置字體是否傾斜： 如font-style:'normal';設置不傾斜 如font-style:'italic';設置傾斜 font-weight:設置文字是否加粗 如font-weight:bold; 設置加粗 如font-weight:normal; 設置不加粗 line-height 設置文字的間距；如line-height:24px; font:能夠同時設置文字的幾個屬性，要按照必定的順序， font: 是否加粗 字號/行高 字體 如：font:normal 12px/36px '微軟雅黑' text-decoration 設置文字的下劃線 如：text-decoration:none; 將下劃線去掉 如：text-decoration:underline; 設置下劃線 text-indent:設置文字首行縮進 如：text-indent:40px; 首行縮進40px（20一個漢字） text-align:設置文字水平對齊方式， 如：text-align:center 設置文字水平居中三、 css顏色表示法： 一、顏色表示：例如 red 紅色 gold 金色 二、rgb表示：例如 rgb(255, 0, 0) 表示紅色 三、16進制數值表示：例如#ff0000表示紅色四、 選擇器 4.一、標籤選擇器 影響範圍大，儘可能應用在層級選擇器上面 div{ color: green; font-size: 40px; } 在全部的div 標籤中都會起做用 4.二、id選擇器 經過id名來選擇元素，元素的id名稱不能重複，因此一個樣式設置項只能 對應於頁面上一個元素，不能複用，id通常給程序使用，因此不推薦 #id1{ font-size: 40px; } <p id='id1'>1234</p> 4.三、類選擇器 經過類選擇器來選擇元素，一個類可應用多個元素，一個元素上可使用 多個類，應用靈活，可複用 .box1{ color: red; } .box2{ color: blue; } <h1 class="box1">標題1</h1> <h2 class="box2">標題二</h2> 4.四、層級選擇器 主要應用在選擇父類下的子元素，或者子元素下面的子元素 能夠與標籤結合使用，減小命名，同時也能夠經過層架， 防止命名衝突 <style type="text/css"> .box{ color: #ff00ff } .box span{ font-size: 40px; } </style> 4.五、組選擇器 多個選擇器，若是有一樣的樣式設置，可使用組選擇器 <style type="text/css"> .box1,.box2,.box3{ font-size: 40px; } .box1{ color: #ff0000 } .box2{ color: #00ff00 } .box3{ color: #0000ff } </style> 4.六、僞類及僞元素選擇器 經常使用的僞類選擇器有hover,表示鼠標懸浮在元素上時的狀態， 僞元素還有before 和after,他們能夠經過樣式在元素中插入內容 .link{ font-size: 40px; color: green; text-decoration: none; } .link:hover{ color: red; font-style: italic; } .box1:before{ content: '前面文字'; color: red; } .box2:after{ content: '後面文字'; color: green; }五、 盒子模型 盒子模型解釋： 元素在頁面中顯示成一個方塊，相似一個盒子，css盒子模型就是使用現實中盒子來作比喻， 幫助咱們設置元素對應的樣式，盒子模型示意圖以下： margin-top（外填充）（指盒子與盒子之間的距離） border-top（邊框） padding-top（內填充） content(內容)六、 盒子模型使用技巧及相關問題 margin 相關技巧 一、設置元素水平居中：margin: x auto; 二、margin 負值讓元素位移及邊框合併 外邊距合併 外邊距合併指的是 當兩個垂直外邊距相遇時，他們將造成一個外邊距。 合併後的外邊距的高度等於兩個發生合併的外邊距的高度重的較大者。 解決方法： 一、使用這種特性 二、設置一邊的外邊距，通常設置margin-top 三、將元素浮動或者定位 margin-top 塌陷 在兩個盒子嵌套時候，內部的盒子設置的margin-top會加到外邊的盒子上， 致使內部的盒子margin-top設置失敗，解決方法以下： 一、外盒子設置一個邊框 二、外部盒子設置overflow:hidden 三、使用僞元素類： .clearfix:before{ content:''; display:table; } <!DOCTYPE html> <html> <head> <title>margin-top塌陷</title> <style type="text/css"> .clearfix:before{ content: ''; display: table; } .box1{ width: 300px; height: 300px; /* border: 1px solid #000; 方法一*/ /* overflow: hidden; 方法二*/ } .box2{ width: 200px; height: 100px; background-color: green; margin-top: 100px; margin-left: 50px; } </style> </head> <body> <div class="box1 clearfix"> <div class="box2"></div> </div> </body> </html>七、 css元素溢出 當子元素的尺寸超過父元素的尺寸是，須要設置父元素顯示溢出的子元素的方式， 設置的方式經過overflow 屬性設置 overflow 的設置項： 一、visible 默認值，內容不會被修建，會呈如今元素框以外 二、hidden 內容會被剪掉，而且其他內容是不可見的，此屬性還有清除浮動，清除margin-top塌陷的功能 三、scroll 內容會被修剪，但瀏覽器會顯示滾動條以便查看其他內容 四、auto 若是內容被修剪，則瀏覽器會顯示滾動條以便查看其他內容 五、inherit 規定應該從父元素繼承overflow 屬性的值
相關文章
- 1. css hack總結
- 2. 003 css總結
- 3. CSS總結
- 4. CSS小總結
- 5. css總結
- 6. HTML CSS總結
- 7. css 小總結
- 8. css js 總結
- 9. css 總結2
- 10. CSS - Hack 總結
- 更多相關文章...
- • jQuery Mobile CSS 類 - jQuery Mobile 教程
- • CSS 指南 - 網站建設指南
- • 算法總結-雙指針
- • 算法總結-回溯法
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. css hack總結
- 2. 003 css總結
- 3. CSS總結
- 4. CSS小總結
- 5. css總結
- 6. HTML CSS總結
- 7. css 小總結
- 8. css js 總結
- 9. css 總結2
- 10. CSS - Hack 總結