CSSを適用させる3つの方法！

記事

IT・テクノロジー

CSSは装飾系を指定するもの。文字サイズを指定したり、色をつけたり、背景に画像をつけたり。。。

CSSを適用させる方法としては3通り。（Javascriptとか置いといて）

①htmlタグに直接書く

②html内の<style></style>の中に書く

③cssのファイルを作る

今回もサクッとわかりやすい解説に努めます！

①htmlタグに直接書く

例えば、下記のようにpタグなどに直接書く方法です。

<p style="color:red;">月曜日は定休日です。</p>

▼▼▼こうなる▼▼▼

下記のように、styleタグ内に書く方法です。

<p style="color: red;">月曜日は定休日です。</p>

<style>

p {

background: yellow;

color: orange;

}

▼▼▼こうなる▼▼▼

気づきましたでしょうか、

上の例ではpタグに、「文字赤くしてよ」という指定と、「文字オレンジにしてよ」っていう指定をしています。

②の<style>の中から指定するより、①の直接指定した方が優先度が高いので、文字色は赤になっています。

ちなみに、Yahoo!ストアクリエイター内にはstyleタグは書けないので、①か③の方法を使います。

例えば、style.cssなどと名前をつけたファイルを作って、それをhtmlに読み込ませます。（このcssを適用してねと指定する）外部cssファイルを読み込むとも言う。

例えばこんな感じで書く。

<link rel="stylesheet" href="css/style.css">

href内に、cssがどこにある何て名前のファイルか指定する。

上記の場合、これを書いたhtmlと同じところにcssというフォルダがあって、その中にあるstyle.cssだよと指定している。

▼つまりこういうこと。。。

例えば、html内には下記のように書いて、、、

<p style="color: red;">月曜日は定休日です。</p>

style.css内には下記のように書いたとすると。。。

▼▼▼こうなる▼▼▼

直接pタグに書いた方が優先度が高いので、文字は赤いままです。

少しでもお役に立てたら嬉しいです。*＾＾*