asuparat.files.wordpress.com€¦ · web viewบทที่ 9การกำหนด ......

บทท 9การกำาหนดรปแบบ Style Sheet

Style Sheet เปนการกำาหนดรปแบบการแสดงผลบนจอภาพ ซงเปนรปแบบทใชบอย ๆ ในเอกสารและสามารถนำามาใชกบบางขอความในเอกสารหรอขอคามทงหมดกได โดยการกำาหนดรปแบบทตองการเปน Style และการนำา Style มาใชยงสามารถเปลยนแปลงรายละเอยดภายในไดดวย เชนตองการเปลยนรปแบบตวอกษรจาก Cordia UPC ขนาด 14 เปน Browallia UPC ขนาด 16 ผอานสามารถแกไขใน Style แลว ขอความทงหมดทใช Style น จะเปลยนแปลงรปแบบทงหมดโดยอตโนมต [7,10]

คำาสง Style Sheet ในเอกสาร HTML สามารถแสดงผลบนโปรแกรมเวบบราวเซอรของ Internet Explorer ตงแต version 3.0 ขนไป และโปรแกรม Netscape Navigator ตงแต version 4.0 ขนไป [7,10]

วธการใชงาน Style Sheet ในเอกสาร HTML ม 4 วธคอ

1. Linking Style Sheet คอการสราง Style Sheet ในเอกสารอน (แยกจากเอกสาร HTML) ทำาให Style ทผอานสรางสามารถ Share กนได โดยใหเอกสาร HTML หลาย ๆ เอกสารมาเรยกใช Style นได ซงมรปแบบการใช Linking Style Sheet แสดงดงรปแบบท (9-1)

(9-1)

<LINK> คอการกำาหนดความสมพนธระหวางไฟลเอกสาร HTML ฉบบนกบไฟลเอกสารอน

1. REL = Stylesheet คอการกำาหนดใหเอกสาร HTML ฉบบนใช Style Sheet จากไฟลอน2. HREF = filename คอการกำาหนดทอยของเอกสาร

Style Sheet ซงจะใชในการเชอมโยง3. Type = MIME/type คอการกำาหนดประเภทไฟล Style Sheet ม 2 แบบคอ

1) Type = text/css คอไฟล Style Sheet ทสามารถใช Text Editor ธรรมดาในการสรางและมนามสกลเปน css2) Type = application/dsssl คอไฟล Style Sheet ซงเขยนขนสำาหรบภาษา DSSSL Online (Document Style Semantics and Specification Language)

ตามปกตนยมใช Type = text/css [1,7]

2. Embedded Style Sheet คอการเขยน Style ในเอกสาร HTML โดยตรง ซงมรปแบบการใช Embedded Style Sheet แสดงดงรปแบบท (9-2)

(9-2)

<STYLE TYPE = TEXT/CSS> คอการบอกใหโปรแกรมเวบบราวเซอรทราบวาเรมตนการกำาหนด Style Sheetคำาสงทใชในแทก Style คอ คำาสงทใชในแทก Style ซงจะกลาวรายละเอยดในหวขอม 9.1 – 9.4</STYLE> คอแทกปด [7]

3. Inline Style Sheet คอการกำาหนด Style Sheet ทขอความบางสวนในเอกสาร HTML ซงมรปแบบการใช Inline Style Sheet แสดงดงรปแบบท (9-3)

(9-3)

ชอแทกปกต คอชอแทกทผอานจะกำาหนดรปแบบขอความ เชน <B>, <P>,<DIV>, etc

STYLE = “PROPERTY:VALUE” คอการกำาหนดคา Style ทตองการ ถาม 1 Element จะไมมเครองหมาย Semicolon (“;”) อยททาย Element นน ๆ แตถามหลาย ๆ Element จะมเครองหมาย Semicolon (“;”) อยททาย Element นน ๆ ยกเวน Element สดทายเทานนทจะไมมเครองหมาย Semicolon (“;”)

