CSS Introduce : สอน property ของ Introduce, เรียน property ของ Introduce
 

Reference

Reference ในเว็บไซต์ Function.in.th เป็นการนำเสนอความรู้ในรูปแบบของแหล่งอ้างอิงของคำสั่งต่าง ๆ ที่ใช้ในการเขียนโปรแกรม โดยผู้ที่สนใจสามารถเข้ามาเรียนรู้การใช้งานคำสั่งของการเขียนโปรแกรมเหล่านี้ได้ ผ่านทาง URL code.function.in.th ทั้งนี้ผู้อ่านยังสามารถร่วมแสดงความคิดเห็นบนเนื้อหาที่มีสอนได้ ซึ่งถือเป็นการส่งเสริมให้มีการแลกเปลี่ยนประสบการณ์และความรู้ระหว่างผู้อ่านด้วยกันเอง
  • Inline StyleSheet เป็นการกำหนด style sheet โดยใช้ attribute style ไว้ใน tag
    Embedded StyleSheet เป็นการใช้ tag style ภายใน tag head ของ html
    External StyleSheet เป็นการสร้างไฟล์ style sheet ( .css ) ไว้ต่างหาก แล้วเรียกใช้
    Selector - Declaration การสร้าง style sheet มีส่วนประกอบที่สำคัญ 2 ส่วนคือ selector และ declaration
    Element Selector คือการกำหนด style sheet โดยใช้ tag html โดยตรง
    Class Selector คือการกำหนด style sheet โดยใช้ ชื่อคลาส
    ID Selector คือการกำหนด style sheet โดยใช้ ไอดี
    Property คือ คุณสมบัติหรือรูปแบบต่างๆที่จะกำหนดให้ selecto
    Value value ใน style sheet แบ่งออกเป็น 2 ประเภท ได้แก่ unit และ url
    รูปแบบการกำหนด style sheet รูปแบบการกำหนด style sheet มีหลายลักษณะ เช่น element selector, universal star selector เป็นต้น
    รูปแบบของ element selector เป็นการกำหนด style sheet ให้กับ tagHtml โดยตรง
    รูปแบบของ grouped selector เป็นการกำหนด style sheet ให้กับ tagHtml พร้อมกันหลายๆ tag
    รูปแบบของ universal star selector
    รูปแบบของ contextual selector หรือ descendant selector เป็นการกำหนด style sheet ให้กับ tagHtml ที่ซ้อนกัน
    รูปแบบของ child selector เป็นการกำหนด style sheet ให้กับ tagHtml ที่ซ้อนกัน
    รูปแบบของ adjacent sibling selector เป็นการกำหนด style sheet ให้ element หลัก กับ element ย่อย มีค่าการแสดงผลเหมือนกัน
    รูปแบบของ attribute selector เป็นการกำหนด style sheet ให้กับ attribute ของ selector นั้นๆ
    รูปแบบของ id selector เป็นการกำหนด style sheet ใ้ห้กับ ชื่อไอดี นั้นๆ
    รูปแบบของ class selector เป็นการกำหนด style sheet ให้กับ ชื่อคลาส นั้นๆ
    รูปแบบของ pseudo - class selector เป็นการกำหนด style sheet พิเศษให้กับ tag บางคำสั่ง
    รูปแบบของ pseudo - element selector เป็นการกำหนด style sheet พิเศษ ให้กับบางส่วนของ selector
    !important เป็นการกำหนดลำดับความสำัคัญว่า Selector นี้สำคัญที่สุด
    ลำดับความสำคัญ ลำดับความสำคัญของ style sheet
    ลำดับการประมวลผล ลำดับการประมวลผล style sheet
    ชนิดของตัวอักษร ชนิดของตัวอักษรใน style sheet
    หน่วยที่ใช้กำหนดขนาดตัวอักษร หน่วยที่ใช้กำหนดขนาดตัวอักษร ของ style sheet
    ประเภทของ layout ประเภทของ layout ใน style sheet มี 3 ประเภท ได้แก่ Fixed Layout, Liquid Layout, Elastic Layout
    ส่วนประกอบของ scrollbar ส่วนประกอบของ scrollbar ได้แก่ Scroll Box, Scroll Arrow, Track
  • subject :
    การประกาศ style sheet แบบ inline

    content :
    เป็นการกำหนด style sheet โดยใช้ attribute style ไว้ใน tag 
    ของคำสัี่ง html เลย และจะมีผลกับ tag นั้นๆ เท่านั้น

    syntax :
    <tagHtml style="property: value;"> ... </tagHtml>

    example :
    <h1 style="font-family: verdana; color: blue;>
         การกำหนด style sheet แบบ inline
    </h1>

  • subject :
    การประกาศ style sheet แบบ embedded

    content :
    เป็นการใช้ tag style ภายใน tag head ของ html
    โดย style sheet นี้จะมีผลต่อ page นั้นๆ เท่านั้น

    syntax :
    <head>
         <style type="text/css">
              tagHtml { property: value; }
         </style>
    </head>

    example :
    <head>
         <style type="text/css">
              h1 { color: blue; }
              span { color: red; font-size: 12px; }
         </style>
    </head>

  • subject :
    การประกาศ style sheet แบบ external

    content :
    เป็นการสร้างไฟล์ style sheet ( .css ) ไว้ต่างหาก แล้วเรียกใช้ โดยวิธีการเรียกใช้มีอยู่ 2 วิธี คือ 
    การกำหนด tag link ไว้ภายใน tag head และ การใช้คำสั่ง import ภายใน tag style

    syntax :
    <head>
         <link rel="stylesheet" href="ชื่อไฟล์.css" type="text/css" />
    </head>
    
    หรือ
    
    <style type="text/css">
         @import url( ชื่อไฟล์.css );
    </style>

    example :
    <head>
         <link rel="stylesheet" href="theme_one.css" type="text/css" />
         <link rel="stylesheet" href="theme_two.css" type="text/css" />
    </head>

  • subject :
    Selector - Declaration

    content :
    การสร้าง style sheet มีส่วนประกอบที่สำคัญ 2 ส่วนคือ
    1. Selector แบ่งออกเป็น 3 ลักษณะ ได้แก่ Element Selector, Class Selector, ID Selector
    2. Declaration แบ่งออกเป็น 2 ส่วน ได้แก่ Property, Value

  • subject :
    Element Selector

    content :
    คือการกำหนด style sheet โดยใช้ tag html โดยตรง

  • subject :
    Class Selector

    content :
    คือการกำหนด style sheet โดยใช้ ชื่อคลาส ( .ชื่อคลาส ) 
    และเมื่อต้องการเรียกใช้ ให้ประกาศ attribute class ไว้ใน tag ของ html ที่ต้องการ
    โดยการกำหนดค่าให้เท่ากับ ชื่อคลาส ที่สร้างไว้

  • subject :
    ID Selector

    content :
    คือการกำหนด style sheet โดยใช้ ไอดี ( #ชื่อไอดี )
    และเมื่อต้องการเรียกใช้ ให้ประกาศ attribute id ไว้ใน tag ของ html ที่ต้องการ
    โดยการกำหนดค่าให้เท่ากับ ชื่อไอดี ที่สร้างไว้

  • subject :
    property

    content :
    คือ คุณสมบัติหรือรูปแบบต่างๆที่จะกำหนดให้ selector มีหลายประเภท ได้แก่
    -> font ใช้กำหนดคุณสมบัติที่เกี่ยวกับตัวอักษรทั้งหมดใน web page
    -> list ใช้กำหนดคุณสมบัติของ element ย่อยใน element หลัก
    -> background ใช้กำหนดคุณสมบัติพื้นหลังของ web page
    -> align ใช้กำหนดคุณสมบัติเกี่ยวกับการจัดวาง element ต่างๆ
    -> margin ใช้กำหนดระยะห่างระหว่าง element ที่กำหนด และ element ที่ล้อมรอบ
    -> color ใช้กำหนดคุณสมบัติที่เกี่ยวกับสีของ element
    -> border ใช้กำหนดคุณสมบัติของเส้นขอบ
    -> classification ใช้กำหนดคุณสมบัติพิเศษ และการแสดงผลของ element
    -> dimension ใช้กำหนดและควบคุมความกว้างและความสูงของข้อมูล
    -> list and marker ใช้กำหนดคุณสมบัติของ element ย่อยที่อยู่ภายในขอบเขตของ element หลัก
    -> padding ใช้กำหนดระยะห่างระหว่าง element กับเนื้อหาใน element นั้น
    -> position ใช้กำหนดรูปแบบการอ้างอิงตำแหน่ง
    -> text ใช้กำหนดการแสดงผลของข้อความ
    -> pseudo - classes ใช้กำหนดการตอบสนองต่อการกระทำบางอย่างกับ element
    

  • subject :
    value

    content :
    value ใน style sheet แบ่งออกเป็น 2 ประเภท ได้แก่
    1. unit คือการกำหนดค่าในรูปแบบตัวเลขหรือข้อความ ซึ่งแบ่งออกเป็น 3 ชนิด ได้แก่
        percentage unit, keyword, length unit
    2. url คือการกำหนดตำแหน่งที่อยู่ของเอกสาร

  • subject :
    รูปแบบการกำหนด style sheet

    content :
    รูปแบบการกำหนด style sheet มีหลายลักษณะ ได้แก่
    -> การกำหนดแบบ element selector
    -> การกำหนดแบบ grouped selector
    -> การกำหนดแบบ universal star selector
    -> การกำหนดแบบ contextual selector หรือ descendant selector
    -> การกำหนดแบบ child selector
    -> การกำหนดแบบ adjacent sibling selector
    -> การกำหนดแบบ attribute selector
    -> การกำหนดแบบ id selector
    -> การกำหนดแบบ class selector
    -> การกำหนดแบบ pseudo - class selector
    -> การกำหนดแบบ pseudo - element selector

  • subject :
    การกำหนด style sheet แบบ element selector

    syntax :
    Selector { Property: Value; }

    content :
    เป็นการกำหนด style sheet ให้กับ tagHtml โดยตรง

    example :
    h1 { color: blue; font-size: 13px; }

  • subject :
    การกำหนด style sheet แบบ grouped selector

    syntax :
    Selector1, Selector2, ..., SelectorN { Property: Value; }

    content :
    เป็นการกำหนด style sheet ให้กับ tagHtml พร้อมกันหลายๆ tag

    example :
    h1, span, b { color: blue; }

  • subject :
    การกำหนด style sheet แบบ universal star selector

    syntax :
    * { Property: Value; }

    content :
    เป็นการกำหนด style sheet ให้กับ tagHtml พร้อมกันทุกๆ tag

    example :
    * { margin: 0px; padding: 0px; }

  • subject :
    การกำหนด style sheet แบบ contextual selector หรือ descendant selector

    syntax :
    Selector SubSelector { Property: Value; }

    content :
    เป็นการกำหนด style sheet ให้กับ tagHtml ที่ซ้อนกัน
    โดยเป็นการเจาะจงเฉพาะ selector ที่มากจาก parent selector นั้นๆ

    example :
    p strong { color: green; border: none; }

  • subject :
    การกำหนด style sheet แบบ child selector

    syntax :
    Selector > SubSelector { Property: Value; }

    content :
    เป็นการกำหนด style sheet ให้กับ tagHtml ที่ซ้อนกัน
    โดยเป็นการเจาะจงเฉพาะ selector ที่มากจาก parent selector นั้นๆ

    example :
    ul > li { color: #ccff00; }

  • subject :
    การกำหนด style sheet แบบ adjacent sibling selector

    syntax :
    Selector + SubSelector { Property: Value; }

    content :
    เป็นการกำหนด style sheet ให้ element หลัก กับ element ย่อย มีค่าการแสดงผลเหมือนกัน

    example :
    p + strong { color: green; }

  • subject :
    การกำหนด style sheet แบบ attribute selector 

    syntax :
    Selector [ Attribute ] { Property: Value; }

    content :
    เป็นการกำหนด style sheet ให้กับ attribute ของ selector นั้นๆ

    example :
    a [href][title] { color: red; }

  • subject :
    การกำหนด style sheet แบบ id selector

    syntax :
    #idName { Property: Value; }

    content :
    เป็นการกำหนด style sheet ใ้ห้กับ ชื่อไอดี นั้นๆ

    example :
    #panda { color: blue; }
    p#panda { color: red; }

  • subject :
    การกำหนด style sheet แบบ class selector

    syntax :
    .className { Propery: Value; }

    content :
    เป็นการกำหนด style sheet ให้กับ ชื่อคลาส นั้นๆ

    example :
    .panda { color: blue; }
    p.panda { color: red; }

  • subject :
    การกำหนด style sheet แบบ pseudo - class selector

    syntax :
    Selector : Pseudo-Class { Property: Value; }

    content :
    เป็นการกำหนด style sheet พิเศษให้กับ tag บางคำสั่ง

    example :
    a:link { color: red; }
    a:visited { color: blue; }
    a:hover { color: green; }
    a:active { color: blue; }

  • subject :
    การกำหนด style sheet แบบ pseudo - element selector

    syntax :
    Selector : Pseudo-Element { Property: Value; }

    content :
    เป็นการกำหนด style sheet พิเศษ ให้กับบางส่วนของ selector

    example :
    :first-letter { font-size: 20px; color: red; }
    :first-line { padding-left: 40px; }

  • subject :
    การใช้คำสั่ง !important

    syntax :
    Selector { Property: Value !important; }

    content :
    เป็นการกำหนดลำดับความสำัคัญว่า Selector นี้สำคัญที่สุด
    คือ ไม่ว่าจะมีการกำหนด style sheet ให้กับ selector นั้นๆอีกกี่รอบ กี่รูปแบบ
    ก็ไม่มีผล เพราะ !important สำคัญที่สุด

    example :
    h1 { color: blue !important; }

  • subject :
    ลำดับความสำคัญของ style sheet ( มากไปน้อย )

    content :
    1. คำสั่ง !important
    2. Inline Style Sheet
    3. Embedded Style Sheet
    4. Linking Style Sheet
    5. Import Style Sheet

  • subject :
    ลำดับการประมวลผล style sheet ( มากไปน้อย )

    content :
    1. คำสั่ง !important
    2. Inline Style Sheet
    3. ID Selector
    4. Class Selector
    5. Element Selector

  • subject :
    ชนิดของตัวอักษรใน style sheet ( แบ่งตามกลุ่ม )

    content :
    1. Serif ได้แก่ Times New Roman, Georgia, Garamond
    2. Sans Serif ได้แก่ Helvetica, Verdana, Arial, Univers
    3. Monospace ได้แก่ Courier, Monaco
    4. Cursive ได้แก่ Comic Sans, Zapf Chancery, Zapfino
    5. Fantasy ได้แก่ Desdemona, Playbill, Herculanum

  • subject :
    หน่วยที่ใช้กำหนดขนาดตัวอักษร ของ style sheet

    content :
    หน่วยที่ใช้กำหนดขนาดตัวอักษร ของ style sheet แบ่งออกเป็น 3 กลุ่มใหญ่ๆ ไ้ด้แก่
    1. Absolute
        คือเป็นการกำหนดแบบตายตัว เป็นได้ทั้งค่าตัวเลข และ keyword
        ได้แก่ in, cm, mm, pt, px, pc ( 1pc = 12pt ), xx-small, x-small, small, medium, large, x-large, xx-large
    2. Relative
        คือเป็นการกำหนดเป็นหน่วยที่สัมพันธ์กับขนาดมาตรฐานของคอมพิวเตอร์ เป็นได้ทั้งค่าตัวเลข และ keyword
        ได้แก่ em, ex, ps, smaller, larger
    3. Percentage
        คือเป็นการกำหนดค่าของหน่วยที่สัมพันธ์กับขนาด browser
        โดยจะต้องระบุค่าตัวเลข แล้วตามด้วยเครื่องหมายเปอร์เซ็นต์

  • subject :
    ประเภทของ layout ใน style sheet

    content :
    ประเภทของ layout ใน style sheet มี 3 ประเภท ได้แก่
    1. Fixed Layout
        เป็นการกำหนดโครงสร้างการแสดงผล web page แบบตายตัว
        คือการกำหนดค่าของหน่วยต่างๆเป็น pixel ( px )
    2. Liquid Layout
        เป็นการกำหนดโครงสร้างการแสดงผล web page ให้สามารถเปลี่ยนแปลงได้
        ตามความละเอียดของจอภาพ คือการกำหนดค่าของหน่วยต่างๆเป็น เปอร์เซ็นต์
    3. Elastic Layout
        เป็นการกำหนดโครงสร้างการแสดงผล web page ที่คล้ายกับ Fixed Layout
        คือโครงสร้างจะไม่เปลี่ยนแปลงไปตามขนาดของ browser
        แต่จะเปลี่ยนแปลงตามขนาดของตัวอักษร ที่ได้กำหนดไว้ใน property font-size
        ( การกำหนดค่าให้กับ element ใดๆต้องกำหนดหน่วยเป็น em เสมอ )

  • subject :
    ส่วนประกอบของ scrollbar

    content :
    ส่วนประกอบของ scrollbar ดังนี้
    - Scroll Box เป็นกล่องสี่เหลี่ยมที่อยู่บนแถบ scrollbar ที่ทำหน้าที่ เลื่อนจอขึ้นลง
    - Scroll Arrow เป็นสัญลักษณ์ลูกศร ขึ้นลง ซ้ายขวา
    - Track เป็นแถบ scrollbar ( ที่รองรับ scroll box เลื่อน )

 
Share This Chapter Login with Facebook