気まぐれDeveloperブログ: CSSをきちんと勉強する

2015年3月22日日曜日

CSSをきちんと勉強する

CSSを一からお勉強

現在、業務ではStrutsを使用しているが覚える事が沢山あるので
HTML, CSS, JavaScriptがちゃんと勉強できていない!!

という事で今回はCSSお勉強

CSS (Cascading Style Sheets)
ページの見た目を定義する、W3Cの仕様の一つ。
CSS1.0, CSS2.0, CSS2.1, CSS3.0, CSS4.0
とある今回は安定しているCSS2.1をお勉強

公式ページ
http://www.w3.org/TR/CSS2/

基本的なCSSの書き方

セレクタ { プロパティ: 値; }

↓テストHTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>CSSの練習</title>
<style>
/* ① */
p { color: orange; }
</style>

<link rel="stylesheet" href="default.css">
</head>
<body>

<p style="color: violet;">こんにちは</p>
</body>
</html>

① <head>タグ内に<style>タグを使用してCSSを記述する
② 属性として直接書く ★①②より優先される
③ 外部ファイルにCSSを書いて読み込む
↓外部ファイル(default.css)
p { color: skyblue; }

↓表示

②の属性を無くすと・・・

<head>タグに書いた順番で適用される。

セレクタの種類

1. * => ユニバーサルセレクタ, 全ての要素に適用させる
2. 要素めい(p, h1, div) => 要素名を直接指定
3. #id => id要素
4. .class => class要素

例) html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>CSSの練習</title>
<link rel="stylesheet" href="default.css">
</head>
<body>
<h1>H1</h1>
<p id="id1">うまい</p>
<p class="class1">やすい</p>
<p class="class1">はやい</p>
</body>
</html>

例) css
h1 { color: skyblue; }
#id1 { color: orange; }
.class1 { color: violet; }

↓表示