1) Property คอคณสมบตทตองการ เชน Color, margin-left, font-style, font-size, etc ซงจะกลาวรายละเอยดในหวขอท 9.42) Value คอคาทกำาหนดใหกบ Property เชน Red (Color:Red) ซงจะกลาวรายละเอยดในหวขอท 9.4 เชนกน

Message คอขอความทตองการใหมการกำาหนด Style

</ชอแทกปกต> คอแทกปด [1,7,10]

หมายเหต

1. ถาตองการใช Inline Style Sheet ในขอความตดกนทอยภายใตแทกหลาย ๆ แทก สามารถใชแทก <DIV> มาชวยได ซงแสดงตวอยางตามรปท 9-1 [1,7,10]

รปท 9-1 ตวอยางการใชแทก <DIV> ในการชวยกำาหนด Style

2. ถาตองการใช Inline Style Sheet ในขอความใด ๆ สามารถใชแทก <SPAN> มาชวยได ซงแสดงตวอยางตามรปท 9-2 [1,7,10]

รปท 9-2 ตวอยางการใชแทก <SPAN> ในการกำาหนด Style

3. Importing Style Sheet คอการใช Style Sheet จากเอกสาร HTML อน ๆ โดยไมตองใชวธการ Copy, Link จากเอกสารอน ซงมรปแบบการใช Importing Style Sheet แสดงดงรปแบบท (9-4)

(9-4)

<STYLE TYPE = ”TEXT/CSS”> คอการบอกใหโปรแกรมเวบบราวเซอรทราบวาเรมตนการกำาหนด Style Sheet

@Import URL(filename) คอคำาสงทกำาหนดวาใหใช Style Sheet จากเอกสารอน ๆ โดยท filename คอตำาแหนงของเอกสารอน ทนำา Style Sheet ของเอกสารนนมาใชในเอกสาร HTML ฉบบน

</STYLE> คอแทกปด [1,7]

9.1 Tag Styleการเขยนแทก Style จะตองอยในสวน <Head>….</HEAD> ของ

เอกสาร HTML ซงแสดงดงรปท 9-3 และรปแบบของแทก <STYLE>แสดงดงรปแบบท (9-2)

รปท 9-3 แสดงตำาแหนงของแทก <STYLE> ในเอกสาร HTML

คำาสงทใชในแทก STYLE แบงได 3 ลกษณะคอ1. Attaching Formatting to Elements คอการกำาหนดใหชอแทกทใชมรปแบบทกำาหนดไวใน Style ทงหมด เมอเรยกใชแทกน ซงมรปแบบของ Attaching Formatting to Elements แสดงดงรปแบบท (9-5)

(9-5)

ชอแทก คอชอแทกทผอานตองการกำาหนดรปแบบ STYLE

Property คอคณสมบตทตองการ เชน Color, margin-left, font-style, font-size, etc ซงจะกลาวรายละเอยดในหวขอท 9.4

Value คอคาทกำาหนดใหกบ Property เชน Red (Color:Red) ซงจะกลาวรายละเอยดในหวขอท 9.4 เชนกนชอแทก 1, ชอแทก 2, …, ชอแทก n คอการจดกลม (Group) Style ทชอแทก 1, ชอแทก 2, …, ชอแทก n ม Style เหมอนกน ซงหมายถง Attribute ภายในเครองหมายปกกา ( { } ) มคาเดยวกน จงสามารถ

แสดงรวมกนและสามารถใสคำาอธบาย (Comment) ภายในแทก <STYLE> ไดโดยมรปแบบการเขยน Comment แสดงดงรปแบบท (9-6)

(9-6)

/* คอเครองหมายแสดงการเรมตนเขยน CommentMessage คอขอความทเปนคำาอธบาย*/ คอเครองหมายแสดงการสนสด Comment [1,7]

ตวอยางการใช Attaching Formatting to Elements Style Sheet แสดงดงรปท 9-4 และผลลพธแสดงดงรปท 9-5

