จัดรูปแบบ Notepad สร้างเว็บเพจด้วย CSS

01 จาก 10

สร้างสไตล์ชีต CSS

เช่นเดียวกับที่เราสร้างไฟล์ข้อความแยกไว้สำหรับ HTML คุณจะสร้างไฟล์ข้อความสำหรับ CSS หากคุณต้องการภาพสำหรับกระบวนการนี้โปรดดูบทแนะนำแรก นี่คือขั้นตอนในการสร้างสไตล์ชีต CSS ใน Notepad:

1. เลือกไฟล์> ใหม่ใน Notepad เพื่อเปิดหน้าต่างที่ว่างเปล่า
2. บันทึกไฟล์เป็น CSS โดยคลิกไฟล์ <บันทึกเป็น ...
3. ไปที่โฟลเดอร์ my_website ในฮาร์ดไดรฟ์ของคุณ
4. เปลี่ยน "บันทึกเป็นประเภท:" เป็น "ไฟล์ทั้งหมด"
5. ตั้งชื่อไฟล์ "styles.css" (เว้นปิดเครื่องหมายคำพูด) แล้วคลิกบันทึก

02 จาก 10

เชื่อมโยงสไตล์ชีต CSS กับ HTML ของคุณ

เมื่อคุณมีสไตล์ชีตสำหรับเว็บไซต์ของคุณแล้วคุณจะต้องเชื่อมโยงกับเว็บเพจนั้นด้วย เมื่อต้องการทำเช่นนี้คุณใช้แท็กลิงก์ วางแท็กลิงก์ต่อไปนี้ไว้ที่ใดก็ได้ภายในแท็ก ของเอกสาร pets.htm:

03 จาก 10

แก้ไขส่วนต่างของหน้า

เมื่อคุณเขียน XHTML สำหรับเบราว์เซอร์ที่แตกต่างกันสิ่งหนึ่งที่คุณจะได้เรียนรู้ก็คือพวกเขาทั้งหมดดูเหมือนจะมีอัตรากำไรที่แตกต่างกันและกฎสำหรับวิธีที่พวกเขาแสดงสิ่งต่างๆ วิธีที่ดีที่สุดเพื่อให้แน่ใจว่าไซต์ของคุณมีลักษณะเหมือนกันในเบราว์เซอร์ส่วนใหญ่คือการไม่อนุญาตให้มีการกำหนดค่าเริ่มต้นตามทางเลือกเบราเซอร์

ฉันชอบที่จะเริ่มต้นหน้าเว็บของฉันที่มุมซ้ายบนโดยไม่มีช่องว่างพิเศษหรือขอบโดยรอบข้อความ แม้ว่าฉันจะวางเนื้อหาไว้ฉันจะกำหนดระยะขอบเป็นศูนย์เพื่อให้ฉันเริ่มต้นด้วยกระดานชนวนที่ว่างเปล่าเหมือนกัน โดยทำดังนี้เพิ่มข้อมูลต่อไปนี้ลงในเอกสาร styles.css ของคุณ:

html, body {
margin: 0px;
padding: 0px;
เส้นขอบ: 0px;
ซ้าย: 0px;
ด้านบน: 0px;
}

04 จาก 10

การเปลี่ยนแบบอักษรบนหน้า

แบบอักษรมักเป็นสิ่งแรกที่คุณต้องการเปลี่ยนบนเว็บเพจ แบบอักษรเริ่มต้นบนเว็บเพจสามารถน่าเกลียดและเป็นจริงขึ้นเว็บเบราเซอร์ตัวเองดังนั้นถ้าคุณไม่ได้กำหนดแบบอักษรคุณจะไม่ทราบว่าหน้าของคุณจะมีลักษณะอย่างไร

โดยปกติคุณจะเปลี่ยนแบบอักษรในย่อหน้าหรือบางครั้งในเอกสารทั้งหมด สำหรับไซต์นี้เราจะกำหนดแบบอักษรที่ส่วนหัวและระดับย่อหน้า เพิ่มข้อมูลต่อไปนี้ลงในเอกสาร styles.css ของคุณ:

