ในบทช่วยสอนนี้สำหรับ การสร้าง HTMLและไฟล์ CSS เราจะใช้โปรแกรมแก้ไข Notepad++ ซึ่งมีไว้สำหรับผู้ใช้ ไมโครซอฟต์ วินโดวส์ และตัวอย่างทั้งหมดจะถูกดำเนินการในนั้น
หากคุณมี Mac คุณสามารถเรียกใช้ตัวอย่างในตัวแก้ไขวงเล็บได้เช่นเดียวกัน กระดาษจดบันทึก++ฟรีอย่างแน่นอน ส่วนบรรณาธิการนั้น วงเล็บแล้วยังเหมาะกับผู้ใช้อีกด้วย ไมโครซอฟต์ วินโดวส์คุณสามารถเลือกสิ่งที่ใกล้ตัวคุณได้ในภายหลัง
การสร้างสไตล์ชีทภายใน
ลองดูตัวอย่างที่คุณจะสร้างสไตล์ชีตภายในแผ่นแรกของคุณ
ขั้นตอนที่ 1: เปิดตัวแก้ไขข้อความ
กดปุ่ม WIN + R พร้อมกัน (คล้ายกับ Start - Run) และกล่องโต้ตอบจะเปิดขึ้น "วิ่ง"เข้าแล้วกด Enter (โปรแกรมจะเปิดขึ้น ) หรือรันโปรแกรม ผ่านทางลัดของเธอ
หน้าต่างโปรแกรมหลักจะเปิดต่อหน้าคุณ:
ขั้นตอนที่ 2: สร้างโครงสร้างเอกสาร
คัดลอกหรือวางลงในโปรแกรมแก้ไข HTML ถัดไปรหัส:
ฉันจะให้ตัวอย่างโค้ดของบทช่วยสอนนี้ ความคิดเห็นเพิ่มเติมเน้นด้วยสีเขียวอ่อน HTML ใช้แท็กพิเศษเพื่อสร้างความคิดเห็นในโค้ดของคุณข้อความภายในองค์ประกอบดังกล่าวจะไม่แสดงโดยเบราว์เซอร์ ในโค้ด CSS หากต้องการเพิ่มความคิดเห็น คุณต้องวางข้อความความคิดเห็นไว้ในโครงสร้างต่อไปนี้: /* ข้อความแสดงความคิดเห็น */- คุณสามารถแสดงความคิดเห็นในโค้ด CSS ได้ทั้งในรูปแบบในตัวและภายนอก (in แยกไฟล์).
ขั้นตอนที่ 3: เพิ่มสไตล์อินไลน์
ขั้นตอนต่อไปคือการเพิ่มสไตล์ในตัวให้กับเพจของคุณ: สำหรับส่วนหัวระดับแรก สีข้อความจะเป็นสีแดง (สี: สีแดง) และสำหรับย่อหน้าจะเป็นสีน้ำเงิน (สี: สีน้ำเงิน) นอกจากนี้ สำหรับส่วนหัวระดับแรก เราจะจัดข้อความให้อยู่ตรงกลาง (text-align: center) ตรวจดูทีละอย่าง. คุณสมบัติซีเอสเอสและความหมายของมันถูกคั่นด้วยเครื่องหมายทวิภาค โดยมีเครื่องหมายอัฒภาคอยู่ท้ายคำประกาศแต่ละครั้ง
เป็นเรื่องดีที่ฉันมีส่วนร่วมในการพัฒนาตนเอง
ฉันสามารถเรียนรู้ CSS ได้ภายในหนึ่งเดือนหรือน้อยกว่านั้น
ขั้นตอนที่ 4: ดูหน้า HTML ในเบราว์เซอร์
เปิดตัวอย่างในเบราว์เซอร์และตรวจสอบให้แน่ใจว่าผลลัพธ์ของตัวอย่างของเราตรงกับรูปภาพ:
การเชื่อมต่อสไตล์ชีตภายนอก
ตอนนี้เราจะสร้างไฟล์แยกต่างหากที่จะมีสไตล์ชีตและเชื่อมต่อกับเอกสาร HTML ของเรา
- ใน โปรแกรมโน๊ตแพด++ สร้างอันใหม่ ไฟล์เปล่าและบันทึกไว้ในชื่อ page.css (เมื่อบันทึกไฟล์จะต้องเลือก สไตล์ชีตแบบเรียงซ้อน *.css) ในโฟลเดอร์เดียวกับที่คุณสร้างเอกสาร HTML
- ย้ายโค้ด CSS จากตัวอย่างก่อนหน้า (เนื้อหาของแท็ก
ส่วนหัวระดับแรก
ส่วนหัวระดับที่สอง สีน้ำเงิน
ส่วนหัวระดับที่สาม