2017年5月26日金曜日

開発環境

Head First HTML and CSS (Elisabeth Robson(著)、Eric Freeman(著)、O'Reilly Media)の Chapter 9.(The Box Model: Getting Intimate with Elements)、EXERCISE(No. 6193) を取り組んでみる。

EXERCISE(No. 6193)

Try a few different values for line-height, like 200%, .5em, and 20px to see the effect. Which looks the best? The worst? Which is most readable? When you’re done, make sure you change the line-height back to 1.6em.
Try a few different values for line-height, like 200%, .5em, and 20px to see the effect. Which looks the best? The worst? Which is most readable? When you’re done, make sure you change the line-height back to 1.6em.
Try a few different values for line-height, like 200%, .5em, and 20px to see the effect. Which looks the best? The worst? Which is most readable? When you’re done, make sure you change the line-height back to 1.6em.
Try a few different values for line-height, like 200%, .5em, and 20px to see the effect. Which looks the best? The worst? Which is most readable? When you’re done, make sure you change the line-height back to 1.6em.

コード(Emacs)

HTML5

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="sample2.css">
  </head>
  <body>
    <div id="d0">
      Try a few different values for line-height, like 200%, .5em, and 20px to see the effect. Which looks the best? The worst? Which is most readable? When you’re done, make sure you change the line-height back to 1.6em.      
    </div>
    <div id="d1">
      Try a few different values for line-height, like 200%, .5em, and 20px to see the effect. Which looks the best? The worst? Which is most readable? When you’re done, make sure you change the line-height back to 1.6em.      
    </div>
    <div id="d2">
      Try a few different values for line-height, like 200%, .5em, and 20px to see the effect. Which looks the best? The worst? Which is most readable? When you’re done, make sure you change the line-height back to 1.6em.      
    </div>
    <div id="d3">
      Try a few different values for line-height, like 200%, .5em, and 20px to see the effect. Which looks the best? The worst? Which is most readable? When you’re done, make sure you change the line-height back to 1.6em.      
    </div>
  </body>
</html>

CSS(Stylesheet)

#d0 {
    line-height: 1.9em;
    font-style: italic;
    color: #444444;
    font-family: Georgia;
}
#d1 {
    line-height: 1.9em;
    font-style: italic;
    color: #444444;
    font-family: "Times New Roman";
}
#d2 {
    line-height: 1.9em;
    font-style: italic;
    color: #444444;
    font-family: Times;
}
#d3 {
    line-height: 1.9em;
    font-style: italic;
    color: #444444;
    font-family: serif;
}

0 コメント:

コメントを投稿