HTML and CSS - Getting Started with CSS: Adding a Little Style(classes, selector, rule)

Head First HTML and CSS
(O'Reilly Media)
Elisabeth Robson (著), Eric Freeman (著)

開発環境

OS X Yosemite - Apple (OS)
Safari, Firefox + Firebug, Google Chrome(Webプラウザ、プラグイン)
BBEdit - Bare Bones Software, Inc. (GUI) , Emacs (CUI) (Text Editor)
HTML (マークアップ言語)
Cascading Style Sheets(CSS) (スタイルシート)

Head First HTML and CSS (Elisabeth Robson (著)、 Eric Freeman (著)、O'Reilly Media )のChapter 7(Getting Started with CSS: Adding a Little Style)、EXERCISE(p.293)を解いてみる。

EXERCISE(p.293)

HTML (BBEdit, Emacs)

sample298_1.html



<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8" />
 <title>Untitled</title>
 <link href="sample298_1.css" rel="stylesheet">
</head>
<body>
  <p class="greentea raspberry blueberry">
    the Green Tea Cooler paragraph (PURPLE)
  </p>
  <p class="raspberry blueberry greentea">
    the Green Tea Cooler paragraph (PURPLE)
  </p>
</body>
</html>

CSS(Cascading Style Sheet) (BBEdit, Emacs)

sample298_1.css


p.greentea {
    color: green;
}

p.raspberry {
    color:blue;
}

p.blueberry {
    color: purple;
}

HTML (BBEdit, Emacs)

sample298_1.html


<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8" />
 <title>Untitled</title>
 <link href="sample298_2.css" rel="stylesheet">
</head>
<body>
  <p class="greentea raspberry blueberry">
    the Green Tea Cooler paragraph (GREEN)
  </p>
  <p class="raspberry blueberry greentea">>
    the Green Tea Cooler paragraph (GREEN)
  </p>
</body>
</html>

CSS(Cascading Style Sheet)(BBEdit, Emacs)

sample298_2.css


p.raspberry {
    color:blue;
}

p.blueberry {
    color: purple;
}

p.greentea {
    color: green;
}

HTML (BBEdit, Emacs)

sample298_3.html


<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8" />
 <title>Untitled</title>
 <link href="sample298_3.css" rel="stylesheet">
</head>
<body>
  <p class="greentea raspberry blueberry">
    the Green Tea Cooler paragraph (BLUE)
  </p>
  <p class="raspberry blueberry greentea">>
    the Green Tea Cooler paragraph (BLUE)
  </p>
</body>
</html>

CSS(Cascading Style Sheet) (BBEdit, Emacs)

sample298_3.css


p.blueberry {
    color: purple;
}

p.greentea {
    color: green;
}

p.raspberry {
    color:blue;
}

HTML (BBEdit, Emacs)

sample298_4.html


<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8" />
 <title>Untitled</title>
 <link href="sample298_3.css" rel="stylesheet">
</head>
<body>
  <p class="greentea">
    the Green Tea Cooler paragraph (GREEN)
  </p>

</body>
</html>

Kamimura's blog

2014年11月20日木曜日

HTML and CSS - Getting Started with CSS: Adding a Little Style(classes, selector, rule)

0 コメント:

コメントを投稿