บทท 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)
length คอคาตวเลขพรอมหนวยวด ( แบบ Relative หรอ Absolute ) [7]
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)
length คอคาตวเลขพรอมหนวยวด ( แบบ Relative หรอ Absolute ) [7]
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)
length คอคาตวเลขพรอมหนวยวด ( แบบ Relative หรอ Absolute ) [7]
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)
length คอคาตวเลขพรอมหนวยวด ( แบบ Relative หรอ Absolute ) [7]
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 กลบมา