CSS

CSS เบื้องต้น

การเขียน CSS สามารถเขียนแทรกภายใน tag html ได้เลย หรือแยกส่วน CSS ออกมาภายนอก tag html ก็ได้ หรือแยกเป็นไฟล์ก็ได้

ตัวอย่าง CSS ที่เขียนแทรกภายใน tag html เพื่อใส่สีพื้นหลังและสีตัวอักษร

<span style="background:blue;color:white">ข้อความพื้นหลังสีน้ำเงินอักษรสีขาว</span>

ผลลัพธ์

การแยก CSS ออกจาก tag ทำได้โดยสร้างส่วน style ออกมา  ควรกำหนดชื่อคลาสให้กับ tag เพื่อสามารถกำหนดคุณลักษณะให้กับ tag ที่ต้องการได้ง่าย

<style>
span.link1{background:green;color:yellow}
</style>
<span class="link1" href="#">ข้อความพื้นหลังสีเขียวอักษรสีเหลือง</span>

ผลลัพธ์

Page Styles

Background

• background-color: ***; body background color
• background-image: url(***); body background image
• background-repeat: ***; background image repeat
• background-position: ***; background image position
• background-attachment: fixed; fixed background image
• background: ***; sets all background properties

Margin

• margin: ***; body margin
• margin-***: ***; top, bottom, left, and right margins

Scroll, Cursol

• scrollbar-***-color: ***; scrollbar color
• overflow: ***; controls the scroll
• overflow-***: ***; controls the horizontal or vertical scroll
• cursor: ***; changing mouse cursor shapes

Horizontal Rule

• width: ***; height: ***; width and height of the horizontal rule
• text-align: ***; margin-***: ***; alignment of the horizontal rule
• color: ***; background-color: ***; the color of the horizontal rule
• background-image: url(***); background image of the horizontal rule
• border: ***; border of the horizontal rule

Print

• page-break-***: ***; sets the page-breaking

Box Styles

Width, Height, Background

• width: ***; height: ***; width and height of a box
• max-width: ***; min-width: ***; maximum width and minimum width of a box
• max-height: ***; min-height: ***; maximum height and minimum height of a box
• background-color: ***; box background color
• background-image: url(***); box background image
• background-repeat: ***; background image repeat
• background-position: ***; background image position
• background-attachment: fixed; fixed background image
• background: ***; sets all background properties

Margin, Padding

• margin: ***; box margin
• margin-***: ***; top, bottom, left, and right margins
• padding: ***; box padding
• padding-***: ***; top, bottom, left, and right paddings

Display

• overflow: ***; controls what happens to the overflowed content
• overflow-***: ***; controls the horizontal or vertical overflow
• scrollbar-***-color: ***; box scrollbar color
• display: ***; box display types
• visibility: ***; makes a box visible or invisible

Float, Position

• float: ***; creates a floating box
• clear: ***; clears float
• position: ***; sets how a box will be positioned
• top: ***; right: ***; bottom: ***; left: ***; box positioning
• z-index: ***; stack order of the boxes

Link Styles

Text Color

• (link visited hover active) color: ***; sets links text color

Underline, Background ...

• text-decoration: none; removes the links underline
• border-bottom: ***; changes the links underline style
• (hover) text-decoration: underline; underline is displayed when you mouse over a link
• (hover) text-decoration: none; underline is removed when you mouse over a link
• (hover) background-color: ***; background is changed when you mouse over a link
• (hover) position: relative; text is moved when you mouse over a link

List Styles

Marker

• list-style-type: ***; marker types
• list-style-position: ***; marker position
• list-style-image: url(***); sets an image as the list marker
• list-style: ***; sets all list-style properties

Margin, Padding

• margin: ***; padding: ***; margin and padding of the list
• margin-bottom: ***; spacing between list items
• margin-left: ***; sets the indent for the list items
• padding-left: ***; spacing between marker and text

Horizontal List

• display: inline; sets horizontal list by using the display property
• float: ***; sets horizontal list by using the float property

Image Styles

Border, Width, Height ...

• border: ***; image border
• width: ***; height: ***; width and height of an image
• zoom: ***; sets the zoom level

Alignment, Float ...

• vertical-align: ***; image vertical alignment
• float: ***; creates a floating image
• margin: ***; image margin
• clear: ***; clears float

Table Styles

Whole in table

• width: ***; height: ***; width and height of a table
• max-width: ***; min-width: ***; maximum and minimum width of a table
• max-height: ***; min-height: ***; maximum and minimum height of a table
• border: ***; table border
• border-collapse: ***; table border models
• border-spacing: ***; spacing between the borders
• table-layout: ***; fixed table layout algorithm
• empty-cells: ***; controls whether empty cells are rendered or not
• caption-side: ***; position of the table caption

Cell

• text-align: ***; vertical-align: ***; alignment in the cells
• width: ***; height: ***; width and height of the cells
• padding: ***; padding inside the cells
• white-space: nowrap; disables automatic text wrapping

Background

• background-color: ***; table background color
• background-image: url(***); table background image

Float, Margin

• float: ***; creates a floating table
• margin: ***; table margin
• clear: ***; clears float

Frame Styles

Border, Width, Height

• border: ***; iframe border
• width: ***; height: ***; width and height of an iframe
• max-width: ***; min-width: ***; maximum and minimum width of an iframe
• max-height: ***; min-height: ***; maximum and minimum height of an iframe

Alignment, Float ...

• vertical-align: ***; iframe vertical alignment
• float: ***; creates a floating iframe
• margin: ***; iframe margin
• clear: ***; clears float

Iframe Inside

• background-color: transparent; transparent iframe
• margin: ***; margins inside the iframe
• scrollbar-***-color: ***; iframe scrollbar color

Form Styles

Form Field

• width: ***; height: ***; width and height of a form field
• max-width: ***; min-width: ***; maximum and minimum width of a form field
• background-color: ***; form field background color
• border: ***; form field border
• scrollbar-***-color: ***; textarea scrollbar color
• line-height: ***; line height of text in a textarea

Input Text

• font-size: ***; font size of text in a form field
• color: ***; color of text in a form field

Filter Styles

Basics, Examples

• filter: ***(***); the basics of filters

Examples of filters filter examples using the image and text

Filters

• filter: alpha(***); alpha filter (alpha channel)
• filter: shadow(***); shadow filter
• filter: dropshadow(***); drop shadow filter
• filter: blur(***); blur filter
• filter: glow(***); glow filter
• filter: wave(***); wave filter
• filter: fliph(); fliph filter (horizontal flip)
• filter: flipv(); flipv filter (vertical flip)
• filter: xray(); x-ray filter
• filter: invert(); invert filter
• filter: gray(); gray filter
• filter: chroma(***); chroma filter
• filter: mask(***); mask filter