การจัดรูปแบบเอกสาร HTML ด้วย CSS (Cascading Style Sheet) เอกสารประกอบคำบรรยายวิชา คอมพิวเตอร์ และ อินเทอร์เน็ต ภาควิชาวิทยาการคอมพิวเตอร์ มหาวิทยาลัยบูรพา

การจัดรูปแบบเอกสาร HTML ด้วย CSS รู้จัก CSS การสร้างรูปแบบ (Style) การแสดงผล เอกสาร HTML ด้วย CSS ประเภทของการกำหนดรูปแบบ (Style) การจัดลำดับความสำคัญของการ แสดงผล

CSS (Cascading Style Sheet) เป็นภาษาที่จัดรูปแบบการแสดงผล เอกสาร HTML กำหนดกฏเกณฑ์ในการระบุ รูปแบบ ("Style") ของเนื้อหาในเอกสาร หลักการ “แยกเนื้อหา ออกจาก การ แสดงผล”  รูปแบบการแสดงผลเอกสาร ไม่ขึ้นกับ เนื้อหา  ง่ายต่อการจัดรูปแบบการแสดงผล  ควบคุมความสม่ำเสมอทั่วกันทุกหน้า เอกสารภายในเว็บไซต์เดียวกัน

แยกเนื้อหา ออกจาก การแสดงผล

CSS Motivations เดิมการจัดรูปแบบข้อความในเอกสาร HTML ใช้แท็ก (Tag)  เอกสาร HTML ฉบับเดียวกัน มักกำหนดรูปแบบ ของแท็กแสดงผลคล้ายๆ กัน เพื่อให้รูปแบบการ แสดงผลสอดคล้องกัน  ต้องกำหนดรูปแบบทุกครั้งที่เรียกใช้แท็ก บราวเซอร์แต่ละโปรแกรม สนับสนุนลักษณะ การแสดงผลของเอกสาร HTML เพิ่มเติมจาก มาตรฐานของ HTML  เพื่อให้แสดงผลเนื้อหาเอกสารได้หลายรูปแบบ  แท็กบางแท็กแสดงได้เฉพาะบางเว็บบราวเซอร์

