เนื้อหา

• ขั้นตอน
• วิธีที่ 1 จาก 2: วิธีตั้งค่าสไตล์ชีตภายนอก
• วิธีที่ 2 จาก 2: วิธีแทรกสไตล์ชีตภายใน
• เคล็ดลับ
• คำเตือน

Hypertext Markup Language (HTML) กำหนดองค์ประกอบที่มีอยู่ในหน้าเว็บ ภาษาการเขียนโปรแกรม Cascading Style Sheets (CSS) อธิบายว่าองค์ประกอบเหล่านี้ควรมีลักษณะอย่างไรไฟล์ CSS สามารถเพิ่มลงใน HTML เป็นไฟล์ภายนอกได้ (เพิ่ม CSS เป็นไฟล์แยกต่างหาก) หรือสไตล์ชีตภายใน (CSS รวมอยู่ในไฟล์ HTML) เรียนรู้วิธีฝัง CSS ในไฟล์ HTML เพื่อออกแบบเว็บไซต์ของคุณใหม่

ขั้นตอน

วิธีที่ 1 จาก 2: วิธีตั้งค่าสไตล์ชีตภายนอก

1. 1 สร้างไฟล์ CSS จัดเตรียมและบันทึกไฟล์ CSS ที่มีนามสกุล ".css"
2. 2 อัปโหลดไฟล์ CSS ไปยังเว็บไซต์ของคุณ
3. 3 คัดลอกที่อยู่ (URL) ของไฟล์ CSS ที่อยู่ไซต์จะมีลักษณะดังนี้: www.yoursite.com/stylesheet.css.
   • เป็นการดีที่จะลบชื่อโดเมนหลักออกจาก URL จากสิ่งนี้ ที่อยู่ http: //myisite.com/css/default.css จะถูกย่อเป็น "/css/default.css" อย่าลืมใส่เครื่องหมายทับ ("/") นำหน้าด้วย เรียกว่าเส้นทางสัมพัทธ์
4. 4 ใส่ลิงค์ในไฟล์. ค้นหาแท็ก / head> ในไฟล์ HTML ของคุณและสร้างบรรทัดว่างด้านบน วางในบรรทัดนั้น LINK rel = stylesheet type = "text / css" href = "www.your_site.com / stylesheet.css"> แทนที่ "www.your ..." ด้วยลิงก์ในไฟล์ CSS
5. 5 บันทึกไฟล์ HTML และอัปโหลดไปยังไซต์
6. 6 ตรวจสอบให้แน่ใจว่าทุกอย่างในไซต์มีลักษณะตามที่ควรจะเป็น มิฉะนั้น ให้เปิดไฟล์ HTML อีกครั้ง ค้นหาข้อผิดพลาด และทำการเปลี่ยนแปลง

วิธีที่ 2 จาก 2: วิธีแทรกสไตล์ชีตภายใน

1. 1 สร้างสไตล์ป้ายกำกับ>. เปิดไฟล์ HTML และค้นหาแท็ก / head> เพิ่มบรรทัดว่างด้านบนและป้อนข้อมูลต่อไปนี้:

ประเภทสไตล์ = "ข้อความ / css"> / สไตล์>

1. 1 วาง CSS ทั้งหมดของคุณไว้ระหว่างป้ายกำกับทั้งสองนี้
2. 2 บันทึกไฟล์ HTML (ที่มีนามสกุล .html)
3. 3 ตรวจสอบให้แน่ใจว่าทุกอย่างในไซต์มีลักษณะตามที่ควรจะเป็น มิฉะนั้น ทำการเปลี่ยนแปลงตามต้องการ

เคล็ดลับ

• ตรวจสอบลักษณะที่ปรากฏของไซต์ในเบราว์เซอร์ต่างๆ และในระบบปฏิบัติการต่างๆ เสมอ เบราว์เซอร์บางตัวเชื่อมต่อกับ CSS ด้วยวิธีที่ต่างกันเล็กน้อย อาจเกิดขึ้นได้ในเบราว์เซอร์เดียวกัน แต่ใน Mac และ Windows เวอร์ชันต่างๆ หากไซต์ของคุณดูแตกต่างออกไปในเบราว์เซอร์อื่น (เช่น ระยะห่างระหว่างวัตถุบางอย่าง เช่น รายการ มีขนาดต่างกัน) ปัญหาก็คือการตั้งค่าของเบราว์เซอร์นั้น ค้นหาสไตล์ชีตหลักแล้ววางที่ด้านบนของไฟล์ CSS เพื่อเปลี่ยนการตั้งค่าเบราว์เซอร์เริ่มต้น สิ่งนี้ทำเพื่อให้การตั้งค่าของคุณไม่เปลี่ยนแปลงอะไรในเบราว์เซอร์เอง
• แทรกสไตล์ชีตภายนอกหากทำได้ ซึ่งจะทำให้คุณสามารถเปลี่ยนรูปลักษณ์ของไซต์ได้โดยการแก้ไขโค้ดในไฟล์ต้นฉบับ วิธีนี้ทำให้คุณไม่จำเป็นต้องเปลี่ยน CSS ในทุกหน้าของเว็บไซต์
• หากเว็บไซต์ของคุณไม่ตอบสนองต่อ CSS ตามที่คุณคาดหวัง ให้ตรวจสอบการเข้ารหัสทั้งหมดอีกครั้งเพื่อให้แน่ใจว่าสะกดถูกต้อง โดยเฉพาะอย่างยิ่ง ให้ความสนใจเป็นพิเศษกับเครื่องหมายอัฒภาค (";") และวงเล็บปิด ("}") ค่อนข้างง่ายที่จะละเว้นอักขระเหล่านี้ในไฟล์ CSS
• บันทึกไฟล์ HTML ลงในคอมพิวเตอร์ของคุณ เพื่อให้คุณสามารถเปิดในภายหลังในเว็บเบราว์เซอร์ต่างๆ และตรวจสอบลักษณะที่ปรากฏอีกครั้งก่อนที่จะดาวน์โหลดเพิ่มเติม แต่ในการโหลด ไฟล์ CSS จะต้องถูกแทรกลงใน HTML เป็นสไตล์ชีตภายนอก
• หากสไตล์ชีตขัดแย้งกับตัวมันเอง - ตัวอย่างเช่น มันบอกก่อนว่าข้อความจะเป็นสีน้ำเงิน แล้วหลังจากนั้นจะเป็นสีแดง - จะเป็นไปตามเงื่อนไขสุดท้ายเสมอ หากคำสั่งหนึ่งเป็นสไตล์ชีตภายนอก และอีกคำสั่งหนึ่งเป็นสไตล์ชีตภายใน สไตล์ชีตภายในจะเปิดใช้งาน

คำเตือน

• อย่าใช้ CSS การแสดงละคร "เปิด" นั่นคือ CSS ที่รวมอยู่ในแท็ก HTML (ตัวอย่าง: "align = 'center'" คือการตั้งค่า CSS แบบเปิด) นี่เป็นตัวเลือกที่ล้าสมัยและมีไวยากรณ์ที่ไม่ดี หากหลังจากผ่านไประยะหนึ่ง คุณต้องอัปเดตไซต์ การตั้งค่านี้จะเปลี่ยนแปลงได้ยาก