p, li {
แบบอักษร: 1em Arial, Helvetica, sans-serif;
}
h1 {
แบบอักษร: 2em Arial, Helvetica, sans-serif;
}
h2 {
แบบอักษร: 1.5em Arial, Helvetica, sans-serif;
}
h3 {
แบบอักษร: 1.25em Arial, Helvetica, sans-serif;
}

ฉันเริ่มต้นด้วย 1em เป็นขนาดฐานสำหรับย่อหน้าและรายการแล้วใช้ที่กำหนดขนาดสำหรับพาดหัวข่าวของฉัน ฉันไม่คาดหวังที่จะใช้บรรทัดแรกลึกกว่า h4 แต่ถ้าคุณวางแผนที่คุณจะต้องการสไตล์มันเช่นกัน

05 จาก 10

ทำให้ลิงก์ของคุณน่าสนใจยิ่งขึ้น

สีเริ่มต้นสำหรับลิงก์เป็นสีฟ้าและสีม่วงสำหรับลิงก์ที่ไม่ได้เข้าชมและเข้าชมตามลำดับ แม้ว่าจะเป็นมาตรฐาน แต่ก็อาจไม่เหมาะกับรูปแบบสีของหน้าเว็บของคุณดังนั้นเรามาดูกันเลยดีกว่า ในไฟล์ styles.css ของคุณให้เพิ่มข้อมูลต่อไปนี้:

a: link {
ตระกูลอักษร: Arial, Helvetica, sans-serif;
สี: # FF9900;
text-decoration: ขีดเส้นใต้
}
a: visited {
สี: # FFCC66;
}
a: hover {
พื้นหลัง: #FFFFCC;
แบบอักษร: หนา;
}

ฉันตั้งค่ารูปแบบลิงก์สามลิงก์: a: เป็นค่าเริ่มต้น a: visited สำหรับเมื่อมีการเข้าชมฉันเปลี่ยนสีและ a: hover กับ: เลื่อนฉันมีลิงค์ได้รับสีพื้นหลังและไปหนาเพื่อเน้นเป็นลิงค์ที่จะคลิก

06 จาก 10

จัดรูปแบบส่วนการนำทาง

เนื่องจากเราได้นำส่วนการนำทาง (id = "nav") มาใช้เป็นครั้งแรกใน HTML ลองมาทำเป็นสไตล์ก่อน เราจำเป็นต้องระบุว่ามันควรจะกว้างและวางขอบกว้างขึ้นทางด้านขวาเพื่อให้ข้อความหลักจะไม่ชนกับมัน ฉันยังใส่เส้นขอบรอบ ๆ

เพิ่ม CSS ต่อไปนี้ในเอกสาร styles.css ของคุณ:

#nav {
ความกว้าง: 225px;
ขอบขวา: 15px;
ชายแดน: ปานกลางแข็ง # 000000;
}
#nav li {
รายการสไตล์: ไม่มี;
}
.footer {
ขนาดตัวอักษร: .75em;
ชัดเจน: ทั้งสอง;
ความกว้าง: 100%;
text-align: center;
}

คุณสมบัติแบบรายการจะตั้งค่ารายการภายในส่วนการนำทางเพื่อให้ไม่มีสัญลักษณ์หรือตัวเลขและรูปแบบ. footer จะทำให้ส่วนของลิขสิทธิ์มีขนาดเล็กและกึ่งกลางภายในส่วน

07 จาก 10

การวางตำแหน่งส่วนหลัก

โดยตำแหน่งส่วนหลักของคุณกับตำแหน่งแน่นอนคุณสามารถมั่นใจได้ว่ามันจะอยู่ตรงที่คุณต้องการให้อยู่บนเว็บเพจของคุณ ฉันทำฉัน 800px กว้างเพื่อรองรับจอภาพขนาดใหญ่ แต่ถ้าคุณมีจอภาพขนาดเล็กคุณอาจต้องการทำให้แคบลง

