Scribd Logo
Upload

Welcome to Scribd!

  • Css

    Uploaded by

    api-3837902
    90 views15 pages

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    PPT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PPT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    90 views15 pages

    Css

    Uploaded by

    api-3837902

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PPT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 15

    Cascading Style Sheet (CSS)

    โดย
    วชิราวุธ ธรรมวิเศษ

    หน้า 1
    Agenda
    • แนะนำา CSS และ ประโยชน์ของ CSS
    • การใช้งานเบ้อ ื งต้น
    • การใช้ Internal Style sheet
    • การใช้ External Style sheet
    • CSS Syntax
    • การจัดรูปแบบตัวอักษรด้วย CSS
    • การจัด Layout ด้วย Styles
    โดย: วชิราวุธ ธรรมวิเศษ หน้า 2
    แนะนำำ CSS และ ประโยชน์ของ
    CSS
    • CSS ย่อจาก Cascading Style Sheet
    • Style ใช้กำาหนดวิธก ี ารแสดงผลของ
    คำาสัง่ HTML
    • Style ปกติจะเก็บใน Style Sheets
    • Style ถูกเพ่ม ิ ใน HTML 4.0
    เพ่ อ
    ื แก้ปัญหา
    • External Style Sheets ช่วยลดการทำางาน
    • External Style Sheets จะถูกเก็บในไฟล์
    CSS โดย: วชิราวุธ ธรรมวิเศษ หน้า 3
    ประโยชน์ของ CSS
    • CSS ช่วยให้การกำาหนดรูปแบบของ
    HTML ทำาได้ง่าย
    • ลดความซับซ้อนของ Web Page
    • การปรับปรุง
    เปล่ียนแปลงการแสดงผลทำาได้ง่าย
    • ใช้ร่วมกับ Script (VBScript/JScript) เพ่ ือทำา
    DHTML
    • External Style Sheet ช่วยให้ทก ุ Page ใน
    โดย:ท่วชิ
    WebSite ีใช้ราวุCSS
    ธ ธรรมวิเศษ หน้า 4
    ประโยชน์ของ CSS
    • separate format and content
    • make maintenance easier, faster, and cheaper
    • maintain consistency across organization
    • simplify exchange of information
    • reformat for different audiences
    โดย: วชิราวุธ ธรรมวิเศษ หน้า 5
    กำรใช้งำนเบ้ืองต้น
    ส่ิงท่ี CSS สำมำรถทำำได้คือ
    • กำาหนด Style ให้กับ elements, blocks, or classes
    of elements, set:
    – page layout (margins, borders, padding)
    – font size and style (bold, italic ...)
    – text properties (case, underline, color, alignment, indent ...)

    โดย: วชิราวุธ ธรรมวิเศษ หน้า 6


    กำรใช้งำนเบ้ืองต้น
    • CSS Example
    <P STYLE="background-
    color: red">red background
    </P>

    CSS Example
    red background

    โดย: วชิราวุธ ธรรมวิเศษ หน้า 7


    กำรใช้ Internal Style sheet
    • เป็ น Style ท่ีเขียนไว้ภายในเอกสาร HTML
    แบ่งเป็ น 2 ประเภทคือ
    – Local Style จะใช้กำาหนด Style เฉพาะ Tag
    – Global Style จะกำาหนดท่ห ี ัวเอกสาร ใช้เปล่ียน
    Style ของ Tag HTML ท่ใี ช้ทัง้เอกสาร หรือ
    กำาหนด Class Style
    (Global Style สามารถกำาหนดไว้ใน External Style
    Sheet ได้)
    โดย: วชิราวุธ ธรรมวิเศษ หน้า 8
    กำรใช้ Internal Style sheet
    Local Style (Inline)

    <P STYLE="background-color:
    red">red background</P>
    <P STYLE="color:red">red
    background</P>

    โดย: วชิราวุธ ธรรมวิเศษ หน้า 9


    กำรใช้ Internal Style sheet
    Global Style
    <style>
    P {color:red}
    P.blue {color:blue}
    </style>
    <P>Red Color</P>
    <P class=blue> Blue Color </P>

    โดย: วชิราวุธ ธรรมวิเศษ หน้า 10


    กำรใช้ External Style sheet
    • คือการเขียน Style ไว้ในไฟล์ .CSS ภายนอก
    HTML
    <head>
    <link rel="stylesheet" type="text/css" href="mystyle.css"/>
    </head>
    ในไฟล์ mystyle.css
    P {color:red}
    P.blue {color:blue}

    โดย: วชิราวุธ ธรรมวิเศษ หน้า 11


    CSS Syntax
    • ประกอบด้วย 3 ส่วน
    • selector {property: value}
    body {color: black}
    p {color:#FFFF00}
    p {font-family: "sans serif"}

    โดย: วชิราวุธ ธรรมวิเศษ หน้า 12


    กำรจัดรูปแบบตัวอักษรด้วย CSS
    • ใช้ property text และ font
    • ตัวอย่าง
    td {font-size: 24; font-weight: bold;
    font-family: "Courier New”;
    color: #FFEE00}

    โดย: วชิราวุธ ธรรมวิเศษ หน้า 13


    กำรจัด Layout ด้วย Styles
    • กำาหนดตำาแหน่งด้วย position
    – bottom: length กำาหนดตำาแหน่งวัดจากด้านล่าง
    – clip:rect(0 100 200 0) กำาหนดกรอบท่จี ะแสดง
    – overflow: visible/hidden/scroll/auto
    กำาหนดช่องแสดงผล

    โดย: วชิราวุธ ธรรมวิเศษ หน้า 14


    กำรจัด Layout ด้วย Styles
    • ตัวอย่ำง : การใช้ Position
    p.box { position:absolute;
    top: 100px;
    left: 100px
    }
    • <p class=box> This is a box show at position 100,100</p>

    โดย: วชิราวุธ ธรรมวิเศษ หน้า 15

    You might also like