CSS3-04 樣式 3

時間  2019-12-12
標籤 css3 css 樣式 欄目 CSS 简体版
原文   原文鏈接

前言

關於 HTML/CSS 的博客也寫了幾篇了。該系列博客主要介紹 HTML 和 CSS 的基礎，還沒有過多的涉及 HTML5 和 CSS3 （即 HTML/CSS 進階）的內容。這些博客是按照必定的順序寫的，儘管你能夠選擇性的只看其中的某篇，可是若你剛開始接觸 HTML 和 CSS，那麼仍是建議你瀏覽一下前面的文章。相信這樣，你會更快理解並接受 HTML 和 CSS。如下是該系列博客的順序列表：

1. HTML5-01 簡介
2. HTML5-02 元素
3. CSS3-01 簡介
4. HTML5-03 頁面佈局
5. CSS3-02 樣式 1
6. CSS3-03 樣式 2css

連接

  • 概述
    • 連接指定了資源的位置，具備不一樣的狀態。點擊連接能夠訪問相應的資源。
  • 連接的狀態
    • selector:link：未訪問的連接狀態
    • selector:visited：已訪問的連接狀態
    • selector:hover：鼠標放在連接上的狀態
    • selector:active：點擊連接時的狀態
  • 設置連接狀態的順序規則
    • hover 狀態必須在 link 和 visited 狀態以後
    • active 狀態必須在 hover 狀態以後
  • 示例
    • 代碼

      • HTML 文檔html

        <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3-04 樣式 3</title>
    <link rel="stylesheet" href="mystyle.css">
</head>
<body>
    <div>
        <a href="http://www.cnblogs.com/theDesertIslandOutOfTheWorld/" title="博客">世俗孤島</a>
    </div>
</body>
</html>

      • CSS 文件ide

        div
{
    margin: 100px 100px;
    width: 120px;
    height: 26px;
    text-align: center;
    font-size: 24px;
    background-color:lightpink;
}
a:link {text-decoration: none;}
a:hover {text-decoration: underline;}
a:active {text-decoration: overline;}

    • 效果圖佈局

列表

  • 概述
    • 在 HTML 中，咱們可使用列表標籤（<ol>、<ul>）的 type 屬性來設置列表的標記類型。在 CSS 中咱們能夠更加靈活的控制列表的標記。

  • 可控制的列表項標記樣式url

    |屬性|含義|
    |list-style-type|列表項標記的類型|
    |list-style-image|設置列表項的標記爲圖片|
    |list-style-position|列表項標記的位置|code

  • 示例
    • 代碼

      • HTML 文檔orm

        <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3-04 樣式 3</title>
    <link rel="stylesheet" href="mystyle.css">
</head>
<body>
    <ul id="normal">
        <li>First item</li>
        <li>Second item</li>
        <li>Third item</li>
    </ul>
    <ul id="image">
        <li>First item</li>
        <li>Second item</li>
        <li>Third item</li>
    </ul>
</body>
</html>

      • CSS 文檔htm

        #normal
{
    list-style-type: square;
}
#image
{
    list-style-image: url("item_tag.png");
}

    • 效果圖blog

表格

  • 概述
    • CSS 賦予了表格更加多樣的格式，使咱們能夠創造多種多樣的表格。
  • 可控制的表格樣式
    • 「包裝樣式」
      • 邊框（Border）
        • 語法：border: 1px solid blue;
        • 注意：表格默認狀況下，單元格之間會有一個間距。因此，若你只設置了 border 屬性，那麼你看到的將是一個雙邊框的表格。須要使用 border-collapse 來控制是否取消單元格之間的邊距，即顯示單邊框。
      • 填充（Padding）
        • 語法：padding: 5px;
      • 尺寸（width/height）
        • 語法: width: 5px; height: 5px;
    • 文本樣式
      • 文本顏色（color）
        • 語法: color: orange;
      • 文本對齊（text-align）
        • 水平（text-align）
          • 語法：text-align: center;
        • 垂直（vertical-align）
          • 語法：vertical-align: bottom;
    • 標題
      • 語法：caption-side: bottom;
  • 示例
    • 代碼

      • HTML 文檔圖片

        <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3-04 樣式 3</title>
    <link rel="stylesheet" href="mystyle.css">
</head>
<body>
    <table>
        <caption>Tabel 1-1</caption>
        <tr>
            <th>屬性</th>
            <th>含義</th>
            <th>備註</th>
        </tr>
        <tr>
            <td>border</td>
            <td>邊框</td>
            <td class="red">注意 border-collapse 屬性</td>
        </tr>
        <tr>
            <td>padding</td>
            <td>填充</td>
            <td class="red">隨便玩</td>
        </tr>
    </table>
</body>
</html>

      • CSS 文件

        table
{
    width: 450px;
    height: 200px;
}
table,th,td
{
    border: 2px solid pink;
    border-collapse: collapse;
}
th
{
    background-color: lightgray;
}
td
{
    padding-left: 30px;
}
.red 
{
    color: red;
    text-align: left;
    vertical-align: top;
}
caption
{
    margin-top: 10px;
    caption-side: bottom;
}

    • 效果圖

