css คืออะไร?

บทท 1 Introduction

CSS คออะไร? CSS ยอมาจาก Cascading Style Sheets เปนภาษาทมรปแบบการเขยน Syntax ทเฉพาะ และถกก าหนดมาตรฐานโดย W3C (World Wide Web Consortium) เชนเดยวกบ HTML และ XHTML ใชส าหรบตกแตงเอกสาร HTML/ XHTML ใหมหนาตา สสน ตวอกษร เสนขอบ พนหลง ระยะหาง ฯลฯ อยางทเราตองการ ดวยการก าหนดคณสมบตใหกบ Element ตางๆ ของ HTML เชน <body>, <p>, <h1> เปนตน

ประโยชนของ CSS 1. การใช CSS ในการจดรปแบบการแสดงผล จะชวยลดการใชภาษา HTML ในการตกแตงเอกสารเวบเพจ ท าให code ภายในเอกสาร HTML เหลอเพยงสวนเนอหา ท าใหเขาใจงายขน การแกไขเอกสารท าไดงายและรวดเรว 2. เมอ code ภายในเอกสาร HTML ลดลง ท าใหขนาดไฟลเลกลง จงดาวนโหลดไดเรว 3. สามารถก าหนดรปแบบการแสดงผลจากค าสง style sheet ชดเดยวกน ใหมผลกบเอกสาร HTML ทงหนา หรอทกหนาได ท าใหเวลาแกไขหรอปรบปรงท าไดงาย ไมตองไลตามแกท HTML tag ตางๆ ทวทงเอกสาร 4. สามารถควบคมการแสดงผลใหเหมอนกน หรอใกลเคยงกน ไดในหลาย Web Browser 5. สามารถก าหนดการแสดงผลในรปแบบทเหมาะกบสอชนดตางๆ ไมวาจะเปนการแสดงผลบนหนาจอ, บนกระดาษเมอสงพมพ, บนมอถอ หรอบน PDA โดยทเปนเนอหาเดยวกน 6. ท าใหเปนเวบไซตทมมาตรฐาน ปจจบนการใช attribute ของ HTML ตกแตงเอกสารเวบเพจ นนลาสมยแลว W3C แนะน าใหเราใช CSS แทน ดงนนหากเราใช CSS กบเอกสาร HTML ของเรา กจะท าใหเขากบเวบเบราเซอรในอนาคตไดด

บทท2 Syntax

โครงสรางค าสง

ค าสงของ CSS ประกอบดวย selector, property และ value

- selector สามารถเปน HTML Tag ตางๆ เชน <body>, <p> หรอเปน Class name หรอ ID ทเราตงชอใหกได - property คอ คณสมบตในการจดรปแบบการแสดงผล เชน color ส าหรบก าหนดส, font-size ส าหรบก าหนดขนาดตวอกษร - value เปน คา ทเราก าหนดใหกบ property ตางๆ เชน color:white, font-size:14px

ตวอยางค าสง CSS

ก าหนดใหขอความทอยใน Tag <p> เปนสด า และวางอยกงกลาง

ก าหนดใหขอความท class name topic เปนสแดง ชนดอกษรเปน Arial ตวหนา และจดวางอยกงกลาง

กรณท selector มคา property เหมอนกน สามารถเขยนรวมกนได โดยใชเครองหมาย "," คนระหวาง selector

ก าหนดใหขอความใน Tag <h1>,<h2> และ <h3> เปนสแดง ชนดตวอกษรเปน sans-serif

ส าหรบเรอง property และ value จะไดศกษาอยางละเอยดในหวขอตอๆ ไป

Comment

ใน Style Sheet Comment จะใชเครองหมาย "/*" เปนการเปด และ "*/" เปนการปด เชน

บทท3 Unit

หนวยทใชวดคาตางๆ ใน Style Sheet

จาก syntax ของค าสง CSS คา value ของ property บางคาจะตองมการระบหนวยดวย หนวยทใชงานใน

CSS มอะไรบาง มาดกนคะ

หนวยแบบ Relative Length (ก าหนดแบบอตราสวน)

px (pixels, สมพนธกบคาความละเอยดของหนาจอ) เชน 1px, 4px em (emphasize, ความสงของตวอกษร) เปนขนาดจ านวนเทาของขนาด font ทก าหนดให body

ถา font ท body ก าหนดเปน 10px h1{fon-size:1.5em} h1 จะมขนาดเปน 1.5 เทา ของ 10px = 15px h2{fon-size:1.4em} h2 จะมขนาดเปน 1.4 เทา ของ 10px = 14px และถาเราก าหนดเปน 1em กจะมขนาดเทากบ 10px เหมอนเดม

