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

Slides:



Advertisements
งานนำเสนอที่คล้ายกัน
คำสั่งเริ่มต้น รูปแบบ. <HTML>. </HTML>
Advertisements

บทที่ 7 การใช้ตัวอักษร สื่อชุดนี้เป็นลิขสิทธิ์ของสำนักพิมพ์วังอักษร ใช้เพื่อการศึกษาเท่านั้น.
เปลี่ยนสี และรูปแบบของตัวหนังสือ และจุดเชื่อมโยง
เรียนรู้และเข้าใจ HTML อย่างง่าย
ปฏิบัติการที่ 4 การใช้โปรแกรมประมวลผลคำ
for Beginning & Publishing
HTML Language ภาษา HTML คืออะไร ? HTML (Hyper Text Markup Language) เป็นภาษาที่ใช้ในการพัฒนา web page เพื่อให้โปรแกรม web brower ต่างๆ (Internet Explorer,
เว็บไซต์ สาขา สารสนเทศศาสตร์
Script Programming& Internet Programming
หลักการออกแบบเว็บ กำหนดกลุ่มเป้าหมาย จำแนกกลุ่มเนื้อหา
องค์ประกอบ Graphic.
Week 6 ประกาศค่าตัวแปร.
HTML (คืออะไร) ภาษา HTML (HyperText Markup Language) เป็นภาษาที่ใช้คำสั่งที่เรียกว่า Tag มีทั้งเปิดและปิด เพื่อกำหนดบริเวณที่มีผลของคำสั่ง คำสั่งภาษา HTML.
โครงสร้าง ภาษา HTML.
ลักษณะพิเศษของ ภายใต้คำสั่ง <BODY>
วิชา การเขียนโปรแกรมบนเว็บ (Web-based Programming)
รูปแบบของเว็บเพจ. รูปแบบของเว็บเพจ รูปแบบของเว็บเพจ 1. เว็บเพจในแนวตั้ง.
ปฏิบัติการที่ 3 : การสร้างโฮมเพจอย่างง่าย
Image Processing & Computer Vision
โครงสร้าง HTML โครงสร้างพื้นฐาน HTML คำสั่งขึ้นบรรทัดใหม่ <BR>
แก้ไขปรับปรุง Form.
– Web Programming and Web Database
การสร้างเว็บด้วย HTML HyperText Markup Language
การสร้างภาพเคลื่อนไหว
การพิมพ์ข้อความ และการสร้างตาราง
การพิมพ์รายงาน / วิทยานิพนธ์
การพัฒนาเว็บด้วยโปรแกรมสำเร็จรูป
CSS.
HTML.
CSS.
Master Page Style Sheet
Suphot Sawattiwong Sprite Suphot Sawattiwong
การออกแบบและพัฒนาเว็บไซต์
Page: 1 การพัฒนาโปรแกรมประยุกต์บนเว็บ อ. บุรินทร์ รุจจนพันธุ์.. ปรับปรุง 12 กรกฎาคม 2550 HTML (HyperText Markup Language)
HTML Hypertext Markup Language Updated : August 23,2012.
โปรแกรม DeskTopAuthor
พื้นฐานของ Microsoft Office Excel โดย
Cascading Style Sheet ง การเขียนเว็บไซต์ สไตล์ ป. พ. ศูนย์คอมพิวเตอร์ โรงเรียนปลวกแดงพิทยา คม.
การกำหนดลักษณะตัวอักษร
การกำหนด ลักษณะตาราง ง การเขียน เว็บไซต์สไตล์ ป. พ. ศูนย์คอมพิวเตอร์ โรงเรียนปลวกแดง พิทยาคม.
การแปลงข้อมูลใน Excel เป็นฐานข้อมูลใน Access
การออกรายงานเอกสาร PDF
HTML, PHP.
Microsoft Word ReportCreater
Microsoft Word MailMerge
บทที่ 3 การทำงานกับฟอร์ม (Form)
โปรแกรม Microsoft Access
บทที่ 3 การทำงานกับฟอร์ม (Form)
ฟังก์ชัน.
บทที่ 3 การกำหนดรูปแบบตัวอักษร
หน่วยที่ 12 Style Sheet and Layers
พื้นฐานเกี่ยวกับโปรแกรม Flash CS3
HTML 1. รูปแบบพื้นฐานของ เอชทีเอ็มแอล
หลักการเขียนเว็บไซต์
บทที่ 9 การใช้งานฟอร์มและคอนโทรลต่าง ๆ
รู้จักกับ Microsoft Access 2003
การสร้างพจนานุกรม.
การสร้างฟอร์ม(Form) ด้วยภาษา HTML
Introduction to HTML, PHP – Special Problem (Database)
HTML (Hyper Text Markup Language) HTML (Hyper Text Markup Language) เป็นภาษา มาตรฐานสากลที่ใช้นำเสนอข้อมูลแบบ ผสมผสานในการสื่อสารแบบ World-Wide- Web.
บทที่ สร้างงานเอกสารและการแก้ไข
การออกแบบสื่อเพื่อการศึกษา ADDIE Model
สื่อการสอนการเขียนเว็บเพจ ด้วยภาษา HTML
โครงสร้างพื้นฐานของ JavaScript
ความรู้เบื้องต้น เกี่ยวกับโปรแกรม
16. การเขียนรายงานการวิจัย
โครงสร้างของภาษา HTML
โดย ส.อ.ประกาศิต วรนุช วิททยาลัยเฉลิมกาณจนา
Cascading Style Sheet (CSS). CSS การใช้งาน CSS Class และ ID Pseudo Class.
หน่วยการเรียนรู้ การเขียนโปรแกรมภาษาขั้นพื้นฐาน เรื่อง การตกแต่ง HTML 5 ด้วย CSS รหัส รายวิชา ง23102 การงานอาชีพและเทคโนโลยี 6 กลุ่มสาระ การงานอาชีพและเทคโนโลยี
ใบสำเนางานนำเสนอ:

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

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

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

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

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

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

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

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

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

การกำหนดลักษณะหลาย ๆ อย่างไว้ใน 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}

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

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

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

เมื่อนำ Class ไปใช้ก็ทำได้ดังนี้ <p class="Myformat">ข้อความ</p> คุณอาจจะสงสัยว่ากำหนดไปทำไมให้ยุ่งยากยาวกว่า <font color=red>....</font> เสียอีก คำตอบก็คือ ทุกตัวที่กำหนดเป็น Myformat จะเป็นตัวอักษรสีแดงหมด ทั่วทั้งเอกสารที่กำหนดเป็น Myformat จะเหมือนกันลดความยุ่งยาก เวลาจะแก้ไขสีก็แก้จุดเดียวที่กำหนดไว้นั่นเอง จะเห็นว่าไม่ต้องไล่หาแก้ทั่วทั้งเอกสารอย่าง html

ตัวอย่างการนำไปใช้ /* กำหนดให้ข้อความเป็นสีดำ*/ 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}

การใช้ 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}

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

ตัวอย่าง <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=http://www.kapook.com>Kapook</OPTION> <OPTION value=http://www.sanook.com>Sanook</OPTION> <OPTION value=http://www.hunsa.com>Hunsa</OPTION> <OPTION value=http://www.Mornor.com>Mornor</OPTION> </SELECT> ชื่อ <Input Type="text" Name="FirstName" style="FONT-SIZE: 10pt; WIDTH: 170px; BACKGROUND-COLOR: #FF99CC" > </Form> </BODY> </HTML>

แบบที่ 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>

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

ตัวอย่างการเรียกใช้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;

ตัวอย่างการเรียกใช้เก็บไว้ใน 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