รปท 9-4 ตวอยางการใช Attaching Formatting to Elements Style Sheet

รปท 9-5 ผลลพธจากการใช Attaching Formatting to Elements Style Sheet ในรปท 9-4

2. Class Attributes คอ Attributes ทใหแทกอน ๆ ในเอกสาร HTML เรยกใช ซงการกำาหนด Class ตองเรมตนดวยเครองมหพภาค (period) นำาหนาชอ Class (สามารถกำาหนดขนเอง) และมรปแบบการเขยนแสดงดงรปแบบท (9-7)

(9-7)

<STYLE> คอแทกทบอกใหโปรแกรมเวบบราวเซอรมการกำาหนด Style Sheet.classname { Property : Value } คอชอ Class ทสามารถตงขนเองได โดยท

1) Property คอคณสมบตทตองการ เชน Color, margin-left, font-style, font-size, etc ซงจะกลาวรายละเอยดในหวขอท 9.42) Value คอคาทกำาหนดใหกบ Property เชน Red (Color:Red) ซงจะกลาวรายละเอยดในหวขอท 9.4 เชนกน

.classname { Property1 : Value1; Property2 : Value2; … Propertyn : Valuen } คอชอ Class ทสามารถตงขนเองได โดยท1) Property1, Property2, …, Propertyn คอคณสมบตทตองการ เชน Color, margin-left, font-style, font-size, etc ซงจะกลาวรายละเอยดในหวขอท 9.42) Value1, Value2, …, Valuen คอคาทกำาหนดใหกบ Property เชน Red (Color:Red) ซงจะกลาวรายละเอยดในหวขอท 9.4 เชนกน

ชอแทก.classname { Property : Value } คอชอแทกทผอานตองการกำาหนดรปแบบ STYLE และ .classname { Property : Value } มคำาอธบายตามทไดเคยกลาวมาแลว

ชอแทก.classname { Property1 : Value1; Property2 : Value2; … Propertyn : Valuen }คอชอแทกทผอานตองการกำาหนดรปแบบ STYLE และ .classname { Property1 : Value1; Property2 : Value2; … Propertyn : Valuen } มคำาอธบายตามทไดเคยกลาวมาแลว

</STYLE> คอแทกปด [1,7,10]

