스타일 시트

1. 스타일 시트 선언

CSS(Cascading Style Sheets)

-HTML이 웹 브라우저에서 어떤 형태로 보여야 할지를 결정하는 규칙들

-동일한 HTML페이지라 하더라도, 스타일 시트의 내용에 따라 다른 내용의 모습으로 보인다

 

<style type="text/css">

<!--

H1{color:blue}      //선언부. H1(태그)은 선택자

-->

</style>

 

ex1) 여러 개의 선택자 사용
 <style type=“text/css”>
      H1, H2, H3, H4, H5, H6 { color : blue }
 </style>

 

ex2) 여러 개의 속성 사용
 <style type=“text/css”>
      H1 { color : blue; font-size : 24pt }
 </style>

 

ex3) 내포된 태그에 속성 사용
 <style type=“text/css”>
     H1 EM { text-decoration : underline }  //H1안쪽의 EM의 태그는 문자를 언더라인표시
 </style>

ex4) 클래스를 사용한 스타일 선언
 <style type=“text/css”>
      p.italic { font-style : italic }
      p.bold { font-weight : bold }  //글자를 진하게
      .underline { text-decoration : underline }
 </style>

   ->HTML 페이지에서 태그에 클래스 지정
 <p class=“italic”>이탤릭체 문단
 <p class=“bold”>볼드체 문단
 <H1 class=“underline”>밑줄 친 문단</h1>