CSS3 중요 규칙

css기술 중요 규칙?

1. 스타일 기술은 ‘ { ’ 시작하여 ‘ } ’ 끝난다.

2. 다중속성 적용시 ‘ ; ’ 구분한다. 연속되는 속성이 더 이상 없을 경우 마지막 속성은 ‘;’를 삭제해도 된다.

ex)

td{ width​:​ 10px​;​ }

 

3.마크업 태그와 속성을 일치시켜 스타일 적용
ex)

​td​{ width: 10px; }

4.class 와 id들은 대소문자를 구분하며 문자로 시작해야 하며 영숫자와 언더바(_),하이픈(-)을 포함 할 수 있다.

ex) 

​.select{}(o)

.select_1{}(o)

.select-1{}(o)

.selectBar(o)

.1select{}(x)

 

4. 부모 자식 관계는 공백으로 구분하여 표기 한다.

ex) 

css style sheet  표기 :

.wrap .inner{}
.inner{}

 

html 문서 표기: 

ex)

<div class="wrap">
   <div class="inner">test</div>
</div>

 

5. 다중 class는 연결하여 표기한다.

ex)

css sylte sheet  표기 :

.wrap.nav{}

 

html 문서 표기 :

<div class="wrap nav"></div>

 

 

CSS 우선 순위 :

1. 속성값뒤에!important를붙인속성

2. HTML에서style을직접지정한속성

3. #id로지정한 속성 

4. .클래스, :추상클래스 로 지정한 속성

5. 태그이름 으로 지정한 속성

6. 상위 객체에 의해 상속된 속성

 

1. !important : 가장 높은 우선 순위를 갖는데 (스크립트 무시하고 적용)
   ex)
   

   a{ color: #ff0000 ​!important​ }

2. 인라인 : 태그에 style속성을 기재하여 적용하는 스타일

ex)

<td ​style=”color: #ff0000”​></td>

 

3. 사용자 정의 : 셀렉터는 일반정의를 덮는다.

ex)

css sylte sheet  표기 :

a{ color: #ff0000 } < a.link{ color: #ff0000 } a{ color: #ff0000 } < .link{ color: #ff0000 }

 

html 문서 표기 :

<a href=”#” class=”link”></a>

 

 

4. 규칙순서:마지막규칙선언은가장높은우선순위를가진다.

ex)

css sylte sheet  표기 :

.link{ color: white } .link{ color: red } .link{ color: black}

 

5. 부모 상속 : 프로퍼티를 지정하지 않으면, 부모 요소에 상속 된다.

ex)

css sylte sheet  표기 :

.link{ color: white }

 

html 문서 표기 :

<div class=”link”>

    <p>test</p>

</div>

 

p 태그의 test 의 색상은?

 

 

 

6. attribute: 태그 속성을 사용하여 선택할 수 있다.

 

표기 )

---> css 표기 : input[type=text]{ /*속성기재*/ } 동위 또는 자손 선택자 사용: 1. “ >“ 자손 선택자 : “ > ”를 사용하여 요소 바로 아래 자식 요소를 선택할 수 있다. 표기 )

span

---> css 표기 : .box > span{ /*속성기재*/ } 2. “ + “ 동위선택자(인접) 선택자 : “ + ”를 사용하여 요소 바로 뒤에 인접한 요소를 선택 할 수 있다. 표기 )

span

items

---> css 표기 : .box + .items{ /*속성기재*/ } 3. “ ~ “ 동위선택자 선택자 : “ ~ ”를 사용하여 요소 뒤에 오는 요소를 선택할 수 있다. 표기 )

span

span

items

---> css 표기 : .box ~ .items{ /*속성기재*/ }