หน่วยที่ 12 Style Sheet and Layers

หัวข้อเนื้อหา ความหมายของสไตล์ชีท (Style Sheet) คุณสมบัติสมบัติต่าง ๆ ของสไตล์ซีท คุณสมบัติที่เกี่ยวกับตัวอักษร คุณสมบัติที่เกี่ยวข้องกับสีและพื้นหลัง คุณสมบัติที่เกี่ยวข้องกับข้อความ คุณสมบัติที่เกี่ยวข้องกับกรอบ การกำหนดสไตล์ชีท

หัวข้อเนื้อหา(ต่อ) การกำหนดแบบสไตล์ย่อยด้วย Class และ ID การใช้งาน SPAN ความหมายของเลเยอร์ การกำหนดตำแหน่งของเลเยอร์ การกำหนดขนาดของเลเยอร์ การกำหนดสีพื้นหลังของเลเยอร์ การกำหนดเลเยอร์ซ้อนทับกัน

ความหมายของสไตล์ซีท (Style Sheet) การแสดงผลเกี่ยวกับรูปแบบ และชนิดตัวอักษร รูปภาพ การ กำหนดสีและเส้น รวมไปถึงการจัดวางตัวอักษรแบบต่างๆ เพื่อให้เกิดความถูกต้องและแม่นยำ และยังสามารถลดความ ยุ่งยากในการจัดทำเว็บเพจ เพราะสามารถทำการกำหนด รูปแบบที่ต้องการไว้ในรูปแบบของสไตล์ซีท จากนั้นก็นำไปใช้กับ ข้อความส่วนใดส่วนหนึ่งของเอกสาร HTML หรือนำไปใช้กับ เอกสารทั้งหมดตามความต้องการได้

คุณสมบัติต่าง ๆ ของสไตล์ซีท การกำหนดคุณสมบัติต่าง ๆ ของสไตล์ซีท สามารถคุณบัติที่ เกี่ยวข้องเป็นกลุ่ม ๆ ได้ดังนี้ คุณสมบัติที่เกี่ยวข้องกับตัวอักษร คุณสมบัติที่เกี่ยวข้องกับสีและพื้นด้านหลัง คุณสมบัติที่เกี่ยวข้องกับข้อความ คุณสมบัติที่เกี่ยวข้องกับกรอบ คุณสมบัติที่เกี่ยวข้องกับหน่วยที่ใช้ในการวัด

1. คุณสมบัติที่เกี่ยวข้องกับตัวอักษร การกำหนดคุณสมบัติที่เกี่ยวข้องกับตัวอักษรประกอบด้วย การกำหนดแบบตัวอักษร การกำหนดขนาดตัวอักษร การกำหนดความสูงของบรรทัด การกำหนดความหนาของตัวอักษร การกำหนดลักษณะของตัวอักษร การกำหนดลักษณะของแบบตัวอักษรทั้งหมด

2. คุณสมบัติที่เกี่ยวข้องกับสีและพื้นหลัง 2. คุณสมบัติที่เกี่ยวข้องกับสีและพื้นหลัง เป็นการกำหนดสีตัวอักษรและสีพื้นหลัง มี 2 คำสั่ง ประกอบด้วย การกำหนดสีให้กับตัวอักษร การกำหนดสีของพื้นหลัง

3. คุณสมบัติที่เกี่ยวข้องกับข้อความ 3. คุณสมบัติที่เกี่ยวข้องกับข้อความ เป็นการกำหนดคุณสมบัติที่เกี่ยวข้องกับข้อความ ประกอบด้วย การกำหนดช่องไฟระหว่างคำ การกำหนดช่องไฟระหว่างตัวอักษร การกำหนดการขีดเส้นของข้อความ การกำหนดย่อหน้าของข้อความ กำหนดขนาดความหนาของข้อความ การจัดวางตัวอักษร การกำหนดระยะขอบ