ex (x-height, ความสงของตวอกษร "x") เชน 1.5ex, 2ex % (percent, สมพนธกบขนาดหนาจอ หรอ container ทบรรจวตถนนๆ อย) เชน 50%, 130%

หนวยแบบ Absolute Length (ก าหนดตายตว)

in (inches; 1in=2.54cm =72pt =6pc) เชน 2in, 1.5in cm (centimeters; 1cm=10mm) เชน 2cm, 1.11cm mm (millimeters) เชน 50mm, 0.8mm pt (points; 1pt=1/72in, 10pt มขนาดพอๆกบ 12px) เปนหนวยทใชในงานสงพมพเชน 12pt, 20pt pc (picas; 1pc=12pt) เชน 1pc, 2pc

บทท4 Color

ส (Color)

การก าหนดสใหตวอกษร พนหลง เสนขอบ หรอสวนอนๆ ของวตถ สามารถก าหนดไดหลายแบบ 1. ก าหนดโดยใชชอส แตการระบชอสแบบนใชสไดจ านวนจ ากด ไดแก aqua, black, blue, fuchsia (แดงอมมวง), gray, green, lime, maroon (น าตาลแดง), navy, olive, purple, red, silver, teal (เขยวขนเปด), white, และ yellow 2. ก าหนดเปนคาสแบบ RGB

o #rrggbb เชน #eecc00, #42e15e o #rgb เชน #ec0 หมายถง #eecc00 o rgb(x,x,x) โดยท x คอจ านวนเตมตงแต 0-255 เชน rgb(0,204,0) o rgb(y%,y%,y%) โดยท y คอเปอรเซนตตงแต 0%-100% เชน rgb(0%,80%,0%)

บทท5 Insert a Style Shee

วธใชงาน Style Sheet

1. Inline Styles

วธการนควรใชในกรณทตองการก าหนด style ใหกบ element ของ HTML เพยงอนเดยวเปนการเฉพาะ โดย

การแทรกค าสง style sheet ใน HTML Tag อยในค าสง style="" ดงน

เราควรหลกเลยงการเขยน style=”" ฝงลงใน HTML Tag เพราะมนท าใหอานยาก และน าไปใชตอไมได และเปนการยากทจะแกไข 2. Internal Style Sheet วธการนควรใชในกรณทมเพยง HTML ไฟลเดยวทใช style น เมอประกาศค าสง Style Sheet เพอก าหนดคณสมบต ใหกบ HTML Tag ใดๆ แลว จะมผลกบเอกสาร HTML ทงหนา นยมใสสวนของค าสง Style Sheet ไวระหวาง <head>...</head> ส าหรบ Web Browser รนเกาทไมสนบสนนค าสง Style Sheet หรอ Disable Style Sheet ไวนน ใหใส Comment ของ ภาษา HTML ไวดวย เพอใหเวบเบราเซอรนนทราบวาไมใชค าสงภาษา HTML

3. External Style Sheet

วธการนเหมาะกบกรณทมเพยง 1 style แลวตองการน าไปใชกบเอกสาร HTML หลายๆ ไฟล โดยน าเอา

ค าสง Style Sheet ทอยใน <style type="text/css"> ... </style> มาบนทกเปนไฟลใหม นามสกล .css

จากนนจงท าการผนวกไฟลของ Style Sheet นลงไปในเอกสาร HTML ทกไฟลทตองการใชงาน Style Sheet

ชดน ไวในสวน <head>...</head> โดยใชค าสง

ตวอยางนจะสราง Style Sheet เกบไวในไฟลหนง แลวใหไฟลเอกสาร HTML หลายๆ หนามาเรยกใช

EXAMPLE

ในไฟล mystyle.css ใหเขยน code ดงน

ในไฟล HTML ex_css_chapter05_3.html เรยกใช style sheet จากภายนอก

ในไฟล HTML ex_css_chapter05_4.html เรยกใช style sheet จากภายนอก

การทเราใชงาน CSS โดยเรยกใชจากภายนอก จะท าใหไฟลเวบเพจของเรามขนาดเลก และการแกไขค าสง style sheet เพยงทเดยว จะมผลกบเอกสารทกหนาได

Cascading Order

1. กรณทมการก าหนด style ดวยชอ selector เดยวกนทงแบบ 3 แบบ Style sheet ทจะถกใชคอแบบไหน ล าดบความส าคญ เรยงจากมากไปหานอย Inline style (inside an HTML element), Internal style sheet (inside the <head> tag) และ External style sheet ตามล าดบ