CSS Recommendations ปีพ.ศ  กฏเกณฑ์ในการกำหนดรูปแบบ (Style) เอกสาร HTML ถูกเพิ่มเข้ามาครั้งแรกใน HTML 4.0  CSS level 1 Recommendations กำหนดโดย World Wide Web Consortium (W3C) ปีพ.ศ  CSS level 2 Recommendations เพิ่มเติม กฏเกณฑ์การกำหนดรูปแบบของสื่อที่ใช้การ แสดงผลข้อมูล  อาจเลือกใช้รูปแบบ ("Style“) กำหนดรูปแบบ ให้แสดง หรือ ให้ไม่แสดงผลข้อมูล บนอุปกรณ์ บางที่มีรูปแบบการแสดงผลข้อมูลต่างจากปกติ

รูปแบบทั่วไปของ CSS

การกำหนด Style ด้วย CSS 3 ส่วน  ตัวเลือก (Selector)  คุณลักษณะ (Property)  ค่าคุณลักษณะ (value) รูปแบบทั่วไป selector { property : value }

รูปแบบทั่วไปของ CSS selector1 { property1 : value1 } selector2 { property2 : value2; property3 : value3 }

Selector อาจเป็น แท็ก HTML ชื่อคลาส Property ชื่อ Property อาจเป็น แอ็ททริบิวต์ของ แท็ก value ค่า (Value) ของแต่ละ Property selector { property : value }

Selector อาจเป็น แท็ก HTML ชื่อคลาสที่กำหนดขึ้นเอง ตัวอย่าง H2 { background-color : # } P { text-indent: 3em }.note { font-size : small }.normal { color : blue }.special { color : red } Selector

อาจเป็น แอ็ททริบิวต์ของแท็ก กำหนด Property ให้กับ Selector มากกว่า 1 Property ให้แยกด้วย เครื่องหมาย ; ตัวอย่าง P { text-indent: 3em } H2 { background-color : #191970; color : red } Property

อาจเป็น ค่าที่กำหนดให้กับ แต่ละ Property หากมีช่องว่างระหว่างคำให้ล้อมรอบด้วย เครื่องหมาย “ และ ” 1 property อาจมีได้หลายค่า หากมีหลายค่า คั่นดัวยเครื่องหมาย ‘,’ ตัวอย่าง P { font-family: "sans serif" } H1 { font-family: Verdana,"sans serif”; color : red } Value

Selector อาจ รวมกลุ่ม Selector ที่มี Style เดียวกันไว้ ด้วยกัน โดยใช้เครื่องหมาย, คั่นกลาง ระหว่าง Selector แต่ละคู่ ตัวอย่าง H1,H2,H3,H4,H5,H6 { color: green } การรวมกลุ่ม Selector

Class Selector ใช้กำหนด Style ที่แตกต่างกันของแท็ก HTML แท็กเดียวกัน ตัวอย่าง กำหนดรูปแบบการจัดย่อหน้า ใน เอกสาร 2 รูปแบบ p.right { text-align: right } p.center { text-align: center} การกำหนด Class Selector (1)

ตัวอย่าง This paragraph will be right-aligned. This paragraph will be center-aligned. การเรียกใช้ Class Selector (1)

Class Selector ไม่จำเป็นต้องใส่ชื่อแท็ก ตัวอย่าง กำหนดรูปแบบการแสดงผลให้อยู่กึ่งกลาง.center { text-align: center } การกำหนด Class Selector (2)

ตัวอย่าง This heading will be center-aligned This paragraph will also be center-aligned. การเรียกใช้ Class Selector (2)

ID Selector ID Selector มักใช้กับแท็กเพียงแท็ก เดียวเท่านั้น ค่า ID ที่กำหนดควรเป็นค่าที่ไม่ซ้ำ แต่ Class Selector มักนำไปใช้กำหนด กำหนด Style ให้กับแท็กหลายๆ แท็ก การกำหนด ID Selector

ตัวอย่าง #wer345 { text-align: center; color: green} h1#wer346 { text-align: center; color : red } ตัวอย่างการกำหนด ID Selector

ตัวอย่าง Heading 1 Heading 2 Heading 3 Some text ให้ผลลัพธ์การแสดงผลต่างกัน ตัวอย่างการเรียกใช้งาน ID Selector

ช่วยอธิบาย ซอสโค้ด (Source Code) ของ เอกสาร HTML ทำได้โดยใช้สัญลักษณ์ /* และ */ ล้อมรอบ ข้อความที่เป็น Comment โปรแกรมเว็บบราวเซอร์ จะไม่แปลความหมาย ในส่วนของ Comment ตัวอย่าง p { text-align: center; /* This is a comment */ } คำอธิบาย (Comment)

วิธีการกำหนดรูปแบบ (Style)

ส่วนของเอกสารที่ใช้กำหนด Style เรียกว่า “Style Sheet" กำหนด Style ได้หลายลักษณะ กำหนดภายในคำสั่ง HTML 1 คำสั่ง (Inline Style) กำหนด Style ไว้ที่ส่วนหัว (head) ของเอกสาร HTML (Internal Style Sheet) กำหนด Style เก็บไว้ในแฟ้มข้อมูล.css (External Style Sheet) การกำหนด Style

กำหนด Style ภายในคำสั่ง 1 คำสั่ง ใช้แอ็ททริบิวต์ชื่อ “style” และ กำหนดค่า (Value) ของรูปแบบ ให้ กับแอ็ททริบิวต์ได้มากกว่า 1 ค่า กำหนด Style ภายในแท็กใดๆ ได้ ณ ตำแหน่งที่มีเนื้อหาของเอกสารปรากฏอยู่ ไม่ได้แยกเนื้อหาออกจาก การแสดงผล Inline Style

Heading 1 This text does not have any style applied to it. Heading 2 This text has the font-size style applied to it. This text has the font-size and color style applied to it, making it 20 pt and red color. การกำหนด Inline Style

การแสดงผล Inline Style

Inline Style ข้อดี กำหนด Style ภายในแท็กใดๆ ได้ ณ ตำแหน่งที่มีเนื้อหาปรากฏอยู่ ข้อจำกัด กำหนด Style ให้กับแท็ก HTML ได้พียง 1 แท็ก ณ ตำแหน่งที่กำหนด Style เท่านั้น การแยกเนื้อหาออกจากการแสดงผล เอกสารทำได้ไม่สะดวก ต้องระบุ Style ให้กับแท็กทุกครั้งที่ต้องการแสดงผล

กำหนด Style ไว้ที่ส่วนหัว (head) ของ เอกสาร ระหว่าง … ใช้แท็กชื่อ … กำหนดแอ็ททริบิวต์ชื่อ “type” กำหนดค่าของแอ็ททริบิวต์เป็น “text/css” นำไปใช้เมื่อเอกสาร HTML มีการ กำหนดรูปแบบการแสดงผลเนื้อหาใน เอกสาร ให้มีรูปแบบเดียวกัน Internal Style

CSS - Internal Styles BODY { background-image: url("bgpic.jpg") } EM { background-color: #8000ff; color: white } H1 { font-family: arial, sans-serif } P { font-size: 14pt }.special { color: blue } : การกำหนด Internal Style

: MAN and MEN The exalted origin of the word MAN is clear int the plural form, men, from mental. It is inspiring to note that man was so named because he was the one that thinks. The Thinker If you have ever seen a copy – the original is in Paris – of the famous sculpture by Auguste Rodin called The Thinker, you would agree that the essential nature of man stems from his ability to think. การกำหนด Internal Style

การแสดงผล Internal Style

Internal Style ข้อดี กำหนด Style ไว้ล่วงหน้า ตอนต้นของ เอกสาร ไม่ต้องกำหนดทุกครั้งที่มีการเรียกใช้งาน ข้อจำกัด กำหนด Style ให้กับเอกสาร HTML ได้ เพียง 1 เอกสารเท่านั้น ไม่สามารถนำ Style ที่กำหนดไว้ไปใช้กับ เอกสาร HTML ฉบับอื่นได้

กำหนด Style ไว้ในแฟ้มที่มีนามสกุล.css เรียกใช้งานจากแฟ้มเอกสาร HTML โดยใช้แท็ก อยู่ระหว่างแท็ก … External Style

/* An External Style Sheet */ BODY { background-image : url("images/bgpic.jpg") } EM { background-color : #8000ff; color : white } H1 { font-family : arial, sans-serif } H2 { background-color : blue; color : white } P { font-size : 14pt } UL { margin-left: 2cm }.special { color : blue; font-weight : bold }.normal { color : red } : การกำหนด External Style บันทึกในนามสกุล.css

CSS - External Styles <LINK rel = "stylesheet" type = "text/css" href = "styles.css"> : การกำหนด External Style

การแสดงผล External Style

External Style ข้อดี นำ Style ทีกำหนดไว้ไปใช้งานในเอกสาร อื่นๆ ได้ เปลี่ยนรูปแบบการแสดงผลทั้งเว็บไซต์ได้ โดยเปลี่ยน Style ใน.css เพียงแฟ้มเดียว ข้อจำกัด ต้องกำหนด Style แยกคนละเอกสาร

ลำดับความสำคัญ ของ วิธีการกำหนดรูปแบบการแสดงผล

ลำดับความสำคัญของวิธีการ แสดงผล (เรียงจากมาก ไป น้อย) 1. Inline Style 2. Internal Style Sheet 3. External Style Sheet 4. ค่า Style ที่กำหนดโดยปริยายจาก เว็บบราวเซอร์ (Browser Default)

ลำดับความสำคัญ หากมี Inline Style แล้ว Style ที่ โปรแกรมเว็บบราวเซอร์ใช้ในการ แสดงผลจะใช้ Inline Style เสมอ หากไม่มี Inline Style จะใช้ Internal Style หากไม่มี Internal Style จะใช้ External Style หากไม่มีการกำหนด Style จะใช้ค่าที่ กำหนดโดยปริยายของเว็บบราวเซอร์

การถ่ายทอดคุณสมบัติ กรณีมี Style ที่กำหนดให้กับ Selector โดยใช้ค่าของ Property มากกว่า 1 Property ค่าของ Property ที่แตกต่างกันนั้น สามารถถ่ายทอดคุณสมบัติ (inherit) จากที่มีความสำคัญน้อยกว่า มายัง Style ที่มีความสำคัญมากกว่า

ตัวอย่าง /* An external stylesheet */ h3 { color: red; text-align: left; font-size: 8pt } : <link rel="stylesheet" type="text/css" href="hstyles.css"> h3 {text-align: right; font-size: 20pt} :

ตัวอย่าง (ต่อ) Property ของแท็ก จะมี รายละเอียดดังต่อไปนี้ ได้แก่ “color: red” “text-align: right;” “font-size: 20pt”

ตัวอย่าง การจัดรูปแบบเอกสารด้วย CSS

ตัวอย่าง This is header 1 This is a paragraph This is another paragraph This is header 2, followed by a table First Name Name Telephone Fax Hege Svendson Kai Jim Svendson

การแสดงผล – แบบไม่กำหนด Style

p,table, h1,h2,h3 { font-family: verdana, arial, “sans serif”; } p, h1, h2, h3, table, hr { margin-left: 10pt } p, th,td { font-size: 75% } body { #ffffff } h1,h2,h3,hr { color: firebrick } การกำหนด Style #1

การแสดงผล – Style#1

h1,h2,h3 { font-family: "comic sans ms", arial } p,table,li,address { font-family: "comic sans ms", arial; margin-left: 10pt } p, th,td { font-size: 75% } h1,h2,h3,hr { color:saddlebrown } body { background-color: #EFE7D6 } การกำหนด Style #2

การแสดงผล – Style#2

h1,h2,h3 { font-family: arial, “sans serif” } p,table,li,address { margin-left: 15pt; font-family: arial, “sans serif” } p, th,td { font-size: 80% } th { background-color:#FAEBD7} body { background-color: #ffffff } h1,h2,h3,hr { color:saddlebrown } การกำหนด Style #3

การแสดงผล – Style#3

เอกสารอ้างอิง style_master/academy/css_tutorial/ H.M Deitel, P.J. Deitel, T.R. Nieto, (2002), Internet & World Wide Web How to Program, Prentice Hall.