1. CSS(Cascading Style Sheet)

  다이나믹 HTML의 구현을 위한 언어로서  워드프로세서의 스타일과 같은 기능으로, HTML로 보여주는 홈페이지의
  여러가지 속성들 (폰트 종류와 크기, 여백, 글자색, 배경색, 정렬 등)을 미리 지정하는 데 사용된다.

2. Style Sheet 를 지원하는 브라우저

(1) 익스플로러의 경우 : CSS만 지원

   <style type = "text / css">

     스타일 정의

   </style>

(2) 넷스케이프 커뮤니케이터 4.0의 경우 : CSS와 javascript 방식 두가지 지원

   <style type = "text/javascript">

     스타일 정의

   </style>

3. Style Sheet 구성요소

선택자{속성: 속성값; 속성: 속성값;...}          

 (1) selector(선택자)

     모든 HTML의 태그가 선택자임

 (2) declaration(선언)  

      속성에 대한 속성값을 의미하며,

      속성과 속성값의 구분은 콜론(:) 또는 이퀄(=) 로 하며,
      선언과 선언의 구분세미콜론(;)으로 한다.

 <style type = "text/css">

   p { color : green; font-size : 12px; }

  </style>

 

4. Style Sheet 구현 방법

  (1) Linking Style Sheet : 외부 스타일시트 파일(*.css)을 만들어 쓰는 방법

      자주 쓰는 스타일 시트의 내용은 mycss.css와 같이 '스타일시트 파일'을 만들어 호출

 예:
     <link rel="stylesheet" type="text/css" href="mycss.css">

  (2) Embedding Style Sheet : HTML 문서안에서 <STYLE> 태그를 사용하는 방법

       <head>,</head> 사이에 넣어 문서 전체를 지배하는 스타일 시트 작성

 예:
    <style type = "text/css">
      p {color : green; font-size:7cm;}
    </style>

  (3) Inline Style : HTML 요소안에서 STYLE 속성을 이용하는 방법

      <body>,</body>사이에서 일부 HTML 태그에 인라인으로 스타일을 선언

 예:
    <p style="color:green;font-size:7cm;">크게</p>


  (4) 스타일 시트 우선 순위

      Inline Style > Embedding Style Sheet > Linking Style Shee

 목록  다음 >

 

Copyright ⓒ2001∼2003, alza.wo.to All Rights Reserved.