CSS 구조 및 사용법

CSS.zip

 

CSS의 선언
 

태그이름.클래스명 하위태그,  태그이름.클래스명 하위태그 {   세부속성이름1: 세부속성값;   세부속성이름2: 세부속성값;  }

 

 

예시)

p.text {
  margin: 0;

  color: blue;
}

<p class=text> CSS </p>

 

CSS 선택자

1) *

    모든 태그를 의미한다.

    * { font-weight: bold;}  - 모든 태그의 글자를 BOLD체로 한다.

    p { background-color: blue };

 

   div.search * {
     vertical-align: middle
   }

 

이렇게 하게 되면 div.search 의 모든 엘리먼트내에 모든 태그들에 가운데 정렬이 된다.

 

<div class=search> <font  color=blue>파랑</font></div>

이렇게 된다면 font 태그에서도 vertical-align: middle 이 적용 된다는 말이다.

 

2) 태그이름 - HTML 에 있는 태그이든 임의로 만든 태그이든 상관 없음

    aaa { background-color: blue; }

   <aaa>글자 </aaa>

   글자의 배경색을 파랑색으로 만든다.

 

3) 점 -- 태그이름.클래스명
   *.클래스명 ,  . 클래스명

   * 은 생략가능하다

 

   p.blue { background-color: blue }; // p 태그에 있는 blue 클래스를 적용한다.
  <p class=blue>파랑</p>

 

   *.blue { background-color: blue };

   .blue { background-color: blue };

 

   <div class=blue>파랑</div>

   <span class=blue>파랑</span> 와 같이 아무태그에 모두 적용된다.

 

4) #

 

태그이름#ID이름

  div#blue { background-color: blue };

 <div id=blue>파랑</div>  파랑

태그이름을 생략 하게 되면 모든 태그에 적용이된다.

id 는 예를 들어 태그의 이름을 구분 하여 name 과 같이 많이 쓰는데

객체에 id로 이름표를 붙이게 되면 위와 같이 #을 사용해서 CSS 를 적용하게 된다.

 

변형된 형태

 

다음과 같이 하위에 또 적을수도 있다.  하위 선택자라고 한다.

상위 선택자가 적용 되는 하위에 모든 태그에 적용이 된다.

ul#list a:visited {
color: #999;
}

ul 태그 사용한곳에 id를 list 라고 적은 태그 를 감싼 안쪽 부분에 A 태그 를 사용 했다면

IE에서 방문 했던 URL의 색깔을 #999999 로 정한다는 의미이다

<ul id=list>

   <li><a href="www.google.com">구글</a></li>

<ul>

구글을 방문 했다면 #999999 색으로 변하게 된다.

 

ul#list li {
color: #999;
}

<ul id=list>

   <li>aaa</li>

<ul>

 li 태그에 #999999 색을 적용한다