954242 web programming css ( cascading style...
TRANSCRIPT
07/11/56
1
Page 1
954242 Web ProgrammingCSS (Cascading Style Sheet)
Page 2
Cascading Sytle Sheet (CSS)
• HTML – เทคโนโลยทนามาใชกาหนดรปแบบของเอกสารหรอ Web page เพอใหสามารถจดวางตาแหนงขอความหรอรปภาพตางๆ ภายในเอกสารตามความตองการของนกพฒนา
• รปแบบทชวยใหนกพฒนาสามารถเพมความสามารถในการแสดงผลไดมากขน มากกวาการใช HTML อยางเดยว
07/11/56
2
Page 3
Cascading Sytle Sheet (CSS)
• ใช CSS ในการกาหนดลกษณะการแสดงผล การใชส การจดเรยง ฯลฯ
• การใช CSS ทาใหเวบททาขนมมาตรฐาน เนองจาก CSS สามารถสราง Style (รปแบบ) ลวงหนา ทาใหทกหนา Web page มลกษณะการแสดงผลทเหมอนกน
• การแกไข Style เพยงทเดยวกจะทาใหทกหวขอหรอหนาของ Web page เปลยนไปตาม Style ทแกไข
Page 4
Cascading Sytle Sheet (CSS)
• ใช Style กลางเปนไฟลแยกตางหาก แลวทาให Web page เรยกใชไฟลน จะทาใหทกหนาของ Web page มรปแบบเดยวกน
• มการแสดงผล สตวอกษร ตาแหนงในลกษณะเดยวกนทงหมด ทาใหดดมมาตรฐาน แนนอน ไมสะเปะสะปะ
07/11/56
3
Page 5
Exmaple of CSS
Page 6
Benefits of CSS
• ลดจานวน Code ลง ซงเปนการประหยดพนทหรอ Bandwidth ของโปรแกรม
• ลดเวลาในการออกแบบและพฒนา Web page• ลดเวลาในการแกไขปรบปรง Web page• ใชงานไดดกบเทคโนโลยอนๆ ของ Web Standard
07/11/56
4
Page 7
CSS Standard• มาตรฐาน CSS1 เปนมาตรฐานแรกทองคกร W3C
ประกาศขนมาใชงานในป ค.ศ.1996 โดยกาหนด “Properties” พนฐานเพอใชจดรปแบบเอกสาร เชน Font, Color และ Margin เปนตน
• มาตรฐาน CSS2 เปนมาตรฐานทประกาศขนในป ค.ศ.1998 ซง CSS2 นไดกาหนด “Properties” เพมขนจาก CSS1 และเพมขดความสามารถในการจดวางตาแหนงของออกเจกต (Object) หรอรายละเอยดบนเวบเพจดวย นอกจากน เรายงสามารถใช CSS ควบคมการนาเสนอสอ (Media) ตางๆ ดวย
Page 8
CSS Standard
• มาตรฐาน CSS3 เปนมาตรฐานทอยระหวางการพฒนา และไดเรมนามาใชกบเวบบราวเซอรรนใหมตงแตป 2006 น โดยคาดวามาตรฐาน CSS3 จะชวยใหสามารถพฒนา Web page ไดเรวขน
07/11/56
5
Page 9
รปแบบคาสงของ CSS
• Selector Tag HTML, id หรอ class ทตองการกาหนด StyleSheet
• Declaration การประกาศรปแบบ Style Sheet ทตองการ เปนการระบคารปแบบ Style Sheet ประกอบดวย 2 สวนคอProperty และ value
Selector {Property_1:Value_1; Property_2:Value_2; Property_n:Value_n}
Declaration
Page 10
รปแบบคาสงของ CSS
• CSS ประกอบดวย การเลอกสวนทตองการจดรปแบบ (Selector) และสวนของการจดรปแบบ (Declaration)
• กาหนด คณสมบต (Property) และคาของคณสมบตนน (Value) โดยคนดวยเครองหมาย : และเมอจบการกาหนดคาของคณสมบตนน ตองลงทายดวยเครองหมาย ;
1 Selector สามารถกาหนดคณสมบตไดอยางไมจากด
07/11/56
6
Page 11
การกาหนดแบบ CSS Type Selector
เปน CSS Selector จาก HTML Tag
p { color: red;
} h1 {
font-size: 16px; }
Page 12
การกาหนดแบบ Grouped Selector
Selector 1, Selector 2,…, Selector n {
Properties : Values;
}
07/11/56
7
Page 13
การกาหนดแบบ “Contextual Selector” หรอ “Descendant Selector”
เปน CSS Selectors จากการสบทอดของ HTML Tags
Selector Sub Selector {
Properties : Values;
}
Page 14
การกาหนดแบบ “Contextual Selector” หรอ “Descendant Selector”HTML
<h1>This headline is <em>very</em> important</h1>
h1 { color: red;
} em {
color: red; }
CSS Selectors แบบ ปรกตh1 {
color: red; }em {
color: red; } h1 em {
color: blue; }
CSS Selectors แบบDescendant Selectors
07/11/56
8
Page 15
การกาหนดแบบ “ID Selector”
จะเลอก node จาก Attribute ของ HTML ทระบ ID ตามทกาหนด โดยการอางถง ID ใน CSS จะใชเครองหมาย # ในการระบ ถง CSS Selectors แบบ ID Selectors
#id name {
Properties : Values;
}
Page 16
การกาหนดแบบ “ID Selector”HTML<h1 >Whole world</h1> <h1 id=“world" >world </h1>
#world { color: green;
}หรอ h1#world {
color: green; }
07/11/56
9
Page 17
การกาหนดแบบ “Class Selector”
จะเลอก node จาก Attribute ของ HTML tags ท ม class ตามทกาหนด โดยการอางถง class ของ HTML ใน CSS นนจะใชเครองหมาย . ( Dot ) ในการอางถง class
.class name {
Properties : Values;
}
Page 18
การกาหนดแบบ “Class Selector”HTML<h1>the earth</h1> <h1 class=“abc">the world</h1>
.abc { color: green; }
h1.abc { color: green;
}
07/11/56
10
Page 19
การเขยนคาอธบาย (Comment) ใน Style Sheet• คาอธบาย หรอ Comments ใชเพออธบาย CSS code ซงจะชวย
ผพฒนาไดมากในกรณทกลบมาแกไข หรอเปลยนแปลงเอกสาร CSS • Comments นนเปรยบเหมอนการจดบนทกความจา
/* Comments ในไฟล CSS */p{color:#FFF; font-size:12px;}
Page 20
การประกาศ Style Sheet
• Inline style เขยนภายใน Element ของ HTML• Internal style sheet เขยนไวภายในเอกสาร HTML ในสวนของ
<head>...</head>• External style sheet เขยนไวภายนอกเอกสาร HTML
07/11/56
11
Page 21
การประกาศ Style Sheet แบบ Inline Style
• เปนการเขยนเพอกาหนดคณลกษณะ ของ Tag HTML ในแตละ Element เชน แทรกลงใน Tag <p> …</p>
<p style="color:#FF0000; margin:5px;">...</p>
Page 22
• โดยท
• HTML tag คอ Tag HTML ทตองการกาหนด Style sheet• Style คอ คาสงหลกทใชประกาศ Style sheet แบบ inline
<html tag style=“Property:Value”>…</html>
การประกาศ Style Sheet แบบ Inline Style
07/11/56
12
Page 23
การประกาศ Style Sheet แบบ Internal• เหมาะสาหรบการกาหนดคณสมบตหรอลกษณะของ Web site ในหนาใด
หนาหนง CSS แบบ Internal Style Sheet จะตองกาหนดไวในสวนของTag <head>...</head>
• เรยกอกอยางหนงวา Embedded
<head><style type="text/css">
body{background-color:#FF0000; font-size:12px;}h1{color:#000;}
</style></head>
Page 24
การประกาศ Style Sheet แบบ Internal
<head>
<style type = “text/css”>
<!-- html tag {Property : Value} -->
</style>
</head>
07/11/56
13
Page 25
การประกาศ Style Sheet แบบ External• เปนวธทดทสดในกรณทมไฟล HTML หลายๆ ไฟล โดยสามารถเปลยน
คณสมบตหรอลกษณะของ Web Site ไดทงหมด ดวยการเปลยนคณสมบตหรอลกษณะของ CSS เพยงไฟลเดยว
• ดงนนไฟล HTML จะตองเชอมโยง (Link) กบไฟล CSS โดยใช � tag <link> หรอ � <@import>
<head><link rel="stylesheet" type="text/css" href=“mycss.css" /></head>
Page 26
การประกาศ Style Sheet แบบ External• แบบ Link
<head>
<link rel = “stylesheet” href = “URL” type = “text/css” />
</head>โดยทlink คอ คาสงหลกทใชในการสรางจดเชอมโยงrel คอ รปแบบมาตรฐานกาหนดใหมคาเทากบ
“style sheet” เพอบอกใหเวบบราวเซอรทราบวา มการสรางจดเชอมโยงกบไฟลสไตลชท
href คอ คาสงใหระบ “URL” ของไฟลสไตลชททตองการอางถง
07/11/56
14
Page 27
การประกาศ Style Sheet แบบ External• แบบ Import
<@import URL>
<@import url (“URL Path”)>
Page 28
ลาดบการทางานของการประกาศ Style Sheet
• Inline Style Sheets• Embedded Style Sheets• Linking Style Sheets• Import Style Sheets
07/11/56
15
Page 29
Properties และ Values ของ Style Sheetชอ Properties คาอธบาย
1. Font ใชกาหนดคณสมบตทเกยวกบตวอกษรทงหมดในเวบเพจ
2. List ใชกาหนดคณสมบตของ Element ยอย ใน Element หลก
3. Background ใชกาหนดคณสมบตของพนหลกเวบเพจ
4. Align ใชกาหนดคณสมบตทเกยวกบการจดวาง Element ตางๆ
5. Margin ใชกาหนดระยะหางระหวาง Element ทกาหนดและ Element ท
ลอมรอบ
6. Color ใชกาหนดคณสมบตทเกยวกบสของ Element ทงหมดทอยในเวบเพจ
Page 30
Font Properties• font-family ตระกลของ Font เมอ Web Browser ไมรองรบหรอเรยกใชงาน Font ตวแรกได เรยก Font ตวถดไป
body{font-family:Verdana, Geneva, sans-serif;}
07/11/56
16
Page 31
Font Properties• font-style ลกษณะของ Font
• normal: แสดงลกษณะ font เปนแบบอกษรปกต
• italic: แสดงลกษณะ font เปนแบบอกษรเอยง
• oblique: แสดงลกษณะ font เปนแบบแนวทแยง
p{font-style:normal;}p{font-style:italic;}p{font-style:oblique;}
Page 32
Font Properties• font-size ขนาดของ Font• ควบคมขนาดของ Font โดยกาหนดขนาดของ Font เปนคา Pixels
• ลดปญหาการแสดงผลของ Browser ทอานคาและแสดงผลขนาดของ Font ทกาหนดเปนคา Pixels แตกตางกน ดงนนนกพฒนาเวบไซตจงไดกาหนดขนาดของ Font เปนแบบ Em ทดแทน
• 1 em=16px
p{font-size:12px;}a{font-size:10px;}
p{font-size:0.75em;}a{font-size:0.625px;}p{font-size:1.25em;}
07/11/56
17
Page 33
Font Properties• font-weight ความหนาของ Font
p{font-weight:bold;}
Page 34
Text Properties• Text Color: สของตวอกษร
• Text Alignment: จดแนวการแสดงผล
body{color:blue;}p{color:#FF0000;}
p{text-align:left;}p{text-align:center;}p{text-align:right;}
07/11/56
18
Page 35
Text Properties• Text Decoration: การตกแตง text ขอมล ใชตกแตง หรอลบการตกแตงของ text ขอมล เชนการลบ underline ของ links
a{text-decoration:none;}h1{text-decoration:underline;}h2{text-decoration:overline;}
Page 36
Text Properties• Text Transformation: เปนการแปลงตวอกษรภาษาองกฤษเปนตวพมพเลก ตวพมพใหญของขอความ ซงประกอบดวย 3 สถานะ• uppercase: เปนตวพมพใหญทงหมด
• lowercase: เปนตวพมพเลกทงหมด
• capitalize: ตวแรกของคาเปนตวพมพใหญ
p{text-transform:uppercase;}p{text-transform:lowercase;}p{text-transform:capitalize;}
07/11/56
19
Page 37
Text Properties• Text Indentation: กาหนดยอหนาใหกบขอมล เปนการกาหนดการเยองของ text ขอมลในบรรทดแรก
p{text-indent:50px;}
Page 38
Link Properties• กาหนดลกษณะของ links ตามสถานะทแตกตางกนได ซงสถานะของ links นน ม 4 สถานะ คอ• a:link เปนการแสดงลกษณะ link ในสถานะปกต
• a:visited เปนการแสดงลกษณะ link ในสถานะทผเยยมชมเวบไซตไดคลก link นนแลว
• a:hover เปนการแสดงลกษณะ link ในสถานะทมการนาเมาสไปวางบน link
• a:active เปนการแสดงลกษณะ link ในสถานะทมการคลก link นน
a:link{color:#FF0000;}a:visited{color:#FF0000;}a:active{color:#00FF00;}a:hover{color:#0000FF;}