關於css 筆記

2021-10-08 18:30:34 字數 1449 閱讀 6056

簡單來說css是用來設計html文字樣式的工具。

css 例項

css宣告總是以分號(;

)結束,宣告總以大括號

()括起來:

p 為了讓css可讀性更強,你可以每行只描述乙個屬性:例項p

css 注釋

注釋是用來解釋你的**,並且可以隨意編輯它,瀏覽器會忽略它。

css注釋以 "/*" 開始, 以 "*/" 結束, 與c/c++語言相同,例項如下:

/*這是個注釋*/

p

id和class可能在html裡看起來用處不大,但在與css和js聯絡的互動上十分重要。

css id 和 class

id 和 class 選擇器

如果你要在html元素中設定css樣式,你需要在元素中設定"id" 和 "class"選擇器。

id 選擇器

id 選擇器可以為標有特定 id 的 html 元素指定特定的樣式。

html元素以id屬性來設定id選擇器,

css 中 id 選擇器以 "#" 來定義。

以下的樣式規則應用於元素屬性 id=

"para1":例項

#para1

嘗試一下 »

remark id屬性不要以數字開頭,數字開頭的id在 mozilla/firefox 瀏覽器中不起作用。

class 選擇器

class 選擇器用於描述一組元素的樣式,class 選擇器有別於id選擇器,class可以在多個元素中使用。

class 選擇器在html中以class屬性表示, 在 css 中,類選擇器以乙個點"."號顯示:

在以下的例子中,所有擁有 center 類的 html 元素均為居中。

例項.center

嘗試一下 »

你也可以指定特定的html元素使用class。

在以下例項中, 所有的 p 元素使用 class

="center" 讓該元素的文字居中:

例項p.center

嘗試一下 »

remark 類名的第乙個字元不能使用數字!它無法在 mozilla 或 firefox 中起作用。

補充:其他選擇器和選擇器的優先順序

如果你要在 html 標籤中設定 css 樣式,那麼你有四種方法,即 css 選擇器有四種。

除了提到的 id 和 class 選擇器外,第三種選擇器為標籤選擇器,即以 html 標籤作為 css 修飾所用的選擇器。

例項h3<

/style>

菜鳥教程<

/h3>

第四種選擇器即直接在標籤內部寫css**。

例項"color:red;"

>菜鳥教程<

/h3>

這四種 css 選擇器有修飾上的優先順序,即:

第四種 > id >

class

> 第三種

關於CSS布局

css三大定位機制 標準文件流 浮動布局 絕對定位布局。一 標準文件流 1.特點 從上到下,從左到右輸出文字。標準文件流裡面又分兩種情況,即塊級元素和行級元素,也可以說標準文件流是由塊級標籤和行級標籤組成的。塊級元素特點 從左到右撐滿頁面,獨佔一行,觸碰到頁面邊緣時會自動換行,常見的塊級標籤有div...

關於CSS單位

初學css,相信大家都會用 px 作為單位使用,其實css還有很多單位,可以分為兩類 絕對單位 和 相對單位 絕對單位一般用於傳統平面印刷,很少用於前端開發,這裡我們只討論相對單位。相對單位主要有以下這些 px 畫素 百分比 em 1em等於 當前元素 的字型大小 rem 1rem等於 根元素 的字...

關於css屬性

width 寬度屬性 1 width 10px 寬度這樣設定即可height 高度屬性 2 height 10px 高度的設定方法font weight bold 字型加粗屬性 3 font weight bold 4 font weight 800 兩個屬性都具有加粗效果 font weight ...