CSS

CSS vs. XML-FO

XML 과 프리젠테이션
- XML document는 단지 contents 만을 포함한다.
- contents는 프리젠테이션을 위해 포맷형식을 필요로 한다.
- 프리젠테이션을 위한 두가지 선택
  > CSS (Cascading Stylesheets)
  > XSL-FO (XSL Formatting Objects)
CSS
- XML 구조가 아니다.
- 다큐먼트안의 특정한 엘리먼트의 외관을 기술한다.
- No transformation
  > ducument에 있는 Data는 xml document에 나타난것처럼 약간의 표현된것을 얻는다.
  > CSS는 XML 다큐먼트 마크업으로 변경되지 않는다.
XSL-FO
- XML 구조
- 페이지의 텍스트 레이아웃을 기술한다.
- 페이지의 엘리먼트, 텍스트의 블록, 그래픽 등등을 가지고 있다.
- XML 다큐먼트는 랜더링 어플리케이션에 의해 랜더링되어 구해진 XSL-FO 안으로 변형되어져 구한다.

CSS history

CSS의 세가지 레벨
- CSS1
  > 1996년 W3C 권고
  > HTML 만 지원
  > 불완전하게 평가됐다.
  > 일관되지 않는 브라우저 실행
- CSS2
  > 현재 권고
  > XML 과 HTML 다큐먼트 지원
- CSS3 (Future)

CSS 구조

CSS 구조
- XML 구조가 아니다. 하지만 매우 간단하다.
- 스타일 정보에 대한 엘리먼트들의 리스트이다.
- 네임스페이스로 엘리먼트를 알아챌수 있도록, 적당한 full name을 사용한다.

Example

Example XML Document

<?xml version="1.0" encoding="ISO-8859-1" standalone="yes"?>
<?xml-stylesheet type="text/css" href="12-2.css"?>
<recipe source="Marjorie Anderson">
  <dish>Southern Corn Bread</dish>
  <ingredients>
    <ingredient>
      <quantity>1 cup</quantity>
      <component>flour</component>
    </ingredient>
    <ingredient>
      <quantity>4 tablespoons</quantity>
      <component>Royal Baking Powder</component>
    </ingredient>
    <!-- a few more ingredients -->
  </ingredients>

  <directions>
    <step>Sift flour, baking powder, sugar &amp; salt together.</step>
    <step>Add 1 cup corn meal.</step>
    <step>Bake in hot oven at <temperature>425º F</temperature> for
      <duration>25 minutes</duration>.
    </step>
    <!-- a few more steps -->
    <step optional="yes">
      Cut into squares if cooked in shallow pan.
    </step>
  </directions>
  
  <story>
    After my mother-in-law <person>Marjorie Anderson</person> died,
    Beth and I found this recipe written on the "extra recipes"
    page in a local cookbook in her cupboard.
    This was published by The Episcopal Churchwomen,
    Church of Ascension, <city>Mt. Sterling</city>,
    <state>Kentucky</state>.
  </story>
</recipe>

Example CSS Stylesheet

/* Defaults for the entire document */
recipe {font-family: "New York", "Times New Roman", serif; font-size: 12pt }

/* Make the dish look like a headline */
dish { display: block;
       font-family: Helvetica, Arial, sans-serif;
       font-size: 20pt;
       font-weight: bold;
       text-align: center
}

/* A bulleted list */
ingredient {display: list-item}

/* Format these two items as paragraphs */
directions, story { display: block;
                    margin-top: 12pt;
                    margin-left: 4pt
}

Output

Style Rules

Style Rules
- 각각의 엘리턴으와 엘리먼트 셋은 {}로 감싸진 스타일 속성셋을 따른다.
- 각각 스타일 속성은 name과 value를 가진다.
- Case insensitive
- 모든 엘리먼트가 스타일 룰을 가지는 것은 아니다.
  > 차일드 엘리먼트는 부모의 스타일 룰을 상속받는다.
  > 적당한 기본값을 제공받는다.
스타일 시트와 XML 다큐먼트
- CSS 스타일 시트는 웹 페이지에서 사용하기 위한 목적으로 계획되었다.
- 웹브라우저들은 XML 다큐먼트 안의 xml-stylesheet 프로세싱 명령을 확인한다.
  > <?xml-stylesheet type="text/css"href="recipe.css"?>
  > 6 pseudo attributes - type, href, charset, title, media, alternate
Pseudo Attributes
- type: 스타일 시트의 MIME 미디어 타입
  > text/css for CSS
  > text/xml (not text/xsl) for XSLT
- href: 스타일 시트의 절대적, 상대적 URL
- charset: 스타일 시트에 쓰여진 캐릭터셋의 이름
- title: 스타일시트의 이름
- media: 스타일 시트의 타겟이 되는 미디어 타입
  > screen, tty, projection, handheld, print, braille, aural, all
- alternate: 만약 스타일 시트라면 alternate 인지 primary인지 말해준다.

Selectors

Selectors
- 스타일리을 위해 선택된 엘리먼트들의 기술방법
- 대부분의 엘리먼트 이름과 엘리먼트의 리스트
- CSS는 다른 기본적인 selectors를 제공한다.
  > Xpath처럼 강력하진 않다.
Element Selectors
- 일반적인 selector
  
```
 * {font-size: large} 
```
   > Any element which does not have a more specific conflicting rule
- Matching descentdants
   > ingredients quantity
```
{ font-size: medium} 
```
- Matching children
   > ingredients > quantity
```
 {font-size: inherit}
```
- Matching siblings
   > Ingredients + story
```
 {border-top-style: solid}
```

Attribute Selectors

사각괄호[]는 사용자가 선택한 엘리먼트의 특별한 속성과 속성값을 나타낸다.

step[optional] {display:none} - optional 속성을 가지는 모든 step 엘리먼트를 숨긴다.
*[optional] {display:none} 
step[optional="yes"] {display:none}

Display Property

 {display: inline} - 만약 정의된것이 없으면 디폴트
{display: block} - 엘리먼트와 엘리먼트와 관계있는것을 줄바꿈으로 구분하기 위해 표현한다.
{display: list-items} - Bullet items

Font Property

 Dish {
    font-family: Helvetica, Arial;
    font-size: x-large;
    font-style: italic;
    font-variant: small-caps;
    font-weight: 900;
    font-stretch: semi-expanded
  }

Text Property

story {
    text-indent: 0.5in;
    text-align: center;
    text-decoration: underline;
    text-transform: capitalize;
    white-space: normal
}

Color Property

story {
    color: #00FF00;
    background-color: rgb(43, 43,43);
    border-color: black
}

Summary

Summary
CSS는 각 HTML과 XML 다큐먼트의 스타일링을 위한 것이다.
CSS provides straight-forward but non-XML like syntax for styling
References
"XML in a Nutshell" written by Elliotte Rusty Harold & W. Scott Means, O'Reilly, Jan. 2001 (First Edition), Chapter 12 "CSS"

CSS

CSS

CSS

Table of Contents

CSS vs. XML-FO

CSS history

CSS 구조

Example

Style Rules

Selectors

Summary

Labels