HTML5 のスタイルとリスト、CSS の 4 つの状態 links_html/css

ホームページ

ウェブフロントエンド

htmlチュートリアル

HTML5 のスタイルとリスト、CSS の 4 つの状態 links_html/css_WEB-ITnose

Jun 24, 2016 am 11:32 AM

1. HTML5 スタイル

1. タグ:

<style>

ドキュメントタイプの導入

3 つのスタイルシートの挿入。メソッド:

(1) 外部スタイルシート:

<head></head> に記述:

(2) 内部スタイルシート:

&lt ;head></head>に記述する:

(3) インラインスタイルシート:

タグ内に直接記述します。例:

2 番目の HTML5 リスト

タグ

説明

<ol>順序付きリスト <ul>< li><dl&g t;<dt><dd> 1. 注文なしリスト: 2. 順序付きリスト:


順序なしリスト
リスト項目
カスタマイズされたリスト
カスタムリスト項目
説明
使用タグ: <ul>、<li> ;;属性(type ): disc (デフォルトの実線の円)、circle (中空の円)、square (実線の正方形)、none (何も)	Ifリストの前のドットを削除したい場合は、CSS スタイル: list-style-type: none

タグを使用: <ol>、<li>;属性 (タイプ): A、a、I、i、start

3. カスタマイズされたリスト:

使用タグ: <dl>、<dt>、<dd> (<dialog> は < dt>、<dd> はダイアログを示します)

3. CSS リンク 4 つの状態

通常、<a> タグはリンクを表すために使用されます。ジャンプアドレス。<href="#"> は自身へのジャンプを表します

リンクには次の 4 つの状態があります:

1. a: link 通常の未訪問のリンク

2. a: 訪問したリンクが訪問しました

3. a: hover マウスポインタがリンクの上にあります

4. a: active リンクがクリックされた瞬間

例:

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>CSS链接状态</title> 6 <style type="text/css"> 7 a:link,a:visited{ 8 color:#609; 9 text-decoration:none; //去掉下划线10 }11 a:hover,a:active{ 12 color:#C00;13 text-decoration:underline;14 }15 </style>16 </head>17 18 <body>19 <a href="http://www.baidu.com">百度一下，你就知道！</a><br />20 <a href="http://www.jikexueyuan.com">学知识就到极客学院！</a>21 </body>22 </html>

ログイン後にコピー

効果:

さらに、<a> <target> 属性もあり、リンクを開く場所を指定するために使用されます:

(1) target="_blank" :前のページはまだ存在します。新しいページで開きます

(2)target= "_self":現在のページで開く

(3)target="_parent":親スペースで開く

(4)target= "_top":トップページで開く

(3)(4 ) <a> タグを使用した効果です

**<a> には name 属性もあり、name 属性でアンカー (アンカー) 名を指定します。 name 属性を使用して HTML ページにブックマークを作成できます。名前は id に置き換えることができます。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。