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 ทก าหนดไวขนมาทงหมดคณสามารถดหรอแกไขโคดไดทนท