งานนำเสนอกำลังจะดาวน์โหลด โปรดรอ

งานนำเสนอกำลังจะดาวน์โหลด โปรดรอ

1 Episode 16 แนะนำให้รู้จักกับ CSS (Cascading Style Sheets)

งานนำเสนอที่คล้ายกัน


งานนำเสนอเรื่อง: "1 Episode 16 แนะนำให้รู้จักกับ CSS (Cascading Style Sheets)"— ใบสำเนางานนำเสนอ:

1 1 Episode 16 แนะนำให้รู้จักกับ CSS (Cascading Style Sheets)

2 2 Cascading Style Sheets(CSS) Microsoft internet explorer 3.0 และ Netscape 4.0 เป็นต้นมา เป็นวิธีการกำหนดการแสดงผลของสิ่งต่างๆบนเว็บ เพจ เช่น การกำหนดลักษณะของ ลักษณะอักษร ที่แสดง Heading ได้แก่ ฟอนต์ ขนาดตัวอักษร สีอักษร รวมถึงสีพื้นหลังด้วย ซึ่งคุณคงจะนึกออกว่าถ้าเราจะกำหนดลักษณะ ข้อความเช่นนี้เราต้องใช้ tag ของ html นั่นเอง ดังนั้นเราจึงสามารถใช้ CSS แทน tag ต่างๆ ดังกล่าวของ html ได้เลย

3 3 เรากำหนดอะไรให้เอกสารด้วย CSS ได้บ้าง ลักษณะการแสดงผลของข้อความ การจัดตำแหน่งย่อหน้า ( ขอบซ้ายขวาบนล่าง ) สีสรรของหน้า ภาพฉากหลัง กรอบ ตาราง การพิมพ์ ลักษณะอื่น ๆที่ html ทำได้แต่ CSS สะดวกกว่า

4 4 ประโยชน์ของ CSS CSS มีคุณสมบัติมากกว่า tag ของ html เช่นการ กำหนดกรอบให้ข้อความ รวมทั้งสี รูปแบบของ ข้อความที่กล่าวมาแล้ว CSS นั้นกำหนดที่ต้นของไฟล์ html หรือตำแหน่ง อื่น ๆ ก็ได้ และสามารถมีผลกับเอกสารทั้งหมด หมายถึงกำหนดครั้งเดียวจุดเดียวก็มีผลกับการ แสดงผลทั้งหมดทำให้เวลาแก้ไขหรือปรับปรุงทำ ได้สะดวกไม่ต้องไล่ตามแก้ tag ต่างๆ ทั่วทั้ง เอกสาร CSS สามารถกำหนดแยกไว้ต่างหากจากไฟล์ เอกสาร html และสามารถนำมาใช้ร่วมกับเอกสาร หลายไฟล์ได้ การแก้ไขก็แก้เพียง จุดเดียวก็มีผลกับเอกสารทั้งหมดได้

5 5 การกำหนดลักษณะใน CSS ตำแหน่งของ CSS ในเอกสาร html จะอยู่ ตำแหน่ง ใดก็ได้ มีหลายจุดก็ได้แต่ส่วนใหญ่จะ กำหนดไว้ที่ต้นเอกสาร ในส่วน ใน tag.. หรือกำหนดแบบอื่น

6 6 Cascading Style Sheets ประกอบด้วยส่วน ประกอบหลัก 3 ส่วนคือ Property คือคุณสมบัติของลักษณะที่จะ กำหนด เช่น ลักษณะของสี ลักษณะของแบบอักษร เป็นต้น Dot ใช้สำหรับแยกระหว่าง property กับค่า หรือลักษณะของ property นั้น ๆ Value คือค่าหรือลักษณะของคุณสมบัติที่ เรากำหนดให้แก่ property property และ value หลายอย่างสามารถกำหนดรวมกันไป ได้โดยแยกแต่ละส่วนด้วย semi-colon รูปแบบ Property: value

7 7 ตัวอย่าง สมมุติเราต้องการกำหนดให้ฟอนต์เป็นสีน้ำ เงินและใช้แบบอักษรเป็น sans-serif จะ กำหนดได้ดังนี้ color:navy; font-family:sans-serif

8 8 รูปแบบ การกำหนดแต่ละลักษณะนั้นควรจะกำหนด ชื่อหรือ ที่เรียกว่า selectors ซึ่งเราใช้อ้างถึงเวลาจะ เรียกใช้ ลักษณะที่กำหนดไว้นั้น ซึ่งเริ่มด้วย ชื่อ ( กำหนดได้เอง )+ วงเล็บปีกกา + ลักษณะที่ กำหนด ( แยกกันด้วย ";") HTML-TAG {property1:value1; property2:value2;...}

9 9 เช่น เราต้องการกำหนดลักษณะของ เป็น มีขนาด 12 points ใช้ฟอนต์ sans-serif สามารถกำหนดได้ดังนี้ h1 {font-size: 12pt; font-family:sans-serif}

10 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 11 นอกจากนี้คุณสามารถกำหนดลักษณะเป็น สัดส่วนเฉพาะ ในสไตล์ใดสไตล์หนึ่งได้โดยแยกลักษณะ นั้นด้วย ช่องว่าง (space) แทน comma เช่น เราต้องการเน้น ข้อความใน style โดยให้มีสีเป็นสีเขียวตัวเอนใน ระหว่าง tag... ก็ทำได้ดังนี้ h1 em {color:green}

