Contents
CSS
cssとはから初めてみましょう。先ほどはHTMLというものを使いました。しかしHTMLだけではただ単に文字を並べただけになります。例えば図を左寄せにしたり、文字を赤くしたりなどなどをする場合CSSが必要になります。
インライン
インラインスタイルは、style属性を使用してHTMLタグに直接入力します。
<p style="color: red">text</p>
これはちなみに
text
赤色表示になります。
内部
埋め込まれた、または内部のスタイルは、ページ全体に使用されます。head
要素の内部では、style
タグがページのすべてのスタイルを決めます。つまりはこんな感じ
<!DOCTYPE html>
<html>
<head>
<title>CSS Example</title>
<style>
p {
color: red;
}
a {
color: blue;
}
</style>
...
ここでのPはP要素 {}このかっこに何をしたいかを書く color : 何色にするか redで色を決めて;で終了を意味します。 p {
color: red;
} この形でCSSを書いてきますきます
これによりa要素のページのすべての段落が赤くなり、すべてのp要素のリンクが青くなります
外部
例えばこのファイルがあります
p {
color: red;
}
a {
color: blue;
}
これをstyle.cssという形で保存します。HTMLのときと一緒ですね。
<!DOCTYPE html>
<html>
<head>
<title>CSS Example</title>
<link rel="stylesheet" href="style.css">
このようにstyle.cssをhtml内にリンクさせることでa要素とp要素に色をつけることができるんですね。htmlのリンクされたページ全てに適用されます。
<link rel="stylesheet" href="style.css"> href="style.css"の部分に保存CSSの名前を当てはめるとリンクされます。今回はstyle.cssなのでhref="style.css"ですね
例えばこれにstyle.cssを適用させます
これを<link rel="stylesheet" href="style.css">として連携させるとこのようになります。文字が赤くなったら成功です!!
次のページ