CSS Cascading Style Sheets Cascading = Style Sheets = CSS WEB HTML CSS 2
<h1> </h1> <h1> </h1> <p> <p> </p> </p> HTML h1 p CSS 3
CSS
CSS HTML sample1.html
CSS HTML sample2.html
CSS CSS sample2.css
CSS sample3.html
CSS 1996 12 CSS level1 W3C HTML 3.2 1998 5 CSS level2 W3C CSS level1 CSS level2.1 UA 100% CSS level3 HTML
CSS h1 h1 { color : blue ; } { } : ; 11
: 14 : : p { font-size: 14pt; } p { font-style: italic; } p { text-decoration: underline; } p { font-size: 14pt ; font-style: italic; text-decoration: underline; } { : ; : ; : ; } 12
h1 { font-style: italic; } p { font-style: italic; } h1, p { font-style: italic; } { : ; } 13
(1) (2) head style (3) style 14
(1) CSS head link CSS CSS.css HTML <html> <head> <title> </title> <link href= style.css rel= stylesheet type= text/css /> </head> <body> <h1> </h1> <p> </p> </body> </html> style.css h1 { font-style: italic; } p { text-decoration: underline; } CSS 15
(2) style head style HTML <html> <head> <title> </title> <style type= text/css > h1 { font-style: italic; } p { text-decoration: underline; } </style> </head> <body> <h1> </h1> <p> </p> </body> </html> 16
(3) style style <html> <head> <title> </title> </head> <body> <h1 style= font-style: italic; > </h1> <p style= text-decoration: underline; > </p> </body> </html> 17
(1) (2) (3) 18
(1) h1 p <head> <style type="text/css"> h1 { color: red; } p { font-style: italic; } </style> </head> <body> <h1> </h1> <p> </p> <p> </p> <p> </p> </body> 19
h1 p 20
(2) class HTML <p class= note > </p>. CSS p.note { font-style: italic; } (p) note. CSS.note { font-style: italic; } note 21
: HTML <p class= red > </p>p.red { color: red; } + CSS p.red { color: blue; } font <font color= red > </font> CSS <p class= remark > </p> 22
class id class id class id <p class= note > </p> <ul> <li class= note > </li> <li> </li> </ul> <body> <div id= header > </div> <div id= content > </div> <div id= footer > </div> </body> note, header / Note note 23
(3) id id HTML <h1 id= basic-html >HTML </h1> id # # CSS h1#basic-html { color: navy; } #basic-html { color: navy; } (h1) id basic - HTML id 24
span div 25
span HTML <p>web <span>1989 </span> </p> span HTML span.year { font-style: italic; text-decoration: underline; span class <p>web <span class= year >1989 </span> </p> CSS } + 26
div HTML h1 p <h1>web </h1> <p>web 1989 </p> <p>w3c 1994 </p> HTML <div class= section > <h1>web </h1> <p>web 1989 </p> <p>w3c 1994 </p> </div> CSS + div.section { border : dashed 2pt blue; } div 27
[CSS ] CSS / etc
WEB CSS CSS