12 12 ตัวอย่าง h1 em {color:green} เช่นเราพิมพ์ cascading style sheets ผลที่ได้จะเป็น cascading style sheets

13 13 กำหนดลักษณะเป็นของคุณเอง โดยใช้ classes เราต้องการตัวเอนปกติเราใช้... เรา ต้องการตัวหนาใช้... ใน CSS อนุญาต ให้เรากำหนดชื่อลักษณะตามที่ เราต้องการได้ เช่น กำหนด ชื่อลักษณะเป็น Myformat ก็สามารถ ทำได้โดย เริ่มด้วย "." ( จุด ) แล้วตามด้วยชื่อ แล้ว ตามด้วยลักษณะที่ต้องการกำหนด เช่นต้องการ กำหนดให้ Myformat ทำหน้าที่ควบคุมให้แสดง ข้อความสีแดง ก็ทำได้ดังนี้.Myformat {color=red}

14 14 เมื่อนำ Class ไปใช้ก็ทำได้ดังนี้ ข้อความ คุณอาจจะสงสัยว่ากำหนดไปทำไมให้ ยุ่งยากยาวกว่า.... เสียอีก คำตอบก็คือ ทุกตัวที่กำหนดเป็น Myformat จะเป็นตัวอักษรสีแดงหมด ทั่วทั้งเอกสารที่ กำหนดเป็น Myformat จะเหมือนกันลด ความยุ่งยาก เวลาจะแก้ไขสีก็แก้จุดเดียวที่ กำหนดไว้นั่นเอง จะเห็นว่าไม่ต้องไล่หาแก้ ทั่วทั้งเอกสารอย่าง html

15 15 ตัวอย่างการนำไปใช้ /* กำหนดให้ข้อความเป็นสีดำ*/ body { color:black; /* ให้สีฉากหลังข้อความเป็นสีขาว*/ background-color:white; /*ใช้ภาพ "sea.gif" เป็นฉากหลัง */ backgroundimage:url(http://samansk.cjb.net/ /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 16 การใช้ CSS ร่วมกับ html ทำได้ 3 ลักษณะ เช่น new "style=...." วิธีนี้ ไม่เป็นที่นิยมมากนักเพราะไม่ได้ลดความ ยุ่งยาก มากนักยังคล้าย html อยู่ เช่น แบบที่ 1 Inline styles /* แบบ inline style*/ ข้อความ /* แบบ inline class */.mywords {color:darkgreen; font-style:italic}

17 17 แบบนี้ยุ่งยากเพราะเวลาแก้ไขหรือปรับปรุงต้องทำ หลายจุดเหมือนเดิม ยังวุ่นวายอยู่ เวลาต้องการนำ style ไปกำหนด ตำแหน่งต่างๆ ใช้ tag และ เช่น ข้อความ การกำหนดลักษณะแบบนี้ทำได้ด้วย และ อย่างที่กล่าว ความแตกต่างระหว่างสองตัวนี้คือ นั้น จะเว้นบรรทัดว่างก่อนและหลังข้อความ 1 บรรทัด ครับ ซึ่งทั้งสองตัวนี้ใช้ได้กับทั้ง "style=" และ "class="

18 ตัวอย่าง 18 เว็บ +++Plaese Selected+++ Kapook Sanook Hunsa Mornor ชื่อ

19 19 แบบที่ 2 Document style เช่น... แบบนี้ต้องกำหนดในส่วน ของ... ซึ่งเวลาแก้ไขก็ทำที่นี่จุด เดียวทำให้สะดวกขึ้นมาก เช่น document Title Here /* จบการซ่อนที่ตรงนี้ */ Heading in green sans-serif text Other text here.

20 20 แบบที่ 3 External style sheet ลักษณะนี้กำหนด CSS ไว้อีกไฟล์หนึ่งแล้ว เรียกใช้ด้วย tag ในส่วนของ ของ เอกสาร การใช้แบบนี้ทำให้ใช้ร่วมกันได้กับ html หลาย ไฟล์ แต่จุดเสียของมันก็คือทำให้ browser ต้อง โหลดถึงสองไฟล์คือ html หนึ่งกับ CSS อีกหนึ่ง ถ้าไฟล์ CSS คุณเสียหรือโหลดไม่ได้

21 21 ตัวอย่างการเรียกใช้ CSS ที่เก็บไว้ใน ไฟล์ share.css 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 { font-family: MS Sans Serif; font-size: 12px; font-weight: bold; color: #0000FF; } ไฟล์ชื่อ share.css a:link { color: #FF00FF; font-family: MS Sans Serif; font-size: 12px; font-weight: bold; text-decoration: underline; } a:visited { color: #FF00FF; font-family: MS Sans Serif; font-size: 12px; font-weight: bold; font-style: normal; text-decoration: underline; } a:hover { color: #000000; font-family: MS Sans Serif; font-size: 12px; font-weight: bold; font-variant: normal; text-decoration: none; } ไฟล์ชื่อ share.css ( ต่อ ) ในส่วน Class ชื่อ a

22 ตัวอย่างการเรียกใช้เก็บไว้ใน share.css ต่อ 22 Document Title Here Welcome to my website NU News testCss.html Welcome to my website NU News Output


ดาวน์โหลด ppt 1 Episode 16 แนะนำให้รู้จักกับ CSS (Cascading Style Sheets)

งานนำเสนอที่คล้ายกัน


Ads by Google