css基礎4

今天是2019年6月21日，週五了。在這裏寫上一篇隨筆，主要內容是css基礎中的一些細節部分，話很少說，直接上！

1、背景漸變： 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　　

2、字體文本相關樣式

• 字體屬性：font-family
• 字體大小：font-size
• 字體加粗：font-weight
• 字體傾斜：font-style
• 小型大寫：font-variant
• 綜合屬性：font：font-style  font-variant  font-weight  font-size  font-family  

3、文本相關屬性

• 文本顏色：color
• 文本對齊方式：text-align  值：left  right  center
• 文本修飾：text-decoration
值：
• none：無線條樣式
• underline：下劃線
• line-through：刪除線
• overline：上劃線
• 行高：一行文本所佔的高度
  • 格式：line-height：height（文本居中）
  • 注意：一行文本，行高永遠和元素的上邊緣是重合的；當行高的高度大於文本的高度是，那麼該文本會在行高範圍內居中
• 首行縮進：text-indent
• 文本陰影：text-shadow
  • offsetx  offsety  blur  color

4、表格相關樣式

• 屬性：color  font-size  border  width  height
• 表格特有樣式：
  • border-collapse：邊框合併
  • border-seperate：邊框分離
  border-spacing：相鄰單元格之間的距離，至關於cellspacing。
  • 備註：兩個值；第一個值表明的是水平距離，第二個值表明的是垂直距離
  • 主體：border-collapse：seperate
• 表格佈局：table-layout
  • auto：默認的 自動錶格佈局，根據內容來自動分類td高度
  • fixed：固定的  列寬度是由總寬度來平均分配的

5、td：vertical-align  垂直對齊方式

• 使用場景：
  • 圖文混排時，定義文字相對於圖片的對齊方式
  •  td中設置單元格的垂直對齊方式

6、顯示方式設置

• 屬性：display
• 值：
  • block  讓元素變成快元素
  • inline-block  讓元素變成行內快元素
    • 注意：行內塊元素，只是能夠設置寬高以及上下的margin；
    • 使用場景：一個行內塊元素須要設置寬高或者設置上下margin
  • inline  讓元素變成行內元素
  • none  隱藏元素：元素消失後，不佔據頁面空間（脫離文檔流）
• 注意：不要嘗試給一個快元素變成行內元素，由於沒有任何意義！

7、顯示效果

• 定義：visibility：visible（可見）or hidden（隱藏）
• 備註：display：none和visibility:hidden異同
• 相同點：都是讓元素消失
• 不一樣點：
  • display：none  消失後脫離文檔流，不佔據頁面空間
  • visibility：hidden  消失後並無脫離文檔流，依然佔據着頁面空間

8、光標樣式

• 屬性：cursor
• 值：default（默認）
  • pointer（小手）
  • wait（等待）
  • crosshair（十字光標）
  • not-allowed（禁用）

9、列表項：list-style

• 有序列表：none（取消列表項的標誌）
• 無序列表：disc（實心圓） circle（空心圓） square（實心方塊） none（無列表標誌）
• 列表項位置：list-style-position：inside：  內部outside：  外部
• 列表項圖片：list-style-image  url（路徑）

未完，待續！