3. ID Attributes คอ Attributes ทใหแทกอน ๆ ในเอกสาร HTML เรยกใช ซงการกำาหนด ID ตองเรมตนดวยเครอง Number (#) นำาหนาชอ ID (สามารถกำาหนดขนเอง) และมรปแบบการเขยนแสดงดงรปแบบท (9-8)

(9-8)

<STYLE> คอแทกทบอกใหโปรแกรมเวบบราวเซอรมการกำาหนด Style Sheet

#IDname { Property : Value } คอชอ ID ทสามารถตงขนเองได โดยทคา Property และ Value ไดเคยกลาวรายละเอยดแลว

#IDname { Property1 : Value1; Property2 : Value2; … Propertyn : Valuen } คอชอ ID ทสามารถตงขนเองได โดยท Property1, Property2, …, Propertyn และ Value1, Value2, …, Valuen ไดเคยกลาวรายละเอยดแลว

ชอแทก#IDclassname { Property : Value } คอชอแทกทผอานตองการกำาหนดรปแบบ STYLE และ #IDname { Property : Value } มคำาอธบายตามทไดเคยกลาวมาแลว

ชอแทก#IDname { Property1 : Value1; Property2 : Value2; … Propertyn : Valuen }คอชอแทกทผอานตองการกำาหนดรปแบบ STYLE และ #IDname { Property1 : Value1; Property2 : Value2; … Propertyn : Valuen } มคำาอธบายตามทไดเคยกลาวมาแลว

</STYLE> คอแทกปด [1,7,10]

9.2 เรยกใช Class และ ID Attributesเมอมการสราง Style แลว กตองมการเรยกใช Style ซงรปแบบของ Style ม 3 แบบ ซง Attaching Formatting to Elements

สามารถเรยกใชโดยการใสชอแทกเหมอนการเรยกใชแทกนน ๆ ตามปกต เชน <P>, <B>, etc สวนการเรยกใช Class และ ID Attributes มรายละเอยดดงตอไปน

การเรยกใช Class Attributes เมอผอานมการกำาหนด Style แบบ Class Attributes แลว จะมรปแบบการเรยกใช Class นนโดยแสดงดงรปแบบท (9-9)

(9-9)

<ชอแทก CLASS = classname> คอการเรยกใชแทกโดยม Attributes ของ Style ทกำาหนดแบบ Class Attributes โดยท classname คอชอ Class ทกำาหนดไวในแทก <STYLE>

Message คอขอความทตองการกำาหนดรปแบบ ในแทก STYLE

</ชอแทก> คอแทกปด [1,10]

ตวอยางการเรยกใช Class Attributes แสดงดงรปท 9-6 และผลลพธแสดงดงรปท 9-7

รปท 9-6 ตวอยางการเรยกใช Class Attributes

รปท 9-7 ผลลพธจากการเรยกใช Class Attributes ในรปท 9-6

การเรยกใช ID Attributes เมอผอานมการกำาหนด Style แบบ ID Attributes แลว จะมรปแบบการเรยกใช ID นนโดยแสดงดงรปแบบท (9-10)

(9-10)

<ชอแทก ID = IDname> คอการเรยกใชแทกโดยม Attributes ของ Style ทกำาหนดแบบ ID Attributes โดยท IDname คอชอ ID ทกำาหนดไวในแทก <STYLE>

Message คอขอความทตองการกำาหนดรปแบบ ในแทก STYLE

</ชอแทก> คอแทกปด [1,10]

ตวอยางการเรยกใช ID Attributes แสดงดงรปท 9-8 และผลลพธแสดงดงรปท 9-9

รปท 9-8 ตวอยางการเรยกใช ID Attributes

รปท 9-9 ผลลพธจากการเรยกใช ID Attributes ในรปท 9-8

9.3 ใช Attribute Style กำาหนดรปแบบในแทกตาง ๆถาผอานตองการใช Style เพยงบางแหงและใชนอยกควรจะกำาหนดแบบ Inline Style Sheet เนองจากไมตองเรยกใช Class หรอ ID ทกำาหนดไวในแทก <STYLE> และถาตองการเรยกใช Class หรอ ID กสามารรถเรยกไดโดยรวม Attribute CLASS = classname หรอ ID = IDname เขาไปในรปแบบท (9-3) ได [1,7,10]

ตวอยางการใช Inline Style Sheet และเรยกใช Class, ID ดวย แสดงดงรปท 9-10 และผลลพธแสดงดงรปท 9-11

รปท 9-10 ตวอยางการใช Inline Style Sheet

รปท 9-11 ผลลพธจากการใช Inline Style Sheet ในรปท 9-10

9.4 คณสมบตตาง ๆ ใน Style Sheetผอานสามารถกำาหนดคณสมบต (Property) และคาของคณสมบตนน ๆ (Value) ใหกบ Style ได ซงจะแสดงคาของ Property และ Value ดง

ตอไปน1. Background-attachment คอการกำาหนดใหภาพพนหลง (Background) อยกบท (Fixed) ซงเรยกวาการทำาภาพลายนำา (Water Mask) หรอเลอนไปพรอมกบการเลอนจอภาพ (Scroll) และรปแบบของ Attribute นแสดงดงรปแบบท (9-11) [7]

(9-11)

2. Background-color คอการกำาหนดสใหพนหลง ซงกำาหนดรหสสแบบ RGB และรปแบบของ Attribute นแสดงดงรปแบบท (9-12) [7,10]

(9-12)

3. Background-image คอการกำาหนดพนหลงของรปภาพ ซงมผลตอภาพลายนำาทใชงานอยดวย และรปแบบของ Attribute นแสดงดงรปแบบท (9-13) [7]

(9-13)

filename คอตำาแหนงของไฟลรปภาพและยงสามารถกำาหนดความยาวของ Background-image ดวย ซงหนวยวดทใชม 2 แบบคอ Relative และ Absolute ซงหนวยวดแบบ Relative แสดงรายละเอยดในตารางท 9-1 และหนวยวดแบบ Absolute แสดงรายละเอยดในตารางท 9-2 [7]

ตารางท 9-1 รายละเอยดของหนวยวดแบบ Relative [7]

หนวย คำาอธบาย

Em ความสงของ Element's font

Ex ความสงของตวอกษร X

Px Pixel

ตารางท 9-2 รายละเอยดของหนวยวดแบบ Absolute [7,10]

หนวย คำาอธบาย

In นว (Inches)

Cm เซนตเมตร (Centimeters)

Mm มลลเมตร (Millimeters)

Pt จด (Points); 1pt = 1/72 in

Pc Pica ; 1pc = 12 pt

4. Background-position คอการกำาหนดตำาแหนงของพนหลง โดยกำาหนดใหจด (0,0) คอจดทอยมมบนสดซายสดของจอภาพ และรปแบบของ Attribute นแสดงดงรปแบบท (9-14)

(9-14)

x คอตำาแหนงในแนวแกน xy คอตำาแหนงในแนวแกน y ตำาแหนงสามารถกำาหนดไดในลกษณะ % โดยเทยบกบขนาด Element หรอกำาหนดเปนหนวยวด (Relative หรอ Absolute) หรอกำาหนดโดยคำาพเศษตอไปนคอ Top, Left, Right, Bottom และ Center [7]

5. Background-repeat คอการกำาหนดใหแสดงรป Background ใหเตมพนท (แปะรปแบบ Pattern) และรปแบบของ Attribute นแสดงดงรปแบบท (9-15)

(9-15)

repeat คอแสดงรปภาพนนซำาทงในแนวแกน x และ yrepeat-x คอแสดงรปภาพนนซำาทงในแนวแกน x repeat-y คอแสดงรปภาพนนซำาทงในแนวแกน yno-repeat คอไมตองแสดงรปภาพนนซำา [7]

6. Border-bottom-width, Border-left-width, Border-right-width, Border-top-width คอการกำาหนดความกวางของกรอบทางดานลาง,ซาย,ขวา และ บน ตามลำาดบ และรปแบบของ Attribute นแสดงดงรปแบบท (9-16)

(9-16)

thin คอเสนกรอบบางmedium คอเสนกรอบปกต (ปานกลาง)thick คอเสนกรอบหนาlength คอการกำาหนดความหนาโดยระบคาพรอมกบหนวยวด (Relative หรอ Absolute) [7]

7. Border-color คอการกำาหนดสใหกรอบ ซงกำาหนดรหสสแบบ RGB และรปแบบของ Attribute นแสดงดงรปแบบท (9-17) [7,10]

(9-17)

8. Border-style คอการกำาหนดรปแบบของเสนกรอบซงสามารถกำาหนดได 4 รปแบบ คอ

1) 1 คา คอการกำาหนดรปแบบใหเสนกรอบทง 4 ดาน มรปแบบ style เดยวกน2) 2 คา คอการกำาหนดใหคาแรกคอรปแบบของเสนกรอบดานบนและลาง คาทสองคอรปแบบของเสนกรอบดานซายและขวา3) 3 คา คอการกำาหนดใหคาแรกคอรปแบบของเสนกรอบดานบน คาทสองคอรปแบบของเสนกรอบดานซายและขวา คาทสามคอรปแบบของเสนกรอบดานลาง4) 4 คา คอการกำาหนดใหคาแรกคอรปแบบของเสนกรอบดานบน คาทสองคอรปแบบของเสนกรอบดานขวา คาทสามคอรปแบบของเสนกรอบดานลาง คาทสคอรปแบบของเสนกรอบดานซาย