จากล าดบความส าคญดงกลาว Style ทจะถกใชคอแบบ Inline style 2. กรณทมการเขยน style ซ า selector เดม อนทอยดานลาง จะถกท าเปนล าดบสดทาย ตวอยาง ไฟล mystyle.css p{ color:black } p{ color:blue } เมอเราเรยกใช <p> ใน HTML เชน <p>รบประทานอาหารทมประโยชน หมนออกก าลงกาย และพกผอนใหเพยงพอ</p> จะไดตวอกษรใน Tag <p> เปนสน าเงน แตหากเราก าหนด !important ไวใน value เชน p{color:black!important} p{color:blue} เมอเขยนแบบน ใน Tag <p> จะไดตวอกษรสด า

บทท 6 Selector: HTML Tag, Class,ID

การเขยนค าสง Style Sheet

Selector ทเปน HTML Tag

EXAMPLE

ตวอยางนเหนกนมาหลายรอบแลวนะคะ เปนการก าหนด style ใหกบ HTML Tag <h1> และ <p>

หมายความวาขอความภายใน <h1> ทกอนในหนาเวบเพจนใหเปนสแดง และขอความใน <p> ทกอนใหเปน

สด า

มาด selector แบบอนๆ กนบางคะ

Selector ทเปน Class attribute

เปนการประกาศค าสง Style Sheet เพอก าหนดคณสมบตแบบเฉพาะเจาะจง ใหกบ HTML element ผาน

class attribute โดยเราสามารถตงชอ class ไดเอง

class ใชเมอตองการใชแสดงผลรปแบบนนซ าหลายๆ ครง หรอตองการใชกบ element หลายๆ อน การ

ประกาศใชครองหมาย "." น าหนาชอ class

EXAMPLE

จากตวอยางสงเกตไดวา class topic ถกเรยกใชหลายครงใน <p> และ ถกใชในหลาย element ได คอ <p>

และ <div>

แตถาตองการก าหนดให class topic ใชงานเฉพาะกบ <p> เทานน ท าไดโดยใส "p." น าหนาชอ class

จะมผลท าใหขอความใน <div class="topic">บทความ</div> ไมสามารถแสดงผลตามรปแบบทก าหนดใน

class topic ได

กรณทตองการใหแสดงผลตามรปแบบทก าหนดใน 2 class กสามารถท าได

EXAMPLE

Selector ทเปน ID attribute เปนการประกาศค าสง Style Sheet เพอก าหนดคณสมบตแบบเฉพาะเจาะจง ใหกบ HTML element ผาน ID attribute เหมอนกบ Class แตตางกนท ID จะใชกบ element ทมเพยงอนเดยวในเอกสาร HTML การประกาศใช # น าหนา ID

EXAMPLE

อาจจะยงไมเขาใจตอนน ไวเหนตวอยางมากๆ เขา จะคอยๆ เขาใจเองคะ แลวจะรไดอยางไรวาคา property และ value เชน text-align: center, font-weight:bold มอะไรบาง อนนศกษาไดจาก Chapter ตอๆ ไปคะ

บทท 7 Contextual selectors

Contextual selectors

การประกาศ selector ซอนกน โดยเคาะ spacebar ท าใหสามารถสบทอดคณสมบตเดม และเพมคณสมบตทแตกตางได ดตวอยางเพอใหเขาใจมากขนคะ

EXAMPLE

OUTPUT ขอความใน <h1> จะเปนสน าเงน แตถามการก าหนดวาเปนตวเอยงแลว ขอความใน <h1> จะเปนสแดง หรอระบวาขดเสนใตแลวจะไดเปนสเขยว โดยทรปแบบพนหลงของ <h1> ยงคงอย

อกตวอยางหนง เพอแสดงใหเหนประโยชนของการใช Contextual selectors

EXAMPLE

OUTPUT

มาดอกตวอยางทไมด คลายกบตวอยางขางบน เปนตวอยางทใช CSS มากเกนไป EXAMPLE

แกไขใหมเขยนแบบ Contextual selectors จะดกวาคะ

OUTPUT

บทท 8 Font

การก าหนดลกษณะใหตวอกษร ใน HTML เราจะใช tag <font face="ชนดตวอกษร" size="number" color="ส">ขอความ</font> นาจะพอจ ากนไดอย แตในเอกสาร HTML/XHTML แบบ strict จะถอวา tag <font> เปน tag ทลาสมยแลว ไมสามารถน ามาใชงานได ใหเราใช CSS แทนคะ

เราสามารถใช CSS ก าหนดลกษณะใหตวอกษรได โดยก าหนดรปแบบ font ผาน Property ตางๆ ใหกบ HTML element เชน <p>,<div>,<span>,<h1> และอนๆ

บทท 9 Text

เราสามารถก าหนดรปแบบใหขอความ เชน ความสงของบรรทด , ต าแหนงการจดวางขอความ, การขดเสน

