CSS學習筆記

2021-08-29 01:52:22 字數 1929 閱讀 9368

css和html結合的第一種方式:

1.每乙個html標籤都有乙個style樣式的屬性。該屬性的值就是css的**。

2.使用style標籤的方式。一般都定義在head中

3.使用css檔案匯入

4.使用html鏈結

demo1

這是乙個div區域1

這是乙個div區域2

這是乙個span區域1

這是乙個span區域2

這是乙個段落1

這是乙個段落2

demo2:

@charset "utf-8";

div

@charset "utf-8";

p@charset "utf-8";

/* 在該檔案中匯入其他css檔案

*/ @import url("div.css");

@import url("span.css");

@import url("p.css");

這是乙個div區域1

這是乙個div區域2

這是乙個span區域1

這是乙個span區域2

這是乙個段落1

這是乙個段落2

選擇器:html選擇器有3種:

1.html標籤名選擇器。使用的是html的標籤名;

2.class類選擇器。使用的是標籤中的class屬性;

3.id選擇器。使用的是標籤中的id屬性。通常id的取值在頁面中是惟一的,因為該屬性除了給css使用,還給js使用,id通常是為了標記頁面中的一些特定區域使用的。

選擇器優先順序:標籤選擇器《類名選擇器

demo3:

這是乙個div區域1

這是乙個div區域2

這是乙個span區域1

這是乙個span區域2

這是乙個段落1

這是乙個段落2

擴充套件選擇器1.關聯選擇器:選擇器中的選擇器

標籤是可以巢狀的,要讓相同標籤的不同標籤顯示不同的樣式,就可以用此選擇器。

2.組合選擇器:

對多個選擇器進行相同樣式的設定時用它。

demo4:

這是乙個div區域1

這是乙個div區域2

這是乙個span區域1

這是一span區域2

這是乙個段落1

這是乙個段落2

3.偽元素選擇器:

demo5:

偽元素選擇器演示

這是乙個段落

這是乙個div區域

這是乙個div區域

這是乙個div區域

demo6:

姓名:成績:div區域

單元格1

單元格1

單元格1

單元格1

單元格1

單元格1

盒子模式:

多少年以後,往事隨雲走,我們一直流連在貝加爾湖畔。

多少年以後,往事隨雲走,我們一直流連在貝加爾湖畔。

多少年以後,往事隨雲走,我們一直流連在貝加爾湖畔。

多少年以後,往事隨雲走,我們一直流連在貝加爾湖畔。

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 元素內部 擁有最...