CSS (StyleSheet)

  • View
    40

  • Download
    10

Embed Size (px)

DESCRIPTION

CSS (StyleSheet). Internet Computing Laboratory @ KUT Youn-Hee Han. 1. 웹 표준. 학습목표 웹 표준에 대하여 이해한다 . xHtml 과 CSS 의 사용법을 익힌다 . 웹 표준이란 ? 웹 기술 발전을 장려하고 잘 운영하기 위한 규칙 웹 표준의 장점 마크업 용량이 줄어든다 . 컨텐츠와 문서 모양을 분리할 수 있다 . 웹 접근성이 높아진다 . 향후 호환성을 보장받는다. 1. 웹 표준. 두 가지 웹 표준 - PowerPoint PPT Presentation

Text of CSS (StyleSheet)

  • CSS (StyleSheet)

    Internet Computing Laboratory @ KUT

    Youn-Hee Han

    Web Programing

  • 1. .xHtml CSS .

    ?

    . . . .

    Web Programing

  • 1. XHTML(eXtensible HyperText Markup Language)HTML4.01 XML CSS(Cascading Style Sheets)

    Web Programing

  • 1. XHTMLHTML4 XML . . . .

    CSS . . .

    Web Programing

  • 1. HTMLHTMHTMLHTMLCSS HTML CSS html .

    Web Programing

  • 2. CSS A. //

    B. 1

    C. 2@import style.css;

    D. .

    Web Programing

  • 2. CSS A.

    //

    //

    Web Programing

  • 2. CSS CSS . B. 1

    //

    Web Programing

  • 2. CSS 4.x @import CSS . C. 2

    @import style.css;

    //

    Web Programing

  • 2. CSS D.

    .

    Web Programing

  • 3. Link-

    Visited-

    Active-

    hover-

    Web Programing

  • 3. CSS Text ExampleStyle.css

    a:link {font-family: ",verdana"; font-size: 9pt; color: #666666; text-decoration: none; line-height:18px ;}a:visited {font-family: ",verdana"; font-size: 9pt; color: #666666; text-decoration: none; line-height:18px ;}a:active {font-family: ",verdana"; font-size: 9pt; color: #666666; text-decoration: none; line-height:18px ;}a:hover {font-family: ",verdana"; font-size: 9pt; color: #ff8000; text-decoration: underline; line-height:18px ;}

    .na a:link {font-family: ",verdana"; font-size: 20pt; color: #666666; text-decoration: none; line-height:18px ;}

    .na a:visited {font-family: ",verdana"; font-size: 20pt; color: #666666; text-decoration: none; line-height:18px ;}

    .na a:active {font-family: ",verdana"; font-size: 20pt; color: #666666; text-decoration: none; line-height:18px ;}

    .na a:hover {font-family: ",verdana"; font-size: 20pt; color: #749139; text-decoration: none; line-height:18px ;}

    Web Programing

  • 3. CSS Text ExampleTest.html

    Title

  • 3.

    #fig ul {list-style: none;}#fig li {background: url(li_bull.gif) no-repeat 0 50%;padding-left: 17px;}

    Web Programing

  • 3.

    h1 {

    font-family: Arial, sans-serif;

    font-size: 24px;

    color: #FFA500;

    }

    Web Programing

    . / . CSS . .

    Web Programing

  • 3. / , , - - -

    Web Programing

  • 3.

    #fig5_8 form dt {float: left;padding-right: 10px;}

    : :

    Web Programing

  • 4. CSS CSS CSS .CSS Float position .

    . , , . . GIF .

    Web Programing

  • 4. CSS CSS

    CSS ( A)body {font-family: verdana, sans-serif;font-size: 12px;}#header {background: #ccc;padding: 20px;}#sidebar {float: right;width: 30%;background: #999;}#content {margin-right: 34%;}

    Web Programing

  • 4. CSS CSS #footer {clear: right;background: #eee;padding: 20px;}

    1 2 3 4

    Web Programing/p> KUT

    Web Programing

  • 4. CSS CSS

    13 - div {margin: 30px;padding: 30px;border: 1px solid #ccc;font-size: small;} #fig13_10 {font-family: Georgia, Times, serif;line-height: 1.5em;text-align: justify;}

    #fig13_10 h1 {letter-spacing: 4px;font-style: italic;text-align: center;font-variant: small-caps;}

    Web Programing

  • 4. CSS CSS #fig13_10 .drop { float: left; font-size: 400%; line-height: 1em; margin: 4px 10px 10px 0; padding: 4px 10px; border: 2px solid #ccc; background: #eee; }

    KUT IME

    Web Programing.

    Good day

    Web Programing