2 2.3...................... 17 2.3.1............................... 17 2.3.2............................. 17 2.3.3....................... 17 2.3.4....

CSS revision01 2012 9 24 Copyright c 2007 2012 Daikoku Manabu This tutorial is licensed under a Creative Commons Attribution 2.1 Japan License. 1 CSS 4 1.1 CSS................................... 4 1.1.1............................ 4 1.1.2 HTML............................... 4 1.1.3 CSS................................. 4 1.1.4............................... 4 1.2.................................... 4 1.2.1..................................... 4 1.2.2.................................... 5 1.2.3................................. 5 1.2.4...................................... 5 1.2.5............................... 5 1.2.6...................................... 6 1.3.................................... 6 1.3.1............................ 6 1.3.2............................. 6 1.3.3............................. 7 1.3.4.......................... 8 1.3.5........................... 8 1.4........................................... 9 1.4.1.................................... 9 1.4.2 16............................ 9 1.4.3 10............................ 9 1.4.4...................................... 10 1.4.5............................. 11 1.5...................................... 11 1.5.1............................... 11 1.5.2.................................... 11 1.5.3.................................... 12 1.5.4 em...................... 12 1.6.......................................... 13 1.6.1.................................. 13 1.6.2.......................... 13 2 14 2.1.................................... 14 2.1.1........................... 14 2.1.2................................ 14 2.2................................... 15 2.2.1................................. 15 2.2.2.................................. 15 2.2.3................................ 15 2.2.4 ID.................................. 16 2.2.5................................. 16

2 2.3...................... 17 2.3.1............................... 17 2.3.2............................. 17 2.3.3....................... 17 2.3.4............................... 18 2.3.5............................... 18 2.4........................... 19 2.4.1............................. 19 2.4.2.................................. 20 2.4.3.................................. 20 2.4.4................................ 21 2.4.5................................ 21 2.4.6................................ 22 2.5......................................... 22 2.5.1................................ 22 2.5.2............................... 23 3 23 3.1........................................ 23 3.1.1........................... 23 3.1.2............................... 24 3.1.3................................ 25 3.1.4............................. 25 3.2................................ 26 3.2.1................................ 26 3.2.2................... 26 3.2.3.................................. 26 3.2.4.................................... 27 3.2.5.......................... 28 3.3.................................... 28 3.3.1........................... 28 3.3.2................................. 29 4 29 4.1.................................... 29 4.1.1............................... 29 4.1.2.......................... 29 4.1.3........................... 30 4.1.4..................................... 30 4.2.................................... 30 4.2.1............................ 30 4.2.2............................... 30 4.2.3............................. 31 4.3...................................... 31 4.3.1............................... 31 4.3.2............................ 32 4.4........................................ 33 4.4.1................................ 33 4.4.2................................ 33 4.4.3................................. 34 4.4.4................................. 35 4.4.5............................. 35 4.4.6...................................... 36 4.5........................................ 37 4.5.1................................ 37

3 4.5.2............................. 38 4.5.3................................ 39 4.6................................... 39 4.6.1............................. 39 4.6.2............................. 40 4.6.3................................ 41 4.6.4................... 41 4.7.................................... 42 4.7.1............................ 42 4.7.2.................................... 42 4.7.3................................ 43 4.7.4...................................... 44 4.8........................................ 44 4.8.1.......................... 44 4.8.2.................................. 45 4.8.3............................. 46 4.8.4............................. 46 4.8.5.......................... 47 4.9......................................... 47 4.9.1................................. 47 4.9.2............................... 48 4.9.3................................ 48 4.9.4........................... 49 49 51

