CSS คืออะไร?
98
บทที่ 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 ของเรา ก็จะทาให้เข้ากับ เว็บเบราเซอร์ในอนาคตได้ดี
-
Upload
somsak-phusririt -
Category
Documents
-
view
6.106 -
download
0
description
ประโยชน์ของ 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 ของเรา ก็จะทาให้เข้ากับเว็บเบราเซอร์ในอนาคตได้ดี
Transcript of 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
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
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 ลกษณะ border
Output
Example ก าหนดส border
Output
Output
Exampleก าหนด property ใหกบ border ในค าสงประกาศเดยว
Output
บทท12 Margin,Padding
บทท 13 List
บทท 14 List
บทท 15 Link
ตอขางลาง
บทท 16 Classification
Classification
การแสดงผลวตถวาจะแสดงอยางไร ทไหน
บทท17 Positioning
บทท18 Lmage
บทท19 From
Form
เรองของ 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
