Taro-CSS.jtd

Size: px

Start display at page:

Download "Taro-CSS.jtd"

さみこうじょう
9 years ago
Views:

1 CSSCascading Style Sheet 1. CSS CSSCascading Style Sheet HTML XHTML, XML HTML CSS HTML/XHTML/XML CSS HTMLXHTML CSS XML CSS 2. CSS HTML/XHTML CSS HTML CSS XML XSL-FO XSLT+CSS CSS Web Web HTML 3. HTML HTML h2 /h2 CSS h2 font-size: 8pt; color: red h2 CSS HTML CSS h1 h7 div CSS -1-

2 h1 h2 HTML CSS TYPE CSS CLASS HTML h2 class="song" /h2 h2 class="picture" /h2 CSS h2.song font-size: 8pt; color: red h2.picture font-size: 8pt; color: green h2 4. CSS 1 : HTML/XML CSS 2 head style : HTML/XML stye 3 style : HTML/XML stye style style style style style 4.1 CSS CSS HTML head CSS HTML head meta http-equiv="content-style-type" content="text/css" / CSS HTML/XML CSS CSS HTML/XML CSS HTML CSS HTML *.css -2-

CSS 1 : HTML/XML CSS 2 head style : HTML/XML stye 3 style : HTML/XML stye style style style style style 4.

3 CSS 12 CSS link rel="stylesheet" href="./atomic.css" type="text/css" media="screen" / rel="stylesheet" href="./atomic.css" "./atomic.css" type="text/css" CSS media="screen" href URL URL 4.3 head style HTML HTML head style style head style style link style type="text/css" h1 background: #dddd /style 4.4 style style HTML h2 style="color: red"/h2 h2 5. CSS : ; : HTML/XML font-size line-height : h1 h1 text-indent: 2em h1 text-indent 2em "," : h1 color: maroon; text-indent: 2em : h1, h2, h3 font-family: sans-serif 5.1 "*" 0-3-

3 head style HTML HTML head style style head style style link style type="text/css" h1 background: #dddd /style 4.

4 * margin:0; padding:0; CSS HTML HTML body class HTML h1 class="note" h1 h1 class note /h1 h1 class="head" h1 h1 class head /h1 h1.note color: green h1.head color: red h1 h1.note h1 TYPE note CLASS "." TYPE note CLASS.note color: green "." CLASS 5.3 ID HTML h1 id="idno1" h1 h1 class note /h1 h1#idno1 color: green # 6. CSS 1 a - background 2 a - font-style b - font-variant c - font-weight d -font-size e - line-height f - font-family 3 a - text-indent -4-

note color: green h1.head color: red h1 h1.note h1 TYPE note CLASS "." TYPE note CLASS.note color: green ".

5 b - text-align c - letter-spacing d - text-decoration margin 6 - padding 7 - border a - border-width b - border-style c - border-color 8 -float 1 a - background body body background: red URI body background: url" URL" - repeat repeat-x repeat-y no-repeat - scroll fixed - percentage length 1,2 top center bottom left center right body p h1 "color" strong strong color: red body color black, maroon, green, navy, silver, red, lime, blue, gray, purple, olive, teal, white, fuchsia, yellow, aqua RGB 1600-FF 2 a - font-style address strong font-style:italic - : italic - : normal - : oblique - :inherit b - font-variant -5-

bottom left center right body p h1 "color" strong strong color: red body color black, maroon, green, navy, silver, red, lime, blue, gray, purple, olive,

6 address font-variant:small-caps - : normal - : small-caps - :inherit c - font-weight bold address font-weight:bold - : normal - : bold - :inherit - / : bolder/lighter : d -font-size address font-size:small, address font-size:150% - : xx-small, x-small, small, medium, large, x-large, xx-large - / : larger, smaller - : in - : cm - : mm - 1/72 : pt - 12 : pc - 1 : em - x 1 : ex - : px - : % inherit body font-size e - line-height normal, p line-height:0.8 - : normal -6-

font-size:150% - : xx-small, x-small, small, medium, large, x-large, xx-large - / : larger, smaller - : in - : cm - : mm

7 -inherit - : in - : cm - : mm - 1/72 : pt - 12 : pc - 1 : em - x 1 : ex - : px - : % 120% - : 1.2 f - font-family generic-family - :serif - : sans-serif - : monospace - :fantasy - :cursive serif 3 a - text-indent - : in - : cm - : mm - 1/72 : pt - 12 : pc - 1 : em - x 1 : ex - : px - : % b - text-align - :left - :center -7-

8 - :right - :justify justify c - letter-spacing - : in - : cm - : mm - 1/72 : pt - 12 : pc - 1 : em - x 1 : ex - : px - : % d - text-decoration - :none - : underline - :overline - : line-through - :blink 4 a href=... a a CSS - : a:link ex. a:link color: maroon - : a:visited ex. a:visited color: navy - : a:hover ex. a:hover color: red 5 - margin -8-

:overline - : line-through - :blink 4 a href=... a a CSS - : a:link ex.

9 p margin: 2em 3em 1em 1 ex. p margin: 1em 2 ex. p margin: 1em 2em 3 ex. p margin: 2em 3em 1em 4 ex. p margin: 2em 3em 1em 0 - : in - : cm - : mm - 1/72 : pt - 12 : pc - 1 : em - x 1 : ex - : px - : % 6 - padding -9-

