ดาวน์โหลดงานนำเสนอ
งานนำเสนอกำลังจะดาวน์โหลด โปรดรอ
1
แนะนำให้รู้จักกับ CSS (Cascading Style Sheets)
Episode 16 แนะนำให้รู้จักกับ CSS (Cascading Style Sheets)
2
Cascading Style Sheets(CSS)
Microsoft internet explorer 3.0 และ Netscape 4.0 เป็นต้นมา เป็นวิธีการกำหนดการแสดงผลของสิ่งต่างๆบนเว็บเพจ เช่น การกำหนดลักษณะของ ลักษณะอักษรที่แสดง Heading ได้แก่ ฟอนต์ ขนาดตัวอักษร สีอักษร รวมถึงสีพื้นหลังด้วย ซึ่งคุณคงจะนึกออกว่าถ้าเราจะกำหนดลักษณะข้อความเช่นนี้เราต้องใช้ tag <font> ของ html นั่นเอง ดังนั้นเราจึงสามารถใช้ CSS แทน tag ต่างๆ ดังกล่าวของ html ได้เลย
3
เรากำหนดอะไรให้เอกสารด้วย CSS ได้บ้าง
ลักษณะการแสดงผลของข้อความ การจัดตำแหน่งย่อหน้า(ขอบซ้ายขวาบนล่าง) สีสรรของหน้า ภาพฉากหลัง กรอบ ตาราง การพิมพ์ ลักษณะอื่น ๆที่ html ทำได้แต่ CSS สะดวกกว่า
4
ประโยชน์ของ CSS CSS มีคุณสมบัติมากกว่า tag ของ html เช่นการกำหนดกรอบให้ข้อความ รวมทั้งสี รูปแบบของข้อความที่กล่าวมาแล้ว CSS นั้นกำหนดที่ต้นของไฟล์ html หรือตำแหน่งอื่น ๆ ก็ได้ และสามารถมีผลกับเอกสารทั้งหมด หมายถึงกำหนดครั้งเดียวจุดเดียวก็มีผลกับการแสดงผลทั้งหมดทำให้เวลาแก้ไขหรือปรับปรุงทำได้สะดวกไม่ต้องไล่ตามแก้ tag ต่างๆ ทั่วทั้งเอกสาร CSS สามารถกำหนดแยกไว้ต่างหากจากไฟล์เอกสาร html และสามารถนำมาใช้ร่วมกับเอกสารหลายไฟล์ได้ การแก้ไขก็แก้เพียง จุดเดียวก็มีผลกับเอกสารทั้งหมดได้
5
การกำหนดลักษณะใน CSS ตำแหน่งของ CSS ในเอกสาร html จะอยู่ตำแหน่ง ใดก็ได้ มีหลายจุดก็ได้แต่ส่วนใหญ่จะกำหนดไว้ที่ต้นเอกสาร ในส่วน <head> ใน tag <style>..</style> หรือกำหนดแบบอื่น
6
Cascading Style Sheets ประกอบด้วยส่วน ประกอบหลัก 3 ส่วนคือ
Property คือคุณสมบัติของลักษณะที่จะกำหนด เช่น ลักษณะของสี ลักษณะของแบบอักษร เป็นต้น Dot ใช้สำหรับแยกระหว่าง property กับค่าหรือลักษณะของ property นั้น ๆ Value คือค่าหรือลักษณะของคุณสมบัติที่เรากำหนดให้แก่ property property และ value หลายอย่างสามารถกำหนดรวมกันไปได้โดยแยกแต่ละส่วนด้วย semi-colon รูปแบบ Property: value
7
ตัวอย่าง สมมุติเราต้องการกำหนดให้ฟอนต์เป็นสีน้ำเงินและใช้แบบอักษรเป็น sans-serif จะกำหนดได้ดังนี้ color:navy; font-family:sans-serif
8
รูปแบบ การกำหนดแต่ละลักษณะนั้นควรจะกำหนดชื่อหรือ ที่เรียกว่า selectors ซึ่งเราใช้อ้างถึงเวลาจะเรียกใช้ ลักษณะที่กำหนดไว้นั้น ซึ่งเริ่มด้วย ชื่อ(กำหนดได้เอง)+ วงเล็บปีกกา + ลักษณะที่กำหนด (แยกกันด้วย ";") HTML-TAG {property1:value1; property2:value2; ...}
9
เช่น เราต้องการกำหนดลักษณะของ <h1> เป็น มีขนาด 12 points ใช้ฟอนต์ sans-serif สามารถกำหนดได้ดังนี้ h1 {font-size: 12pt; font-family:sans-serif}
10
การกำหนดลักษณะหลาย ๆ อย่างไว้ใน style เดียวกัน
สามารถทำได้โดยจัดกลุ่มได้โดยแยกแต่ละชุดด้วย comma เช่น h1 {font-family:sans-serif} h2 {font-family:sans-serif} h3 {font-family:sans-serif} h4 {font-family:sans-serif} รวมกันได้เป็น h1,h2,h3,h4 {font-family:sans-serif}
11
นอกจากนี้คุณสามารถกำหนดลักษณะเป็นสัดส่วนเฉพาะ ในสไตล์ใดสไตล์หนึ่งได้โดยแยกลักษณะนั้นด้วย ช่องว่าง (space) แทน comma เช่น เราต้องการเน้น ข้อความใน style <h1> โดยให้มีสีเป็นสีเขียวตัวเอนในระหว่าง tag <em>...</em> ก็ทำได้ดังนี้ h1 em {color:green}
12
ตัวอย่าง h1 em {color:green} เช่นเราพิมพ์
cascading <em>style</em>sheets ผลที่ได้จะเป็น cascading style sheets
13
กำหนดลักษณะเป็นของคุณเองโดยใช้ classes
เราต้องการตัวเอนปกติเราใช้ <i>...</i>เราต้องการตัวหนาใช้ <b>...</b> ใน CSS อนุญาตให้เรากำหนดชื่อลักษณะตามที่ เราต้องการได้ เช่น กำหนด ชื่อลักษณะเป็น Myformat ก็สามารถทำได้โดย เริ่มด้วย "." (จุด) แล้วตามด้วยชื่อ แล้วตามด้วยลักษณะที่ต้องการกำหนด เช่นต้องการ กำหนดให้ Myformat ทำหน้าที่ควบคุมให้แสดง ข้อความสีแดง ก็ทำได้ดังนี้ .Myformat {color=red}
14
เมื่อนำ Class ไปใช้ก็ทำได้ดังนี้
<p class="Myformat">ข้อความ</p> คุณอาจจะสงสัยว่ากำหนดไปทำไมให้ยุ่งยากยาวกว่า <font color=red>....</font> เสียอีก คำตอบก็คือ ทุกตัวที่กำหนดเป็น Myformat จะเป็นตัวอักษรสีแดงหมด ทั่วทั้งเอกสารที่กำหนดเป็น Myformat จะเหมือนกันลดความยุ่งยาก เวลาจะแก้ไขสีก็แก้จุดเดียวที่กำหนดไว้นั่นเอง จะเห็นว่าไม่ต้องไล่หาแก้ทั่วทั้งเอกสารอย่าง html
15
ตัวอย่างการนำไปใช้ /* กำหนดให้ข้อความเป็นสีดำ*/ body { color:black; /* ให้สีฉากหลังข้อความเป็นสีขาว*/ background-color:white; /*ใช้ภาพ "sea.gif" เป็นฉากหลัง */ backgroundimage:url( /images/sea.gif); /* กำหนดใช้ serifed font family */ font-family:serif; } /*จบลักษณะของ body*/ /* ระหว่างเครื่องหมายนี้เป็น comment ครับ browser จะไม่นำไปตีความหมาย*/ /* Unvisited links are blue */ a:link {color:blue} /* Visited links are purple */ a:visited {color:purple} /* Active links are red */ a:active {color:red}
16
การใช้ CSS ร่วมกับ html ทำได้ 3 ลักษณะ
แบบที่ 1 Inline styles เช่น new "style=...." วิธีนี้ ไม่เป็นที่นิยมมากนักเพราะไม่ได้ลดความยุ่งยาก มากนักยังคล้าย html อยู่ เช่น /* แบบ inline style*/ <HTML> <BODY> <p style="color:red; font-family:sans-serif">ข้อความ </p> </BODY> </HTML> /* แบบ inline class */ .mywords {color:darkgreen; font-style:italic}
17
แบบนี้ยุ่งยากเพราะเวลาแก้ไขหรือปรับปรุงต้องทำหลายจุดเหมือนเดิม
ยังวุ่นวายอยู่ เวลาต้องการนำ style ไปกำหนดตำแหน่งต่างๆ ใช้ tag <div> และ <span> เช่น <span style"color:green"> ข้อความ </span> การกำหนดลักษณะแบบนี้ทำได้ด้วย <div>และ<span> อย่างที่กล่าว ความแตกต่างระหว่างสองตัวนี้คือ <div> นั้น จะเว้นบรรทัดว่างก่อนและหลังข้อความ 1 บรรทัดครับ ซึ่งทั้งสองตัวนี้ใช้ได้กับทั้ง "style=" และ "class="
18
ตัวอย่าง <HTML> <BODY> <Form> เว็บ<SELECT style="FONT-SIZE: 10pt; WIDTH: 170px; BACKGROUND-COLOR: #FFCC66" onchange="window.open(this.options[this.selectedIndex].value,'_blank');selected=true" size=1 name=web1> <OPTION value="" selected>+++Plaese Selected+++</OPTION> <OPTION value= <OPTION value= <OPTION value= <OPTION value= </SELECT> ชื่อ <Input Type="text" Name="FirstName" style="FONT-SIZE: 10pt; WIDTH: 170px; BACKGROUND-COLOR: #FF99CC" > </Form> </BODY> </HTML>
19
แบบที่ 2 Document style เช่น <style>...</style>แบบนี้ต้องกำหนดในส่วนของ <head>...</head>ซึ่งเวลาแก้ไขก็ทำที่นี่จุดเดียวทำให้สะดวกขึ้นมาก เช่น <html> <head> <title>document Title Here</title> <style TYPE="text/css"> <!-- /* ตัวอย่างเดิม- ซ่อนเพื่อไม่ให้ browser ที่ไม่สนับสนุน CSS มีปัญหา*/ h1,h2,h3 {font-family: sans-serif; color: green} /*แบบนี้เวลาแก้ แก้ที่นี่จุดเดียว*/ --> /* จบการซ่อนที่ตรงนี้*/ </style> </head> <body> <h1>Heading in green sans-serif text</h1> Other text here. </body> </html>
20
แบบที่ 3 External style sheet
ลักษณะนี้กำหนด CSS ไว้อีกไฟล์หนึ่งแล้วเรียกใช้ด้วย tag <link> ในส่วนของ <head> ของเอกสาร การใช้แบบนี้ทำให้ใช้ร่วมกันได้กับ html หลายไฟล์ แต่จุดเสียของมันก็คือทำให้ browser ต้องโหลดถึงสองไฟล์คือ html หนึ่งกับ CSS อีกหนึ่ง ถ้าไฟล์ CSS คุณเสียหรือโหลดไม่ได้
21
ตัวอย่างการเรียกใช้CSSที่เก็บไว้ในไฟล์ share.css
ไฟล์ชื่อ share.css (ต่อ) ในส่วน Class ชื่อ a body { margin-bottom: 0px; background-color: #CCFF99; .frame { border: 1px solid #2C2218; } .text1 { font-family: MS Sans Serif; font-size: 12px; color: #FF0000; font-weight: bold; .text2 { color: #0000FF; a:link { color: #FF00FF; font-family: MS Sans Serif; font-size: 12px; font-weight: bold; text-decoration: underline; } a:visited { font-style: normal; a:hover { color: #000000; font-variant: normal; text-decoration: none;
22
ตัวอย่างการเรียกใช้เก็บไว้ใน share.css ต่อ
testCss.html <html> <head> <title>Document Title Here</title> <link REL="STYLESHEET" HREF="share.css" TYPE="text/css"> </head> <body> Welcome to<BR> <span class="text2">my website</span> <span class="text1">NU</span> <a href="#" class="a"> News</a> </body> </html> Output Welcome to my website NU News
งานนำเสนอที่คล้ายกัน
