การควบคุมสไตล์ที่เรียงต่อกัน
สไตล์ที่มีความซับซ้อนมากๆ จำเป็นต้องมีวิธีการควบคุมการแสดงผลอย่างมีประสิทธิภาพ โดยใช้คำสั่ง "!important" กำหนดให้แท็กเรียกใช้ Property ที่กำหนด แต่ก็ยากที่จะคาดเดาได้ว่า Property ใดจะถูกเรียกใช้มากหรือน้อยเพียงใด ดังนั้นจึงได้นำวิธีการควบคุมสไตล์ที่เรียงต่อกันดังนี้
1. การเปลี่ยนแปลงค่าที่กำหนด
ดูตัวอย่างค่าจากตาราง Multiple Style#1 ในข้อ 4.2
ตารางที่ 2
คือ เวบบราวเซอร์จะแสดงผลค่าที่มีตัวเลขมากก่อน เพราะค่าที่มีตัวเลขมากจะมีความสำคัญมากกว่าค่าที่มีตัวเลขน้อย
2. Selective Overriding
การจะให้แสดงผลที่ดีบนเวบบราวเซอร์ได้ เราเลือกสไตล์ที่มีความสำคัญมากที่สุดให้กับเวบเพจ ตย.
สร้าง External
Style Sheet ชื่อ "global.css" เพื่อนำไปใช้งานแต่เพจในเวบไซต์ และ Override Property ให้กับแท็กที่ต้องการ นอกจากนี้ยังสามารถสร้าง Internal Style Sheet แบบง่ายๆ ได้อีกด้วย
h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 24px;
color: #000;
}
ต้องการให้ <h1> มีขนาดใหญ่และมีสีแดง จะต้องเพิ่มใน Internal Style Sheet ดังนี้
h1 {
font-size: 36px;
color: red;
}
ผลที่ได้ <h1> คือ จะมีรูปแบบตัวอักษรของ Arial จาก External
Style Sheet และจะมีสีแดง และขนาดเท่ากับ 36px จาก Internal
Style Sheet
การนำ External
Style Sheet และ Inline
Style Sheet มาใช้งานบนเวบเพจ จะต้องกำหนด External
Style Sheet ไว้ก่อน Inline
Style Sheet ในส่วนของ <head>
3. ลบค่าสไตล์ที่กำหนด
คือ การลบค่าการแสดงผลของแต่ละเวบบราวเซอร์ที่ให้การแสดงผลที่แตกต่างกัน คือ วิธีหลีกเลี่ยงการแสดงสไตล์แบบไม่คงที่ในแต่ละเวบบราวเซอร์ (Cross-browser Inconsistency) เป็นแนวคิดที่ดีในการลบสไตล์ที่ซ้ำซ้อนให้กับสไตล์ชีท เป็นการลบสไตล์ที่แนบมากับแต่ละเวบบราวเซอร์ (Built-in Browser) และนำสไตล์ที่กำหนดขึ้นเองมาแสดงผล แนวคิดนี้เรียกว่า "CSS Reset" จะกำหนดสไตล์ไว้ดังนี้
html, body, h1, h2, h3, h4, h5, h6, p,
ol, li, pre, code, address, variable, form, field, blockquote {
padding: 0;
margin: 0;
font-size: 100%;
font-weight: normal;
}
ol {
marign-left: 1.4em;
list-style: decimal;
}
ul {
margin-left: 1.4em;
list-style: squire;
}
img {
border: 0;
}
จากโค้ดข้างต้น สไตล์ที่ 1 เป็น Group
Selector ที่ใช้จัดรูปแบบแท็กส่วนใหญ่ โดยจะลบ Padding และ Margin
ทั้งหมด และปรับขนาดตัวอักษรเป็น 100% และมีรูปแบบตัวอักษรเป็นปกติ ขั้นตอนนี้จะทำให้แท็กดูสวยงามและมีสไตล์เหมือนกันทุกเวบ ต้องกำหนดค่าเริ่มต้นเป็น 0 เพื่อให้เวบบราวเซอร์แสดงผล HTML
ได้อย่างคงที่ สไตล์ที่ 2,
3 กำหนด left-margin เพื่อให้แสดงผลคงที่ และสไตล์สุดท้าย ลบเส้นขอบให้ลิงค์ที่เป็นรูปภาพ
การสร้าง Hybrid
Style
เวบเพจสามารถรวมสไตล์ เพื่อนำไปใช้แสดงผลได้มากกว่าหนึ่งสไตล์ได้ เช่น สไตล์ที่ใช้จัดรูปแบบหัวข้อเรื่องทั้งหมดบนเวบเพจ หรือปรับปรุงสไตล์ให้กับหัวข้อเรื่องที่มีขนาดใหญ่และอยู่ในคอลัมน์หลักของเวบเพจ เป็นต้น การสร้าง Hybrid Style มีขั้นตอนดังนี้
1. สร้างไฟล์ CSS
ชื่อ "HybridStyle.css"
และกำหนดสไตล์ดังนี้
h2 {
font-size: 2em;
color: #AFC3D6;
margin-bottom: 5px;
}
2. เพิ่มสไตล์ที่ใช้ในการจัดรูปแบบหัวข้อเรื่องในคอลัมน์หลักของเวบเพจ ดังนี้
#main h2 {
color: #E8A064;
border-bottom: 2px white solid;
background: url(image/images.jpg) no-repeat;
padding: 0 0 2px 80px;
}
เวบบราวเซอร์จะนำ #main h2 มาแสดงผลก่อน และส่วนที่เป็น h2
ก็จะถูกนำมาแสดงผลเฉพาะส่วนที่ #main h2 ไม่มี
ไม่มีความคิดเห็น:
แสดงความคิดเห็น