html css學習筆記二

2021-10-10 15:08:19 字數 2401 閱讀 9223

css的定義方法是:選擇器

選擇器是將樣式和頁面元素關聯起來的名稱,屬性是希望設定的樣式屬於每個屬性有乙個或者多個值。

2.嵌入式:通過style標籤,在網頁上建立嵌入的樣式表。

3.內聯式:通過標籤的style屬性,在標籤上直接寫樣式。

.......

常用的應用文字的css樣式:

css顏色主要有三種表示方法:

顏色名表示法,如red紅色。

rgb表示:如rgb(255,0,0).

16進製制數值表示,如#ff0000表示紅色,這種用的比較多。

1.標籤選擇器

標籤選擇器,此種選擇器影響範圍大,建議盡量應用在層級選擇器中。

*

div....

2.id選擇器

#box

....

3.類選擇器

通過類名來選擇元素,乙個類可以應用於多個元素,乙個元素也可以使用多個類,應用比較靈活,也可以進行復用,比較常用。

.red

.big

4.層級選擇器

主要世用在選擇父元素下的子元素,或者子元素下的子元素,可以與標籤元素結合使用,減少命名,也可以通過層級防止命名衝突。

.box span

.box .red

.....

....

5.組選擇器

多個選擇器,如果有同樣的樣式設定,可以使用組選擇器。

.box1,.box2,.box3

.box1

.box2

.box3background:red}

...

......

6.偽類及偽元素選擇器

常用的偽類選擇器有hover,表示滑鼠懸浮在元素上時的狀態,偽元素選擇器有before和after,它們可以通過樣式在元素中插入內容。

.box1:hover

.box2:before

...

...

元素在頁面顯示成乙個方塊,類似乙個盒子,css盒子模型就是使用現實中的盒子來做比喻,幫助我們設定元素對應的樣式。把元素叫做盒子,設定對應的樣式分別為盒子的寬度(width)、盒子的高度(height)、盒子的邊框(border)、盒子內的內容和邊框之間的間距(padding)、盒子與盒子之間的間距(margin)。

設定寬高:width:200px;這個寬度指的是盒子內容的寬度, height:200px;這個高度指的是盒子內容的高度。這兩個都不是指盒子整體。

設定邊框:設定一邊的邊框,使用border設定。

設定內間距:設定盒子四邊的內間距可以使用padding來進行設定,其中寫乙個代表四邊全部設定一樣的如padding:10px;,設定4個按照順時針從頂部開始,如padding:10px 20px 30px 40px。

設定外間距:外邊距的設定方法和padding的設定方式相同,使用margin。

1.設定水平居中:margin:x auto;

2.margin負值讓元素位移及邊框合併。

指的是當兩個垂直外邊距相遇的時候,它們將形成乙個外邊框,合併後的外邊距的高度等於兩個發生合併的外邊距的高度中較大者,解決的方式如下:

1.使用這種特性;

2.設定一邊的外邊距,一般設定margin-top

3.將元素浮動或者定位

在兩個盒子巢狀的時候,內部的盒子設定margin-top會加到外邊的盒子上,導致內部的盒子margin-top設定失敗,解決方法如下:

1.外部盒子設定乙個邊框

2.外部盒子設定overflow:hidden;

3.使用偽元素類:

.clearfix:before{

content:'';

display:table; 

當元素的尺寸超過父元素的尺寸時,需要設定父元素顯示溢位的子元素的方式,設定的方式是通過overflow屬性來設定。

overflow的設定項:

1.visible:預設值。內容不會被修剪,會呈現在元素框之外。

2.hidden:內容會被修剪,並且其餘的內容是不可見的,此屬性還會有清除浮動,清除margin-top塌陷的功能。

3.scroll:內容會被修剪,但是瀏覽器會顯示滾動條以便檢視其餘的內容。

4.auto:如果內容被修剪,那麼瀏覽器會顯示滾動條以便檢視其餘的內容。

5.inherit:規定應該從父元素繼承overflow屬性的值。

HTML CSS學習筆記二

在html中,標籤是乙個文本級標籤,裡面只能放文字,和表單元素。在html中,可以使用 同時,這個標籤是乙個自封閉標籤,也可以叫做單標籤。在img標籤中可以加入alt屬性,如 例如 當網頁上的無法正常顯示時,會出現 在html中,為了實現網頁之間或者網頁內錨點之間的跳轉,就必須要確定檔案之間的相對路...

HTML CSS學習筆記

利用標籤中style屬性來改變每個標籤的顯示樣式 適用於單個標籤的樣式修改。不靈活 this is p tag 內嵌形式 可用於同類標籤的樣式統一修改 依然不夠靈活 表示後面的所有table中的文字預設顏色如我所設定。前提是已經存在乙個定義好的css檔案,網頁的一部分樣式需要用到,那麼可以採用這種方...

html css學習筆記

本人正經職業位android 開發,無奈現在社會壓力太大,對做人的要求越來越高,只掌握一門技術根本不好意思說自己是一名程式設計師,更無法在這個社會生存。本人只好順應時代發展的需要,不斷提高自己的綜合水平,提高對自身的要求,選擇了去學習html和css等前端的有關知識,新手入門,記錄一些學習過程中的筆...