今天是2019年6月21日,周五了。在這裡寫上一篇隨筆,主要內容是css基礎中的一些細節部分,話不多說,直接上! 一、背景漸變: background-image 線性漸變:linear-gradient(漸變方向,色標,色標,色標) 方向: 關鍵字: to top 從下往上 to bottom 從 ...
今天是2019年6月21日,周五了。在這裡寫上一篇隨筆,主要內容是css基礎中的一些細節部分,話不多說,直接上!
一、背景漸變: background-image
- 線性漸變:linear-gradient(漸變方向,色標,色標,色標)
- 方向:
- 關鍵字:
- to top 從下往上
- to bottom 從上往下
- to left 從右往左
- to right 從左往右
- 角度:deg 角度同時針一樣旋轉
- 色標:顏色 0%
- 徑向漸變:radial-gradient(【size at position】,色標,色標,)
- 備註:size:漸變路徑;at:關鍵字;position:漸變圓心所在的位置
- 關鍵字:left right center;top bottom center
二、字體文本相關樣式
- 字體屬性:font-family
- 字體大小:font-size
- 字體加粗:font-weight
- 字體傾斜:font-style
- 小型大寫:font-variant
- 綜合屬性:font:font-style font-variant font-weight font-size font-family
三、文本相關屬性
- 文本顏色:color
- 文本對齊方式:text-align 值:left right center
- 文本修飾:text-decoration 值:
- none:無線條樣式
- underline:下劃線
- line-through:刪除線
- overline:上劃線
- 行高:一行文本所占的高度
- 格式:line-height:height(文本居中)
- 註意:一行文本,行高永遠和元素的上邊緣是重合的;當行高的高度大於文本的高度是,那麼該文本會在行高範圍內居中
- 首行縮進:text-indent
- 文本陰影:text-shadow
- offsetx offsety blur color
四、表格相關樣式
- 屬性:color font-size border width height
- 表格特有樣式:
- border-collapse:邊框合併
- border-seperate:邊框分離 border-spacing:相鄰單元格之間的距離,相當於cellspacing。
- 備註:兩個值;第一個值代表的是水平距離,第二個值代表的是垂直距離
- 主體:border-collapse:seperate
- 表格佈局:table-layout
- auto:預設的 自動表格佈局,根據內容來自動分類td高度
- fixed:固定的 列寬度是由總寬度來平均分配的
五、td:vertical-align 垂直對齊方式
- 使用場景:
- 圖文混排時,定義文字相對於圖片的對齊方式
- td中設置單元格的垂直對齊方式
六、顯示方式設置
- 屬性:display
- 值:
- block 讓元素變成快元素
- inline-block 讓元素變成行內快元素
- 註意:行內塊元素,只是可以設置寬高以及上下的margin;
- 使用場景:一個行內塊元素需要設置寬高或者設置上下margin
- inline 讓元素變成行內元素
- none 隱藏元素:元素消失後,不占據頁面空間(脫離文檔流)
- 註意:不要嘗試給一個快元素變成行內元素,因為沒有任何意義!
七、顯示效果
- 定義:visibility:visible(可見)or hidden(隱藏)
- 備註:display:none和visibility:hidden異同
- 相同點:都是讓元素消失
- 不同點:
- display:none 消失後脫離文檔流,不占據頁面空間
- visibility:hidden 消失後並沒有脫離文檔流,依然占據著頁面空間
八、游標樣式
- 屬性:cursor
- 值:default(預設)
- pointer(小手)
- wait(等待)
- crosshair(十字游標)
- not-allowed(禁用)
九、列表項:list-style
- 有序列表:none(取消列表項的標誌)
- 無序列表:disc(實心圓) circle(空心圓) square(實心方塊) none(無列表標誌)
- 列表項位置:list-style-position:inside: 內部outside: 外部
- 列表項圖片:list-style-image url(路徑)
未完,待續!