การทำความเข้าใจ Cascading Style Sheets Cascading Style Sheets (CSS) คือชุดกฎการจัดรูปแบบที่ควบคุมลักษณะที่ปรากฏของเนื้อหาเว็บเพจ เมื่อใช้ CSS เพื่อจัดรูปแบบหน้า ให้แยกเนื้อหาออกจากการนำเสนอ เนื้อหาของหน้า (นั่นคือโค้ด HTML) อยู่ในไฟล์ HTML ในขณะที่กฎ CSS ที่กำหนดการนำเสนอโค้ดจะอยู่ในไฟล์อื่น (สไตล์ชีตภายนอก) หรือในส่วนอื่นของเอกสาร HTML ( โดยปกติจะเป็นส่วนหัวของไฟล์) การใช้ CSS ช่วยให้คุณมีความยืดหยุ่นและควบคุมลักษณะที่ปรากฏของเพจได้ดียิ่งขึ้น ตั้งแต่การวางตำแหน่งเค้าโครงที่แม่นยำไปจนถึงแบบอักษรและสไตล์เฉพาะ
CSS ช่วยให้คุณสามารถควบคุมคุณสมบัติหลายอย่างที่ HTML เพียงอย่างเดียวไม่สามารถควบคุมได้ ตัวอย่างเช่น คุณสามารถระบุขนาดและหน่วยแบบอักษรต่างๆ (พิกเซล ขนาดพอยต์ ฯลฯ) สำหรับข้อความที่เลือกได้ การใช้ CSS เพื่อกำหนดขนาดตัวอักษรเป็นพิกเซล จะทำให้การจัดวางหน้าและลักษณะที่ปรากฏบนเบราว์เซอร์ต่างๆ มีความสอดคล้องกันมากขึ้น
นอกจากการจัดรูปแบบข้อความแล้ว คุณสามารถใช้ CSS เพื่อควบคุมการจัดรูปแบบและการวางตำแหน่งขององค์ประกอบระดับบล็อกในเว็บเพจได้ ตัวอย่างเช่น คุณสามารถตั้งค่าระยะขอบและเส้นขอบสำหรับองค์ประกอบระดับบล็อก ข้อความลอยรอบๆ ข้อความอื่น และอื่นๆ ได้
กฎการจัดรูปแบบ CSS ประกอบด้วยสองส่วน: ตัวเลือกและการประกาศ ตัวเลือกคือคำที่ระบุองค์ประกอบรูปแบบ (เช่น P, H1, ชื่อคลาส หรือ ID) และการประกาศใช้เพื่อกำหนดสไตล์ขององค์ประกอบ ในตัวอย่างต่อไปนี้ H1 คือตัวเลือก และทุกอย่างระหว่างวงเล็บ ({}) คือการประกาศ:
H1 {
ขนาดตัวอักษร:16 พิกเซล;
ตระกูลแบบอักษร:Helvetica;
แบบอักษรน้ำหนัก: ตัวหนา;
}
การประกาศประกอบด้วยสองส่วน: คุณสมบัติ (เช่น ตระกูลฟอนต์) และค่า (เช่น Helvetica) กฎ CSS ข้างต้นสร้างสไตล์เฉพาะสำหรับแท็ก H1: ข้อความของแท็ก H1 ทั้งหมดที่เชื่อมโยงกับสไตล์นี้จะมีขนาด 16 พิกเซล แบบอักษร Helvetica และตัวหนา
คำว่า cascading หมายถึงความสามารถในการนำสไตล์หลายแบบไปใช้กับองค์ประกอบเดียวกัน ตัวอย่างเช่น คุณสามารถสร้างกฎ CSS กฎหนึ่งเพื่อใช้สี กฎ CSS อีกกฎเพื่อใช้ระยะขอบ จากนั้นใช้ทั้งสองกฎกับข้อความเดียวกันบนหน้า สไตล์ที่กำหนดไว้จะ "เรียงซ้อน" ลงไปที่องค์ประกอบบนเว็บเพจของคุณ ท้ายที่สุดแล้วจะสร้างการออกแบบที่คุณต้องการ
ข้อได้เปรียบหลักของ CSS คือให้ความสามารถในการอัปเดตที่สะดวก เมื่อคุณอัปเดตกฎ CSS ในที่เดียว การจัดรูปแบบของเอกสารทั้งหมดโดยใช้สไตล์ที่กำหนดไว้นั้นจะถูกอัปเดตเป็นรูปแบบใหม่โดยอัตโนมัติ
ประเภทสไตล์ต่อไปนี้สามารถกำหนดได้ใน Dreamweaver:
กฎ CSS ที่กำหนดเอง (หรือที่เรียกว่าสไตล์คลาส) อนุญาตให้คุณใช้คุณสมบัติสไตล์กับช่วงหรือบล็อกข้อความใดก็ได้ (ดูการใช้สไตล์คลาส)
รูปแบบแท็ก HTML กำหนดรูปแบบของแท็กเฉพาะ (เช่น h1) ใหม่ เมื่อคุณสร้างหรือเปลี่ยนสไตล์ CSS ของแท็ก h1 ข้อความทั้งหมดที่จัดรูปแบบด้วยแท็ก h1 จะได้รับการอัปเดตทันที
รูปแบบตัวเลือก CSS (สไตล์ขั้นสูง) กำหนดการจัดรูปแบบใหม่สำหรับชุดค่าผสมขององค์ประกอบที่เฉพาะเจาะจง หรือสำหรับรูปแบบตัวเลือกอื่นๆ ที่ CSS อนุญาต (เช่น ใช้ตัวเลือก td h2 ทุกครั้งที่ส่วนหัว h2 ปรากฏภายในเซลล์ตาราง) สไตล์ขั้นสูงยังสามารถกำหนดการจัดรูปแบบของแท็กที่มีแอตทริบิวต์ id เฉพาะได้ใหม่ (เช่น สไตล์ที่กำหนดโดย #myStyle สามารถนำไปใช้กับแท็กทั้งหมดที่มีค่าแอตทริบิวต์ pair id="myStyle")
กฎ CSS สามารถอยู่ในตำแหน่งต่อไปนี้:
สไตล์ชีต CSS ภายนอกคือชุดของกฎ CSS ที่จัดเก็บไว้ในไฟล์ CSS ภายนอก (.css) ที่แยกต่างหาก (ไม่ใช่ไฟล์ HTML) เอกสารถูกเชื่อมโยงไปยังหน้าหนึ่งหรือหลายหน้าในเว็บไซต์โดยใช้ลิงก์ในส่วนหัวของไฟล์เอกสาร
สไตล์ชีต CSS ภายใน (หรือแบบฝัง) คือชุดกฎ CSS ที่อยู่ภายในแท็กสไตล์ในส่วนหัวของเอกสาร HTML
สไตล์อินไลน์ถูกกำหนดไว้ภายในเอกสาร HTML ทั้งหมดในอินสแตนซ์เฉพาะของแท็ก
Dreamweaver จดจำสไตล์ที่กำหนดไว้ในเอกสารที่มีอยู่ตราบใดที่เป็นไปตามหลักเกณฑ์สไตล์ CSS
คำใบ้
หากต้องการแสดงคู่มืออ้างอิง CSS ของ O'Reilly ที่มาพร้อมกับ Dreamweaver ให้เลือกวิธีใช้ > การอ้างอิง จากนั้นเลือกการอ้างอิง CSS ของ O'Reilly จากเมนูป๊อปอัปในแผงการอ้างอิง
ตั้งค่าการจัดรูปแบบ HTML ด้วยตนเองแทนที่การจัดรูปแบบที่ใช้ผ่าน CSS เพื่อให้กฎ CSS ควบคุมการจัดรูปแบบย่อหน้า จะต้องลบการจัดรูปแบบ HTML ที่ตั้งค่าด้วยตนเองทั้งหมดออก
Dreamweaver แสดงผลคุณสมบัติสไตล์ส่วนใหญ่ที่คุณใช้โดยตรงในหน้าต่างเอกสาร คุณยังสามารถแสดงตัวอย่างเอกสารในหน้าต่างเบราว์เซอร์เพื่อดูว่านำสไตล์ไปใช้อย่างไร คุณสมบัติสไตล์ CSS บางอย่างปรากฏแตกต่างออกไปใน Microsoft Internet Explorer, Netscape Navigator, Opera และ Apple Safari และบางคุณสมบัติยังไม่รองรับเบราว์เซอร์ใด ๆ ในปัจจุบัน