n n n DOCTYPE html meta httpequivcontenttype contenttexthtml
- Slides: 19
n n n <!DOCTYPE html ・・・・・ ↓ <meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> <meta http-equiv=“content-style-type” content=“text/css”> ←「CSSファイルを定義するタグ」 <title>CSS</title> <link rel=“stylesheet” href=“. /atomic. css” type=“text/css” media=“screen”> ↑「CSSファイルを読み込むタグ」 n n </head> <body> <h 1>CSSとは何か？</h 1> <p>……………. . </p></body></html>
n body { padding: 1 em 5%; background: #ccccff } p { margin: 0. 5 em 0; padding: 1 em; text-indent: 1 em; line-height: 1. 5; background: #eeeeff }
CSS適用の際の注意点 n n f 14{ font-size: 14 pt; color: red; font-weight: bold; } f 10{ font-size: 10 pt; color: red; font-weight: bold; } n n f 14{ font-size: 14 pt; color: blue; font-weight: bold; } f 10{ font-size: 10 pt; color: blue; font-weight: bold; }
CSS適用の際の注意点 n f 10{ font-size: 10 pt; } f 14{ font-size: 14 pt; } n fred{ color: red; } fblue{ color: blue; } fb{ font-weight: bold; } <span class=“f 14 fred fb”>赤い14ポイントの強調文字</span> <span class=“f 10 fblue fb”>青い10ポイントの強調文字</span>
参考文献 Webページ n n CSSリファレンス編 http: //www. zspc. com/stylesheets/css/re ference. html CSS入門講座 http: //msugai. fc 2 web. com/web/tut/CSS tut/
参考文献 Webページ n n n CSSデザインテンプレート http: //www. shoshinsha. com/hp/templat e/ Web. Site expert #04号
