CSS3-04 スタイル 3_html/css_WEB-ITnose-htmlチュートリアル-php.cn

はじめに

1. HTML5-01 の概要
2. HTML5-02 の要素
3. CSS3-01 の概要
4. HTML5-03 ページレイアウト
5. CSS3-02 スタイル 1
6. CSS3-03 スタイル2

リンク

概要

リンクは、さまざまな状態のリソースの場所を指定します。リンクをクリックして、対応するリソースにアクセスします。

リンクのステータス

selector:link: 未訪問のリンクのステータス

selector:visited: 訪問済みのリンクのステータス

selector:hover: リンク上のマウスのステータス

selector:active: リンクがクリックされたときのステータス

リンクステータスの順序ルールを設定します

ホバーステータスはリンクおよび訪問済みステータスの後である必要があります

アクティブステータスはホバーステータスの後である必要があります

例

コード

HTMLドキュメント

关于 HTML/CSS 的博客也写了几篇了。该系列博客主要介绍 HTML 和 CSS 的基础，尚未过多的涉及 HTML5 和 CSS3 （即 HTML/CSS 进阶）的内容。这些博客是按照一定的顺序写的，尽管你可以选择性的只看其中的某篇，但是若你刚开始接触 HTML 和 CSS，那么还是建议你浏览一下前面的文章。相信这样，你会更快理解并接受 HTML 和 CSS。以下是该系列博客的顺序列表：

ログイン後にコピー

CSS ファイル

<!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>

ログイン後にコピー

レンダリング

リスト

概要

HTML では、リストタグの type 属性 (

制御可能なリスト項目マークのスタイル
|属性|意味|
|list-style-type|リスト項目マークのタイプ|
|list-style-image|リスト項目マークを画像として設定|
|list - style-position|リスト項目のマークアップの位置|
Example
code

HTML document

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;}

ログイン後にコピー

CSS document

<!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 が与えるものテーブルの形式がより多様になり、さまざまなテーブルを作成できるようになります。
制御可能なテーブルスタイル
「ラッパースタイル」
Border (ボーダー)
構文: border: 1px Solid blue;
注: デフォルトでは、テーブルのセル間にギャップが生じます。したがって、border プロパティのみを設定すると、二重枠のテーブルが表示されます。セル間のマージンをキャンセルするかどうか、つまり単一の境界線を表示するかどうかを制御するには、border-collapse を使用する必要があります。
パディング
構文:padding: 5px;
サイズ (幅/高さ)
構文: width: 5px; height: 5px;
テキストスタイル
テキストの色(色)
構文: color : orange;
Text-align
水平 (text-align)
構文: text-align: center;
垂直 (vertical-align)
構文:vertical-align:bottom;
Title
構文: caption-側面: 下部;
サンプル
コード

HTMLドキュメント

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

ログイン後にコピー

CSSファイル

<!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>

ログイン後にコピー

効果画像
概要
ナビゲーションバーについてあまり馴染みがないかもしれませんが、リストに関してはもうよく知っているはずです。ナビゲーションバーは HTML の要素ではなく、スタイル付きの HTML リストであり、リスト要素のコンテンツはリンクです。
ナビゲーションバーの種類
垂直ナビゲーションバー
垂直ナビゲーションバーは、指定されたスタイルを持つ HTML リストです
水平ナビゲーションバー
インライン実装を使用します
例: display:inline;
フローティング実装を使用します
用途例：float:left;
例
コード

HTMLドキュメント

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;}

ログイン後にコピー

CSSファイル

<!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>

ログイン後にコピー

レンダリング
概要
「ドロップダウンメニュー」を見たことがあります。「メニュー」という言葉を聞くと、フォーム内のドロップダウンメニューが思い浮かびます。そして、しばらく考えてみます。「このドロップダウンメニューを他にどのようなスタイルができるだろうか」メニューはある？」不満は、これが私の最初の反応だったということを物語っています。ここで、ドロップダウンメニューは、複数の項目を含むブロックレベルの要素 (
) であり、ドロップダウンメニューが表示される要素の直後にあることに注意してください。ドロップダウンメニューを表示する要素とドロップダウンメニューは、ビットフィールドに
が必要です。ドロップダウンメニューはデフォルトでは非表示になっており、ドロップダウンメニューを表示している要素の上にマウスを移動すると、ドロップダウンメニューが表示されます。
ドロップダウンメニューの作成方法
要素を作成する
ドロップダウンメニューを表示する要素とドロップダウンメニューのコンテンツを含む最も外側の
を作成します
要素を作成するドロップダウンメニューを表示する
ドロップダウンメニューのコンテンツを作成する
要素の属性を設定する
ドロップダウンメニューのコンテンツを非表示にする
ホバーにドロップダウンメニューのコンテンツを表示するように設定するドロップダウンメニューを表示する要素の状態
Example
コード

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 中多有不足之处，望请大家多多指点。谢谢！

ログイン後にコピー