ซงกำาหนดรหสสแบบ RGB และรปแบบของ Attribute นแสดงดงรปแบบท (9-18)

(9-18)

โดยท Attribute มคาดงตอไปนnone คอไมมเสนกรอบdotted คอเสนทเปนจด ๆ ตอ ๆ กนdashed คอเสนประsolid คอเสนทบdouble คอเสนคgroove คอสรางเสนบน Groove แบบ 3D

inset คอสรางเสนบน Inset แบบ 3Doutset คอสรางเสนบน Outset แบบ 3D [7]

9. Clear คอการกำาหนดใหลบเสนกรอบทไมตองการทง และรปแบบของ Attribute นแสดงดงรปแบบท (9-19)

(9-19)

none คอไมลบเสนกรอบleft คอลบเสนกรอบทางดานซายright คอลบเสนกรอบทางดานขวาboth คอลบเสนกรอบทางดานซายและขวา [7]

10. Color คอการกำาหนดสใหกบขอความ ซงกำาหนดรหสสแบบ RGB และรปแบบของ Attribute นแสดงดงรปแบบท (9-20) [7,10]

(9-20)

11. Float คอการกำาหนดให Element ขยบไปทางซายหรอขวา และรปแบบของ Attribute นแสดงดงรปแบบท (9-21)

