CSS學習總結

2021-10-22 10:26:47 字數 1262 閱讀 6756

css是級聯樣式表的縮寫,它用來將html撰寫頁面的內容在螢幕上呈現,即是用來修飾html的元素以及許多方面的布局等等。

一條css樣式規則由選擇器和一條或多條宣告組成。選擇器是要指定的物件,每條宣告由乙個屬性和值組成。選擇器有元素選擇器,id選擇器和class選擇器。其中class最為普遍。用法是:在html定義了class的值,然後便可以在css檔案中使用class的值,從而來對這個值所對應的元素進行操作。讓css對頁面生效,一般有三種方法,分別是外部樣式表,內部樣式表,內聯樣式。我們最好使用外部樣式表,即在css檔案中來對html檔案中的元素進行操作。css可以更改各種各樣的顏色,我們可以在colordrop和lol corlors中挑選**配色。css可以用height 和 width 設定元素內容佔據的尺寸。常見的尺寸單位有:像數 px,百分比 %等。還可以將text-align屬性設定為left, center, right來實現元素中文字的對齊。

css中的盒子模型指的是乙個 html 元素可以看作乙個盒子。從內到外,這個盒子是由內容 content, 內邊距 padding, 邊框 border, 外邊距 margin構成的。

content :盒子的內容,如文字、等

padding :填充,也叫內邊距,即內容和邊框之間的區域

border :邊框,預設不顯示

margin :外邊距,邊框以外與其它元素的區域

我們可以使用position屬性來對元素進行定位,可以設定以下的值:靜態:static,相對:relative,固定:fixed,絕對:absolute。

static為預設的定位方式,它將按照元素在html出現的先後順序從上到下,從左到右進行元素的安排。

relative將把元素相對於他的靜態(正常)位置進行偏移。

fixed將使得元素固定不動,即使你上下左右拖動瀏覽器的滾動條。

absolute將使元素相對於其最近設定了定位屬性(非static)的父元素進行偏移。

當元素內容超過其指定的區域時,我們通過溢位overflow屬性來處理這些溢位的部分。

設定float屬性可以讓元素水平方向上向左或者右移動。

利用opacity可以對元素設定不透明度,值在[0.0~1.0]之間,值越低,透明度越高。一般用於。

通過組合選擇器,能夠更加精確地選擇元素來進行修飾。

此外,css中還有一些偽類或者偽元素。例如一些需求:滑鼠移到某元素上變換背景顏色

超連結訪問前後訪問後樣式不同

離開必須填寫的輸入框時出現紅色的外框進行警示

保證段落的第一行加粗,其它正常

這些可以通過偽類來實現。

CSS學習總結

1.使用外部 extenal 樣式表,相對於內嵌 inline 和內部式 internal 的,有以下優點 樣式 可以復用。乙個外部css檔案,可以被很多網頁共用。便於修改。如果要修改樣式,只需要修改css檔案,而不需要修改每個網頁。提高網頁顯示的速度。如果樣式寫在網頁裡,會降低網頁顯示的速度,如果...

CSS學習總結

選擇器的優先順序 乙個標籤作用於多個樣式層疊時,這些層疊樣式說明都不一樣,那麼標籤上樣式所有層疊樣式的總和。如果這些層疊樣式有相同的宣告時,樣式的優先順序如下 內聯 內部 外部 必須選擇器型別相同 id的優先順序大於類大於元素。id不管在內部還是外部優先順序都是最高的。important 內聯 id...

CSS學習總結

ios不支援background attachment屬性 需要用以下hack方式,body before超出寬度的文字自動省略 效果圖 需要同時加上 overflow hidden 和 white space nowrap text overflow ellipsis 才會起作用。span標籤設定...