好程式設計師前端教程CSS基礎知識點

好程式設計師前端教程CSS基礎知識點

1.CSS基礎

  CSS選擇器
  元素選擇器:p{}
  id選擇器:#p1{}
  類選擇器: .pre{}

2.CSS註釋

  註釋:/**/

3.CSS尺寸

  width:寬度 height:高度

4.CSS背景

  background-color-----背景顏色
  background-image:url(imagepath)—圖片做背景
  url(background.jpg)—本地測試
  background-repeat—背景水平垂直方向重複—引數可選
  background-size: contain—背景平鋪

5.文字

  color—文字顏色
  text-align—對齊
  text-decoration—文字修飾
  lineheight—行間距
  letter-spacing—單詞間距
  text-indent—首行縮排
  text-transform—大小寫
  white-space—空白格

6.字型

  font-size—尺寸
  font-style—風格
  font-weight—粗細
  font-family—字型檔
  font—宣告在一起

7.滑鼠樣式

  cursor:crosshair—十字架
  cursor:pointer—手指

8.表格

  table-layout:automatic|fixed—表格佈局
  border-collapse:separate|collapse—表格邊框

9.邊框

  border-style—邊框風格
  border-color—邊框顏色
  border-width—邊框寬度
  border—都放在一起
  boder-top—只有一個方向有邊框
  boder-top,border-left—有交界的邊都有邊框
  div—塊級元素(自動換行)
  span—內聯元素(無換行)

10.內邊距

  padding-left: 左內邊距
  padding-right: 右內邊距
  padding-top: 上內邊距
  padding-bottom: 下內邊距
  padding: 上 右 下 左

11.外邊距

  margin-left: 左外邊距
  margin-right: 右外邊距
  margin-top: 上外邊距
  margin-bottom: 下外邊距

12.邊框模型

13.超鏈狀態

  link - 初始狀態，從未被訪問過
  visited - 已訪問過
  hover - 滑鼠懸停於超鏈的上方
  active - 滑鼠左鍵點選下去，但是尚未彈起的時候

14.隱藏

  display:none; —隱藏一個元素，這個元素將不再佔有原空間 “坑” 讓出來了
  visibility:hidden;—;隱藏一個元素，這個元素繼續佔有原空間，只是“看不見”

15.css檔案

  href指向的路徑就是單獨的css檔案路徑

16.CSS優先順序

  在屬性後面使用 !important 會覆蓋頁面內任何位置定義的元素樣式。
  作為style屬性寫在元素內的樣式
  id選擇器
  類選擇器
  標籤選擇器
  萬用字元選擇器
  瀏覽器自定義或繼承