(9-21)

none คอไมขยบ Elementleft คอขยบ Element ไปทางดานซายright คอขยบ Element ไปทางดานขวา [7]

12. Font-family คอการกำาหนดรปแบบตวอกษร และสามารถกำาหนดรปแบบตวอกษรไดมากกวา 1 แบบ และใชเครองหมายจลภาค (Comma) คนระหวาง (ใชในกรณทโปรแกรมเวบบราวเซอรหาชอ font แรกไมเจอ กเลอนไปหาชอ font ถดไป) และรปแบบของ Attribute นแสดงดงรปแบบท (9-22)

(9-22)

แตถา Font นนมมากกวา 1 คา ใหใสเครองหมายอญประกาศนอก (Double Quote) ดวย และรปแบบของ Attribute นแสดงดงรปแบบท (9-23)

(9-23)

ตวอยางของชอ font ทอยในเครองหมายอญประกาศ เชน Cordia New หรอ Cordia UPC [7,10]

13. Font-size คอการกำาหนดขนาดของตวอกษร และรปแบบของ Attribute นแสดงดงรปแบบท (9-24)

(9-24)

xx-small คอขนาดลดลง 50% จากขนาด x-small fontx-small คอขนาดลดลง 50% จากขนาด small fontsmall คอขนาดลดลง 50% จากขนาด medium fontmedium คอขนาดปานกลาง (ประมาณ 10 pt)large คอขนาดใหญขน 50% จากขนาด medium fontx-large คอขนาดใหญขน 50% จากขนาด large fontxx-large คอขนาดใหญขน 50% จากขนาด x-large fontlarger คอขนาดใหญขน 50% จาก font ปกตsmaller คอขนาดเลกลง 50% จาก font ปกตlength คอคาตวเลขพรอมหนวยวด ( แบบ Relative หรอ Absolute )number คอคาตวเลขตงแต 1-7 ( ตามการอางองจาก font size = 1-7 ) [7,10]

14. Font-style คอการกำาหนดแบบตวอกษร และรปแบบของ Attribute นแสดงดงรปแบบท (9-25)

(9-25)

normal คอตวอกษรปกตoblique คอตวอกษรทเกดจากการมองเฉยง ๆ Italic คอตวอกษรเอยงsmallcaps คอตวอกษรพมพเลก [7]

15. Font-variant คอการกำาหนดตวอกษรใหเปนแบบตวพมพเลก และรปแบบของ Attribute นแสดงดงรปแบบท (9-26) [7]

(9-26)

16. Font-weight คอการกำาหนดความหนาใหกบตวอกษร และรปแบบของ Attribute นแสดงดงรปแบบท (9-27)

(9-27)

