CSS 自學筆記

2022-03-11 18:58:15 字數 3638 閱讀 8471

2018-12-14 -----

1 所有元素的錨點預設就是它的物理中心

2 改變錨點位置的方法: transform-origin: x-axis y-axis z-axis;

3 ps裡在層級裡選擇物件,右鍵可以copy css

4 devicepixelratio 裝置畫素比

在視網膜螢幕的iphone上,螢幕物理畫素640畫素,獨立畫素還是320畫素,因此,window.devicepixelratio等於2.

第一部分

1 css 指層疊樣式表

2 用來定義 html的顯示

3 為了解決內容和表現分離

4 多個樣式可層疊為一 , 後面各項優先順序依次增高:瀏覽器預設設定 外部樣式表 內部樣式表(在head標籤內部的),內聯樣式(在html元素內部)

5 外部樣式可提高工作效率

6 格式: selector

7 比如 h1 

8 顏色的值還可以是 #ff0000, 也可以有縮寫形式 #f00

9 也可以用rgb   p 或者 p

10 如果值為若干單詞,則要加引號,比如 p

11 用分號隔開多個宣告

12 文字對齊  text-align: center;

13 所有的標題元素都是綠色的:

h1,h2,h3,h4,h5,h6

14 通常子元素會繼續父元素的屬性

15 派生選擇器 控制列表中的粗體

li strong

16 id選擇器

17 border: 1px dotted #000;  擁有乙個畫素寬的黑色點狀邊框

18 padding: 10px;  周圍會有 10 個畫素寬的內邊距   內部空白

19 類選擇器 用點號來顯示 比如   .center 

20 td.fancy

類名為 fancy 的**單元將是帶有灰色背景的橙色

21 屬性和值選擇器

22 背景是透明的 margin: 0px; padding: 0px;">23 背景 background-image: url(/i/eg_bg_04.gif)

24 背景平鋪 background-repeat: repeat-y ;  no-repeat repeat-x. 預設是全場景x和y向全部repeat

25 背景定位:background-position: center left right bottom top (一般會同時出現兩個) 或者是兩個百分數,或者是兩個數值

26 背景影象固定  background-attachment:fixed 不隨滾動而滾動

27 文字縮排 text-indent: 20vw

28  注意:一般來說,可以為所有塊級元素應用 text-indent,但無法將該屬性應用於行內元素,影象之類的替換元素上也無法應用 text-indent 屬性。不過,如果乙個塊級元素(比如段落)的首行中有乙個影象,它會隨該行的其餘文字移動

29 text-indent還可以為負值

30 text-indent也可以設定為兩個百分比值

31 text-align left right center   inherit  justify這個比較噁心

32 word-spacing  單詞間的間距

33 letter-spacing 字母間的間距

34 text-transform 字母的大小寫 有三個值 uppercase lowercase capitalize

35 text-decoration 

36 white-space:normal 合併空白符

pre 保持原狀

nowrap 不換行

pre-wrap

pre-line

37 文字方向 direction ltr rtl

看到  後面還沒看

第二部分 框模型

從開始看 ,看完框模型

38 css框模型  element padding border margin

39 padding可以是正數,或百分比, 上右下左,      也可以分開寫成 padding-left padding-top padding-bottom padding-right  內邊距!!好好理解

40 padding值為百分比時表示相對于父容器寬度的百分比

41 border有樣式,寬度,顏色

42 border在padding內邊距之上

43 border-style 比如 outset就像按鈕, 4個值可以同時設定4個邊

44 可以定義單邊樣式 比如 border-top-style: 

45 border-width 可以設定成 thin thick medium 或者具體的數值

46 必須設定border-style 否則就看不到邊框

47 border-color一次可接受4個值,資料可以是命名,十六進製制,或是rgb

48  border-color : thick double red, 也可以把寬度 樣式 顏色這些簡寫到乙個屬性裡

49 margin是外邊距,它可以是數值,百分比,和負值

50 margin為百分比時,其數值是相對於父級的

51 css如果有屬性是支援四個值的,則有值複製特性

52 單邊外邊距屬性 margin-left 

53 外邊距合併

第三部分 css定位 positioning

1 塊級元素:div h1 p

2 行內元素:span strong, 行內框

3 一切皆為框

4 有三種定位機制:普通流 浮動流 絕對定位

5 行框 linebox ,行內框,這個不太懂

6 position可能的值有 

absolute , 相對於static定位以外的第乙個父元素進行定位,元素的位置用left top right botttom屬性進行規定. 互相會覆蓋,  設定為絕對定位的元素框從文件流完全刪除

fixed 生成絕對定位的元素 相對於瀏覽器視窗進行定位,元素的位置用left top right botttom屬性進行規定.

relative 生成相對定位的元素,相對於其正常位置進行定位

static 預設值,沒有定位,元素出現在正常的流中。

inherit 繼續父元素的position 

7 padding-top 是相對於其鄰居, 這句不一定對. 2018-12-1今天做了實驗,這句是對的

top是相對於父親

8 padding-top是百分比時分母是父級的值

top是百分比時,分母是父級縱向高度。

left是百分比時,分母是父級橫向高度。

9 定位屬性有 position top right bottom left overflow clip vertical-align z-index 

有position屬性的元素設定z-index才有效。

10 overflow: 性定義溢位元素內容區的內容會如何處理。如果值為 scroll,不論是否需要,使用者**都會提供一種滾動機制。因此,有可能即使元素框中可以放下所有內容也會出現滾動條。預設值是 visible.  

11 overflow的值有 scroll visible hidden 

12 clip:rect(上切 寬 高 左切)

13 img.top

img.bottom

14 line-height 文字每一行的高度

初識css(自學筆記)

css cascading style sheets 美化樣式 css通常被稱為css樣式表或層疊樣式表 級聯樣式表 主要用於設定html頁面中的文字內容 字型 大小 對齊方式等 的外形 寬高,邊框樣式,邊距等 以及版面的布局等外觀樣式 內嵌式是將css 集中寫在html文件的head頭部標籤中,並...

自學筆記 03 CSS

內部樣式表 使用style標記建立樣式時,最好寫在 外部樣式表 標籤匯入外部樣式表 stylesheet type text css href 目標檔案的路徑及檔名全稱 import匯入外部樣式表 link和import匯入外部樣式區別 內聯樣式表 行內樣式 嵌入式樣式 行內樣式表 標籤 style...

css外觀屬性(自學筆記)

color屬性用於定義文字的顏色,其取值方法有如下三種 預定義的顏色值,如 red green blue等 十六進製制1 如 ff0000 f00 29d794等 連續的兩位上的字元相同可以縮寫,只寫乙個如 ff00dd可以縮寫成 f0d rgb 如紅色可以表示成rgb 255,0,0 或rgb 1...