4 1 CSS 1 CSS 1.1 CSS 1.1.1 (document) (structure) (style) 1.1.2 HTML (web page) (tag) HTML (Hypertext Markup Language) HTML HTML (HTML document) HTML (markup language) HTML W3C(World Wide Web Consortium) 1 1.1.3 CSS CSS (Cascading Style Sheets) CSS (style sheet) CSS (style sheet language) CSS HTML W3C 1.1.4 CSS CSS HTML HTML 1.2 1.2.1 (rule) p { color: green; p p { color: green; 1 URL http://www.w3.org/

1.2. 5 p { color: green; 1.2.2 (selector) em { color: red; em 2 1.2.3 (declaration block) (declaration) {... ({) () { color: green; background-color: aqua; 1.2.4 (declaration) : ; color: green; color green (property) color background-color (value) 1.2.5 (space) (tab) (line feed) (carriage return) (form feed) 5 (white space) CSS ( : ) body { background-color: orange; body { background-color: orange;

6 1 CSS 2 1.2.6 CSS (comment) CSS /* */ CSS /* I am a comment. */ /* I am a comment which contains a line feed. */ /* I am a comment /* comment */ which contains a comment. */ (comment out) (comment out) (comment in) 1.3 1.3.1 3 (external style sheet) (internal style sheet) (inline style sheet) 1.3.2 HTML (external style sheet) HTML HTML (style sheet file) CSS.css HTML HTML head link link HTML rel href URL

1.3. 7 HTML link rel stylesheet namako.css CSS HTML HTML head <link rel="stylesheet" href="namako.css"> link namako.css HTML HTML HTML external.css body { background-color: orange; HTML external.html <title> </title> <link rel="stylesheet" href="external.css"> 1.3.3 HTML head style style HTML style (internal style sheet) HTML head <style> p { color: blue; </style> style HTML p HTML HTML HTML p HTML internal.html <title> </title> <style> p { color: blue; </style> <p> </p> <p> </p>

8 1 CSS 1.3.4 HTML style style CSS style (inline style sheet) HTML <p style="color: maroon;"> </p> p HTML HTML p style HTML inline.html <title> </title> <p style="color: maroon; background-color: silver;"> </p> <p style="color: yellow; background-color: green;"> </p> 1.3.5 (import) @import ( @import statement) @import @import url( URL ); @import @import URL HTML body p p module.css import.css module.css p { color: maroon; import.css @import url(module.css); body { background-color: silver; HTML import.html <title> </title>

1.4. 9 <link rel="stylesheet" href="import.css"> <p> </p> <p> </p> 1.4 1.4.1 CSS CSS 16 10 3 1.4.2 16 16 # 2 16 16 #800080 16 colhex.css h1 { color: #ff8080; h2 { color: #ff0080; h3 { color: #ff8000; HTML colhex.html <title>16 </title> <link rel="stylesheet" href="colhex.css"> <h1>#ff8080</h1> <h2>#ff0080</h2> <h3>#ff8000</h3> 16 2 16 2 1 1 f ff #3cf #33ccff 1.4.3 10 10 rgb(,, )

10 1 CSS 0 255 10 10 rgb(128, 0, 128) 10 coldec.css h1 { color: rgb(0, 128, 0); h2 { color: rgb(0, 192, 64); h3 { color: rgb(64, 192, 0); HTML coldec.html <title>10 </title> <link rel="stylesheet" href="coldec.css"> <h1>rgb(0, 128, 0)</h1> <h2>rgb(0, 192, 64)</h2> <h3>rgb(64, 192, 0)</h3> 1.4.4 (color keyword) purple CSS 147 16 16 16 16 red #ff0000 maroon #800000 white #ffffff lime #00ff00 green #008000 silver #c0c0c0 blue #0000ff navy #000080 gray #808080 yellow #ffff00 olive #808000 black #000000 fuchsia #ff00ff purple #800080 orange #ffa500 aqua #00ffff teal #008080 colword.css h1 { color: blue; h2 { color: aqua; h3 { color: teal; HTML colword.html <title> </title> <link rel="stylesheet" href="colword.css"> <h1>blue</h1> <h2>aqua</h2> <h3>teal</h3>

1.5. 11 1.4.5 256 256 3 = 16777216 (web safe color) 216 16 00 33 66 99 cc ff 6 6 3 = 216 #ffff00 #339966 #00ffcc 1 16 #99ccff #9cf websafe.css h1 { color: #cf0; h2 { color: #69f; h3 { color: #c03; HTML websafe.html <title> </title> <link rel="stylesheet" href="websafe.css"> <h1>#cf0</h1> <h2>#69f</h2> <h3>#c03</h3> 1.5 1.5.1 CSS 0 CSS 2 cm 10 7 7cm 2 1.5.2 (absolute length unit) CSS cm mm in pt pc 1 0.1 1 2.54 1 72 1 0.3514 1 6 1 12

12 1 CSS font-size absolute.css h1 { font-size: 1in; h2 { font-size: 2cm; h3 { font-size: 3pc; h4 { font-size: 10mm; h5 { font-size: 20pt; HTML absolute.html <title> </title> <link rel="stylesheet" href="absolute.css"> <h1>1in</h1> <h2>2cm</h2> <h3>3pc</h3> <h4>10mm</h4> <h5>20pt</h5> 1.5.3 (relative length unit) CSS em px 1 1 letter-spacing em relative.css h1 { letter-spacing: 0em; h2 { letter-spacing: 1em; h3 { letter-spacing: 2em; HTML relative.html <title> </title> <link rel="stylesheet" href="relative.css"> <h1> </h1> <h2> </h2> <h3> </h3> 1.5.4 em em em

1.6. 13 fontsize.css body { font-size: 20px; h1 { font-size: 4em; h2 { font-size: 2em; h3 { font-size: 1em; HTML fontsize.html <title>em </title> <link rel="stylesheet" href="fontsize.css"> <h1> </h1> <h2> </h2> <h3> </h3> 1.6 1.6.1 HTML HTML (inheritance) 40px body body body p em 40px inherit.css body { font-size: 40px; HTML inherit.html <title> </title> <link rel="stylesheet" href="inherit.css"> <p> <em> </em> </p> 1.6.2 p 2em relinhe.css body { font-size: 10pt; p { font-size: 2em; HTML relinhe.html

14 2 <title> </title> <link rel="stylesheet" href="relinhe.css"> <p> <em> </em> </p> HTML em p (20pt) p em 2em em 10pt 2 2 40pt 2em 20pt 2 2.1 2.1.1 (selector) 1.2.2 (rule) (declaration block) em { color: red; em em 2.1.2 (universal selector) (type selector) (class selector) ID (ID selector) (attribute selector) (pseudo-class selector) (pseudo-element selector) (complex selector) (selector list) ID 2.2 2.3 2.4

2.2. 15 2.2 2.2.1 (universal selector) 1 (asterisk) * { color: green; universal.css * { color: green; HTML universal.html <title> </title> <link rel="stylesheet" href="universal.css"> <h1> </h1> <p> </p> <pre> </pre> 2.2.2 1.2.2 (type selector) 2.2.3 class (class selector) (dot). class.tokumori tokumori class class.css.udon { color: red;.tokumori { background-color: #9ff; HTML class.html <title> </title> <link rel="stylesheet" href="class.css"> <p class="udon"> </p>

16 2 <p class="tokumori"> </p> <p class="tokumori udon"> </p> 2.2.4 ID id ID ID (ID selector) ID (sharp) ID # ID ID id #id000 id000 ID id id.css #id000 { color: teal; #id001 { color: orange; #id002 { color: purple; HTML id.html <title>id </title> <link rel="stylesheet" href="id.css"> <p id="id000">id id000 </p> <p id="id001">id id001 </p> <p id="id002">id id002 </p> 2.2.5 (attribute selector) (square bracket) [ ] [onclick] onclick [ =" "] [onclick="alert( hoge )"]

2.3. 17 alert( hoge ) onclick attribute.css [onclick] { background-color: #9ff; [onclick="alert( hoge )"] { color: red; HTML attribute.html <title> </title> <link rel="stylesheet" href="attribute.css"> <p>onclick </p> <p onclick="null">onclick </p> <p onclick="alert( hoge )"> alert( hoge ) onclick </p> 2.3 2.3.1 CSS (pseudo-class) (pseudo-class name) hover 2.3.2 (pseudo-class selector) (colon) : p:hover 2.3.3 (user action pseudo-class) hover active focus action.css

18 2 #id000:hover { background-color: #99f; #id001:active { background-color: #f99; #id002:focus { background-color: #ff9; #id003:focus { background-color: #9ff; HTML action.html <title> </title> <link rel="stylesheet" href="action.css"> <p id="id000"> </p> <p id="id001"> </p> <form> <p><input id="id002" type="text"></p> <p><input id="id003" type="text"></p> </form> 2.3.4 a (anchor) (link pseudo-class) link visited LVHA link visited hover active anchor.css a:link { color: green; a:visited { color: navy; a:hover { color: orange; a:active { color: aqua; HTML anchor.html <title> </title> <link rel="stylesheet" href="anchor.css"> <p><a href="http://www.kantei.go.jp/">www.kantei.go.jp</a></p> <p><a href="http://www.jaxa.jp/">www.jaxa.jp</a></p> 2.3.5 CSS HTML (pseudo-element) (pseudo-element name)

2.4. 19 first-letter first-line (pseudo-element selector) (colon) :: p::first-letter first.css #id000::first-letter { font-size: 80px; color: white; background-color: green; #id001::first-line { font-size: 80px; color: white; background-color: maroon; HTML first.html <title> </title> <link rel="stylesheet" href="first.css"> <p id="id000"> </p> <p id="id001"> </p> 2.4 2.4.1 (combinator) (complex selector) (descendant combinator) (child combinator) (adjacent sibling combinator) (general sibling combinator)

20 2 2.4.2 (descendant combinator) #id000 p #id000 p descendant.css #id000 p { background-color: yellow; #id001 p { background-color: aqua; HTML descendant.html <title> </title> <link rel="stylesheet" href="descendant.css"> <div id="id000"> <p> id000 </p> <div> <p> id000 </p> </div> <blockquote> id000 </blockquote> </div> <div id="id001"> <p> id001 </p> <div> <p> id001 </p> </div> <blockquote> id001 </blockquote> </div> 2.4.3 (child combinator) (greater than) body > p body p child.css body > p { background-color: #9f9; HTML child.html <title> </title>

2.4. 21 <link rel="stylesheet" href="child.css"> <p> body </p> <div> <p> body </p> </div> <blockquote> body </blockquote> 2.4.4 (adjacent sibling combinator) (plus) h1 + p h1 p adjacent.css h1 + p { background-color: #f99; HTML adjacent.html <title> </title> <link rel="stylesheet" href="adjacent.css"> <h1> </h1> <p> </p> <p> </p> 2.4.5 (general sibling combinator) (tilde) #id000 ~ p #id000 p general.css #id000 ~ p { background-color: #99f; HTML general.html <title> </title>

22 2 <link rel="stylesheet" href="general.css"> <div> <h2 id="id000">id id000 </h2> <p> </p> <p> </p> </div> <div> <p> </p> </div> 2.4.6 (selector list) (comma) h1, h2, h3 h1 h2 h3 list.css h1, h2, h3 { background-color: lime; HTML list.html <title> </title> <link rel="stylesheet" href="list.css"> <h1> </h1> <h2> </h2> <h3> </h3> <h4> </h4> 2.5 2.5.1 <h2 class="appendix" id="answer"> A </h2> h2.appendix #answer ID

(specificity) ID 2.5.2 4 10 a b c d a b c d 1 0 ID HTML specificity.css p { background-color: lime;.deluxe { background-color: aqua; #id000 { background-color: yellow; #id001 { background-color: orange; HTML specificity.html <title> </title> <link rel="stylesheet" href="specificity.css"> <p> </p> <p class="deluxe">deluxe </p> <p class="deluxe" id="id000"> deluxe ID id000 </p> <p class="deluxe" id="id001" style="background-color: silver;"> deluxe ID id001 </p> 23 3 3.1 3.1.1 CSS

24 3 3.1.2 (font family) (font family name) font-family h1 { font-family: Helvetica; Helvetica font-family h2 { font-family: Georgia, Times, Chicago; CSS (generic font family name) serif sans-serif monospace cursive fantasy (proportional) (serif) HTML family.css p { font-size: 30px;.serif { font-family: serif;.sans-serif { font-family: sans-serif;.monospace { font-family: monospace;.cursive { font-family: cursive;.fantasy { font-family: fantasy; HTML family.html <title> </title> <link rel="stylesheet" href="family.css"> <p class="serif">serif</p> <p class="sans-serif">sans-serif</p> <p class="monospace">monospace</p> <p class="cursive">cursive</p> <p class="fantasy">fantasy</p>

3.1. 25 3.1.3 font-weight 100 200 300 normal bold normal bold blockquote { font-weight: bold; HTML normal bold weight.css p { font-family: sans-serif; font-size: 30pt;.normal { font-weight: normal;.bold { font-weight: bold; HTML weight.html <title> </title> <link rel="stylesheet" href="weight.css"> <p class="normal">normal</p> <p class="bold">bold</p> 3.1.4 (roman) (oblique) (italic) font-style normal oblique italic normal oblique italic blockquote { font-style: oblique; HTML style.css p { font-family: sans-serif; font-size: 30pt;.normal { font-style: normal;.oblique { font-style: oblique;.italic { font-style: italic;

26 3 HTML style.html <title> </title> <link rel="stylesheet" href="style.css"> <p class="normal">roman</p> <p class="oblique">oblique</p> <p class="italic">italic</p> 3.2 3.2.1 3.2.2 (alignment) text-align left right center left right center blockquote { text-align: right; HTML align.css p { font-size: 30pt;.left { text-align: left;.right { text-align: right;.center { text-align: center; HTML align.html <title> </title> <link rel="stylesheet" href="align.css"> <p class="left"> </p> <p class="right"> </p> <p class="center"> </p> 3.2.3 (indent) CSS 1

3.2. 27 text-indent 1 p { text-indent: 3em; 1 3 indent.css p { font-size: 40pt; text-indent: 1em; HTML indent.html <title> </title> <link rel="stylesheet" href="indent.css"> <p> 1 1 text-indent 1em p </p> 3.2.4 CSS line-height blockquote { line-height: 1.5em; 1.5 3 height.css p { font-size: 40pt; line-height: 3em; HTML height.html <title> </title> <link rel="stylesheet" href="height.css"> <p> 3

28 3 2 </p> 3.2.5 white-space nowrap 1 HTML nowrap.css td { font-size: 40px;.nowrap { white-space: nowrap; HTML nowrap.html <title> </title> <link rel="stylesheet" href="nowrap.css"> <table><tr> <td> </td> <td class="nowrap"> 1 </td> </tr></table> 3.3 3.3.1 text-decoration underline overline line-through none blockquote { text-decoration: underline; HTML decoration.css.underline { text-decoration: underline;.overline { text-decoration: overline;.line-through { text-decoration: line-through;

29 HTML decoration.html <title> </title> <link rel="stylesheet" href="decoration.css"> <p class="underline"> </p> <p class="overline"> </p> <p class="line-through"> </p> 3.3.2 text-shadow p { text-shadow: 10px 8px 6px gray; 10 8 6 HTML textshadow.css p { font-size: 40px; text-shadow: 10px 8px 6px gray; HTML textshadow.html <title> </title> <link rel="stylesheet" href="textshadow.css"> <p> </p> 4 4.1 4.1.1 CSS HTML (box) 4.1.2 (content edge) (padding edge) (border edge) (margin edge)

30 4 4.1.3 (content area) (padding) (border) (margin) 4.1.4 1.2 background-color background-color background-color transparent 4.2 4.2.1 HTML CSS display block inline list-item 4.9 4.2.2 div p blockquote pre (block box) display block a { display: block; a HTML a block.css a { display: block; HTML block.html <title> </title> <link rel="stylesheet" href="block.css">

4.3. 31 <a href="http://www.w3.org/">w3c</a> <a href="http://www.ietf.org/">ietf</a> <a href="http://www.ecma.org/">ecma</a> 4.2.3 span a em (inline box) display inline p { display: inline; p HTML p inline.css p { display: inline; HTML inline.html <title> </title> <link rel="stylesheet" href="inline.css"> <p> </p> <p> </p> <p> </p> 4.3 4.3.1 padding blockquote { padding: 20px; 20 HTML padding.css p { font-size: 40px; color: #00c; background-color: #9ff; #id000 { padding: 20px; #id001 { padding: 40px; #id002 { padding: 80px; HTML padding.html <title> </title> <link rel="stylesheet" href="padding.css">

32 4 <p> </p> <p id="id000"> 20 </p> <p id="id001"> 40 </p> <p id="id002"> 80 </p> 4.3.2 4 p { padding: 10px 20px 30px 40px; 10 20 30 40 2 3 2 3 4 padding-top padding-bottom padding-left padding-right HTML padtrbl.css p { font-size: 40px; color: #090; background-color: #ff9; #id000 { padding: 10px 20px 40px 80px; #id001 { padding-top: 80px; padding-right: 40px; padding-bottom: 20px; padding-left: 10px; HTML padtrbl.html <title> </title> <link rel="stylesheet" href="padtrbl.css"> <p id="id000"> 10 20 40 80 </p> <p id="id001"> 80 40 20 10 </p>

4.4. 33 4.4 4.4.1 border blockquote { border: 20px solid red; 20 HTML border.css p { font-size: 30px; color: maroon; background-color: silver; padding: 20px; border: 10px solid blue; HTML border.html <title> </title> <link rel="stylesheet" href="border.css"> <p> 10 </p> 4.4.2 border-style blockquote { border-style: solid; none hidden solid dashed dotted double groove ridge inset outset none HTML borderstyle.css p { text-align: center;

34 4 font-size: 30px; color: #900; background-color: #6ff; padding: 30px; border: 10px solid #690;.none { border-style: none;.solid { border-style: solid;.dashed { border-style: dashed;.dotted { border-style: dotted;.double { border-style: double;.groove { border-style: groove;.ridge { border-style: ridge;.inset { border-style: inset;.outset { border-style: outset; HTML borderstyle.html <title> </title> <link rel="stylesheet" href="borderstyle.css"> <p class="none">none</p> <p class="solid">solid</p> <p class="dashed">dashed</p> <p class="dotted">dotted</p> <p class="double">double</p> <p class="groove">groove</p> <p class="ridge">ridge</p> <p class="inset">inset</p> <p class="outset">outset</p> 4.4.3 border-width blockquote { border-width: 20px; 20 border-style none 0 HTML p { borderwidth.css font-size: 30px; color: #090; background-color: #ff9; padding: 20px; border: 0px solid #00c; #id000 { border-width: 10px; #id001 { border-width: 20px; #id002 { border-width: 40px; HTML borderwidth.html

4.4. 35 border-top-width border-top-style border-top-color border-bottom-width border-bottom-style border-bottom-color border-left-width border-left-style border-left-color border-right-width border-right-style border-right-color 4.1: <title> </title> <link rel="stylesheet" href="borderwidth.css"> <p id="id000"> 10 </p> <p id="id001"> 20 </p> <p id="id002"> 40 </p> 4.4.4 border-color blockquote { border-color: orange; border-color color HTML p { bordercolor.css font-size: 30px; color: #009; background-color: white; padding: 20px; border: 20px solid black; #id000 { border-color: #966; #id001 { border-color: #696; #id002 { border-color: #669; HTML bordercolor.html <title> </title> <link rel="stylesheet" href="bordercolor.css"> <p id="id000"> #966 </p> <p id="id001"> #696 </p> <p id="id002"> #669 </p> 4.4.5 2 4.1

36 4 border HTML p { bortrbl.css font-size: 30px; color: #009; background-color: #9ff; padding: 30px; border: 30px solid #090; #id000 { border-style: dotted solid dashed double; #id001 { border-top-color: red; border-right-color: green; border-bottom-color: blue; border-left-color: yellow; HTML bortrbl.html <title> </title> <link rel="stylesheet" href="bortrbl.css"> <p id="id000"> </p> <p id="id001"> </p> 4.4.6 (rounded corner) border-radius border-radius: 30px; 30 border-radius / border-radius: 60px / 30px; 60 30 border-radius

4.5. 37 border-top-left-radius border-top-right-radius border-bottom-right-radius border-bottom-left-radius 1 2 1 2 1 2 HTML p { borderradius.css font-size: 30px; color: #900; background-color: #9f9; padding: 30px; border: 6px solid #090; #id000 { border-radius: 30px; #id001 { border-radius: 60px / 30px; #id002 { border-radius: 80px 20px 80px 40px / 80px 20px 40px 80px; #id003 { border-top-left-radius: 80px 80px; border-top-right-radius: 20px 20px; border-bottom-right-radius: 80px 40px; border-bottom-left-radius: 40px 80px; HTML borderradius.html <title> </title> <link rel="stylesheet" href="borderradius.css"> <p id="id000"> 30 </p> <p id="id001"> 60 30 </p> <p id="id002"> </p> <p id="id003"> </p> 4.5 4.5.1 margin blockquote { margin: 20px; 20 HTML div { margin.css

38 4 p { background-color: silver; padding: 0px; border: 2px solid red; margin: 10px; font-size: 40px; color: white; background-color: navy; padding: 4px; #id000 { margin: 0px; #id001 { margin: 20px; #id002 { margin: 40px; HTML margin.html <title> </title> <link rel="stylesheet" href="margin.css"> <div><p> </p></div> <div><p id="id000"> 0 </p></div> <div><p id="id001"> 20 </p></div> <div><p id="id002"> 40 </p></div> 4.5.2 margin 2 4 margin-top margin-bottom margin-left margin-right HTML martrbl.css div { background-color: silver; padding: 0px; border: 2px solid blue; margin: 10px; p { font-size: 40px; color: white; background-color: green; padding: 4px; #id000 { margin: 10px 20px 40px 80px; #id001 { margin-top: 80px; margin-right: 40px; margin-bottom: 20px; margin-left: 10px;

4.6. 39 HTML martrbl.html <title> </title> <link rel="stylesheet" href="martrbl.css"> <div><p id="id000"> 10 20 40 80 </p></div> <div><p id="id001"> 80 40 20 10 </p></div> 4.5.3 CSS (collapsing margins) HTML collapsing.css div { background-color: silver; padding: 0px; border: 2px solid green; margin: 10px; p { font-size: 40px; color: white; background-color: maroon; padding: 4px; #id000 { margin: 20px; #id001 { margin: 40px; HTML collapsing.html <title> </title> <link rel="stylesheet" href="collapsing.css"> <div> <p id="id000"> 20 </p> <p id="id001"> 40 </p> </div> 4.6 4.6.1 width

40 4 blockquote { width: 500px; 500 HTML p { width.css font-size: 40px; padding: 40px; border: 40px solid navy; #id000 { width: 200px; #id001 { width: 400px; #id002 { width: 800px; HTML width.html <title> </title> <link rel="stylesheet" href="width.css"> <p id="id000"> 200 </p> <p id="id001"> 400 </p> <p id="id002"> 800 </p> 4.6.2 height blockquote { height: 500px; 500 HTML p { height.css font-size: 40px; padding: 40px; border: 40px solid maroon; #id000 { height: 80px; #id001 { height: 120px; #id002 { height: 160px; HTML height.html <title> </title> <link rel="stylesheet" href="height.css"> <p id="id000"> 80 </p> <p id="id001"> 120 </p> <p id="id002"> 160 </p>

4.6. 41 4.6.3 height (overflow) overflow visible hidden scroll auto HTML overflow p { overflow.css font-size: 40px; border: 2px solid red; margin-bottom: 100px; width: 200px; height: 100px;.visible { overflow: visible;.hidden { overflow: hidden;.scroll { overflow: scroll;.auto { overflow: auto; HTML overflow.html <title> </title> <link rel="stylesheet" href="overflow.css"> <p class="visible">visible </p> <p class="hidden">hidden </p> <p class="scroll">scroll </p> <p class="auto">auto </p> <p class="auto"> auto </p> 4.6.4 (alignment) width auto auto

42 4 HTML p { boxalign.css font-size: 40px; border: 2px solid green; width: 400px;.right { margin-left: auto; margin-right: 0px;.center { margin-left: auto; margin-right: auto; HTML boxalign.html <title> </title> <link rel="stylesheet" href="boxalign.css"> <p> </p> <p class="right"> </p> <p class="center"> </p> 4.7 4.7.1 HTML float none left right float (floating element) float left right left right 4.7.2 (wrap) HTML wrap.css p { font-size: 40px; border: 2px solid blue; padding: 10px; margin: 10px;

4.7. 43.floatleft { float: left; height: 400px; HTML wrap.html <title> </title> <link rel="stylesheet" href="wrap.css"> <p class="floatleft"> </p> <p> </p> <p> </p> 4.7.3 clear left right both none HTML clear p { clear.css font-size: 40px; border: 2px solid blue; padding: 10px; margin: 10px;.floatleft { float: left; height: 400px;.clearleft { clear: left; HTML clear.html <title> </title> <link rel="stylesheet" href="clear.css"> <p class="floatleft"> </p> <p> </p> <p class="clearleft"> </p>

44 4 4.7.4 (multicolumn) 2 (column) n n (n-column) 2 HTML 2 column.css div { font-size: 40px; color: white; margin: 0px; #container { width: 300px; margin: 0px auto; #column00 { width: 100px; float: left; background-color: green; #column01 { width: 200px; float: left; background-color: blue; HTML column.html <title> </title> <link rel="stylesheet" href="column.css"> <div id="container"> <div id="column00"> </div> <div id="column01"> </div> </div> 4.8 4.8.1 table th td HTML table th td table.css table { font-size: 30px; background-color: #ff6; border: 5px solid #f66; padding: 20px; th, td { color: #090; background-color: #cfc; border: 8px double #0c0; padding: 10px;

4.8. 45 HTML table.html <title> </title> <link rel="stylesheet" href="table.css"> <table> <tr> <th> </th><td>14.98 </td> </tr> <tr> <th> </th><td>11.39 </td> </tr> </table> 4.8.2 margin border-spacing table 2 1 2 HTML border-spacing spacing.css table { font-size: 30px; border: 2px solid blue; th, td { border: 2px solid orange; padding: 10px; #id000 { border-spacing: 20px; #id001 { border-spacing: 30px 10px; HTML spacing.html <title> </title> <link rel="stylesheet" href="spacing.css"> <table id="id000"> <tr> <th> </th><td>3776 </td> </tr> <tr> <th> </th><td>4.53 </td> </tr> </table> <table id="id001"> <tr> <th> </th><td> 45 31 22 </td> </tr> <tr> <th> </th><td> 30 59 10 </td> </tr> </table>

46 4 4.8.3 (separate border model) (collapsing border model) border-spacing border-collapse collapse table HTML collapse.css table { font-size: 30px; border-collapse: collapse; th, td { border: 5px solid green; padding: 10px; HTML collapse.html <title> </title> <link rel="stylesheet" href="collapse.css"> <table> <tr> <th> </th><td>7 39 </td> </tr> <tr> <th> </th><td>30 18 </td> </tr> </table> 4.8.4 (empty cell) empty-cells hide HTML empty-cells empty.css th, td { font-size: 30px; color: #00c; background-color: #ccf; border: 5px solid #00c; padding: 10px;.hide { empty-cells: hide; HTML empty.html <title> </title> <link rel="stylesheet" href="empty.css">

4.9. 47 <table> <tr> <th> </th><td> </td> </tr> <tr> <th> </th><td></td> </tr> <tr> <th> </th><td class="hide"></td> </tr> </table> 4.8.5 vertical-align vertical-align top bottom middle top bottom middle HTML td vertical.css td { font-size: 30px; border: 5px solid teal; padding: 10px;.top { vertical-align: top;.bottom { vertical-align: bottom;.middle { vertical-align: middle; HTML vertical.html <title> </title> <link rel="stylesheet" href="vertical.css"> <table> <tr> <td> <br> <br> <br> </td> <td class="top"> </td> <td class="bottom"> </td> <td class="middle"> </td> </tr> </table> 4.9 4.9.1 ul ol (list) li li (list item box)

48 4 (marker) 4.9.2 list-style-type disc circle square decimal upper-alpha lower-alpha upper-roman lower-roman none 1 2 3 4 5... A B C D E... a b c d e... I II III IV V... i ii iii iv v... HTML list-style-type marker.css li { list-style-type: upper-roman; li li { list-style-type: lower-alpha; HTML marker.html <title> </title> <link rel="stylesheet" href="marker.css"> <ol> <li> </li> <li> <ol> <li> </li> <li> </li> <li> vs </li> </ol> </li> <li> </li> </ol> 4.9.3 list-style-position outside inside HTML list-style-position position.css

49 li { border: 2px solid blue; margin: 10px; padding: 10px;.inside { list-style-position: inside; HTML position.html <title> </title> <link rel="stylesheet" href="position.css"> <ul> <li> </li> <li class="inside"> </li> </ul> 4.9.4 4.2 display display list-item a { display: list-item; a HTML a listitem.css a { display: list-item; list-style-type: decimal; margin-left: 30px; HTML listitem.html <title> </title> <link rel="stylesheet" href="listitem.css"> <a href="http://www.nasa.gov/">nasa</a> <a href="http://www.jaxa.jp/">jaxa</a> <a href="http://www.nao.ac.jp/"> </a> [Backgrounds,2011] Bert Bos, Elika J. Etemad and Brad Kemper (eds.), CSS Backgrounds and Borders Module Level 3, World Wide Web Consortium, 2011. [Color,2011] Tantek Çelik, Chris Lilley and L. David Baron (eds.), CSS Color Module Level 3, World Wide Web Consortium, 2011. [CSS,2011] Bert Bos, Tantek Çelik, Ian Hickson and Håkon Wium Lie (eds.), Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification, World Wide Web Consortium, 2011. [Selectors,2011] Elika J. Etemad, Tantek Çelik, Daniel Glazman, Ian Hickson, Peter Linss and

50 John Williams (eds.), Selectors Level 4, World Wide Web Consortium, 2011. [Text,2011] Elika J. Etemad, Koji Ishii and Shinyu Murakami (eds.), CSS Text Level 3, World Wide Web Consortium, 2011. [Meyer,2004] Eric A. Meyer, Cascading Style Sheets: The Definitive Guide, Second Edition, O Reilly Media, 2004, ISBN 978-0-596-00525-2. CSS 2 2005 ISBN 978-4-87311-232-9 [,2003] CSS for Windows 2003 ISBN 978-4-8399-1268-0 [,2011] CSS3 2011 ISBN 978-4-8399-3546-7 [,2003] CSS 2003 ISBN 978-4-8399-1252-9 [,2004] SEO HTML&CSS 2004 ISBN 978-4-8399-1501-8 [,2011] CSS3 CSS3 2011 ISBN 978-4-8399-3829-1 [,2011] 10 CSS/CSS3 2011 ISBN 978-4-7981-2403-2 [,2006] 2006 ISBN 978-4-8443-5838-1

51.css, 6 @import, 8 10, 9 16, 9 a, 18, 31 active, 17 auto, 41 auto, 41 background-color, 5, 30 block, 30 blockquote, 30 bold, 25 border, 33 border-bottom-color, 35 border-bottom-left-radius, 37 border-bottom-right-radius, 37 border-bottom-style, 35 border-bottom-width, 35 border-collapse, 46 border-color, 35 border-left-color, 35 border-left-style, 35 border-left-width, 35 border-radius, 36 border-right-color, 35 border-right-style, 35 border-right-width, 35 border-spacing, 45 border-style, 33 border-top-color, 35 border-top-left-radius, 37 border-top-right-radius, 37 border-top-style, 35 border-top-width, 35 border-width, 34 both, 43 bottom, 47 center, 26 circle, 48 class, 15 clear, 43 cm, 11 collapse, 46 color, 5, 35 CSS, 4 cursive, 24 dashed, 33 decimal, 48 disc, 48 display, 30, 31, 49 div, 30 dotted, 33 double, 33 em, 12, 12 em, 31 empty-cells, 46 fantasy, 24 first-letter, 18 first-line, 19 float, 42 focus, 17 font-family, 24 font-size, 12 font-style, 25 font-weight, 25 groove, 33 head, 6, 7 height, 40, 41 hidden, 41 hidden, 33 hide, 46 hover, 17 href, 6 HTML, 4 HTML, 4, 6 ID, 16 id, 16 ID, 14, 16 in, 11 inline, 30, 31 inset, 33

52 inside, 48 italic, 25 left, 26 left, 43 letter-spacing, 12 li, 47 line-height, 27 line-through, 28 link, 18 link, 6 list-item, 30, 49 list-style-position, 48 list-style-type, 48 lower-alpha, 48 lower-roman, 48 LVHA, 18 margin, 37, 45 margin-bottom, 38 margin-left, 38 margin-right, 38 margin-top, 38 middle, 47 mm, 11 monospace, 24 left, 42 none, 42 right, 42 none, 28 none, 33 none, 48 none, 43 normal, 25 normal, 25 nowrap, 28 n, 44 oblique, 25 ol, 47 outset, 33 outside, 48 overflow, 41 overline, 28 p, 30 padding, 31 padding-bottom, 32 padding-left, 32 padding-right, 32 padding-top, 32 pc, 11 pre, 30 pt, 11 px, 12 rel, 6 ridge, 33 right, 26 right, 43 sans-serif, 24 scroll, 41 serif, 24 solid, 33 span, 31 square, 48 style, 8 style, 7 stylesheet, 7 text-align, 26 text-decoration, 28 text-indent, 27 text-shadow, 29 top, 47 transparent, 30 ul, 47 underline, 28 upper-alpha, 48 upper-roman, 48 vertical-align, 47 visible, 41 visited, 18 W3C, 4 white-space, 28 width, 39, 41, 15, 5, 47, 26, 41, 18, 25

53, 48, 19, 21, 9 10, 9 16, 9, 35, 10, 11, 26, 8, 6, 8, 30, 31, 11, 4, 47, 12, 12, 41, 25, 43, 6 HTML, 6, 5, 16, 29, 47, 28, 14, 15, 36, 45, 12, 17, 14, 17, 17, 18, 14, 19, 18, 27, 19, 46, 5, 14, 15, 15, 33, 13, 13, 19, 46, 4, 19, 20, 6, 6, 17, 19, 29, 39, 40, 30, 41, 22, 19, 19, 19, 20, 47, 16, 14, 30, 32, 35, 38, 32, 23, 28, 47, 6, 25, 4, 4, 8, 4, 6, 11, 24, 45, 44, 4, 5, 14, 14, 14, 22, 5, 5, 4, 5, 14, 14, 15

54, 26, 41, 11, 39, 28, 11, 12, 13, 14, 16, 20, 48, 27, 4, 40, 5, 44, 11, 44, 47, 6, 29, 21, 44, 26, 29, 26, 28, 26, 26 HTML, 6, 6, 15, 28, 6, 7, 11, 13, 40, 39, 11, 5, 30, 30, 31, 32, 29, 33, 34, 24, 9, 10, 12, 26, 41, 24, 23, 12, 25, 25, 24, 24, 14, 19, 5, 25, 8, 21, 42, 30, 39, 5, 24, 4, 4, 4, 46, 11, 30, 33, 35, 35, 33, 34, 29, 33, 29, 29, 44, 44, 41, 30, 41, 40, 41

55, 41, 39, 29, 30, 5, 20, 48, 48, 48, 4, 30, 37, 38, 39, 29, 42, 43, 26, 41, 11, 12, 19, 17, 39, 47, 30, 47, 32, 30, 18, 19, 21, 4, 14, 25