CSS学习——基础分类整理
? ? 1. CSS ? ?
層疊樣式表: Cascading Style Sheets，定義如何顯示html元素
CSS規(guī)則: 選擇器{屬性: 值; 屬性: 值;}
CSS注釋: /*在這里寫注釋說明*/
- 選擇器 ?
- 樣式表 ?
- 盒子模型 ?
- 位置 ?
- 顏色 ?
- 顯示方式
?
- 圖片設(shè)置 ?
- 圖像效果 ?
- 間距 ?
- 偽類 ?
- 大小 ?
- 分列
? ? 2. 選擇器 ? ?
| #元素id | 用元素的id屬性來設(shè)置 | ? |
| .className | 用html的class屬性來設(shè)置 | ? |
| p.className | p元素，且class="className" | ? |
| div p | 后代選擇器（空格分隔）: div內(nèi)的所有p | 基于關(guān)系 |
| div>p | 子元素選擇器（>分隔）: div的直接子元素 | |
| div+p | 相鄰兄弟選擇器(+分隔): 與div同父且緊跟div的p | |
| div~p | 后續(xù)兄弟選擇器(~分隔): 與div同父且在div后的p | |
| div:first-child | 是第一個兒子的div ? ?first-child類似于形容詞 | 偽類：表示特定狀態(tài) |
| a:link | a鏈接未點擊時 | |
| a:hover | 鼠標(biāo)移到a上時 |
? ? 3. 偽類 ? ?為選擇器添加一些特殊效果
語法 1. 選擇器:偽類{屬性:值} 2. 選擇器.類:偽類{屬性:值}、
| a:link/visited/hover/active | 鏈接:未訪問過/訪問過/移到到鏈接/正在活動 |
| p:befor/after | 在元素前/后插入內(nèi)容 |
| p:first-child/last-child/nth-child(2) | 作為其它元素第1個/最后1個/第2個子元素的p |
| p:first-letter/first-line | p的第一個字母/行 |
? ? 4. 樣式表 ? ?可對一個元素設(shè)置多次樣式，多重樣式會層疊為一個，優(yōu)先級從1->3降低
| <body style="background-color:Black"></body> | 1. 內(nèi)聯(lián)樣式 |
| <head> <style> body {background-color:Black;} </style> </head> | 2. 內(nèi)部樣式表 |
| <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head> | 3. 外部樣式表 |
? ? 5. 盒子模型 ? ?所有html元素可看作盒子，元素從外到內(nèi)為: 外邊距，輪廓，邊框，內(nèi)填充，和實際內(nèi)容。
| margin | 外邊距: 與其父元素的間距，透明 |
| outline:2px black solid | 輪廓: 位于邊框邊緣外圍的線 |
| border | 圍繞在內(nèi)邊距和內(nèi)容外的邊框 |
| padding | 內(nèi)填充: 內(nèi)容與邊框的間距 |
| content | 內(nèi)容: 顯示數(shù)據(jù) |
margin:10px(上)?10px(右) 10px(下) 10px(左); 按序設(shè)置外邊距的大小，這個順序是從上開始順時針畫一個框
? ? 6. 位置 ? ?
| position | 定位方式，取值如下 |
| position:absolute; | 與文檔流無關(guān)，不占據(jù)空間 |
| top,right,bottom,left | 元素外邊距與相應(yīng)邊的偏移量（相對的元素與position有關(guān)） |
| float:left/right/none | 元素盡量向左或向右移動，浮動元素后的元素才會受影響， |
| clear:left/right/none/both | 要求元素某一側(cè)不能出現(xiàn)浮動元素 |
| text-align:left/right/center/justify | 文本對齊方式: 左/右/居中/自動調(diào)整間距靠到兩端 |
| background-position:left right | 背景設(shè)置開始的位置x(left/right/center) y(top/bottom/center) |
? ? 7. 顏色 ? ?
| color | 文本顏色 |
| background-color | 背景顏色 |
| border-color | 邊框顏色 |
| outline-color | 輪廓顏色 |
| text-decoration-color | 文字橫線（下劃、刪除）顏色 |
| background: linear-gradient(方向/角度,顏色1,顏色2,...); | 方向: to bottom、to top、to right、to left、to bottom right |
? ? 8. 顯示方式 ? ?
| display | none: 不顯示（不占空間） |
| visibility | visible: 可見 |
? ? 9. 圖片設(shè)置 ? ??
| background-image:url("1.jpg") | 設(shè)置背景圖片 |
| border: 30px solid transparent; | border:邊框 |
| list-style-image:url('1.jpg'); | 列表標(biāo)記的圖片 |
boder-image原理:
把圖片用4條線切割成9宮格。每個格子與邊框位置一一對應(yīng)。9宮格的中間部分是透明的，空的。若image-width大于border寬度，多余部分可延伸到內(nèi)容的空間
? ? 10. 圖像處理 ? ?
| filter:濾鏡屬性(效果大小) | blur(2)高斯模糊為2 |
| opacity:0.2 | 指定不透明度 |
| background:url(1.jpg) 0 0; | 圖像拼合技術(shù)，從圖的某個位置開始截取一部分 |
圖像變換
| transform:roate(30deg); | transform: 變形轉(zhuǎn)換屬性。 |
| transform:rotateX(30deg) | 3D轉(zhuǎn)換方法，沿X軸3D旋轉(zhuǎn) |
| div{ | transition: 過渡，從一種樣式轉(zhuǎn)變到另一個時， |
| ?div{ | ?animation: 動畫名稱 持續(xù)時長 |
? ? 11. 間距 ? ?
| letter-spacing | 字母間距 |
| word-spacing:30px; | 單詞間距 |
| border-collapse:separate; border-spacing:10px 50px; | 表格中相鄰單元格的邊框間距離 |
| white-space | 指定元素內(nèi)的空白怎樣處理 |
? ? 12. 大小 ? ?
| width(寬) + padding(內(nèi)邊距) + border(邊框) = 實際寬度 | ? |
| background-size: 80px 60px; | 背景大小 |
| font-size:10px | 字體大小 |
| overflow:auto; | 需設(shè)置overflow |
| box-sizing:content-box|border-box | 指定width/height設(shè)置的目標(biāo)為內(nèi)容盒子|邊框盒子 |
? ? 13. 分列 ? ?
| column-count:3; | column將元素分成多列（欄）顯示 |
14. 單位
| p{font-size: 10px;} | ? |
| div{font-size:10px;} p{font-size: 1.5em;} | p的字體大小 1.5*p的最近父元素的font-size |
| p{font-size: 1.5rem;} | 針對根元素html |
| p{font-size: 8vm;} p{font-size: 8vh;} | vm/vh把視口的寬和高分成100份 |
?
參考：
https://www.runoob.com/cssref/
轉(zhuǎn)載于:https://www.cnblogs.com/coolqiyu/p/7040052.html
總結(jié)
以上是生活随笔為你收集整理的CSS学习——基础分类整理的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 后端时间转js时间，主要用于取倒计时
- 下一篇： CSS实现自适应不同大小屏幕的背景大图