วางข้อมูลต่อไปนี้ในเอกสาร styles.css ของคุณ:

#main {
ความกว้าง: 800px;
ด้านบน: 0px;
ตำแหน่ง: สัมบูรณ์
ซ้าย: 250px;
}

08 จาก 10

จัดรูปแบบย่อหน้าของคุณ

ตั้งแต่ฉันได้ตั้งค่าวรรคข้างต้นแล้วฉันต้องการให้แต่ละย่อหน้า "เตะ" เล็กน้อยเพื่อให้โดดเด่นยิ่งขึ้น ฉันทำได้โดยวางเส้นขอบด้านบนที่เน้นย่อหน้ามากกว่าภาพเพียงอย่างเดียว

วางข้อมูลต่อไปนี้ในเอกสาร styles.css ของคุณ:

.topline {
border-top: หนาหนา # FFCC00;
}

ฉันตัดสินใจที่จะทำในชั้นเรียนที่เรียกว่า "topline" แทนการกำหนดย่อหน้าทั้งหมดในแบบนั้น ด้วยวิธีนี้ถ้าฉันตัดสินใจว่าต้องการให้มีย่อหน้าโดยไม่มีเส้นสีเหลืองด้านบนฉันสามารถปล่อยให้ชั้น = "topline" ในแท็กวรรคและไม่มีขอบด้านบน

09 จาก 10

จัดรูปแบบรูปภาพ

รูปภาพมักมีเส้นขอบล้อมรอบภาพเหล่านี้จะไม่สามารถมองเห็นได้เว้นแต่ภาพจะเป็นลิงก์ แต่ฉันต้องการมีชั้นภายในสไตล์ชีต CSS ของฉันซึ่งจะปิดเส้นขอบโดยอัตโนมัติ สำหรับสไตล์ชีตนี้ฉันสร้างชั้น "noborder" และภาพส่วนใหญ่ในเอกสารเป็นส่วนหนึ่งของชั้นนี้

ส่วนพิเศษอื่น ๆ ของภาพเหล่านี้คือตำแหน่งของพวกเขาบนหน้าเว็บ ฉันต้องการให้พวกเขาเป็นส่วนหนึ่งของย่อหน้าที่พวกเขาอยู่โดยไม่ใช้ตารางเพื่อจัดตำแหน่งให้สอดคล้องกัน วิธีที่ง่ายที่สุดในการทำเช่นนี้คือการใช้คุณสมบัติ CSS แบบ float

วางข้อมูลต่อไปนี้ในเอกสาร styles.css ของคุณ:

#main img {
ลอย: ซ้าย;
ขอบขวา: 5px;
margin-bottom: 15px;
}
.noborder {
ชายแดน: 0px ไม่มี;
}

คุณสามารถดูได้นอกจากนี้ยังมีคุณสมบัติขอบที่กำหนดไว้ในภาพเพื่อให้แน่ใจว่าไม่ได้ปะทะกับข้อความที่ลอยอยู่ข้างๆในย่อหน้า

10 จาก 10

ตอนนี้ดูที่หน้าเสร็จสมบูรณ์ของคุณ

เมื่อคุณบันทึก CSS แล้วคุณสามารถโหลดหน้า pets.htm ใหม่ในเว็บเบราเซอร์ของคุณได้ หน้าเว็บของคุณควรมีลักษณะคล้ายกับภาพที่แสดงในรูปภาพโดยมีการจัดแนวรูปภาพและการนำทางถูกต้องที่ด้านซ้ายของหน้า

ทำตามขั้นตอนต่อไปนี้สำหรับหน้าภายในทั้งหมดของเว็บไซต์นี้ คุณต้องการมีหนึ่งหน้าสำหรับทุกๆหน้าในการนำทางของคุณ