css學習筆記

2021-08-19 23:30:52 字數 1308 閱讀 5856

css基礎

1、css 實際上如何工作?

當瀏覽器顯示文件時,它必須將文件的內容與其樣式資訊結合。它分兩個階段處理文件:

瀏覽器將 html 和 css 轉化成 dom (文件物件模型)。dom在計算機記憶體中表示文件。它把文件內容和其樣式結合在一起。

瀏覽器顯示 dom 的內容

2、關於 dom

dom是一種樹形結構. 標記語言中的每個元素,屬性,文字片段都變為乙個 dom 節點。這些節點由它們與其它 dom 節點的關係來定義。有的元素是某些子節點的父節點,且這些子節點有兄弟(節點)

3、css寫法

4、css 的屬性和屬性值都是區分大小寫的

5、css 規則是樣式表的主要組成塊 —— 是你在 css 中最常見的塊。但這有一些其它型別的塊,你以後偶爾會碰上 —— css 規則只是被稱為 css 語句中的一種。其它型別如下:

具體語法示例:

@import 'custom.css';
該@-規則向當前 css 匯入其它 css 檔案

巢狀語句 是@-規則中的一種,它的語法是 css 規則的巢狀塊,只有在特定條件匹配時才會應用到文件上。特定條件如下:

具體語法示例

@media (min-width: 801px) 

}

上述的巢狀語句只有在頁面寬度超過801畫素時才會應用。

你將會在本門課程的適當位置學習@-規則/巢狀語句的其他一些型別。

重要:任何不是規則集或@-規則或巢狀語句的 css 語句都是無效的,並會因此被忽略。

6、簡寫

font

background

padding

border,和 

margin

background: red url(bg-graphic.png) 10px 10px repeat-x fixed;

和以下這些做了相同的事:

background-color: red;

background-image: url(bg-graphic.png);

background-position: 10px 10px;

background-repeat: repeat-x;

background-scroll: fixed;

7. 

flex

在彈性盒物件的 元素中的各項周圍留有空白:

div

CSS學習 CSS學習筆記

出處 注 本學習筆記只是自己的一些備忘,初學者的東西不具有參考性,請到w3school 進行系統學習。學習css我使用的工具是visual css,可以實現同步預覽,快速學習編輯css。1.css的作用 用來規定網頁中的內容的顯示方式,避免給html增加很多的屬性而將 變得臃腫。2.css的應用方式...

CSS學習 CSS學習筆記

出處 注 本學習筆記只是自己的一些備忘,初學者的東西不具有參考性,請到w3school 進行系統學習。學習css我使用的工具是visual css,可以實現同步預覽,快速學習編輯css。1.css的作用 用來規定網頁中的內容的顯示方式,避免給html增加很多的屬性而將 變得臃腫。2.css的應用方式...

CSS 學習筆記

當同乙個html元素被不止乙個樣式定義時,會使用哪個樣式呢?一般而言,所有的樣式會根據下面的規則層疊於乙個新的虛擬樣式表中,其中數字4 擁有最高的優先權。1.瀏覽器預設設定 2.外部樣式表 3.內部樣式表 位於標籤內部 4.內聯樣式 在html 元素內部 因此,內聯樣式 在html 元素內部 擁有最...