HTML5 - CSS - The Box Model: Getting Intimate with Elements(line-height, em, %, px)

開発環境

macOS Sierra - Apple (OS)
Emacs (Text Editor)
Safari(Web browser)

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

EXERCISE(No. 6157)

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="sample1.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.6em;
}
#d1 {
    line-height: 200%;
}
#d2 {
    line-height: 0.5em
}
#d3 {
    line-height: 20px;
}

Kamimura's blog

2017年5月25日木曜日

HTML5 - CSS - The Box Model: Getting Intimate with Elements(line-height, em, %, px)

0 コメント:

コメントを投稿