CSS鏈接樣式,用html演示和解釋

以下是一組CSS鏈接樣式代碼,用html演示和解釋:


CSS鏈接樣式,用html演示和解釋

<!DOCTYPE html>
<html>
<head>
  <style>
    /* 初始鏈接樣式 */
    a:link {
      color: #0077cc;
      text-decoration: none;
      border-bottom: 1px dotted #0077cc;
    }
    /* 已訪問鏈接樣式 */
    a:visited {
      color: #660099;
      text-decoration: none;
      border-bottom: 1px dotted #660099;
    }
    /* 滑鼠懸浮鏈接樣式 */
    a:hover {
      color: #ff6600;
      text-decoration: none;
      border-bottom: 1px dotted #ff6600;
    }
    /* 激活鏈接樣式 */
    a:active {
      color: #cc0000 ;
      text-decoration: none;
      border-bottom: 1px dotted #cc0000;
    }
  </style>
</head>
<body>
  <h1>CSS鏈接樣式演示</h1>
  <p>請點擊以下鏈接:</p>
  <ul>
    <li><a href="#">未訪問鏈接</a></li>
    <li><a href="#">未訪問鏈接</a></li>
    <li><a href="#">未訪問鏈接</a></li>
    <li><a href="#">未訪問鏈接</a></li>
  </ul>
</body>
</html>


代碼解釋:


在`head`標簽內,我們定義了四種鏈接狀態的樣式:


1. `a:link`:用於設置未訪問鏈接的樣式。

2. `a:visited`:用於設置已訪問鏈接的樣式。

3. `a:hover`:用於設置滑鼠懸停時鏈接的樣式。

4. `a:visited`:用於設置當前活動鏈接的樣式。


在`body`標簽內,我們創建了一個鏈接列表,用於演示上述鏈接樣式。每個鏈接均使用相同的`<a>`標記,在`href`屬性中指定鏈接的URL。其中`<li>`標記用於創建具有項目符號的列表。


以上就是這組CSS鏈接樣式代碼的演示和說明。這些樣式的目的是為了美化鏈接並提供更好的用戶體驗。

標籤: CSS鏈接樣式
分享給朋友:

“CSS鏈接樣式,用html演示和解釋” 的相關文章

html a標簽target屬性

html a標簽target屬性

HTML語言中的標簽用於定義超鏈接。其中,標簽有一個屬性叫做target,它用於指定鏈接在何處打開。目前,標簽的target屬性有以下四個取值:- _self:鏈接會在當前窗口中打開(默認值),這意味著打開新的文檔或資源時,頁面會在當前瀏覽器窗口中重新加載,並將新文檔或資源顯示在當前窗口中。基於以上講解,編寫標簽鏈接的代碼並使用target屬性指定打開方式的實例:< a href="htpps://sn.qunapu.com" target="_blank">打開示例網站。這段代碼表示鏈接將在新的瀏覽器窗口或標簽頁中打開,能夠實現用戶在訪問完畢後仍能保留原有瀏覽器窗口內容的體驗。…

mark元素使用紅色代表及例子

mark元素使用紅色代表及例子

在 HTML 中,<mark> 元素用於標記或突出顯示文本中的重要或關鍵內容。為了提高用戶瀏覽體驗,這些文本內容通常被渲染成鮮艷的紅色,因為紅色是視覺上最吸引人的顏色之一。 舉個例子,在一篇文章中,我們可能會用 <mark> 標記來標記一段關鍵文字,如下所示:<p>這篇文章將會介紹如何使用 <mark>CSS</mark> 實現代碼高亮顯示。</p >在這個例子中,我們使用 <mark> 標記來突出顯示關鍵詞 "CSS",這使得讀者可以更容易地識別出本文的主題和關鍵內容。…

mark點怎麼設置及設置例子

mark點怎麼設置及設置例子

mark 元素用於標記或高亮文本,非常適合用於文本搜索和結果導航。要在文本中使用 mark 元素,只需要將需要高亮的文本放在 mark 元素內即可。通常情況下,瀏覽器默認為高亮文本設置為黃色。 .highlight {    background-color: lightblue;    color: white;  }```上述代碼會將 mark 元素的背景顏色設置為淺藍色,文本顏色設置為白色。根據實際需要,您可以將顏色更改為您想要的顏色。…

一個簡單的 HTML5 導航菜單的示例代碼

一個簡單的 HTML5 導航菜單的示例代碼

以下是一個簡單的 HTML5 導航菜單的示例代碼,這個導航菜單使用了 HTML5 中的 `nav` 標簽來包裝整個菜單,使用了 Flex 布局來對菜單進行布局和對齊,同時也設置了一些簡單的樣式來美化菜單。…

javascript怎麼改變字體顏色文本顏色代碼

javascript怎麼改變字體顏色文本顏色代碼

這裏是一個簡單的 JavaScript改變文體顏色代碼示例,它會在頁面上創建一個按鈕,點擊該按鈕會使文本顏色發生變化。這段代碼首先在頁面中創建了一個按鈕,然後獲取該按鈕和一個段落元素的引用,接著為按鈕添加了一個事件監聽器,當按鈕被點擊時,段落文本顏色將變成紅色。…

一個簡單的html放煙花特效的代碼

一個簡單的html放煙花特效的代碼

以下是一個簡單的html放煙花特效的代碼,代碼說明:1. 使用html和css定義了一個煙花的基本樣式;2. 使用javascript動態生成多個煙花元素,並使用animation讓其展開,模擬煙花爆炸效果;3. 使用setTimeout函數控制煙花爆炸持續時間,並使用setInterval控制煙花爆炸的觸發時間間隔。…