CSS E-Learning Programming : สอน property ของ CSS, เรียน property ของ CSS
 

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
  • background-color ใช้กำหนดสีให้กับพื้นหลัง
    background-image ใช้กำหนดพื้นหลังเป็นรูปภาพ
    background-repeat ใช้กำหนดให้แสดงรูปภาพแบบวนซ้ำหรือไม่
    background-attachment ใช้กำหนดว่าให้รูปภาพพื้นหลัง อยู่กับที่ หรือ เลื่อนตาม เมื่อมีการเลื่อนแถบเลื่อน
    background-positionY ใช้กำหนดตำแหน่งของพื้นหลัง เมื่อเทียบกับขอบด้านบน
    background-positionX ใช้กำหนดตำแหน่งของพื้นหลัง เมื่อเทียบกับขอบด้านซ้าย
    background-position ใช้กำหนดค่าของ property background-positionY และ background-positionX
    background ใช้กำหนดค่าต่างๆของ property background
  • font-style ใช้กำหนดรูปแบบของตัวอักษร
    font-variant ใช้กำหนดตัวอักษรให้เป็นแบบ small-caps
    font-weight ใช้กำหนดขนาดความหนาของตัวอักษร
    font-size ใช้กำหนดขนาดของตัวอักษร
    font-family ใช้กำหนดชนิดของตัวอักษร
    font ใช้กำหนดค่าต่างๆของ property font
  • direction ใช้กำหนดตำแหน่งของข้อความให้ ชิดขวา หรือ ชิดซ้าย
    text-align ใช้กำหนดตำแหน่งของข้อความ
    text-indent ใช้กำหนดย่อหน้าให้กับข้อความ
    letter-spacing ใช้กำหนดระยะห่างระหว่างตัวอักษร
    word-spacing ใช้กำหนดระยะห่างระหว่างข้อความ ( คำ )
    line-height ใช้กำหนดระยะห่างระหว่างบรรทัด
    color ใช้กำหนดสีให้กับข้อความ
    text-decoration ใช้สำหรับตกแต่งข้อความ
    text-transform ใช้เปลี่ยนแปลงรูปแบบข้อความให้เป็น พิมพ์เล็ก หรือ พิมพ์ใหญ่
    vertical-align ใช้กำหนดลักษณะของข้อความ เมื่อเทียบในแนวตั้ง
    word-wrap ใช้กำหนดวิธีการตัดคำขึ้นบรรทัดใหม่
    white-space ใช้กำหนดวิธีการจัดการช่องว่าง และการขึ้นบรรทัดใหม่ของข้อความ
  • margin-top ใช้กำหนดระยะห่างระหว่าง tag นั้นๆ กับ tag ที่อยู่ด้านบน
    margin-right ใช้กำหนดระยะห่างระหว่าง tag นั้นๆ กับ tag ที่อยู่ด้านขวา
    margin-bottom ใช้กำหนดระยะห่างระหว่าง tag นั้นๆ กับ tag ที่อยู่ด้านล่าง
    margin-left ใช้กำหนดระยะห่างระหว่าง tag นั้นๆ กับ tag ที่อยู่ด้านซ้าย
    margin ใช้กำหนดค่าต่างๆของ property margin
    padding-top ใช้กำหนดระยะห่างระหว่างข้อความกับ tag ด้านบน
    padding-right ใช้กำหนดระยะห่างระหว่างข้อความกับ tag ด้านขวา
    padding-bottom ใช้กำหนดระยะห่างระหว่างข้อความกับ tag ด้านล่าง
    padding-left ใช้กำหนดระยะห่างระหว่างข้อความกับ tag ด้านซ้าย
    padding ใช้กำหนดค่าต่างๆของ property padding
    width ใช้กำหนดค่าความกว้างของพื้นที่ให้ element
    min-width ใช้กำหนดค่าความกว้างต่ำสุด ( อย่างน้อย ) ของพื้นที่ให้ element
    max-width ใช้กำหนดค่าความกว้างสูงสุด ( อย่างมาก ) ของพื้นที่ให้ element
    height ใช้กำหนดค่าความสูงของพื้นที่ให้ element
    min-height ใช้กำหนดค่าความสูงต่ำสุด ( อย่างน้อย ) ของพื้นที่ให้ element
    max-height ใช้กำหนดค่าความสูงสูงสุด ( อย่างมาก ) ของพื้นที่ให้ element
  • scrollbar-arrow-color ใช้กำหนดสีของลูกศรของ scroll arrow
    scrollbar-base-color ใช้กำหนดสีให้กับพื้นที่ของ scroll box และ track ยกเว้นขอบล่าง และขอบขวา
    scrollbar-darkshadow-color ใช้กำหนดสีให้กับขอบขวาและขอบล่างของ scroll box
    scrollbar-face-color ใช้กำหนดสีให้กับ scroll box และ track โดยที่สีของ scrollbar จะเข้มกว่าสีของ track
    scrollbar-highlight-color ใช้กำหนดสีให้กับขอบซ้าย และขอบบน ของ scroll box
    scrollbar-shadow-color ใช้กำหนดสีให้กับขอบขวา และขอบล่างของ scroll box และ scroll arrow
    scrollbar-track-color ใช้กำหนดสีให้กับ track
    scrollbar-3dlight-color ใช้กำหนดสีให้กับขอบซ้าย และขอบบน ของ scroll box และ scroll arrow
  • list-style-type ใช้กำหนดสัญลักษณ์ต่างๆที่แสดงหน้ารายการย่อย
    list-style-position ใช้กำหนดตำแหน่งย่อหน้าของบรรทัดต่อไป ในแต่ละรายการย่อย
    list-style-image ใช้กำหนดรูปภาพที่จะแสดงตรงหน้ารายการย่อย
    list-style ใช้กำหนดค่าต่างๆของ property list-style
  • table-layout ใช้กำหนดรูปแบบความยืดหยุ่นของตาราง
    caption-side ใช้กำหนดตำแหน่งของ caption
    empty-cells ใช้กำหนดรูปแบบการแสดงผลเมื่อ cell ว่าง
    border-collapse ใช้กำหนดเส้นขอบระหว่าง cell ว่าจะใช้ด้วยกันหรือไม่
    border-spacing ใช้กำหนดระยะห่างระหว่าง cell
    border-top-width ใช้กำหนดขนาดของเส้นขอบ ด้านบน
    border-right-width ใช้กำหนดขนาดของเส้นขอบ ด้านขวา
    border-bottom-width ใช้กำหนดขนาดของเส้นขอบ ด้านล่าง
    border-left-width ใช้กำหนดขนาดของเส้นขอบ ด้านซ้าย
    border-width ใช้กำหนดค่าของ property border width
    border-top-style ใช้กำหนดลักษณะของเส้นขอบ ด้านบน
    border-right-style ใช้กำหนดลักษณะของเส้นขอบ ด้านขวา
    border-bottom-style ใช้กำหนดลักษณะของเส้นขอบ ด้านล่าง
    border-left-style ใช้กำหนดลักษณะของเส้นขอบ ด้านซ้าย
    border-style ใช้กำหนดค่าของ property border style
    border-top-color ใช้กำหนดสีให้เส้นขอบ ด้านบน
    border-right-color ใช้กำหนดสีให้เส้นขอบ ด้านขวา
    border-bottom-color ใช้กำหนดสีให้เส้นขอบ ด้านล่าง
    border-left-color ใช้กำหนดสีให้เส้นขอบ ด้านซ้าย
    border-color ใช้กำหนดค่าของ property border color
    border-top ใช้กำหนดค่าของ property border top
    border-right ใช้กำหนดค่าของ property border right
    border-bottom ใช้กำหนดค่าของ property border bottom
    border-left ใช้กำหนดค่าของ property border left
    border ใช้กำหนดค่าของ property border
  • position ใช้กำหนดรูปแบบวิธีการจัดวางตำแหน่งของ element
    top ใช้กำหนดระยะห่างระหว่าง ขอบด้านบน เมื่อเทียบกับ element
    right ใช้กำหนดระยะห่างระหว่าง ขอบด้านขวา เมื่อเทียบกับ element
    bottom ใช้กำหนดระยะห่างระหว่าง ขอบด้านล่าง เมื่อเทียบกับ element
    left ใช้กำหนดระยะห่างระหว่าง ขอบด้านซ้าย เมื่อเทียบกับ element
    float ใช้กำหนดตำแหน่งของ element ว่าให้ชิดขวาหรือชิดซ้าย
    clear ใช้สิ้นสุดการจัดตำแหน่งของ element ด้วย property float
    z-index ใช้กำหนดลำดับชั้น บน-ล่าง ในกรณีที่ element ซ้อนกัน
    chip ใช้กำหนดรูปแบบของ element โดยส่วนใหญ่จะใช้กับการ กำหนดรูปร่างของรูปภาพ หรือรูปเรขาคณิต
    overflow-x ใช้กำหนดวิธีการจัดการกับข้อมูลที่ overflow ในแกน x
    overflow-y ใช้กำหนดวิธีการจัดการกับข้อมูลที่ overflow ในแกน y
    overflow ใช้กำหนดวิธีการจัดการกับข้อมูลที่ overflow ทั้งแกน x และแกน y
  • ประเภทของ filters ประเภทของ filters ได้แก่ Visual Filters และ Pages Transitions
    filter ใช้กำหนดคุณสมบัติต่างๆของ filter
    Alpha ใช้กำหนดระดับความสว่างหรือความทึบ โดยวิธีการไล่สี
    Blur ใช้กำหนดความเบลอ
    Chroma ใช้กำหนดสีที่กำหนดให้เป็นสีโปร่งใส
    Shadow ใช้สร้างเงา
    DropShadow ใช้สร้างเงา
    Glow ใช้สร้างการกระจายของขอบวัตถุ
    Wave ใช้สร้างความบิดเบี้ยวในลักษณะคล้ายคลื่น
    FlipH ใช้สร้างภาพสะท้อนกระจกตามแนวตั้ง
    FlipV ใช้สร้างภาพสะท้อนกระจกตามแนวนอน
    Invert ใช้กำหนดให้ค่าสีเป็นสีที่ตรงกันข้ามกันทั้งหมด
    Gray ใช้กำหนดให้สีของวัตถุเป็นสีเทา
    Xray ใช้กำหนดให้วัตถุเป็นภาพขาวดำ
    Mask ใช้สร้างหน้ากากตัวอักษร คือส่วนที่เป็นตัวอักษรจะเป็นช่องว่าง สามารถมองทะลุไปถึงพื้นหลังได้
    RevealTrans ใช้กำหนดรูปแบบการแสดงผล เมื่อมีการเปลี่ยน web page จาก page หนึ่งไปยังอีก page หนึ่ง
    BlendTrans ใช้กำหนดให้วัตถุเลื่อนเข้าเลื่อนออก ( ต้องใช้ร่วมกับ javascript )
  • display ใช้กำหนดรูปแบบการจัดวางข้อมูล
    cursor ใช้กำหนดรูปแบบของเมาส์ เมื่อเมาส์อยู่เหนือ element
    visibility ใช้กำหนดว่าให้ซ่อนหรือแสดง element
    zoom ใช้กำหนดการขยายหรือย่อ ขนาดของ element
 
Share This Subject Login with Facebook