Cascading style Sheet CSS¸šทที่ 7... · 2013-01-27 · บทที่ 7...
Transcript of Cascading style Sheet CSS¸šทที่ 7... · 2013-01-27 · บทที่ 7...
บทท 7 จดรปแบบเวบเพจดวย Cascading style Sheet (CSS)
จากเนอหาของบททผานๆมา คณจะเหนวาขนตอนบางอยางในการสรางเวบเพจนนใชเวลามาก นนกคอการจดรปแบบของบองคประกอบตางๆ เชน ฟอนด ขนาด และสของขอความ, รปแบบหวขอบลเลต, ลกษณะขอบและสพนของตาราง เปนตน ซงถามเวบเพจจ านวนมากคณกตองท าแบบเดยวกนซ าๆบนทกหนา นอกจากนการเปลยนแปลงในภายหลงกท าไดยาก ดงนนคณจงควรน าสไตล CSS มาใช เพอชวยใหการจดรปแบบเนอหาของเวบเพจท าไดสะดวก และมประสทธภาพมากขน รจกกบ CSS
CSS(Cascading Style Sheet)เปนชดค าสงส าหรบจดรปแบบการแสดงผลทนยมน ามาใชกบเวบเพจ เพอเสรมคณสมบตของ HTMLซงจะชวยใหคณจดรปแบบของเนอหาตางๆบนเวบเพจไดอยางสะดวก รวดเรว มประสทธภาพ และเทยงตรงตามทไดออกแบบไว
ใน Dreamweaver เมอคณก าหนดคณสมบตของเวบเพจใน Page Properties และจดรปแบบขอความดวยออปชนบนพาเนลProperties นน สไตล CSS จะถกน ามาใชแทนค าสง HTML โดยอตโนมต แตส าหรบเนอหาอนๆ หากตองการใช CSS คณมกจะตองสรางและก าหนดสไตลใหกบเนอหาเหลานนเอง ใชจดรปแบบเวบเพจไดเกอบทกสวน
สามารถใชสไตล CSS เพอจดรปแบบองคประกอบบนเวบเพจไดเกอบทกสวน นอกจากนสไตลหนงๆยงน าไปใชกบเนอหาไดหลายประเภท เชน สไตลทก าหนดสพนหรอภาพฉากหลงอาจจะใชกบตาราง,ขอความ,AP Element หรอเวบเพจทงหนากได จดรปแบบไดอยางละเอยดและเทยงตรงตามทออกแบบไว
CSS สามารถก าหนดต าแนงและขนาดของเนอหาตางๆบนเวบเพจไดอยางละเอยด และคณยงเลอกใชหนายวดใดๆ กได เชน mm, cm, in, point และ pixel ท าใหไดเวบเพจทมเลยเอาทเทยงตรงตามทออกแบบไว ส าหรบกรณของตวอกษร เมอคณก าหนดขนาดดวย CSS ขอความทไดจะมขนาดคงทบนเวบเพจ โดยไมขนกบการตงคาขนาดตวอกษรบนบราวเวอรของผชม ท าใหลดโอกาสผดเพยนของเลยเอาทลงไป ชวยใหจดรปแบบเวบเพจไดงายและแกไขสะดวก
สไตล CSS เปนการรวบรวมค าสงส าหรบจดรปแบบทงหมดไวทเดยวกน แทนทจะกระจายไปตามแทกตางๆ ชวยใหคณจดรปแบบเวบเพจทงหนาไดงาย และเมอตองการเปลยนแปลงกเพยงแตแกไขทสไตลเทานน
ควบคมรปแบบไดทงเวบไซตจากจดเดยว
นอกจากการสรางสไตลเพอใชภายในเวบเพจหนาใดหนาหนงแลว คณยงสามารถน าสไตลไปใชกบเวบเพจหลายๆหนากรอทงเวบไซตได โดยบนทกสไตลเหลานนเปนไฟลนามสกล .cssแลวจงดงไฟลนไปใชบนเวบเพจทตองการคณสมบตนชายใหคณสรางเวบเพจทมรปเหมอนกนตลอดทงเวบไซตไดงาย และเมอจ าเปนตองเปลยนแปลงคณลกษณะใดๆกแกไขทไฟล .cssเพยงไฟลเดยวเทานน การจดรปแบบบนเวบเพจทงหมดจะเปลยนไปโดยอตโนมต สามารถสบทอดและจดล าดบความส าคญของสไตล (Cascading)
CSS ยอมใหมการใชสไตลไดหลายระดบ โดยแตละระดบจะสบทอดคณสมบตเดมลงมาเปนชนๆแตในกรณทเกดความขดแยงกนกจะยดตามระดบของสไตลเหลานน (ดหวขอ”ลกษณะการใชงานสไตล CSS”) ลกษณะการใชงานสไตล CSS
แบงออกเปน 3 แบบคอ External Style Sheet คอการน าสไตลทเกบอยในไฟล .cssเขามาใชบนเวบเพจ Embedded Style Sheet คอการใชสไตลทเกบอยภายในเวบเพจนนเอง Inline Style คอการใชค าสง CSS ก ากบไวกบแทกHTML โดยตรง
บนเวบเพจหนงๆอาจมการใชสไตลทง 3 แบบกได โดยคณสมบตจากสไตลทกแบบจะถกน ามาผสมกน แตถาเกดความขดแยงกจะดตามระดบความส าคญ คอ Inline style มระดบสงสด รองลงไปคอ Embedded sytle sheet และ External style sheet นอกจากนถามการใชไฟล .cssหลายไฟลกจะดตามล าดบทไฟลนนถกรยกเขามาบนเวบเพจ คณสมบตเชนนจะท าใหคณสามารถใชไฟล .cssเพอควบคมทงเวบไซต แตในขณะเดยวกนกยงดดแปลงรปแบบบางอยางใหมผลเฉพาะบนเวบเพจใดเวบเพจหนง หรอจดใดจดหนงทตองการได ในDreamweaver จะสนบสนนการใชงาน External stynal style sheet และ Embedded style sheet เปนหลก สวน Inline style นน หากตองการใชคณจะตองแกไขแทกเอง รปแบบของค าสง CSS ค าสง CSS ทใชก าหนดคณสมบตของสไตลจะประกอบดวย 2 สวน คอ Selector และ Declaration
Selector คอชอสไตล Declaration เปนสวนประกอบไปดวยคณสมบต (Property) และคาของคณสมบตนน
(Value)
อยางไรกตาม ในการใชงาน Dreamweaver คณไมจ าเปนตองเขยนชดค าสงเหลานเองโดยเพยงแตก าหนดคณสมบตของสไตลบนพาเนลProperties หรอก าหนดสไตลดวยพาเนลCSS Styles โปรแกรมกจะสรางชดค าสงใหอตโนมต ประเภทของสไตล CSS สไตล CSS ทคณสามารถใชใน Dreamweaver แบงออกเปน 4 ประเภท คอ Class style, ID style,Tag style และ Compound style ซงมคณสมบตทแตกตางกนดงน Class Style เปนสไตลทสามารถน าไปใชรวมกบแทกใดๆกได เพอท าใหแทกนนมคณสมบตตามทก าหนดไวโดยจะไมมผลตอแทกเดยวกนทอยในสวนอนๆ วธใชสไตลประเภทนจะใชแอดทรบวตclass ตวอยางเชน
ใชกบแทก<p>เพอก าหนดคณสมบตของขอความทงยอหนา เชน ถาค าสงปกตเปนดงน <p>ลงทะเบยนสมาชก</p>เมอคณก าหนด class style ทชอ page_bodyใหกบยอหนาขางตน ค าสงจะเปลยนเปน<p class=”page_body”>ลงทะเบยน</p> ในกรณทคณใชสไตลกบขอความเพยงบางสวนของยอหนา โปรแกรมจะสรางแทก<span>ขนมารองรบเพอก าหนดแอตทรบวตclass เชน ถาค าสงปกตเปน<p>ลงทะเบยนสมาชก</p>เมอคณก าหนด Class style ใหกบขอความ “ลงทะเบยน” ค าสงจะเปลยนเปน<p><span class=”page_body”>ลงทะเบยน</span>สมาชก</p> ID Style คณจะสามารถใชสไตลนรวมกบออบเจคใดๆกได โดยจะตองระบชอสไตลดวยแอดทรบวตID และจะตองไมมออบเจคอนทมชอซ ากนอกบนเวบเพจนน ชอของสไตลจะมเครองหมาย # น าหนา Tag Style เปนการใชค าสง CSS เพอดดแปลงคณสมบตของแทกHTML โดยตรง ซงจะท าใหมผลตอทกๆองคประกอบบนเวบเพจทใชแทกน เชน ถาตองการใหขอความหวเรอง-1 (Heading 1)เปนสแดงกดดแปลงแทก<h1>ขอความหวเรอง-1 ทกๆจดบนเวบเพจจะมคณสมบตตามนทนท Compound Style กรณทตองการดดแปลงคณสมบตของแทกบางชดทใชรวมกน คณกตงชอสไตลใหตรงกบชดแทกนน เชน ถาจะใหขอความหวเรอง-1 (แทก<>h1>)ทอยในเซลของตาราง (แทก<td>) มคณสมบตเฉพาะ กสรางสไตลชอ td h1 แลวก าหนดคณสมบตตามตองการ ผลกคอหวเรอง-1 ทอยในตารางจะมรปแบบตามทก าหนด และจะแตกตางจากหวเรอง 1 ทอยนอกตาราง
พาเนลCSS Styles เปนเครองมอหลกทใชจดการกบสไตล CSS เชน สรางสไตลใหม และแสดงรายชอ/
คณสมบตของสไตล วธเปด/ปดพาเนลนท าไดโดยเลอกค าสง window >css styles
แสดงรายชอสไตลทงหมด แสดงคณสมบตของออบเจค ภายในเวบเพจ ทก าลงเลอกบนเวบเพจ แกไขสไตลทก าลงเลอก เลอกวธแสดงคณสมบต ลบสไตลทก าลงเลอก น าเขาสไตลจากไฟล .css สรางสไตลใหม
รปท2.72พาเนล CSS Styles มมมองในการแสดงคณสมบต
พาเนลCSS Styles จะแสดงคณสมบตทงหมดของสไตลทก าลงเลอก โดยมมมมอง 3 แบบ ใชสไตล CSS แบบอตโนมต เมอคณก าหนดคณสมบตของเวบเพจใน Page Properties หรอจดรปแบบขอความดวยพาเนลProperties โดยเลอกแบบ CSS นน โปรแกรมจะสรางสไตล CSS ส าหรบคณสมบตหรอรปแบบดงกลาวใหอตโนมต โดยสไตลเหลานจะถกเกบไวในเวบเพจ (คอเปน Embedded style sheet)ซงจะดรายชอทงหมดไดจากพาเนลCSS Styles
รปท 2.73 การใชสไตล CSS แบบอตโนมต
วธเรยกใชและยกเลกสไตล CSS การก าหนดสไตลใหออบเจคบนเวบเพจท าไดหลายวธ โดยบางวธจะใชไดกบออบเจคบางประเภทเทานน วธท 1 : เลอกจากพาเนลProperties ในสวนของ HTML ในชอง Class วธนใชไดกบขอความและเซลของตาราง โดยเลอกขอความหรอเซลทตองการกอน
- ก าหนดสไตลใหกบขอความทงยอหนา คลกบนยอหนาขอความ - ก าหนดสไตลใหกบขอความเพยงบางสวน คลกลากคลมขอความทตองการ
2.เลอกขอความหรอ
เซลของตาราง 3. คลก 1. คลก HTML 4.คลกเลอกสไตล
รปท 2.74การเลอกจากพาเนลProperties ในสวนของ HTML ในชอง Class วธท 2 : เลอกจากพาเนลPropertiesในสวนของ CSS ในชอง Targeted Rule วธนใชไดกบตาราง, ภาพกราฟก, AP Element, ฟอรม และออบเจคอนๆ นอกจากขอความ
2.เลอกขอความหรอ เซลของตาราง 4.คลกเลอกสไตล 1.คลก HTML3.คลก
รปท 2.75การเลอกจากพาเนลProperties ในสวนของ CSS ในชอง Targeted Rule
สรางสไตลประเภท Class Style นอกจากสไตลทโปรแกรมสรางใหโดยอตโนมตแลว คณสามารถจะสรางสไตลประเภท Class style ขนมาใชเองไดดงน 1.คลก 2.คลกเลอกประเภท Class 3.ตงชอสไตล 6.คลกเลอกหมวดคณสมบต 7.ก าหนดคณสมบตตางๆใหกบสไตล สไตลทได 8.ท าซ าขนตอนท 6-7 9.คลก
รปท 2.76การสรางสไตลประเภท Class Style
5.คลก OK
สรางสไตลประเภท ID Style ID Style เปนการใชค าสง CSS โดยก าหนดเปนชอ ID ไวส าหรบอางองในการเรยกใชเพอ
ก าหนดรปแบบของเนอหาตางๆในเวบ มขนตอนดงน 2.คลกเลอกประเภท ID
1. คลกปม 3.พมพชอ ID 5.คลก 4.เลอกทเกบสไตล 6.เลอกหมวดคณสมบต 7.เลอกตางๆใหกบสไตล 8.คลก
รปท 2.77การสรางสไตลประเภท ID Style
สรางสไตลประเภท Tag Style Tag Style เปนการใชค าสง CSS เพอดดแปลงคณสมบตของแทกHTML โดยตรง ซงจะท าใหมผลตอทกๆองคประกอบบนเวบเพจทใชแทกน ส าหรบขนตอนการสรางจะคลายกบ Class และ IS Style ดงน 2.คลกเลอกประเภท Tag 3.เลอกแทกHTML ทจะตองดดแปลง 1.คลกปม 4.เลอกทเกบสไตล 6.เลอกหมวด 7.ก าหนดคณสมบตตางๆ 8.ท าซ าขนตอนท6-7 9.คลก
รปท 2.78 การสรางสไตลประเภท Tag Style
5.คลก OK
สรางสไตลประเภท Compound Style คอการดดแปลงคณสมบตของแทกบางชดทใชรวมกน โดยมวธสรางดงน 1.คลกปม
2.คลกเลอกประเภทcompound 3.ตงชอสไตล 5.คลก 6.เลอกหมวด 7.ก าหนดคณสมบตตางๆ 8.ท าซ าขนตอนท 6-7 9.คลก
รปท 2.79การสรางสไตลประเภท Compound Style
4.เลอกทเกบสไตล (This document only คอเกบ
สไตลนไวในเวบเพจปจจบน)
เทคนคการตงชอสไตลประเภท Compound สามารถท าไดหลายแบบขนกบผลลพธทตองการในทนจะขอแนะน าบางแบบทนาสนใน สวนรายละเอยดทสมบรณนนคอนขางซบซอนถาใชชอแทก 2 ตวขนไปมาเรยงกน สไตลนจะมผลตอแทกตวหลงสดเมอถกครอบโดยแทกทอยขางหนา เชน สไตลชอ td h1 จะมผลตอ h1 (หวเรอง-1) ทอยภายใน td (เซลของตาราง)
ถาใชชอแทกตามหลงชอ Class style สไตลนจะมผลตอแทกตวหลงเมอถกครอบโดยแทกอนซงใชสไตลตวขางหนา เชน สไตลชอ .menulist a:link จะมผลตอลงคสถานะปกตทอยภายในตาราง (หรอภายในแทกใดๆทก าหนดกรอบของเนอหาได เชน div) ทใชสไตล .menulist
ถาใชชอ Class style 2 ตวขนไปเรยงกน สไตลนจะมผลตอแทกทใชสไตลตวหลงสด เมอถกครอบโดยแทกอน ซงใชสไตลตวขางหนา เชน สไตล .content .mytypeจะมผลตอแทกทใชสไตล .mytypeซงอยภายในแทกทใชสไตล.content
ถาใชชอทขนตนดวย # เชน #mystyleจะไดสไตลทคลายกบ Class style แตการเรยกใชจะตองท าผานพาเนลCSS Styles เทานน โดยโปรแกรมจะใชแอตทรบวตID ในการก าหนดสไตล คณสมบตของสไตล CSS เนองจากคณสมบตตางๆของสไตล CSS มเปนจ านวนมาก ดงนนในไดอะลอกบอกซCSS Rule definition จงแบงยอยออกเปน 8 หมวด ดงน หมวด Type ส าหรบก าหนดคณสมบตทวไปของขอความ เชน ฟอนต, ขนาด, ส และน าหนกของตวอกษร เปนตน
รปท 2.80หมวด Type
คณสมบต ค าอธบาย Font-family ชดฟอนตตวอกษร (ดบทท 03 “สรางชดฟอนตตวอกษร) Font-size ขนาดตวอกษร (ดบทท 03 “ก าหนดขนาดตวอกษร) Font-weight น าหนกหรอความหนาของตวอกษร
100-900 ก าหนดเปนคาน าหนก ถาคามากกคอตวอกษรหนามาก Normal ใหตวอกษรมน าหนกปกต (เทยบไดกบ 400) Bold ใหตวอกษรมน าหนกมากกวาตวอกษรปกต (เทยบไดกบ 700) Bolder,lighterใหตวอกษรมน าหนกมากหรอนอยกวาตวอกษรปกต
Font-style ลกษณะตวอกษรเปนปกต(normal), ตวเอยง (italic) หรอตวเอยงแบบ oblique Font-variant ลกษณะตวอกษรเปนปกต(normal)หรอเปนตวพมพใหญทมขนาดเลก (small-
caps) Line-height ความสงของบรรทด (ระยะหางระหวางบรรทดของขอความในยอหนา
เดยวกน) Text-transform วธแปลงตวอกษรระหวางตวพมพใหญและพมพเลก (ส าหรบอกษรใหญ)
Capitalize แปลงอกษรตวแรกของค าเปนตวพมพใหญ Uppercase แปลงอกษรทกตวเปนตวพมพใหญ Lowercase แปลงอกษรทกตวเปนตวพมพเลก None ไมมการแปลง
Text-decoration ลกษณะพเศษของตวอกษร ซงประกอบดวย underline (มเสนใต), overline(มเสนดานบน), line-through (มเสนพาดกลาง), blink (เปนตวกระพรบ) และ none (ไมมลกษณะพเศษใดๆ)
Color สของตวอกษร
ตารางท 2.4หมวด Type
ตวอยาง : การสรางสไตลเพอจดรปแบบขอความ สมมตวาตองการสรางสไตลชอ .Top10Country โดยใชชดฟอนต Tahoma, Geneva, Sansserifและใหตวอกษรมขนาด 18 พกเซล, เปนตวหนา, สแดง และขดเสนใตขอความดวย
รปท 2.81การสรางสไตลเพอจดรปแบบขอความ หมวด Background ส าหรบก าหนดสพนและภาพฉากหลง ซงสามารถน าไปใชกบองคประกอบใดๆกได ไมวาจะเปนเวบเพจทงหนา, ยอหนาขอความ, ตาราง ฯลฯ เชน ถาก าหนดสพนเปนสเหลอง เมอใชสไตลนกบเวบเพจ (แทก<body>) พนเวบเพจจะเปนสเหลอง แตถาใชกบตารางพนของตารางกจะเปนสเหลอง
รปท 2.82หมวด Background
คณสมบต ค าอธบาย Background-color ก าหนดสพน Background-image เลอกภาพฉากหลง Background-repeat เลอกวธเรยงภาพซ า (กรณภาพฉากหลงเลกกวาพนททใชแสดง)
No-repeat ไมตองเรยงภาพซ า (แสดงเพยงภาพเดยวเสมอ) Repeat เรยงภาพซ าทงแนวตงและแนวนอน Repeat-X เรยงภาพซ าในแนวนอนเพยงแถวเดยว Repeat-y เรยงภาพซ าในแนวตงเพยงคอลมนเดยว
Background-attachment ก าหนดใหภาพฉากหลงเลอนตามการเลอนหนาจอของผชมหรอไม Fixed ใหภาพฉากหลงอยคงทเสมอ Scroll ใหภาพฉากหลงเลอนไปพรอมกบเนอหาอนๆ
Background-position (X) ต าแหนงเรมตนของการเรยงภาพในแนวนอน จะใหเรมจากดานซาย (left)ตรงกลาง (center) ดานขวา(right) หรอระบต าแหนงเอง
Background-position (Y) ต าแหนงเรมตนของการเรยงภาพในแนวตง จะใหเรมจากดานบน (top) ตรงกลาง (center) ดานลาง (bottom) หรอระบต าแหนงเอง
ตารางท 2.5หมวด Background
หมวด Block ส าหรบก าหนดคณสมบตเกยวกบระยะหางระหวางตวอกษรหรอค าแตละค า รวมท งลกษณะการจดยอหนาของขอความ
รปท 2.83หมวด Block
คณสมบต ค าอธบาย Work-spacing ระยะหางระหวางค า Letter-spacing ระยะหางตวอกษรแตละตวทเพม/ลดจากคาปกต (ใชคาลบได) vertical-align วธจดต าแหนงในแนวตงของออบเจค เมอเทยบกบองคประกอบหลกทมน
เกาะอย เชน หากรปภาพถกวางไวบนยอหนาของขอความ เมอคณใชสไตลกบรปภาพ คณสมบตนจะก าหนดวธจดต าแหนงภาพเมอเทยบกบขอความในยอหนานน
Text-align การจดต าแหนงขอความในยอหนาใหอยชดซาย (left) กงกลาง (center) ชดขวา (right) หรอใหตรงกนทงดานซายและขวา (justify)
Text-indent การจดเยองขอความบรรทดแรกของยอหนา (คาบวกคอเยอยไปทางขวา คาลบคอเยองไปทางซาย)
White-space วธจดการกบชองวางหรอการเวนวรรคภายในขอความ และการปดค าขนบรรทดใหม
Normal ถามการเวนวรรคหลายตวตดๆกน ใหยบเหลอตวเดยว และใหปดค าขนบรรทดใหมตรงต าแหนงทเวนวรรคไดตามความจ าเปน
Pre ไมปดค า โดยใหยกการเวนวรรคและการขนบรรทดใหมตามทก าหนดในขอความตนฉบบ หรอตามทก าหนดโดยค าสง HTML (เชน เมอใชแทก<br>)
Nowrapใหยบตวเวนวรรคเชนเดยวกบกรณ normal แตไมใหปดค าขนบรรทดใหม ยกเวนตรงจดทก าหนดโดยค าสง HTML
display ก าหนดวาจะแสดงออบเจค (ทใชสไตลน) หรอไมและอยางไร เชน none
คอไมแสดง (ออบเจคจะไมปรากฏบนเวบเพจ) ส าหรบรปภาพทวางไวรวมกบขอความนนตามปกตจะถกแสดงแบบ inline คอแทรกไวระหวางบรรทดขอความ แตถาคณก าหนดเปน block ภาพจะถกแสดงคนละบรรทดกบขอความ
ตารางท 2.6หมวด Block
ตวอยาง : การสรางสไตลเพอจดรปแบบยอหนาขอความ สมมตวาตองการสรางสไตลชอ .txtparagraph โดยใหตวอกษรมระยะหางเพมจากปกต 1 พกเซล, ใหต าแหนงอยกงกลางเซลในแนวตง และจดขอความชดซาย
รปท 2.84การสรางสไตลเพอจดรปแบบยอหนาขอความ หมวด Box ส าหรบก าหนดขนาดของออบเจค และระยะหางระหวางออบเจคกบเนอหาอนๆรวมทงวธจดต าแหนงออบเจคเทยบกบเนอหาปกต
รปท 2.85หมวด Box
คณสมบต ค าอธบาย Width/height ความกวางและความสงของออบเจค เชน ถาใชสไตลนกบรปภาพ ภาพก
จะมขนาดกวางและสงตามคาน (โดยไมขนกบคาทก าหนดบนพาเนลProperties)
Float ต าแหนงของออบเจคเมอเทยบกบเนอหาปกต เชน รปภาพทวางไวบนยอหนาขอความคณสามารถกฃ าหนดใหมนไปอยชดขอบดานซายหรอขวา แลวใหขอความโปรยตวลงมาตามขอบดานทวาง (คลายการจดต าแหนงภาพเทยบกบขอความในบทท 04)
Left ใหออบเจคไปอยชดขอบดานซาย สวนเนอหาปกตจะโปรยตวลงมาทางขวา
Right ใหออบเจคไปอยชดดานขวา สวนเนอหาปกตจะโปรยตวลงมาทางซาย
None ไมมการเปลยนต าแหนงออบเจค Clear ใชก าหนดคณสมบตของเนอหาทไมตองการใหมออบเจคใดๆมาวางอย
ดานขาง ซงถามกใหเนอหานถกปดลงไปอยใตออบเจคทนท (คณสมบตนจะไมมผลกบยอหนาทคณวางออบเจคไว และไมสามารถใชรวมกบออปชนFloat)
padding ระยะหางระหวางเนอหาจรงของออบเจคกบขอบเขตดานบน (top) ดานลาง (bottom) ดานซาย ( left) และดานขวา (right) ไมวาจะถกก าหนดใหแสดงเสนกรอบหรอไม
margin ระยะหางระหวางขอบเขตของออบเจคกบเนอหาอนโดยรอบ
ตารางท 2.7หมวด Box
ตวอยาง : การสรางสไตลเพอก าหนดระยะหางระหวางออบเจค สมมตวาตองการสรางสไตลชอ .txtboxโดยใหจดออบเจคชดดานขวา มระยะระหวางออบเจคกบขอบ 15 พกเซลทกดาน และระยะระหวางขอบออบเจคกบเนอหาอนๆ 15,0,15 และ 10 พกเซลตามล าดบ หมวด Border ส าหรบก าหนดคณสมบตเกยวกบรปแบบความหนา และสของเสนกรอบ โดยแตละดานอาจมลกษณะทตาตางกนได คณสมบตนสามารถใชไดกบออบเจคตางๆไมวาจะเปนภาพกราฟก, ตารางหรอเซล, เลเยอร และขอความ เปนตน
รปท 2.86 หมวด Border หมวด List ส าหรบก าหนดคณสมบตของรายการแบบมหวขอ (list)โดยสามารถเลอกใชเลขล าดบหรอสญลกษณหนาหวขอแบบมาตรฐานหรอจะใหรปภาพแทนกได
รปท 2.87หมวด List
คณสมบต ค าอธบาย List-style-type ใชเลขล าดบหรอสญลกษณหนาหวขอแบบมาตรฐาน
Disc, circle, square ใชกบรายการแบบ bulleted list Decimal. Lower/upper-roman, lower/upper-alpha ใชกบรายการ
numbered list None ไมใหมสญลกษณหนาหวขอ
List-style-image เลอกรปภาพส าหรบใชเปนสญลกษณหนาหวขอ โดยควรเปน GIF ขนาดเลก (กวางและสง 7-10 พกเซล) และสามารถใชภาพเคลอนไหวแบบ GIF animation ได
List-style-position ต าแหนงของเลขล าดบหรอสญลกษณ Inside ใหอยทขอบดานหนาของรายการ Outside ใหอยเยองไปทางซายของรายการ
ตารางท 2.8หมวด List
ตวอยาง : การสรางสไตลเพอจดรปแบบรายการแบบมหวขอ สมมตวาตองการสรางสไตลชอ .bullet โดยใชรปภาพ arrow_whitebg.gif มาแสดงเปนสญลกษณหนาหวขอและก าหนดต าแหนงแบบ inside หมวด Positioning ส าหรบแยกออบเจคออกจากเนอหาปกตของเวบเพจ เพอใหสามารถก าหนดต าแหนง, ขนาด, การซอน/แสดง และอนๆไดอยางอสระ หรอสรปกคอออบเจคจะมคณสมบตเหมอน AP Element นนเอง
รปท 2.88 หมวด Positioning
คณสมบต ค าอธบาย Position วธการแยกออบเจคออกจากเวบเพจ
Absolute ใหออบเจคเปนอสระจากเนอหาปกต โดยคาต าแหนงจะคดเทยบกบมมซายบนของเวบเพจ (หรอของ AP Element ทออบเจควางอย)
Width/height ความกวางและความสงของออบเจค Visibility การซอน/แสดงออบเจค
Inherit ใชคณสมบตตามองคประกอบทครอบออบเจคอย Visible ใหแสดงออบเจค Hidden ใหซอนออบเจค
z-index ล าดบชนของออบเจค overflow วธแสดงเนอหาทมขนาดใหญกวาขอบเขตทก าหนด placement ต าแหนงของออบเจค clip เลอกแสดงเนอหาเพยงบางสวน ตวอยาง : การสรางสไตลเพอแยกออบเจคจากเวบเพจ สมมตวาตองการสรางสไตลชอ .photo_positionเพอแยกรปภาพออกจากเนอหาปกต โดยใหมขนาด 215×331 พกเซล และวางไวทต าแหนง 40 พกเซล จากขอบบน และ 20 พกเซล จากขอบขวาของเวบเพจ หมวด Extensions ส าหรบก าหนดคณสมบตอนๆ ซงจะใชไดกบบราวเซอรเพยงบางตว ดงนนจงควรทดสอบกอนน าไปใชงาน
ตารางท 2.9 หมวด Positioning
รปท 2.89 หมวดExtensions
คณสมบต ค าอธบาย Page break ก าหนดต าแหนงทจะใหขนหนากระดาษใหมเมอเวบเพจถกพมพ
Page-break-before ใหขนหนาใหมกอนออบเจคทใชสไตลน Page-break-after ใหขนหนาใหมตอจากออบเจคทใชสไตลน
Auto ขนหนาใหมอตโนมต Always บงคบใหขนหนาใหมตรงต าแหนงทก าหนด
เสมอ Left บงคบขนหนาใหม โดยใหหนาใหมเปนหนาซาย
(หนาค) เสมอ Right บงคบขนหนาใหม โดยใหหนาใหมเปนหนาขวา
(หนาค) เสมอ Visual effect ก าหนดเอฟเฟคตพเศษใหกบออบเจค
Cursor ใหเมาสเปลยนรปเมอผชมเลอนมาวางเหนอออบเจค โดยคณสามารถเลอกรปแบบเมาสไดจากเมน
Filter เลอกเอฟเฟคตทตองการใชกบออบเจค ซงบางตวกใชไดทนท เชน flip กลบภาพ หรอ gray ท าใหภาพเปนสเทา แตบางตวคณจะตองก าหนดคาเพมเตมโดยคลกในชองแลวพมพคาลงไปแทนเครองหมาย? ส าหรบวธใชเอฟเฟคต
ตวอยาง : การสรางสไตลเพอก าหนดเอฟเฟคตพเศษใหรปภาพ สมมตวาตองการสรางสไตลชอ .photo_effectเพอใหเมาสกลายเปนรป + (crosshair)และใหภาพพลกกลบดานในแนวนอน แกไขปรบแตงสไตล คณสามารถแกไขคาคณสมบตเดมหรอเพมคณสมบตใหมใหกบสไตลได ไมวาจะเปนสไตลทโปรแกรมสรางใหอตโนมตหรอสไตลทสรางเอง โดยท าไดหลายวธ เชน
แกไขดวยพาเนลCSS Styles ดบเบลคลกทชอสไตล แลวใชไดอะลอกบอกซCSS Rule derintionก าหนดคณสมบต เหมอนกบตอนสรางสไตลแกไขค าสง CSS ในมมมอง Code
ตารางท 2.10 หมวด Extensions
เทคนคการแกไขคณสมบตของสไตล คาประเภทส จะแสดงเปนรปไอคอนซงคณสามารถคลกเพอเลอกสจากตารางสหรอคลก
ในชองทางขวาเพอพมพคาสเอง คาทเปนตวเลอกทวๆไป เมอคลกแลวจะปรากฏเมนส าหรบเลอกคาทตองการได คาทใหพมพตวเลขเองได มกจะมชองใหระบหนวยดวย คาทตองระบชอไฟล จะมเครองมอใหใชเลอกไฟลได คาทไมมตวเลอก เปนคาทคณตองพมพค าสง CSS แบบยอเขาไปเอง
แกไขคณสมบตของออบเจคทก าลงเลอก วธแกไขสไตลทกลาวมาในหวขอกอน จะไดผลดถาโครงสรางของการใชสไตล CSS บนเวบเพจไมซบซอนนก และคณรแนชดวาคณสมบตทตองการแกไขนนมาจากสไตลใด แตเมอการใชสไตลซบซอนมากขน คณสมบตของออบเจคทคณตองการแกไขอาจจะมาจากหลายสไตล คอบางอยางกมาจากสไตลทคณก าหนดใหกบออบเจคนนเอง แตบางอยางกมาจากสไตลขององคประกอบอนๆทครอบออบเจคนนอย ซงวธงายๆทชวยใหแกไขไดถกจดท าดงน ตรวจสอบคณสมบตของออบเจคดวยพาเนลCSS Styles ออบเจคบนเวบเพจอาจจะไดรบรปแบบมาจากสไตลตางๆกน ท าใหบางครงคณสบสนวาคณสมบตทก าลงมผลจรงอยนนมาจากสไตลใด และถาจะแกไขควรแกทจดใด ดวยเหตผลนโปรแกรมจงไดเตรยมเครองมอบนพาเนลCSS Styles เพอใหคณมองเหนความสมพนธระหวางออบเจคกบสไตลทงหมดทมผลตอตวมน โดยแบงพนทเปน 3 สวนดงรป สวนท 1 : แสดงคณสมบตทงหมดทมผลจรงตอออบเจค คณสมบตทงหมดของออบเจคจะมาไดจาก 2 กรณคอ
กรณท 1 คณสมบตของสไตลทก าหนดไวกบออบเจคน กรณท 2 คณสมบตของสไตลทก าหนดไวกบแทกตางๆทครอบออบเจคนอย
ดงนนคณสมบตทแสดงในสวนท 1 นจงอาจจะมาจากหลายสไตลกได โดยถาสไตลตางๆขดแยงกน คณสมบตซงถกก าหนดทหลงเทาน นทจะมผลจรง เชน ถาโครงสรางสไตลของเวบเพจมสวนประกอบดงน
ตวเวบเพจถกก าหนดใหใชฟอนต Microsoft Sans Serif ขนาด 12 px เซลของตารางถกก าหนดใหขอความเปนสน าเงน ยอหนาขอความทอยภายในเซลถกก าหนดใหใชขนาดตวอกษร 16 px
สวนท 2 : แสดงค าอธบาย หรอรายชอแทกทครอบออบเจค สวนท 3 : แสดงคณสมบตทงหมดของสไตล
คณสมบตทแสดงจะแบงเปน 2 กรณคอ - กรณท 1 เมอคณคลกเลอกคณสมบตใดจากสวนท 1 สวนท 3 นจะแสดงรายการของ
คณสมบตทงหมดทอยในสไตลเดยวกน - กรณท 2 เมอคณคลกเลอกชอแทกหรอชอสไตลจากสวนท 2 สวนท 3 นจะแสดง
รายการของคณสมบตทงหมดทอยในสไตลนน คณสมบตทถกขดฆา ในสวนท 3 น บางครงคณจะพบวามคณสมบตบางรายการทถกขดฆาไป ซงถาตองการรสาเหตกใหเลอนเมาสไปชจะปรากฏค าอธบาย แตโดยทวไปสาเหตจะแบงเปน 2 กรณคอ
- คณสมบตดงกลาวถกยกเลกโดยสไตลของแทกทอยในล าดบถดลงไป - คณสมบตดงกลาวไมสามารถสบทอดไปยงแทกล าดบถดไป คณสมบตบางอยางจะไม
มการสบทอดตอไป ดงนนมนจงไมสงผลไปยงแทกทถกครอบอย สรางสไตลเกบเปนไฟล CSS
นอกจากการสรางสไตลเพอใชภายในเวบเพจนนเองแลว คณยงสามารถแยกสไตลเกบเปนไฟลสไตลชต (.css)เพอน าไปใชกบเวบเพจอนๆได โดยขนตอนการสรางจะแตกตางออกไปเลกนอยตรงทคณตองระบวาจะใหโปรแกรมจดเกบสไตลทสรางใหมไวในไฟลใด 1.คลก 2.เลอกประเภท 3.ตงชอสไตล 5.คลก 4.เลอกเพอสรางสไตล 6.เลอกเวบไซต 7.ตงชอไฟล 8.คลก
9.ก าหนดคณสมบตตางๆใหกบสไตล 10.คลก
ผลทไดบนพาเนลCSS Styles จะปรากฏชอไฟลและถดลงไปจะเปนชอสไตลแรกทสราง หลงจากนคณสามารถเพมสไตลเขาไปยงไฟลเตมได โดยในขนตอนท 4 ใหเลอกชอไฟล CSS นนแทรกการเลอก (New >Style Sheet >File)
รปท 2.90 ขนตอนการสรางสไตลเกบเปนไฟล CSS
น าสไตลจากไฟล CSS เขามาใชบนเวบเพจ การน าสไตลจากไฟล CSS เขามาใชบนเวบเพจอนๆ คณจะตองบอกใหเวบเพจรจกกบไฟล
นนโดยท าได 2 วธคอ “น าเขา” และวธ “เชอมโยง” 1.เปดเวบเพจทตองการ 4.เลอกวธน าไฟล 3.คลกเลอกไฟล css 5.เลอกสอทจะใชแสดงผล 6.คลก 2.คลก ความแตกตางระหวาง Link และ Import
โดยทวไปขอแนะน าใหใชวธ Link ซงเหมาะกบไฟล CSS ทมขนาดใหญ นอกจากนวธ Import จะใชไมไดกบบางบราวเซอร ส าหรบความแตกตางระหวาง 2 วธ นทปรากฏใน Dreamweaver คอ
ลกษณะของรายชอสไตลทปรากฏบนพาเนลCSS Styles จะตางกน เมอดในมมมอง Code ค าสงทน าไฟล CSS เขามาใชจะแตกตางกน คอกรณ Link
ชนดของสอ (Medie) เปนการระบวาคณตองการใชสไตลในไฟล CSS นนเพอแสดงผลกบสอชนดใด ซงสอทส าคญไดแก
All (หรอไมระบ) หมายถงใชกบสอทกประเภท Print หมายถงเครองพมพ โดยสไตลในไฟล CSS จะมผลเมอคณสงพมพเวบเพจเทานน Screen หมายถงจอภาพ
รปท 2.91 ขนตอนการน าสไตลจากไฟล CSS เขามาใชบนเวบเพจ
ตวอยาง ถาตองการใหคณสมบตของขอความขณะแสดงบนจะภาพและขณะทพมพแตกตางกนกท าไดโดย
1.สรางไฟล CSS 2 ไฟลคอ mystyle_screenและ mystyle_printโดยในแตละไฟลใหสรางสไตลชอเดยวกน แตก าหนดคณสมบตทแตกตางกน เพอใหเหมาะกบสอประเภทแตละประเภท
2.น าไฟล CSS ทงสองเขามาใชบนเวบเพจ โดยไฟล mystyle_screen.cssใหเลอก media เปน screen และไฟล mystyle_print ใหเลอก print
3.ก าหนดสไตลใหกบขอความ แลวทดสอบโดยคลกปมบนทลบาร Style Rendering การยกเลกไฟล CSS เมอไมตองการใชสไตลจากไฟล CSS แลว คณกสามารถยกเลกออกจากเวบเพจไดดงน 1.คลกชอไฟล 2.คลก ลบสไตล เปลยนชอสไตล 2.พมพชอใหม 3.คลก 1.คลกขวาเลอก Rename Class รปท 2.92 ขนตอนการยกเลกไฟล CSS
ตวอยาง การเปลยนสสโครบารของบราวเซอรดวยสไตล CSS สไตล CSS นอกจากจะใชเพอจดรปแบบขององคประกอบบนเวบเพจแลวยงสามารถใชสรางเอฟเฟคตพเศษบางอยางได ซงเอฟเฟคตหนงทนยมกนกคอการเปลยนสสโครลบารของบราวเซอร เอฟเฟคตนจะใชไดกบบางบราวเซอรเทานน โดยคณจะตองพมพค าสงเองในมมมอง Code โดยแทรกไวระหวางแทกทสวนหวของเวบเพจ ตรวจสอบโคด CSS ดวย CSS Inspection คณสามารถตรวจสอบโคด CSS โดยใช CSS Inspection ซงเปนคณสมบตใหมทเพมเขามาใหใชงานรวมกบมมมอง Live View ในขณะทแสดงผลหนาเวบอยเพยงเลอนเมาสหรอคลกบรเวณทตองการตรวจสอบ โปรแกรมจะแสดงสไตลรวมทงค าสง CSS ทก าหนดไวขนมาทงหมดคณสามารถดหรอแกไขโคดไดทนท