normal คอตวอกษรปกต หนาประมาณ 400bold คอตวอกษรหนาbolder คอตวอกษรหนากวาextra-bold คอตวอกษรหนาพเศษlight คอตวอกษรบางlighter คอตวอกษรบางกวาextra-light คอตวอกษรบางพเศษlength คอคาตวเลขพรอมหนวยวด ( แบบ Relative หรอ Absolute ) [7]

17. Height คอการกำาหนดความสงของ Element และรปแบบของ Attribute นแสดงดงรปแบบท (9-28)

(9-28)

length คอคาตวเลขพรอมหนวยวด ( แบบ Relative หรอ Absolute ) [7]

18. Letter-spacing คอการกำาหนดระยะหางระหวางตวอกษรแตละตว และรปแบบของ Attribute นแสดงดงรปแบบท (9-29)

(9-29)

normal คอระยะหางปกตlength คอคาตวเลขพรอมหนวยวด ( แบบ Relative หรอ Absolute ) [7,10]

19. Line-height คอการกำาหนดความสงของ ระยะหางระหวางบรรทด และรปแบบของ Attribute นแสดงดงรปแบบท (9-30)

(9-30)


20. List-style-image คอการกำาหนดรปภาพทใชนำาหนาขอความแบบรายการ (Bullet) และรปแบบของ Attribute นแสดงดงรปแบบท (9-31)

(9-31)

filename คอตำาแหนงของไฟลรปภาพทตองการแสดงเปน Bullet [7]

21. List-style-position คอการกำาหนดตำาแหนงของ Bullet และรปแบบของ Attribute นแสดงดงรปแบบท (9-32)

(9-32)

inside คอตำาแหนงเยองเขามาจากขอความoutside คอตำาแหนงเยองออกมาจากขอความ [7]

22. List-style-type คอการกำาหนดชนดของ Bullet ทใชแสดงใน List และรปแบบของ Attribute นแสดงดงรปแบบท (9-33)

(9-33)

disc คอวงกลมโปรงcircle คอวงกลมทบsquare คอสเหลยมdecimal คอตวเลขอารบค ( 1,2,3,… )lower-roman คอตวเลขโรมนแบบตวพมพเลก ( i,ii,iii,… )upper-roman คอตวเลขโรมนแบบตวพมพใหญ ( I,II,III,… )lower-alpha คอตวอกษรแบบพมพเลก( a,b,c,… )none คอไมกำาหนดใหม Bullet [7]

23. Margin-bottom, Margin-left, Margin-right, Margin-top คอการกำาหนดระยะหางระหวางจอภาพกบกรอบทางดานลาง,ซาย,ขวา และบน ตามลำาดบ และรปแบบของ Attribute นแสดงดงรปแบบท (9-34)

(9-34)

length คอคาตวเลขพรอมหนวยวด ( แบบ Relative หรอ Absolute ) [7] 24. Padding-bottom, Padding-left, Padding-right, Padding-top คอการกำาหนดระยะหางระหวาง Element กบกรอบทางดานลาง,ซาย,ขวา และบน ตามลำาดบ และรปแบบของ Attribute นแสดงดงรปแบบท (9-35)

(9-35)


25. Text-align คอการกำาหนดตำาแหนงของขอความในบรรทด และรปแบบของ Attribute นแสดงดงรปแบบท (9-36)

(9-36)

left คอขอความชดขอบซายของจอภาพright คอขอความชดขอบขวาของจอภาพ center คอขอความอยกงกลางจอภาพ justify คอการใหขอความอยกระจายเตม Element โดยภายในบรรทดเวนวรรคเทาไหรกได แตขอบซายและขอบขวาตองตรงกน [7,10]

26. Text-decoration คอการกำาหนดใหมแบบตวอกษรแบบตาง ๆ และรปแบบของ Attribute นแสดงดงรปแบบท (9-37)

(9-37)

