반응형

한 페이지에 적용할 때 HEAD 태그 안에 <STYLE> 태그를 사용함으로써 사용 가능함.

<html>
<head>
<title>MY CSS PAGE</title>
<style type="text/css">
.headlines, .sublines, infotext {font-face:arial; color:black; background:yellow; font-weight:bold;}
.headlines {font-size:14pt;}
.sublines {font-size:12pt;}
.infotext {font-size: 10pt;}
</style>
</head>

<body>
<span class="headlines">Welcome</span><br>

<div class="sublines">
This is an example page using CSS.<br>
The example is really simple,<br>
and doesn't even look good,<br>
but it shows the technique.
</div>

<table border="2"><tr><td class="sublines">
As you can see:<br>
The styles even work on tables.
</td></tr></table>

<hr>

<div class="infotext">
Example from EchoEcho.Com.
</div>

<hr>
</body>
</html>


결과

Welcome
This is an example page using CSS.
The example is really simple,
and doesn't even look good,
but it shows the technique.
As you can see:
The styles even work on tables.
Example from EchoEcho.Com.

반응형
저작자표시

'Windows > css' 카테고리의 다른 글

전체 사이트에 CSS 적용하기  (0) 2010.09.06
단순 태그들  (0) 2010.09.06
선택자에 의존하는 문맥들  (0) 2010.09.06
그룹 선택자들  (0) 2010.09.06
ID 선택자들  (0) 2010.09.06
반응형

단순히 style="정의스타일:스타일속성;" 태그를 추가함으로서 단순 태그를 추가할 수 있다.

예
 It is <b style="font-size:16px;">NOT</b> me.

결과는 다음과 같다.
It is NOT me.



당신은 당신의 단순 CSS 태그를 제한적으로 사용해야 한다.

각각에 단순 태그를 사용함으로서 당신의 CSS와 연관된 많은 강력한 기능을 사용할 수 없다.

예를 들면, 한번 선언해서 사용할때보다 사용할 때마다 계속 style 구문을 계속 선언해야 한다.

더구나 주요 style을 변경할 때도 당신은 문서 전체를 수정해야 한다.

이글의 모든 내용을 www.echoecho.com 에서 참조하였을 밝힌다.

반응형
저작자표시

'Windows > css' 카테고리의 다른 글

전체 사이트에 CSS 적용하기  (0) 2010.09.06
Single PAGE (한 페이지 적용)  (0) 2010.09.06
선택자에 의존하는 문맥들  (0) 2010.09.06
그룹 선택자들  (0) 2010.09.06
ID 선택자들  (0) 2010.09.06
반응형

같은 종류의 스타일 선택자들을 공유해야 할 때 사용함.

그룹핑이 없는경우(폰트 크기만 별도로 나머지 속성은 동일 한 경우임)

.headlines{
font-family:arial; color:black; background:yellow; font-size:14pt;
}

.sublines {
font-family:arial; color:black; background:yellow; font-size:12pt;
}

.infotext {
font-family:arial; color:black; background:yellow; font-size:10pt;
}


위의 스타일 선택자들을 그룹핑 하고 폰트에 대해서는 별도로 사용하는 경우

.headlines, .sublines, .infotext {
font-family:arial; color:black; background:yellow;
}

.headlines {font-size:14pt;}
.sublines {font-size:12pt;}
.infotext {font-size: 10pt;}



이글의 모든 내용을 www.echoecho.com 에서 참조하였을 밝힌다.
반응형
저작자표시

'Windows > css' 카테고리의 다른 글

단순 태그들  (0) 2010.09.06
선택자에 의존하는 문맥들  (0) 2010.09.06
ID 선택자들  (0) 2010.09.06
CLASS 선택자들 (CLASS Selectors)  (0) 2010.09.06
태그 선택자들 (TAG SELECTORS)  (0) 2010.09.06
반응형

ID 선택자들의 기본 문법이다.

#ID선택자명 {속성:값;}

예)

<HTML>
<HEAD>
<style type="text/css">
#layer1 {position:absolute; left:100;top:100; z-Index:0}
#layer2 {position:absolute; left:140;top:140; z-Index:1}
</style>
</HEAD>

<BODY>
<div ID="layer1">
<table border="1" bgcolor="#FFCC00"><tr><td>THIS IS LAYER 1<br>POSITIONED AT 100,100</td></tr></table>
</div>

