Css  inherits and cascading
Upcoming SlideShare
Loading in...5
×
 

Css inherits and cascading

on

  • 486 views

 

Statistics

Views

Total Views
486
Views on SlideShare
486
Embed Views
0

Actions

Likes
0
Downloads
1
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Css  inherits and cascading Css inherits and cascading Presentation Transcript

  • CSS상속과 캐스케이딩 이항희 (javarouka@gmail.com)
  • CSS● Inherits● Cascading
  • Inherits : 상속● 부모 요소의 스타일이 자식에게 그대로 전달● 상속되는 것과 상속이 되지 않는 속성들● 속성 요약 테이블 참고 (CSS 2.1 기준)● property: inherits 속성값의 특징
  • Cascading: 연속성 1● 하나의 태그에 여러 스타일이 적용● 스타일 적용 간의 충돌 회피● 적용 우선권과 Selector 명시도
  • Cascading : 연속성 2● 우선권 적용 a. 브라우저 기본 스타일시트 b. 제작자 스타일시트 c. 브라우저 사용자 스타일시트
  • Cascading : 연속성 3● 명시도 - 선택자 문자열 기준 a. 인라인 스타일 (n,0,0,0) b. 아이디 (0,n,0,0) c. 클래스 (0,0,n,0) d. 기본 태그 (0,0,0,n)● 불확실 -> 확실
  • Cascading : 연속성 4<div> <a href="https://docs.google.com" class="outerlink"> <span class="urltext">Go to Google Docs</span> </a></div>위에 아래의 스타일을 적용한다면 링크텍스트의 색은?div a.outerlink span { color: red;}div span.urltext { color: blue;}
  • 잘 쓰는건 어렵다.Easy to write, but Difficult to use
  • 참고● 클리어보스팀 : 28. 상속과 케스케이딩 ○ http://www.clearboth. org/28_inheritance_and_cascade/● CSS 2.1의 속성 요약 ○ http://www.w3.org/TR/CSS21/propidx.html● 스타일 선언 방법 ○ http://hyeonseok.com/pmwiki/index. php/Markup/Style