10 p padding: 2em 3em 1em 1 ex. p padding: 1em 2 ex. p padding: 1em 2em 3 ex. p padding: 2em 3em 1em 4 ex. p padding: 2em 3em 1em 0 - : in - : cm - : mm - 1/72 : pt - 12 : pc - 1 : em - x 1 : ex - : px - : % 7 - border -10-

11 p border-width: 2em 3em 1em 1 ex. p border-width: 1em 2 ex. p border-width: 1em 2em 3 ex. p border-width: 2em 3em 1em 4 ex. p border-width: 2em 3em 1em 0 a - border-width - : thinmediumthick - : in - : cm - : mm - 1/72 : pt - 12 : pc - 1 : em - x 1 : ex - : px - : % -11-

p border-width: 2em 3em 1em 0 a - border-width - : thinmediumthick

12 b - border-style - :none - : hidden - : dotted - : dashed - :solid - : double - : groove - :ridge - : inset - :outset - :inherit c - border-color black, maroon, green, navy, silver, red, lime, blue, gray, purple, olive, teal, white, fuchsia, yellow, aqua RGB 1600-FF 8 -float div HTML img align text-align - : left ex. div floatt: left - : right ex. div float: right - : none ex. div float: none - : center ex. div float: center center width a b c HTML HTML -12-

RGB 1600-FF 8 -float div HTML img align text-align - : left ex. div floatt: left - : right ex. div float: right - : none ex.

13 html head meta http-equiv="content-type" content="text/html; charset=shift_jis" meta http-equiv="content-style-type" content="text/css" link rel="stylesheet" href="./common.css" type="text/css" link rel="stylesheet" href="./local.css" type="text/css" titlecss /title /head bodydiv class="text" h1css /h1 br / dl dt 2006/04/20 small/small strongushi 2 /strong/dt dd CSS HTML /dd p / dt2006/04/27 small/small strong/strong /dt dd CSS /dd /dl /div/body /html body head -13-

css" type="text/css" titlecss /title /head bodydiv class="text" h1css /h1 br / dl dt 2006/04/20 small/small

14 head CSS CSS Web common.css local.css link rel="stylesheet" href="./common.css" type="text/css" link rel="stylesheet" href="./local.css" type="text/css" CSS common.css local.css /* BODY */ body color: #000000; background-image: url"image/cowskin.gif"; text-align: left; /* */ div.text margin-left: 0.4em; padding-bottom: 0.4em; /* */ strong color: #cc00cc; font-weight: bold; /* */ h1 font-size: 1.5em; font-weight: bold; width: 100%; padding: 4px 4px 4px 4px; border-width: 2px 0px 0px 12px; border-style: solid; border-color: #3399ff; background-color: #ffffff; /* dl */ dt font-size: 1.0em; font-weight: bold; width: 100%; padding-left: 4px; border-width: 1px 0px 0px 6px; border-style: solid; border-color: #339933; background-color: #f0fff0; small font-size: 0.8em; cowskin.gif -14-

5em; font-weight: bold; width: 100%; padding: 4px 4px 4px 4px; border-width: 2px 0px 0px 12px; border-style: solid; border-color: #3399ff; background-color: #ffffff; /* dl */ dt font-size: 1.

15 HTML span class="yellow"/span CSS span.yellow background-color: #ffff55; strong strong border-bottom: double red 3px; strong 7.2 HTML frame frame HTML CSS float CSS HTML -15-

16 CSS 6 div HTML frame HTML HTML -16-

17 html head /head body div class="block_a" img src="logo.gif" / /div div class="block_b" h1css /h1 /div div class="block_c" hr / /div div class="block_d" h2 class="contents"/h2 ol li / HTML li / HTML li / CSS li / /ol /div div class="block_e" h2 class="subtitle" CSS /h2 img src="sample.jpg" / /div div class="block_f" hr / c ushi- /div /body /html CSS CSS 1 Ablock_a float left; block_b width 2 Bblock_b float left; 3 Cblock_cclear: both; A float 4 D,E A,B Eblock_emargin-left:20%; D E D -17-

li / HTML li / HTML li / CSS li / /ol /div div class="block_e" h2 class="subtitle" CSS /h2 img src="sample.

18 E D 5 F C /* common.css */ div.block_a float: left; width: 10%; div.block_b width: 100%; height: 60px; padding-left: 15%; padding-top: 18px; background-color: pink; div.block_c clear: both; width: 100%; div.block_d float: left; width: 20%; line-height: 2em; padding-top: 18px; background-color: lightblue; div.block_e margin-left: 20%; div.block_f clear: width: 100%; 8. CSS -18-

pink; div.block_c clear: both; width: 100%; div.

~/WWW-local/compIID (WWW IID ) $ mkdir WWW-local $ cd WWW-local $ mkdir compiid 3. Emacs index.html n (a) $ cd ~/WWW/compIID

~/WWW-local/compIID (WWW IID ) $ mkdir WWW-local $ cd WWW-local $ mkdir compiid 3. Emacs index.html n (a) $ cd ~/WWW/compIID 10 10 10.1 1. 2. 3. HTML(HyperText Markup Language) Web [ ][ ] HTML Web HTML HTML Web HTML ~b08a001/www/ ( ) ~b08a001/www-local/ ( ) html ( ) 10.2 WWW WWW-local b08a001 ~b08a001/www/ ~b08a001/www-local/