<div ID="layer2">
<table border="1" bgcolor="#00CCFF"><tr><td>THIS IS LAYER 2<br>POSITIONED AT 140,140</td></tr></table>
</div>
</BODY>


</HTML>






이글의 모든 내용을 www.echoecho.com 에서 참조하였을 밝힌다.
반응형
저작자표시

'Windows > css' 카테고리의 다른 글

선택자에 의존하는 문맥들  (0) 2010.09.06
그룹 선택자들  (0) 2010.09.06
CLASS 선택자들 (CLASS Selectors)  (0) 2010.09.06
태그 선택자들 (TAG SELECTORS)  (0) 2010.09.06
CSS 선택자란 ?  (0) 2010.09.06
반응형

선택자들은 다른 스타일들의 이름을 나타낸다.

Style에는 설정한 각 선택자들의 해야될 일이 정의되어 있다.

body 구문을 정의한 Style의 예

예)

<HTML>
<HEAD>
<style type="text/css">
B.headline {color:red; font-size:22px; font-family:arial; text-decoration:underline}
</style>

</HEAD>

<BODY>
<b>This is normal bold</b><br>
<b class="headline">This is headline style bold</b>
</BODY>

</HTML>



이경우에는 B.headline이 선택자이다.

결과는 다음과 같다.

This is normal bold
This is headline style bold


이글의 모든 내용을 www.echoecho.com 에서 참조하였을 밝힌다.
반응형
저작자표시

'Windows > css' 카테고리의 다른 글

그룹 선택자들  (0) 2010.09.06
ID 선택자들  (0) 2010.09.06
CLASS 선택자들 (CLASS Selectors)  (0) 2010.09.06
태그 선택자들 (TAG SELECTORS)  (0) 2010.09.06
CSS 란 ...  (0) 2010.09.06
반응형

CSS는 계층형 스타일 시트를 위한 표준이다.

웹페이지들의 내용들의 구획을 나누는 방법이다.


CSS가 하는일들 :

style은 폰트와 색등 정의한다.

선택자 : 각 style들의 유일한 이름

선택자와 style은 한 곳에 정의된다.

예)

새로운 테이블의 칸들에 대해 색과 폰트를 style로 대체 설정한다.

원 HTML 구문

<table>
<tr><td bgcolor="#FFCC00" align="left"><font face="arial" size="2" color="red"><b>this is line 1</b></font></td></tr>
<tr><td bgcolor="#FFCC00" align="left"><font face="arial" size="2" color="red"><b>this is line 2</b></font></td></tr>
<tr><td bgcolor="#FFCC00" align="left"><font face="arial" size="2" color="red"><b>this is line 3</b></font></td></tr>
</table>


CSS 변경 적용 구문 (subtext라는 선택자로 정의하여 사용한 경우)
<table>
<tr><td class="subtext">this is line 1</td></tr>
<tr><td class="subtext">this is line 2</td></tr>
<tr><td class="subtext">this is line 3</td></tr>
</table> 

CSS 변경 적용 구문은 기존 HTML 구문을 사용할 때 보다 훨씬 강력하게 표현할 수 있으며 각 내용들을 분리할 수 있다.


CSS로 가능한 것들....

1. 한곳에 당신이 보이길 원하는 페이지를 정의가능하다.
  
2. 보여지는 페이지를 쉽게 수정가능하다.

3. 폰트크기와 주요속성들을 정의할수 있다.

4. 웹페이지의 원하는 화면의 픽셀에 내용을 위치할 수 있다.

5. HTML 태그 전체를 재정의 가능하다.

6. 링크들에 대해 임의로 정의가능하다.

7. 레이어를 정의가능하다.

CSS의 단점...

IE 4 이상에서만 작동한다.

이글의 모든 내용을 www.echoecho.com 에서 참조하였을 밝힌다.
반응형
저작자표시

'Windows > css' 카테고리의 다른 글

그룹 선택자들  (0) 2010.09.06
ID 선택자들  (0) 2010.09.06
CLASS 선택자들 (CLASS Selectors)  (0) 2010.09.06
태그 선택자들 (TAG SELECTORS)  (0) 2010.09.06
CSS 선택자란 ?  (0) 2010.09.06

+ Recent posts

티스토리툴바