CSS速成教程 樣式2 5

2022-09-01 13:03:12 字數 2547 閱讀 7469

在 css 的鏈結屬性設定中,我們能設定 color, font-family, background 等等,不同的狀態我們可以設定對應的樣式。下面我們就來看看對應樣式的屬性設定。

a:link --普通的、未被訪問的鏈結 a:visited --使用者已訪問的鏈結 a:hover --滑鼠指標位於鏈結的上方 a:active --鏈結被點選的時刻

這裡我們需要注意的是這四個屬性設定要遵循的順序問題: a:hover 必須位於 a:link 和 a:visited 之後 a:active 必須位於 a:hover 之後

這個一樣的簡單,修改對應的屬性 background-color 就好。 我們動手實驗的話,就將剛才的 css 檔案替換或者新增:

a:link a:visited a:hover a:active

不是所有的時候我們都需要鏈結下面的下劃線,有時很影響美觀。所以這裡我們要在 link 屬性中加入 text-decoration 屬性,將傳指改為空就行 

a:link

css 列表允許防止、改變列表標誌,或者將作為列表項標誌。 學習過 html 的同學應該都比較列了解列表。在這裡我們就簡單的講解下常用的三個屬性,列表型別、列表項影象和簡寫列表屬性。

我們知道,列表有無序,有序之分,無序列表又可以用不同的標記來區分。而 list-style-type 這個屬性我們就可以用來控制標記型別。下面我們就動手實驗一把 在 html 檔案中新增:

<

ul class

="circle"

>

<

li>shiyanlou

li>

<

li>shiyanlou

li>

ul>

<

ul class

="square"

>

<

li>shiyanlou

li>

<

li>shiyanlou

li>

ul>

<

ol class

="upper-roman"

>

<

li>shiyanlou

li>

<

li>shiyanlou

li>

ol>

<

ol class

="lower-alpha"

>

<

li>shiyanlou

li>

<

li>shiyanlou

li>

ol>

在 css 檔案中新增:

ul.circle ul.square ol.upper-roman ol.lower-alpha

說實話,無序列的標記有時看上去確實有些寒酸,就幾個小點變變樣子,下面我們就試著用 list-style-image 屬性讓標記變得高大上。

ul.img1ul.img2

url 中是名稱

在 html 中我們需要修改新增的就是:

所謂的簡寫列表樣式就是說,把所有用於列表的屬性設定於乙個宣告中。 就像下面這樣

li

list-style 的值可以按任何順序列出,而且這些值都可以忽略。只要提供了乙個值,其它的就會填入其預設值。

在**的學習中我們主要了解以下屬性:

border-collapse ---設定是否把**邊框合併為單一的邊框。

border-spacing ---設定分隔單元格邊框的距離。

caption-side --- 設定**標題的位置。

empty-cells ---設定是否顯示**中的空單元格。

table-layout ---設定顯示單元、行和列的演算法。

這些都是預設的屬性,下面我們就通過 css 來定製列表。首先,我們先使用 border—collapse 讓整個列表邊框合併為單線,再使用 width,height 來定製**大小,之後用 background-color 加上背景顏色,text-align 設定字元對其方式,padding 設定內邊據.

輪廓(outline)是繪製於元素周圍的一條線,位於邊框邊緣的外圍,可起到突出元素的作用。 css outline 屬性規定元素輪廓的樣式、顏色和寬度。涉及到的屬性有:

outline 在乙個宣告中設定所有的輪廓屬性。    

outline-color 設定輪廓的顏色。

outline-style 設定輪廓的樣式。

outline-width 設定輪廓的寬度。

為了演示我們先在原來的 html 中加入兩個 p 標籤

shiyanlou is my home

shiyanlou is my home

然後在 css 中加入這幾個屬性的具體設定,設定引數就不過多的贅述:

#p1#p2

CSS速成教程 CSS樣式文字 4

css 文字屬性可定義文字的外觀。通過文字屬性,您可以改變文字的顏色 字元間距,對齊文字,裝飾文字,對文字進行縮排,等等。屬性描述 color 文字顏色 direction 文字方向 line height 行高letter spacing 字元間距 text align 對齊元素中的文字 text...

CSS速成教程 2

派生選擇器 通過依據元素在其位置的上下文關係來定義樣式,可以使標記更加簡潔。派生選擇器允許你根據文件的上下文關係來確定某個標籤的樣式。通過合理地使用派生選擇器,我們可以使 html 變得更加整潔。比方說,你希望列表中的 strong 元素變為紅色,而不是通常的黑色,可以這樣定義乙個派生選擇器 li ...

CSS速成教程 1

css 指的是層疊樣式表 cascading stylesheet 在網頁製作時採用層疊樣式表技術,可以有效地對頁面的布局 字型 顏色 背景和其它效果實現更加精確的控制。學習路徑 css 規則由兩個主要的部分構成 選擇器,以及一條或多條宣告。1 selector 選擇器通常是您需要改變樣式的 htm...