ใต, การก าหนดตวพมพเลกพมพใหญ และอนๆ ผาน Property ตางๆ ดงน

จาก Property ตางๆ ดานบน ลองน ามาใชจดรปแบบใหกบขอความกนคะ

บทท10 Background เราสามารถก าหนดลกษณะพนหลง Element ตางๆ เชน <body>, <table>, <p>, <h1>, <h2>, <div> เปนตน

Property Description Values

background-attachment

ใชก าหนดวาตองการใหภาพพนหลงนนอยกบท หรอวาเลอนไปตาม

Scroll Bar

fixed scroll

fix อยกบท เลอนตาม Scroll Bar

background-color

ใชก าหนดทงส พนหลงของเวบเพจ หรอ ตาราง

color-rgb color-hex

color-name transparent

รหสส

ชอส

background-image

ใชก าหนดรปภาพ ใหพนหลงของเวบเพจ หรอตาราง

url ของรป เชน url(images/bg.jpg)

background-position

ใชก าหนดต าแหนงการจดวางรปภาพพนหลง

top left top center top right

center left center center center right bottom left

bottom center bottom right

x% y% xpos ypos

background-repeat

ก าหนดรปภาพพนหลงวาตองการใหมการเรยงตอรปภาพหรอไม

repeat repeat-x repeat-y

no-repeat

ไมใหมการวางตอรปภาพ วางตอรปภาพแนวนอน วางตอรปภาพแนวตง

วางตอรปภาพทงแนวนอนและตง

background เราสามารถก าหนด property ใหกบ background-color

background ไดในค าสงประกาศเดยว

background-image background-repeat

background-attachment

background-position

Example Background เปนรปอยดานบน ขวา ไม repeat

Output

Example Background เปนรปอยตรงกลาง ไม repeat

Output

Example Background เปนรปอยตรงกลาง Repeart แนวนอน

Output

Example Background เปนรปอยตรงกลาง repeart แนวตง

Output

Example Background เปนรป repeart ทงแนวนอน และแนวตง

Output

ExampleBackground เปนพนสฟา

Output

Example Background เปนรป Fix

Output

Example Background เปนรปไม Fix เลอนตาม Scroll Bar

Output

บทท 11 Border

เราสามารถก าหนดลกษณะเสนกรอบของ Element ตางๆ ได เชน <p>, <div> เปนตน

Example ก าหนดขนาด border

Output

Example ลกษณะ border

Output

Example ก าหนดส border

Output

Exampleก าหนด property ใหกบ border ในค าสงประกาศเดยว

Output

บทท12 Margin,Padding

บทท 13 List

บทท 14 List

บทท 15 Link

ตอขางลาง

บทท 16 Classification

Classification

การแสดงผลวตถวาจะแสดงอยางไร ทไหน

บทท17 Positioning

บทท18 Lmage

บทท19 From

เรองของ CSS ทเกยวกบ Form ม 2 สวนทอยากจะพดถงคะ สวนแรก Form Elements เราสามารถตกแตง สวนประกอบของ Form ไดแก inputbox, textarea, button เปนตน ใหมสสนทสวยงามได ไปดตวอยางกนคะ

การตกแตง Scroll bar ดวย CSS จะพดถงในบทท 20

รปทใชท าปม Tableless Form เราสามารถก าหนด Form เปน 2 column โดยไมตองใช Table ได โดยก าหนดความกวางของ column แรกโดยใช tag <label> และ colunm ทสอง จะเปนพวก text box ทวางตอจาก column แรก credit to : http://www.dynamicdrive.com/style/csslibrary/item/css-tableless-form/ ลองน า code ไปปรบปรงเปลยนแปลงตอไดคะ

อกตวอยาง สวยๆ คะ

Credit to : http://woork.blogspot.com/2008/06/clean-and-pure-css-form-design.html

บทท20 Scoll bar

บทท21 Mouse cursor

บทท22 Media Types

บทท23 Layout

บทท 24 Layout(Div)

บทท25 Mouse cursor

บทท 26 Pseudo-element

css คืออะไร?

Documents

blockchain คืออะไร

ทรานสเฟอร์ แฟคเตอร์...

มนุษย์ คืออะไร

osi คืออะไร ?

overtrain คืออะไร

microsoft power point คืออะไร

harmonics คืออะไร

ชีววิทยา คืออะไร

aec คืออะไร...

งานระบบ smatv คืออะไร -...

aec คืออะไร

blog คืออะไร2

บทที่ 5 dropbox คืออะไร?

crowd sourcing คืออะไร

social network คืออะไร?

swu-erp...

http คืออะไร

g student คืออะไร

barcode คืออะไร

น้ำมันไบ โอดีเซล...