4. คุณสมบัติที่เกี่ยวข้องกับกรอบ 4. คุณสมบัติที่เกี่ยวข้องกับกรอบ การกำหนดคุณสมบัติที่เกี่ยวข้องกับกรอบ ประกอบด้วย การกำหนดระยะห่างของกรอบ การกำหนดระยะห่างของกรอบและข้อความ การกำหนดความกว้างของเส้นกรอบ การกำหนดสีของเส้นกรอบ การกำหนดรูปแบบของเส้นกรอบ

การกำหนดสไตล์ซีท การกำหนดสไตล์ซีท มี 3 ลักษณะคือ กำหนดแบบสไตล์ร่วม (Embedded Style Sheet) กำหนดแบบสไตล์เฉพาะที่(Inline Style Sheet) กำหนดให้ใช้สไตล์ซีทจากภายนอก(Linked Style Sheet)

Import Style Sheet @ Import Style Sheet มีลักษณะการทำงานที่ เหมือนกับ Link Style Sheet คือต้องสร้างไฟล์ที่กำหนด สไตล์ชีทไว้ในไฟล์ที่มีนามสกุล .CSS แล้วเชื่อมโยงมาใช้งานใน ไฟล์เอกสาร HTML รูปแบบคำสั่งของการใช้ @ Import Style Sheet มีดังนี้

การกำหนดแบบสไตล์ย่อยด้วย Class และ ID CLASS และ ID ซึ่งเป็นหลักการของ Object Oriented ซึ่งช่วยให้การกำหนดสไตล์มีความอ่อนตัวในการ ใช้งานมากขึ้น เพิ่มประสิทธิภาพในการกำหนดสไตล์ให้กับแท็ก เดียวกัน สามารถแสดงผลได้หลายรูปแบบ หรือกำหนดรูปแบบ แล้วสามารถใช้งานได้หลาย ๆ แท็ก

การใช้งาน <SPAN> คือ คำสั่งที่สร้างขึ้นเพื่อกำหนดคุณสมบัติของสไตล์ซีท ใน กรณีที่ต้องการเปลี่ยนแปลงรูปแบบสไตล์ในส่วนใดส่วนหนึ่งของ เอกสาร แต่ไม่ต้องการเปลี่ยนแปลงทั้งเอกสาร และยังกำหนดให้ ใช้ร่วมกับสไตล์ย่อยแบบ CLASS และ ID ได้อีกด้วย4

เลเยอร์ (Layer) เลเยอร์ (Layer) เป็นคำสั่งที่ช่วยในการจัดกลุ่มของข้อมูล โดยการแยกข้อมูลออกเป็นชั้นๆแต่ละชั้นเป็นอิสระต่อกัน ทำให้ สามารถแก้ไขข้อมูลในชั้นที่ต้องการได้ โดยที่ไม่กระทบกระเทือน ต่อข้อมูลใน

การกำหนดให้เลเยอร์ซ้อนทับกัน ถ้าต้องการกำหนดให้เลเยอร์ 2 เลเยอร์ขึ้นไปมีการซ้อนทับกัน จะต้องมีการกำหนดลำดับของเลเยอร์ที่จะซ้อนกันเสียก่อน โดย สามารถกำหนดได้ 2 รูปแบบ คือ กำหนดให้วางซ้อนทับกันโดยดูจากตัวเลขของลำดับ กำหนดให้วางซ้อนทับกันโดยการกำหนดชื่อ

แบบฝึกหัด หน่วยที่ 12 จงตอบคำถามต่อไปนี้ให้สมบูรณ์ แบบฝึกหัด หน่วยที่ 12 จงตอบคำถามต่อไปนี้ให้สมบูรณ์ จงอธิบายความหมายของ STYLE SHEET ว่ามีความหมายว่า อย่างไร การกำหนด STYLE SHEET มีกี่ลักษณะ อะไรบ้าง การกำหนดสไตล์ซีทมีกีแบบ อะไรบ้าง จงอธิบาย คำว่า Linked Style Sheet จงอธิบายคำว่า Inline Style Sheet จงอธิบายความหมายของคำสั่ง เลเยอร์ การกำหนดการวางซ้อนทับของเลเยอร์มีกี่รูปแบบ อะไรบ้าง จงเขียนรูปแบบการกำหนดเลเยอร์ ด้วยวิธีการกำหนดชื่อ