好程序員前端教程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選擇器 類選擇器 標籤選擇器 通配符選擇器 瀏覽器自定義或繼承