สร้างสไตล์ชีต CSS
เช่นเดียวกับที่เราสร้างไฟล์ข้อความแยกไว้สำหรับ HTML คุณจะสร้างไฟล์ข้อความสำหรับ CSS หากคุณต้องการภาพสำหรับกระบวนการนี้โปรดดูบทแนะนำแรก นี่คือขั้นตอนในการสร้างสไตล์ชีต CSS ใน Notepad:
- เลือกไฟล์> ใหม่ใน Notepad เพื่อเปิดหน้าต่างที่ว่างเปล่า
- บันทึกไฟล์เป็น CSS โดยคลิกไฟล์ <บันทึกเป็น …
- ไปที่โฟลเดอร์ my_website ในฮาร์ดไดรฟ์ของคุณ
- เปลี่ยน "บันทึกเป็นประเภท:" เป็น "ไฟล์ทั้งหมด"
- ตั้งชื่อไฟล์ "styles.css" (เว้นปิดเครื่องหมายคำพูด) แล้วคลิกบันทึก
เชื่อมโยงสไตล์ชีต CSS กับ HTML ของคุณ
เมื่อคุณมีสไตล์ชีตสำหรับเว็บไซต์ของคุณแล้วคุณจะต้องเชื่อมโยงกับเว็บเพจนั้นด้วย เมื่อต้องการทำเช่นนี้คุณใช้แท็กลิงก์ วางแท็กลิงก์ต่อไปนี้ไว้ที่ใดก็ได้ภายใน
แท็กของเอกสาร Pets.htm ของคุณ:
03 จาก 10 เมื่อคุณเขียน XHTML สำหรับเบราว์เซอร์ที่แตกต่างกันสิ่งหนึ่งที่คุณจะได้เรียนรู้ก็คือพวกเขาทั้งหมดดูเหมือนจะมีอัตรากำไรที่แตกต่างกันและกฎสำหรับวิธีที่พวกเขาแสดงสิ่งต่างๆ วิธีที่ดีที่สุดเพื่อให้แน่ใจว่าไซต์ของคุณมีลักษณะเหมือนกันในเบราว์เซอร์ส่วนใหญ่คือการไม่อนุญาตให้มีการกำหนดค่าเริ่มต้นตามทางเลือกเบราเซอร์ ฉันชอบที่จะเริ่มต้นหน้าเว็บของฉันที่มุมซ้ายบนโดยไม่มีช่องว่างพิเศษหรือขอบโดยรอบข้อความ แม้ว่าฉันจะวางเนื้อหาไว้ฉันจะกำหนดระยะขอบเป็นศูนย์เพื่อให้ฉันเริ่มต้นด้วยกระดานชนวนที่ว่างเปล่าเหมือนกัน โดยทำดังนี้เพิ่มข้อมูลต่อไปนี้ลงในเอกสาร styles.css ของคุณ: แบบอักษรมักเป็นสิ่งแรกที่คุณต้องการเปลี่ยนบนเว็บเพจ แบบอักษรเริ่มต้นบนเว็บเพจสามารถน่าเกลียดและเป็นจริงขึ้นเว็บเบราเซอร์ตัวเองดังนั้นถ้าคุณไม่ได้กำหนดแบบอักษรคุณจะไม่ทราบว่าหน้าของคุณจะมีลักษณะอย่างไร โดยปกติคุณจะเปลี่ยนแบบอักษรในย่อหน้าหรือบางครั้งในเอกสารทั้งหมด สำหรับไซต์นี้เราจะกำหนดแบบอักษรที่ส่วนหัวและระดับย่อหน้า เพิ่มข้อมูลต่อไปนี้ลงในเอกสาร styles.css ของคุณ: ฉันเริ่มต้นด้วย 1em เป็นขนาดฐานสำหรับย่อหน้าและรายการแล้วใช้ที่กำหนดขนาดสำหรับพาดหัวข่าวของฉัน ฉันไม่คาดหวังที่จะใช้บรรทัดแรกลึกกว่า h4 แต่ถ้าคุณวางแผนที่คุณจะต้องการสไตล์มันเช่นกัน สีเริ่มต้นสำหรับลิงก์เป็นสีฟ้าและสีม่วงสำหรับลิงก์ที่ไม่ได้เข้าชมและเข้าชมตามลำดับ แม้ว่าจะเป็นมาตรฐาน แต่ก็อาจไม่เหมาะกับรูปแบบสีของหน้าเว็บของคุณดังนั้นเรามาดูกันเลยดีกว่า ในไฟล์ styles.css ของคุณให้เพิ่มข้อมูลต่อไปนี้: ฉันตั้งค่ารูปแบบลิงก์สามลิงก์: a: เป็นค่าเริ่มต้น a: visited สำหรับเมื่อมีการเข้าชมฉันเปลี่ยนสีและ a: hover กับ: เลื่อนฉันมีลิงค์ได้รับสีพื้นหลังและไปหนาเพื่อเน้นเป็นลิงค์ที่จะคลิก เนื่องจากเราได้นำส่วนการนำทาง (id = "nav") มาใช้เป็นครั้งแรกใน HTML ลองมาทำเป็นสไตล์ก่อน เราจำเป็นต้องระบุว่ามันควรจะกว้างและวางขอบกว้างขึ้นทางด้านขวาเพื่อให้ข้อความหลักจะไม่ชนกับมัน ฉันยังใส่เส้นขอบรอบ ๆ เพิ่ม CSS ต่อไปนี้ในเอกสาร styles.css ของคุณ: คุณสมบัติแบบรายการจะตั้งค่ารายการภายในส่วนการนำทางเพื่อให้ไม่มีสัญลักษณ์หรือตัวเลขและรูปแบบ. footer จะทำให้ส่วนของลิขสิทธิ์มีขนาดเล็กและกึ่งกลางภายในส่วน โดยตำแหน่งส่วนหลักของคุณกับตำแหน่งแน่นอนคุณสามารถมั่นใจได้ว่ามันจะอยู่ตรงที่คุณต้องการให้อยู่บนเว็บเพจของคุณ ฉันทำฉัน 800px กว้างเพื่อรองรับจอภาพขนาดใหญ่ แต่ถ้าคุณมีจอภาพขนาดเล็กคุณอาจต้องการทำให้แคบลง วางข้อมูลต่อไปนี้ในเอกสาร styles.css ของคุณ: ตั้งแต่ฉันได้ตั้งค่าวรรคข้างต้นแล้วฉันต้องการให้แต่ละย่อหน้า "เตะ" เล็กน้อยเพื่อให้โดดเด่นยิ่งขึ้น ฉันทำได้โดยวางเส้นขอบด้านบนที่เน้นย่อหน้ามากกว่าภาพเพียงอย่างเดียว วางข้อมูลต่อไปนี้ในเอกสาร styles.css ของคุณ: ฉันตัดสินใจที่จะทำในชั้นเรียนที่เรียกว่า "topline" แทนการกำหนดย่อหน้าทั้งหมดในแบบนั้น ด้วยวิธีนี้ถ้าฉันตัดสินใจว่าต้องการให้มีย่อหน้าโดยไม่มีเส้นสีเหลืองด้านบนฉันสามารถปล่อยให้ชั้น = "topline" ในแท็กวรรคและไม่มีขอบด้านบน รูปภาพมักมีเส้นขอบล้อมรอบภาพเหล่านี้จะไม่สามารถมองเห็นได้เว้นแต่ภาพจะเป็นลิงก์ แต่ฉันต้องการมีชั้นภายในสไตล์ชีต CSS ของฉันซึ่งจะปิดเส้นขอบโดยอัตโนมัติสำหรับสไตล์ชีตนี้ฉันสร้างชั้น "noborder" และภาพส่วนใหญ่ในเอกสารเป็นส่วนหนึ่งของชั้นนี้ ส่วนพิเศษอื่น ๆ ของภาพเหล่านี้คือตำแหน่งของพวกเขาบนหน้าเว็บ ฉันต้องการให้พวกเขาเป็นส่วนหนึ่งของย่อหน้าที่พวกเขาอยู่โดยไม่ใช้ตารางเพื่อจัดตำแหน่งให้สอดคล้องกัน วิธีที่ง่ายที่สุดในการทำเช่นนี้คือการใช้คุณสมบัติ CSS แบบ float วางข้อมูลต่อไปนี้ในเอกสาร styles.css ของคุณ: คุณสามารถดูได้นอกจากนี้ยังมีคุณสมบัติขอบที่กำหนดไว้ในภาพเพื่อให้แน่ใจว่าไม่ได้ปะทะกับข้อความที่ลอยอยู่ข้างๆในย่อหน้า เมื่อคุณบันทึก CSS แล้วคุณสามารถโหลดหน้า pets.htm ใหม่ในเว็บเบราเซอร์ของคุณได้ หน้าเว็บของคุณควรมีลักษณะคล้ายกับภาพที่แสดงในรูปภาพโดยมีการจัดแนวรูปภาพและการนำทางถูกต้องที่ด้านซ้ายของหน้า ทำตามขั้นตอนต่อไปนี้สำหรับหน้าภายในทั้งหมดของเว็บไซต์นี้ คุณต้องการมีหนึ่งหน้าสำหรับทุกๆหน้าในการนำทางของคุณ แก้ไขส่วนต่างของหน้า
การเปลี่ยนแบบอักษรบนหน้า
ทำให้ลิงก์ของคุณน่าสนใจยิ่งขึ้น
จัดรูปแบบส่วนการนำทาง
การวางตำแหน่งส่วนหลัก
จัดรูปแบบย่อหน้าของคุณ
จัดรูปแบบรูปภาพ
ตอนนี้ดูที่หน้าเสร็จสมบูรณ์ของคุณ