導航欄

  • 概述
    • 說到導航欄，你們可能比較陌生；可是到目前爲止，說到列表，你們應該很熟悉了。導航欄並非 HTML 中的元素，它是設置了樣式的 HTML 列表，其列表元素的內容爲一個連接。
  • 導航欄的種類
    • 垂直導航欄
      • 垂直導航欄就是具有指定樣式的 HTML 列表
    • 水平導航欄
      • 使用 內聯 實現
        • 如：display:inline;
      • 使用 浮動 實現
        • 如：float:left;
  • 示例
    • 代碼

      • HTML 文檔

        <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3-04 樣式 3</title>
    <link rel="stylesheet" href="mystyle.css">
</head>
<body>
    <ul>
        <li><a href="#">客服管理</a></li>
        <li><a href="#">財務管理</a></li>
        <li><a href="#">產品管理</a></li>
        <li><a href="#">預定管理</a></li>
    </ul>
</body>
</html>

      • CSS 文件

        ul
    {
        /*取消 HTML 列表的樣式*/
        list-style-type: none;
        margin: 0;
        padding: 0;
        /*設置 導航欄 的樣式*/
        background-color: rgba(0,0,255,0.5);
    }
    li
    {
        /*使用 浮動 實現橫向導航欄*/
        float: left;
    }
    a:link,a:visited
    {
        /*增長可點擊區域*/
        display: block;
        width: 150;
        /*設置文本樣式*/
        font-size: 20px;
        font-weight: bold;
        text-align: center;
        text-decoration: none;
        color: orange;
        /*設置 填充寬度*/
        padding: 7px;
    }
    a:hover,a:active
    {
        background-color: blue;
    }

    • 效果圖

下拉菜單

  • 概述
    • 不知你們看到 「下拉菜單」 這四個字時，想到的是否是表單中的下拉菜單，是否是還苦思冥想了一小會兒：「這下拉菜單還能有什麼樣式？」。不滿告訴你，個人第一反應就是這樣。那麼我如今告訴你，這裏的下拉菜單就是一個包含多個條目的塊級元素（<div>），緊跟在要展現下拉菜單的元素後邊，須要注意的是 展現下拉菜單的元素 和 下拉慘淡的內容須要位域一個 <div>。下拉菜單默認狀況下是隱藏，當鼠標移動到展現下拉菜單的元素上時，使下拉菜單顯示出來便可。
  • 建立下拉菜單的方法
    • 建立元素
      • 建立最外側 <div>，包含 展現下拉菜單的元素，和下拉菜單的內容
      • 建立展現下拉菜單的元素
      • 建立下拉菜單的內容
    • 設置元素屬性
      • 隱藏下拉菜單內容
      • 設置在 展現下拉菜單的元素的 hover 狀態下，展現下拉菜單的內容
  • 示例
    • 代碼

      • HTML 文檔

        <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3-04 樣式 3</title>
    <link rel="stylesheet" href="mystyle.css">
</head>
<body>
    <ul>
        <li><a href="#">客服管理</a></li>
        <li>
            <div class="dropdown">
                <a href="#" class="dropbtn">財務管理</a>
                <div class="dropdown-content">
                    <a href="#">人員分支</a>
                    <a href="#">產品類型</a>
                    <a href="#">資金記錄</a>
                </div>
            </div>
        </li>
        <li><a href="#">產品管理</a></li>
        <li><a href="#">預定管理</a></li>
    </ul>
</body>
</html>

      • CSS 文件

        ul
{
    /*取消 HTML 列表的樣式*/
    list-style-type: none;
    margin: 0;
    padding: 0;
}
li
{
    /*使用 浮動 實現橫向導航欄*/
    float: left;
    /*設置 導航欄 的樣式*/
    background-color: rgba(0,0,255,0.5);
}
a:link,a:visited
{
    /*增長可點擊區域*/
    display: block;
    width: 150;
    /*設置文本樣式*/
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    color: orange;
    /*設置 填充寬度*/
    padding: 7px;
}
a:hover,a:active
{
    background-color: blue;
}
/*默認隱藏下拉菜單*/
.dropdown-content 
{
    display: none;
    background-color: lightgray;
}
/*顯示下拉菜單*/
.dropdown:hover .dropdown-content
{
    display: block;
}

    • 效果圖

聲明

關於 CSS 的介紹已經差很少了，可是總感受仍是很無力，仍是不能爲所欲爲的控制 HTML 元素。是的，對於 HTML 元素的佈局，咱們還沒涉及到，還不知道如何設置一個 HTML 元素的位置。仍是不要着急的好，先回顧一下前幾篇 Blog 中的知識，整理整理思路。在接下來的 Blog，我會介紹如何使用 CSS 佈局 HTML 元素，敬請期待！Blog 中多有不足之處，望請你們多多指點。謝謝！
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程