none คอตวอกษรปกตunderline คอขดเสนใตขอความ overline คอขดเสนดานบนของขอความ line-through คอขดเสนพาดกลางขอความblink คอตวอกษรกระพรบ [7,10]

27. Text-indent คอการกำาหนดยอหนาในบรรทดแรกของขอความ และรปแบบของ Attribute นแสดงดงรปแบบท (9-38)

(9-38)


28. Vertical-align คอการกำาหนดระยะของขอความหรอ Element ในแนวแกน y และรปแบบของ Attribute นแสดงดงรปแบบท (9-39)

(9-39)

baseline คอกำาหนดใหดานลางของ Element, ตวอกษร อยตรงกบเสนบรรทดดานลางmiddle คอกำาหนดให Element, ตวอกษร อยตรงกงกลางบรรทดในแนวแกน ysub (subscript) คอตวหอยลงsuper (superscript) คอตวยกขนtext-top คอกำาหนดใหขอความใน Element อยดานบนกรอบtext-bottom คอกำาหนดใหขอความใน Element อยดานลางกรอบtop คอกำาหนดใหขอความอยดานบนbottom คอกำาหนดใหขอความอยดานลาง [7]

29. White-space คอการกำาหนดชองวางภายใน Element และรปแบบของ Attribute นแสดงดงรปแบบท (9-40)

(9-40)

normal คอคาปกต (1 ชอง ไมวาจะเคาะเทาไหรกตาม)pre คอตามทผเขยนเอกสาร HTML นนเคาะเวนวรรคเหมอนขอความในแทก <PRE>nowrap คอขอความตดกนยาวออกไปโดยไมมการตดคำาแลวขนบรรทดใหม [7]

30. Width คอการกำาหนดความกวางของ Element และรปแบบของ Attribute นแสดงดงรปแบบท (9-41)

(9-41)


31. Word-spacing คอการกำาหนดชองวางระหวางคำาแตละคำา และรปแบบของ Attribute นแสดงดงรปแบบท (9-42)

(9-42)

length คอคาตวเลขพรอมหนวยวด ( แบบ Relative หรอ Absolute ) [7]9.5 Tag Spanถาผอานตองการกำาหนดรปแบบใหกบขอความใดขอความหนงใหตางจากขอความรอบขาง สามารถใฃแทก <SPAN> ชวยกำาหนดรปแบบขอความนน และจะไมสงผลกระบตอขอความทจะตามมาดวย ดงนนรปแบบของแทก <SPAN> จงแสดงดงรปแบบท (9-43)

(9-43)

<SPAN> คอแทกเปดทบอกใหโปรแรกมเวบบราวเซอรกำาหนดรปแบบตาม Attribute ภายในแทก

1. CLASS = classname คอบอกชอ class ทตองการใหขอความมรปแบบตาม class นน2. ID = IDname คอบอกชอ ID ทตองการใหขอความมรปแบบตาม ID นน3. STYLE = “Property:Value” คอการกำาหนดรปแบบใหกบขอความทตองการ โดยท

1) Property คอ คอคณสมบตทตองการ เชน Color, margin-left, font-style, font-size, etc ซงเคยกลาวรายละเอยดในหวขอท 9.4 แลว2) Value คอคาทกำาหนดใหกบ Property เชน Red (Color:Red) ซงเคยกลาวรายละเอยดในหวขอท 9.4 มาแลวเชนกน

Message คอขอความทตองการรปแบบตามทในแทก <SPAN> กำาหนด

</SPAN> คอแทกปด [1,10]

ตวอยางการใชแทก <SPAN> แสดงดงรปท 9-12 และผลลพธแสดงดงรปท 9-13

รปท 9-12 ตวอยางการใชแทก <SPAN>

รปท 9-13 ผลลพธจากการใชแทก <SPAN> ในรปท 9-12

รปท 9-14 ผลลพธจากการคลกท Link toclass.html ในรปท 9-12

แลว Back กลบมา

asuparat.files.wordpress.com€¦ · web viewบทที่ 9การกำหนด ......

Documents