CSS學習小結

2021-10-25 22:01:31 字數 1219 閱讀 7753

css是級聯樣式表(cascading style sheets)的縮寫。html 用於撰寫頁面的內容,而 css 將決定這些內容該如何在螢幕上呈現。而mdb是css前端框架,使用mdb,可以快速高效的搭建web介面。

一條css樣式規則由兩個主要的部分構成:選擇器,以{}包裹的一條或多條宣告,例如:p。常用選擇器有id選擇器和class選擇器兩種,需注意id選擇器適用範圍只有乙個元素,class選擇器適用範圍可以有多個,也可以重複,因此class選擇器使用更為普遍。

要使css生效一般有三種方法:外部樣式表,內部樣式表,內聯樣式,這就和高階語言程式設計中類的定義相似了。

外部樣式表即在乙個html文件相同目錄下建立乙個css檔案,字尾為.css。

內部樣式表即直接在html文件中寫入css樣式。

內聯樣式則是直接把樣式規則直接寫到要應用的元素中:h3 style=「color:green;」 i am a heading /h3,但內聯樣式是最不靈活的一種方式,完全將內容和樣式合在一起,實際應用中非常少見。

為了使web頁面內容看起來更加美觀,我們會對頁面進行美化加工色彩、邊框、浮動等更是基本操作,接下來就談談這些操作。

我們可以採用顏色名稱也可以使用顏色rgb16進製制值,來設定前景或背景的顏色。有的人可能會擔心沒有美學功底無法搭配出合適的顏色,這些擔心都是多餘的,有很多配色方案是可以直接使用的。

除了顏色之外,元素尺寸也是影響介面美觀的一大因素。我們可以用 height 和 width 設定元素內容佔據的尺寸。常見的尺寸單位有:像數 px,百分比 %等。

對於元素中的文字,我們可以簡單的設定text-align屬性為left, center, right即可,顯然預設時是左對齊。

元素屬性position可以對元素進行定位,有如下幾個值:static 靜態,relative 相對,fixed 固定,absolute 絕對。只有在設定了position屬性後才能設定元素的其他屬性,否則定位無效。

元素預設定位屬性為static,就是說如果不設定position,預設position的值為static。設定屬性為relative會使元素相對於靜態時位置偏移,偏移量通過指定left、top等值來確定。設定屬性為fixed會使元素位置固定不動,即不管怎麼滑動元素位置始終在瀏覽器視窗的固定位置。設定屬性為absolute會使元素位置對於其設定了定位的最近父元素進行偏移。

overflow屬性可以處理超出指定區域的元素內容。float屬性可以讓元素內容進行移動,便於布局。opacity屬性可以設定元素的不透明度,常用於處理。

CSS學習小結

要選擇具有特定 id 的元素,請寫乙個井號 後跟該元素的 id。注意 id 名稱不能以數字開頭 選擇擁有特定 class 的元素,請寫乙個句點 字元,後面跟類名。通用選擇器 選擇頁面上的所有的 html 元素。外部css 內部css 行內css 注釋 背景 background color dodg...

css學習小結

html 在乙個網頁中負責的事情是乙個頁面的結構 css 層疊樣式表 在乙個網頁中主要負責了頁面的資料樣式。編寫css 的方式 第一種 在style 標籤中編寫 css 只能用於本頁面中,復用性不強。格式 例子 第二種 可以引入外部的css 檔案。推薦使用。方式1 使用 link 標籤。推薦使用 格...

CSS3學習小結

css cascading style sheet 級聯樣式 層疊樣式 顯示資料與顯示分離 寫在標籤之內寫style屬性,style屬性中寫css 例 在head標籤中增加style標籤,集中寫css 單獨寫乙個css檔案,head中用link標記使用css檔案 4 匯入樣式 匯入css impor...