CSS
- 1. หน่วยที่ 1 ภาษาที่ใช้ ในการพัฒนาเว็บไซท์
ใบความรู้ที่ 1.2
CSS(Cascading Style Sheet)
CSS คืออะไร
เป็นการจัดรูปแบบหน้าตาของเว็บ โดยการกาหนดค่าเพียงครั้งเดียวที่เรียกว่า สไตล์ชีท และเมื่อเราต้องการ
แก้ไขรูปแบบใดๆก็มาแก้ไขที่สไตล์ชีทของเว็บเพจนั้นจุดเดียว
สไตล์ชีทมีประโยชน์ในการแก้ปัญหาหลายๆอย่างเช่น การกาหนดตาแหน่งหรือขนาดที่พิเศษกว่าปกติ
เพราะว่าภาษา HTML ธรรมดาจะมีข้อจากัดอยู่
การทางานของ CSS
จะทางานร่วมกับ HTML โดยจะกาหนดการแสดงผลของสิ่งต่างบนเว็บ เช่น สีอักษร สีพิ้นหลัง ขนาดตัวอักษร
จัดการ Layout ให้สวยงามและอื่นๆ
ข้อดีสาคัญของ CSS
ทาให้ขนาดไฟล์แต่ละหน้าเล็กลงกว่าเดิม เพราะใช้โค้ดน้อยกว่า
มีความยืดหยุ่นสูง ในการปรับแต่งแก้ไขในอนาคต
สามารถกาหนดแยกไว้ต่างหากจาก ไฟล์เอกสาร html และสามารถนามาใช้ร่วม
ไฟล์ได้ สาหรับการแก้ไขก็แก้เพียง จุดเดียวก็มีผลกับเอกสารทั้งหมดได้
สามารถจัดการ Layout ได้อย่างละเอียด แม่นยา
ง่ายในการเรียกดู Source
กับเอกสารหลาย
1
- 2. หน่วยที่ 1 ภาษาที่ใช้ ในการพัฒนาเว็บไซท์
ตัวอย่าง กรณีที่จัดรูปแบบการแสดงผลด้วยภาษา HTML
<html>
<body>
<h1><font style="color:red; font-family:Arial">วิธีดแลรักษาสุขภาพ</font></h1>
ู
<p><font style="color: black; font-family:Arial"><b>รับประทานอาหารทีมีประโยชน์ หมันออกกาลัง
่
่
กาย และพักผ่อนให้ เพียงพอ</b></font></p>
<h1><font style="color:red; font-family:Arial">วิธีกินผลไม้ ที่ถกต้ อง</font></h1>
ู
<p><font style="color:red; font-family:Arial"><b>ให้ กินผลไม้ แค่ทีละอย่าง เช่นจะกินมะม่วงก็มะม่วง
อย่างเดียวทังมื ้อ เพื่อให้ ร่างกายจัดเตรี ยมการย่อยได้ งาย ไม่สบสน นอกจากนี ้ยังไม่ควรกินผลไม้ ทนทีหลังอาหาร
้
่
ั
ั
ถ้ าทานมื ้อหลักแล้ วควรรออย่างน้ อย 20 นาที</b></font></p>
</body>
</html>
ตัวอย่าง เมื่อเปลี่ยนมาใช้คาสั่ง style sheet จัดรูปแบบการแสดงผลแทนการใช้ code ภาษา HTML ทาให้
code ภายในเอกสารอ่านเข้าใจง่าย และแก้ไขได้ง่ายขึ้น ^^
<html>
<head>
<style type="text/css">
h1{color:red; font-family:Arial; }
p{color:black; font-family:Arial; font-weight:bold }
</style>
</head>
<body>
<h1>วิธีดแลรักษาสุขภาพ</h1>
ู
<p>รับประทานอาหารที่มีประโยชน์ หมันออกกาลังกาย และพักผ่อนให้ เพียงพอ</p>
่
<h1>วิธีกินผลไม้ ที่ถกต้ อง</h1>
ู
<p>ให้ กินผลไม้ แค่ทีละอย่าง เช่นจะกินมะม่วงก็มะม่วงอย่างเดียวทังมื ้อ เพื่อให้ ร่ างกายจัดเตรี ยมการย่อยได้ ง่าย
้
ไม่สบสน นอกจากนี ้ยังไม่ควรกินผลไม้ ทนทีหลังอาหาร
ั
ั
ถ้ าทานมื ้อหลักแล้ วควรรออย่างน้ อย 20 นาที</p>
</body>
</html>
2
- 3. หน่วยที่ 1 ภาษาที่ใช้ ในการพัฒนาเว็บไซท์
โครงสร้างคาสั่ง
คาสั่งของ CSS ประกอบด้วย selector, property และ value
selector { property:value }
selector { property1:value1; property2:value2 }
selector สามารถเป็น HTML Tag ต่างๆ เช่น <body>, <p> หรือเป็น Class name หรือ ID ที่เรา
ตั้งชื่อให้ก็ได้
property คือ คุณสมบัติในการจัดรูปแบบการแสดงผล เช่น color สาหรับกาหนดสี, font-size
สาหรับกาหนดขนาดตัวอักษร
value เป็น ค่า ที่เรากาหนดให้กับ property ต่างๆ เช่น color:white, font-size:14px
ตัวอย่าง คาสั่ง CSS
กาหนดให้ข้อความที่อยู่ใน Tag <p> เป็นสีดา และวางอยู่กึ่งกลาง
/* selector ที่เป็ น HTML Tag */
p{
color:#000000;
text-align:center
}
กาหนดให้ข้อความที่ class name topic เป็นสีแดง ชนิดอักษรเป็น Arial ตัวหนา และจัดวางอยู่กึ่งกลาง
/* selector ที่เป็ น Class name */
.topic{
color:red;
font-family:Arial;
font-weight:bold;
text-align:center
}
กรณีที่ selector มีค่า property เหมือนกัน สามารถเขียนรวมกันได้ โดยใช้เครื่องหมาย "," คั่นระหว่าง
selector
กาหนดให้ข้อความใน Tag <h1>,<h2> และ <h3> เป็นสีแดง ชนิดตัวอักษรเป็น sans-serif
h1, h2, h3 {
color:red;
font-family:sans-serif
}
3
- 4. หน่วยที่ 1 ภาษาที่ใช้ ในการพัฒนาเว็บไซท์
Comment
ใน Style Sheet Comment จะใช้เครื่องหมาย "/*" เป็นการเปิด และ "*/" เป็นการปิด เช่น
/* นี่คือ comment กาหนดสีตวอักษรเป็ นสีดา ขนาด14px */
ั
body {
color:#000000;
font-size:14px
}
วิธีใช้งาน Style Sheet
1. Inline Styles
วิธีการนี้ควรใช้ในกรณีที่ต้องการกาหนด style ให้กับ element ของ HTMLีพียงอันเดียวเป็นการเฉพาะ โดย
เ
การแทรกคาสั่ง style sheet ใน HTML Tag อยู่ในคาสั่ง style="" ดังนี้
<Tag style="property:value;">
เช่น
<html>
<body>
<h1 style="color:red; font-family:Arial">วิธีดแลรักษาสุขภาพ</h1>
ู
<p style="color:black; font-family:Arial; font-weight:bold">รับประทานอาหารที่มีประโยชน์ หมันออก
่
กาลังกาย และพักผ่อนให้ เพียงพอ</p>
</body>
</html>
เราควรหลีกเลี่ยงการเขียน style=”" ฝังลงใน HTML Tag เพราะมันทาให้อ่านยาก และนาไปใช้ต่อไม่ได้ และ
เป็นการยากที่จะแก้ไข
2. Internal Style Sheet
วิธีการนี้ควรใช้ในกรณีที่มีเพียง HTML ไฟล์เดียวที่ใช้ style นี้ เมื่อประกาศคาสั่ง Style Sheet เพื่อกาหนด
คุณสมบัติ ให้กับ HTML Tag ใดๆ แล้ว จะมีผลกับเอกสาร HTML ทั้งหน้า นิยมใส่ส่วนของคาสั่ง Style Sheet
ไว้ระหว่าง <head>...</head>
4
- 5. หน่วยที่ 1 ภาษาที่ใช้ ในการพัฒนาเว็บไซท์
<style type="text/css">
<!-selector {property1: value1; property2: value2}
....
-->
</style>
ตัวอย่าง
<html>
<body>
<head>
<style type="text/css">
<!-h1{color:red; font-family:Arial }
p{color:black; font-family:Arial; font-weight:bold }
-->
</style>
</head>
<body>
<h1>วิธีดูแลรักษาสุขภาพ</h1>
<p>รับประทานอาหารที่มีประโยชน์ หมั่นออกกาลังกาย และพักผ่อนให้เพียงพอ</p>
<h1>วิธีกินผลไม้ที่ถูกต้อง</h1>
<p>ให้กินผลไม้แค่ทีละอย่าง เช่นจะกินมะม่วงก็มะม่วงอย่างเดียวทั้งมื้อ เพื่อให้ร่างกายจัดเตรียมการย่อยได้
ง่าย
ไม่สับสน นอกจากนี้ยังไม่ควรกินผลไม้ทันทีหลังอาหาร ถ้าทานมื้อหลักแล้วควรรออย่างน้อย 20 นาที</p>
</body>
</html>
3. External Style Sheet
วิธีการนี้เหมาะกับกรณีที่มีเพียง 1 style แล้วต้องการนาไปใช้กับเอกสาร HTML หลายๆ ไฟล์ โดยนาเอาคาสั่ง
Style Sheet ที่อยู่ใน <style type="text/css"> ... </style> มาบันทึกเป็นไฟล์ใหม่ นามสกุล .css
จากนั้นจึงทาการผนวกไฟล์ของ Style Sheet นี้ลงไปในเอกสาร HTML ทุกไฟล์ที่ต้องการใช้งาน Style Sheet
ชุดนี้ ไว้ในส่วน <head>...</head> โดยใช้คาสั่ง
<link rel="stylesheet" type="text/css" href="URL ไฟล์.css">
ตัวอย่างนี้จะสร้าง Style Sheet เก็บไว้ในไฟล์หนึ่ง แล้วให้ไฟล์เอกสาร HTML หลายๆ หน้ามาเรียกใช้
ในไฟล์ mystyle.css ให้เขียน code ดังนี้
h1{ color:red; font-family:Arial }
p{ color:black; font-family:Arial; font-weight:bold }
5
- 6. หน่วยที่ 1 ภาษาที่ใช้ ในการพัฒนาเว็บไซท์
ในไฟล์ HTML ex_css_chapter05_3.html เรียกใช้ style sheet จากภายนอก
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<h1>วิธีดแลรักษาสุขภาพ</h1>
ู
<p>รับประทานอาหารที่มีประโยชน์
หมันออกกาลังกาย และพักผ่อนให้ เพียงพอ</p>
่
</body>
</html>
การจัดลาดับความสาคัญในการประมวลผล CSS
1. กรณีที่มีการกาหนด style ด้วยชื่อ selector เดียวกันทั้งแบบ 3 แบบ Style sheet ที่จะถูกใช้คือ
แบบไหน
ลาดับความสาคัญ เรียงจากมากไปหาน้อย
Inline style (inside an HTML element),
Internal style sheet (inside the <head> tag)
และ External style sheet ตามลาดับ
จากลาดับความสาคัญดังกล่าว Style ที่จะถูกใช้คือแบบ Inline style
2. กรณีที่มีการเขียน style ซ้า selector เดิม อันที่อยู่ด้านล่าง จะถูกทาเป็นลาดับสุดท้าย
ตัวอย่าง ไฟล์ mystyle.css
p{ color:black }
p{ color:blue }
เมื่อเราเรียกใช้ <p> ใน HTML เช่น
<p>รับประทานอาหารที่มีประโยชน์ หมั่นออกกาลังกาย และพักผ่อนให้เพียงพอ</p>
จะได้ตัวอักษรใน Tag <p> เป็นสีน้าเงิน
แต่หากเรากาหนด !important ไว้ใน value เช่น
p{color:black!important}
p{color:blue}
เมื่อเขียนแบบนี้ ใน Tag <p> จะได้ตัวอักษรสีดา
6
- 7. หน่วยที่ 1 ภาษาที่ใช้ ในการพัฒนาเว็บไซท์
การเขียนคาสั่ง Style Sheet
Selector ที่เป็น HTML Tag
<html>
<body>
<head>
<style type="text/css">
<!-h1{color:red; font-family:Arial }
p{color:black; font-family:Arial }
--> </style>
</head>
<body>
<h1>วิธีดแลรักษาสุขภาพ</h1>
ู
<p>รับประทานอาหารที่มีประโยชน์
หมันออกกาลังกาย และพักผ่อนให้ เพียงพอ</p>
่
<h1>วิธีกินผลไม้ ที่ถกต้ อง</h1>
ู
<p>ให้ กินผลไม้ แค่ทีละอย่าง เช่นจะกินมะม่วงก็มะม่วงอย่างเดียวทังมื ้อ เพื่อให้ ร่างกายจัดเตรี ยมการย่อยได้ ง่าย
้
ไม่สบสน นอกจากนี ้ยังไม่ควรกินผลไม้ ทนทีหลังอาหาร ถ้ าทานมื ้อหลักแล้ วควรรออย่างน้ อย 20 นาที </p>
ั
ั
</body>
</html>
ตัวอย่างนี้เห็นกันมาหลายรอบแล้วนะคะ เป็นการกาหนด style ให้กับ HTML Tag <h1> และ <p>
หมายความว่าข้อความภายใน <h1> ทุกอันในหน้าเว็บเพจนี้ให้เป็นสีแดง และข้อความใน <p> ทุกอันให้เป็นสี
ดา
มาดู selector แบบอื่นๆ กันบ้างค่ะ
Selector ที่เป็น Class attribute
เป็นการประกาศคาสั่ง Style Sheet เพื่อกาหนดคุณสมบัติแบบเฉพาะเจาะจง ให้กับ HTML element ผ่าน
class attribute โดยเราสามารถตั้งชื่อ class ได้เอง
class ใช้เมื่อต้องการใช้แสดงผลรูปแบบนั้นซ้าหลายๆ ครั้ง หรือต้องการใช้กับ element หลายๆ อัน การ
ประกาศใช้เครื่องหมาย "." นาหน้าชื่อ class
7
