HTML สามารถนำเสนอข้อมูลได้เพียงบางส่วนเท่านั้นและมีความสามารถด้านประสิทธิภาพที่จำกัดมาก โดยจะต้องใช้ร่วมกับ CSS เพื่อทำให้เพจสวยงามยิ่งขึ้น ในเว็บเพจ สไตล์โค้ดทั้งหมดสามารถย้ายออกจากเอกสาร HTML และไปยังสไตล์ชีตที่แยกต่างหากได้
สไตล์ CSS สามารถนำไปใช้กับเอกสาร HTML เป็นไฟล์แยก (ไฟล์ประเภท .css) หรือเขียนโดยตรงในเอกสาร HTML โดยสามารถแบ่งคร่าวๆ ได้เป็นสี่วิธีดังต่อไปนี้:
1. สไตล์ชีตแบบฝัง
ฝังตัว: เน้นสไตล์ CSS ในคู่แท็ก <style></style> ของคู่แท็ก <head></head> ของหน้าเว็บ
เพิ่มสไตล์ CSS ให้กับแท็ก <style> ในแท็ก <head> ของ HTML สไตล์ CSS ที่กำหนดโดยใช้สไตล์ชีตแบบอินไลน์สามารถใช้ได้ภายในหน้าเว็บปัจจุบันเท่านั้น
<!DOCTYPEhtml><html><head><title>รูปแบบอินไลน์</title><style>body{พื้นหลัง-สี:linen;}h1{color:maroon;margin-left:40px;}</style>< / หัว <body><h1>สไตล์</h1></body></html>เนื่องจากสไตล์ชีตแบบฝังจำเป็นต้องกำหนดสไตล์ CSS ภายในเอกสาร HTML มันจะเพิ่มขนาดของเอกสาร และเมื่อเอกสารอื่นจำเป็นต้องใช้สไตล์เดียวกันในสไตล์ชีตแบบฝัง จึงไม่สามารถนำไปใช้กับเอกสารอื่นและ จะต้องกำหนดใหม่ในเอกสารอื่นจะนำไปสู่ความซ้ำซ้อนของรหัสและไม่เอื้อต่อการบำรุงรักษาในภายหลัง
2. สไตล์อินไลน์
อินไลน์: หรือเรียกอีกอย่างว่าอินไลน์ สไตล์ CSS ถูกกำหนดไว้ในแอตทริบิวต์ style ของแท็ก วิธีการนี้ไม่ได้สะท้อนถึงข้อดีของ CSS
สไตล์อินไลน์คือการกำหนดข้อมูลสไตล์โดยตรงในแอตทริบิวต์สไตล์ของแท็ก HTML เนื่องจากสไตล์อินไลน์ถูกกำหนดไว้ภายในแท็ก จึงใช้ได้เฉพาะกับแท็กที่มันตั้งอยู่เท่านั้น
<!DOCTYPEhtml><html><head><title>อินไลน์</title></head><body><h1style=color:maroon;margin-left:40px>อินไลน์</h1></body ></html >แม้ว่าสไตล์อินไลน์สามารถกำหนดสไตล์ CSS ให้กับแท็ก HTML ได้อย่างง่ายดาย แต่ข้อบกพร่องของมันก็เห็นได้ชัดเจนมาก และไม่แนะนำให้ใช้มากเกินไป
(1) การกำหนดสไตล์อินไลน์จำเป็นต้องกำหนดแอตทริบิวต์ style ในแต่ละแท็ก HTML ซึ่งไม่สะดวกมาก
(2) ควรระมัดระวังเป็นพิเศษเมื่อใช้เครื่องหมายคำพูดคู่หรือเครื่องหมายคำพูดเดี่ยวในรูปแบบอินไลน์ เนื่องจากแอตทริบิวต์ของแท็ก HTML มักจะใช้เครื่องหมายคำพูดคู่เพื่อล้อมค่าแอตทริบิวต์ เช่น <input type=text>;
(3) สไตล์ที่กำหนดในรูปแบบอินไลน์ไม่สามารถใช้ซ้ำที่อื่นได้
(4) รูปแบบอินไลน์ไม่สะดวกอย่างมากในการบำรุงรักษาในภายหลัง เนื่องจากเว็บไซต์มักประกอบด้วยหลายหน้า และเมื่อแก้ไขรูปแบบหน้า จำเป็นต้องแก้ไขหน้าทีละหน้า
(5) การเพิ่มสไตล์อินไลน์มากเกินไปจะทำให้ขนาดของเอกสาร HTML เพิ่มขึ้น
3. สไตล์ชีตภายนอก
ประเภทลิงก์: เช่นเดียวกับประเภทการนำเข้าที่สี่ ทั้งสองประเภทเรียกว่าประเภทภายนอกหรือประเภทลิงก์ภายนอก ใช้ลิงก์เพื่ออ้างอิงไฟล์ CSS ภายนอก
สไตล์ชีตภายนอกเป็นวิธีที่ใช้กันทั่วไปในการอ้างอิง CSS คุณเพียงแค่ต้องกำหนดสไตล์ CSS ในไฟล์รูปแบบ .css จากนั้นใช้แท็ก HTML <link> เพื่อใช้ไฟล์สไตล์รูปแบบ .css กับ HTML เอกสาร
<!DOCTYPEhtml><html><head><title></title><linkrel=stylesheethref=./style.css></head><body><h1>สไตล์ชีตภายนอก</h1></body>< / html>
เนื่องจากสไตล์ CSS ถูกกำหนดไว้ในไฟล์รูปแบบ .css แยกต่างหาก จึงสามารถอ้างอิงระหว่างหลายหน้าได้ หากคุณต้องการแก้ไขสไตล์ของหน้าเว็บ คุณเพียงแค่ต้องแก้ไขไฟล์สไตล์ CSS นี้เท่านั้น ซึ่งสะดวกมาก
4. นำเข้าสไตล์ชีต
นำเข้าแล้ว: ใช้ @import เพื่ออ้างอิงไฟล์ CSS ภายนอก
คุณยังสามารถใช้ @import เพื่ออ้างอิงสไตล์ชีตภายนอกได้ ซึ่งคล้ายกับการใช้แท็ก <link> สร้าง style.css ทั่วไปก่อน และนำเข้าสไตล์ทั้งหมดไปที่ style.css ก่อน
HTML:
<!DOCTYPEhtml><html><head><title></title><linkrel=stylesheethref=style.css></head><body><h1>สไตล์ชีตภายนอก</h1></body></html >
สไตล์.css:
@import1.css;@import2.css;@import3.css;@import4.css;
1.css: (css จาก 1 ถึง 4 เหมือนกัน แต่เพิ่มสไตล์ทั้งหมด)
.top1{list-style-type:none;margin:0;padding:0;}