ｃｓｓの外部ファイルでのリンクの装飾

質問

学校の課題で今ＨＰを作っています。
外部ファイルでリンクの装飾をしようとしているのですが、
検索してもＨＥＡＤ内に組み込むタイプのタグしか出てきませんでした。

<Style Type="text/css">
<!--
A:link { text-decoration:none; color:#000080; }
A:visited { text-decoration:none; color:#000080; }
A:active { text-decoration:underline; color:#000080; }
A:hover { text-decoration:underline; color:#1e78ff; }
//-->
</Style>
↑このようなものを外部ファイルの場合はどう書けばいいのでしょうか？

つまり↑の内容（リンクの装飾）を↓のような形式に書き換えたいということです。
#title{
font-size:24px;
font-weight:bolder;
font-family:Arial;
}

わかりづらくて申し訳ありませんが、どなたか詳しい方いましたらよろしくお願いします★

回答No.2

noname#107580 · ベストアンサー

こんにちは！

そのままでいけると思いますが・・
出来ませんか？

A:link { text-decoration:none; color:#000080; }
A:visited { text-decoration:none; color:#000080; }
A:active { text-decoration:underline; color:#000080; }
A:hover { text-decoration:underline; color:#1e78ff; }

#title{
font-size:24px;
font-weight:bolder;
font-family:Arial;
}

一部のリンクだけ（id="title"と指定したリンクだけ）の設定を変えたいということでしたら、No.1さんの回答で出来ると思います。

回答No.4

you-jia

こんにちは。

外部でもHEAD内でも先にお答えがあるように、記述方法に変わりはありません。
ただ別ファイルに書けばいいということです。
この別ファイルの記述方法が分からない、ということでしょうか？

外部ファイルは、ｃｓｓを記述し、.cssの拡張子をつけて保存します。例）style.cssなど
本体のHTMLファイルには、このスタイルシートへのリンクをHEAD内に入れます。

<link rel="stylesheet" type="text/css" href="ファイルパス">

見当違いの回答でしたら申し訳ありません。

回答No.3

koutarou504

まずは、

A:link { text-decoration:none; color:#000080; }
A:visited { text-decoration:none; color:#000080; }
A:active { text-decoration:underline; color:#000080; }
A:hover { text-decoration:underline; color:#1e78ff; }

このままで充分です。
また、

A:link{
text-decoration:none;
color:#000080;
}
A:visited{
text-decoration:none;
color:#000080;
}
A:active{
text-decoration:underline;
color:#000080;
}
A:hover{
text-decoration:underline;
color:#1e78ff;
}

以上の様にも書けますが、まったく同じ物です。
尚、

A:link {
text-decoration : none;
color : #000080;
}
A:visited {
text-decoration : none;
color : #000080;
}
A:active {
text-decoration : underline;
color : #000080;
}
A:hover {
text-decoration : underline;
color : #1e78ff;
}

この様にも書け、意味はまったく変わりません。
それこそスペースの数も関係ありません。
物理的には改行コードとかスペースが間に入っていますが
解釈する側はそれらを無視します。
（さすがにそれぞれの文字の途中で改行したりすると問題ありですが・・・）

また、
#title{
font-size:24px;
font-weight:bolder;
font-family:Arial;
}

これは、
#title { font-size:24px; font-weight:bolder; font-family:Arial; }

この様にも書け同じ物です。
書かれている場所は関係ありません。

HTML に書かれる場合と CSS 外部ファイルに書かれる場合の違いは、
HTML に於いて STYLE タグに対応していない物の為に
最初に <!--
最後に // -->
この２つを記述しておく事だけです。

参考URL：

http://www.doraneko.org/webauth/css1/19961217/Overview.html#anchor-pseudo-classes

回答No.1

BLUEPIXY

#title{
font-size:24px;
font-weight:bolder;
font-family:Arial;
}
A#title:link { text-decoration:none; color:#000080; }
A#title:visited { text-decoration:none; color:#000080; }
A#title:active { text-decoration:underline; color:#000080; }
A#title:hover { text-decoration:underline; color:#1e78ff; }
かな
#title A:link {…}
でもいけるかも