1.기본 형식
형식)
선택자 {속성 : 속성값}
선택자 {속성 : 속성값}
2.여러 속성의 정의
형식)
선택자 {속성 1 : 속성값1 ; 속성2 : 속성값 ;}
cf) 속성과 속성값은 세미콜론(;)으로 구분
선택자 {속성 1 : 속성값1 ; 속성2 : 속성값 ;}
cf) 속성과 속성값은 세미콜론(;)으로 구분
3.공통 속성의 정의
형식)
선택자1,선택자2,...,선택자n {속성 : 속성값}
선택자1,선택자2,...,선택자n {속성 : 속성값}
4.CLASS 속성을 이용한 스타일 정의
형식)
선택자.클래스{속성 : 속성값} : 특정 태그에만 적용되는 클래스의 스타일 정의
<태그명 CLASS = "클래스 이름" >~</태그명> : 클래스로 지정된 스타일을 적용
.클래스명 {속성 : 속성값} : 모든 태그에 적용되는 클래스 스타일 정의
ex)
-------------------------------------------
<html>
<head>
<title>클래스 스타일 만들기</title>
<style type = "text/css">
p {background-color : yellow; color: blue}
p.boldtxt {font=-weight : bold}
.redtxt {color : red}
.greentxt {color : green}
</style>
</head>
<body>
<p> 이 텍스트는 스타일의 적용을 받아 파란색.
<p class = "redtxt">같은 태그지만 빨간색.
<p class = "greentxt">같은 태그지만 녹색.
<H2 class = "redtxt">p 태그가 아니여도 빨간색.</h2>
<H2 class = "greentxt">p 태그가 아니여도 녹색.</h2>
<p class = "boldtxt">p 태그에 굵은 글자도 사용.
<H2 class = "boldtxt">p태그에만 적용되는 클래스이므로 아무변화 없음</h2>
</body>
</html>
-------------------------------------------
선택자.클래스{속성 : 속성값} : 특정 태그에만 적용되는 클래스의 스타일 정의
<태그명 CLASS = "클래스 이름" >~</태그명> : 클래스로 지정된 스타일을 적용
.클래스명 {속성 : 속성값} : 모든 태그에 적용되는 클래스 스타일 정의
ex)
-------------------------------------------
<html>
<head>
<title>클래스 스타일 만들기</title>
<style type = "text/css">
p {background-color : yellow; color: blue}
p.boldtxt {font=-weight : bold}
.redtxt {color : red}
.greentxt {color : green}
</style>
</head>
<body>
<p> 이 텍스트는 스타일의 적용을 받아 파란색.
<p class = "redtxt">같은 태그지만 빨간색.
<p class = "greentxt">같은 태그지만 녹색.
<H2 class = "redtxt">p 태그가 아니여도 빨간색.</h2>
<H2 class = "greentxt">p 태그가 아니여도 녹색.</h2>
<p class = "boldtxt">p 태그에 굵은 글자도 사용.
<H2 class = "boldtxt">p태그에만 적용되는 클래스이므로 아무변화 없음</h2>
</body>
</html>
-------------------------------------------
5. ID 속성을 이용한 스타일 정의
: 개별적으로 고유한 이름을 붙여서 스타일을 정의할 수 있다.
형식)
#ID이름 {속성 : 속성값}
사용법)
<태그명 ID = "ID이름">~</태그명>
#ID이름 {속성 : 속성값}
사용법)
<태그명 ID = "ID이름">~</태그명>
'프로그래밍 > HTML' 카테고리의 다른 글
| 레이어(Layer) (0) | 2011.02.04 |
|---|---|
| 스타일 정의를 위한 속성 (0) | 2011.02.04 |
| DHTML 문서 작성((스타일 시트, 레이어) (0) | 2011.02.03 |
| 자바스크립트를 이용한 HTML 문서 작성 (0) | 2011.02.03 |
| 멀티미디어 사용하기 (0) | 2011.02.03 |
