| 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 |
