CSSガイド EX

▼基本的なCSS、要素等について紹介しています。


【在宅ワーク】

 

コンテンツメニュー

 ◆Chapter 1

 ◆Chapter 2

 ◆Template

 ◆Tip!

 

★サイト運営者がPHPを学んだ
お勧めの書籍です!
これ一冊で基本的なPHPの仕組み、簡単なプログラムの作成、SQLiteを使ったデータベースなどかなり学べる要素が詰まっています!

↓↓↓ ↓↓↓

PHPレッスンブック―PHP5対応

新品価格
¥2,520から
(2013/2/24 04:38時点)

 

PHPが動作するサーバー

 

はじめてのHP | 無料素材 | タグ辞典 | ツールEX | PHPを学ぼう!

 

◆Chapter 2 - リンク部分に適用

要素名:link{ ~ }
要素名:visited{ ~ }
要素名:hover{ ~ }
要素名:active{ ~ }

リンク部分に対してスタイルを適用したい場合に使用します。
通常は、要素名には「a」を指定しますが、要素名に「#ID名」や「.クラス名」を指定することで特定のリンク部分に別のスタイルを適用させることができます。

 

【index2_5_1.html】

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>リンク部分に適用 - CSSガイドEX</title>
<style type="text/css">
<!--
p{ margin:0; }

/* 普通のリンクの設定(クラスを指定しない) */
a:link{
  /* リンク先の色指定 */
  font-size:12pt;
  color:#0000FF;
  background:#ffffff;
}
a:visited{
  /* 既にアクセス済みの色指定 */
  color:#990099;
  background:#ffffff;
}
a:hover{
  /* マウスが文字に重なった時の色指定 */
  color:#FF3333;
  text-decoration: none; /* 下線を消す */
  background:#ffffff;
}
a:active{
  /* マウスが文字をクリックした時の色指定 */
  color:#3333FF;
  background:#ffffff;
}

/* 特定のクラスが指定されている時の設定 */
a.special:link{
  font-size:14pt;
  color:#0000FF;
  background:#FFCCCC;
}
a.special:visited{
  font-size:14pt;
  color:#990099;
  background:#FFCCCC;
}
a.special:hover{
  font-size:14pt;
  color:#FF3333;
  background:#FFCC66;
}
a.special:active{
  font-size:14pt;
  color:#FFFFFF;
  background:#FF3333;
}

.linkbar{
  font-size:20pt;
  background:#ffffff;
}

/* 特定のクラスに含まれている文字色だけを設定 */
.linkbar a:link{ color:#009933; }
.linkbar a:visited{ color:#990099; }
.linkbar a:hover{ color:#00CC33; }
.linkbar a:active{ color:#FF3300; }

-->
</style>
</head>
<body>
<p>◆通常のリンクの場合</p>
<p><a href="../../contents.php?n=chap2_4">前のページ</a> |
<a href="../../contents.php?n=chap2_6">次のページ</a>
</p>
<p> </p>
<p>◆特定のクラスが指定されている時の場合</p>
<p>
<a href="../../contents.php?n=chap2_4" class="special">前のページ</a> |
<a href="../../contents.php?n=chap2_6" class="special">次のページ</a>
</p>
<p> </p>
<p>◆特定のクラスの含まれているリンクの色だけを変える</p>
<p class="linkbar">
<a href="../../contents.php?n=chap2_4">前のページ</a> |
<a href="../../contents.php?n=chap2_6">次のページ</a>
</p>
<p> </p>
</body>
</html>

 

表示は、こちらのサンプルから確認できます。

 

 

 


 

忍者AdMax

 

ex-mode.net | ツールEX | 素材EX | アフィモール | 初級者向 初めてのホームページ作り | Htmlタグ辞典 | 初めてのプランター菜園 | リンク・ボード
気のみ気のままなブログ | PHPを学ぼう! | ホビ★コレ | 班長日記!

▲UP

Copyright (C) ex-mode.net 2017. All Rights Reserved.