צור גיליון סגנונות CSS
באותו אופן יצרנו קובץ טקסט נפרד עבור HTML, תיצור קובץ טקסט עבור CSS. אם אתה צריך חזותיים עבור תהליך זה, עיין במדריך הראשון. להלן השלבים ליצירת גיליון סגנונות CSS ב- Notepad:
- בחרו 'קובץ'> 'חדש' ב- Notepad כדי לקבל חלון ריק
- שמור את הקובץ כ- CSS על ידי לחיצה על קובץ <שמירה בשם …
- נווט לתיקייה my_website בכונן הקשיח
- לשנות את "שמור כסוג:" ל "כל הקבצים"
- תן שם לקובץ שלך "styles.css" (השאר את המרכאות) ולחץ על שמור
קשר את גיליון ה- CSS ל- HTML
לאחר שקיבלת גיליון סגנונות עבור אתר האינטרנט שלך, יהיה עליך לשייך אותו לדף האינטרנט עצמו. לשם כך אתה משתמש בתג הקישור. מניחים את תג הקישור הבא בכל מקום בתוך
תגיות של המסמך שלך pet.htm:
03 מתוך 10 כאשר אתה כותב XHTML עבור דפדפנים שונים, דבר אחד תלמד היא שלכולם נראה שיש שוליים שונים וכללים איך הם מציגים דברים. הדרך הטובה ביותר לוודא שהאתר שלך נראה אותו הדבר ברוב הדפדפנים, היא לא לאפשר דברים כמו ברירת המחדל לשוליים לבחירת הדפדפן. אני מעדיף להתחיל את הדפים שלי בפינה השמאלית העליונה, ללא תוספת ריפוד או שולי סביב הטקסט. גם אם אני הולך לרפד את התוכן, אני מגדיר את השוליים לאפס כך שאני מתחיל עם אותו לוח ריק. לשם כך, הוסף את הפרטים הבאים למסמך styles.css שלך: הגופן הוא לעתים קרובות הדבר הראשון שתרצה לשנות בדף אינטרנט. גופן ברירת המחדל על דף אינטרנט יכול להיות מכוער, והוא למעשה את דפדפן האינטרנט עצמו, אז אם אתה לא מגדיר את הגופן, אתה באמת לא יודע איך הדף שלך ייראה. בדרך כלל, היית משנה את הגופן על פסקאות, או לפעמים על המסמך כולו. עבור אתר זה נגדיר את הגופן בכותרת וברמת הפיסקה. הוסף את המסמכים הבאים למסמך styles.css שלך: התחלתי עם 1em כגודל הבסיס שלי עבור פסקאות ופריטי רשימה, ולאחר מכן השתמשו בו כדי להגדיר את הגודל של הכותרות שלי. אני לא מצפה להשתמש כותרת עמוקה יותר מאשר h4, אבל אם אתה מתכנן אתה רוצה סגנון זה גם כן. צבעי ברירת המחדל עבור קישורים הם כחול סגול עבור קישורים ביקר לא ביקר בהתאמה. אמנם זהו תקן, אך ייתכן שהוא אינו מתאים לצבע הצבעים של הדפים שלך, לכן נשנה אותו. בקובץ styles.css, הוסף את הפרטים הבאים: אני להגדיר שלושה סגנונות הקישור, את: קישור כמו ברירת המחדל, א: ביקרתי כאשר הוא ביקר, אני משנה את הצבע, ו: רחף. עם: לרחף יש לי את הקישור לקבל צבע רקע וללכת מודגש כדי להדגיש את זה קישור ללחוץ. מכיוון שאנו מציבים את קטע הניווט (id = "nav") תחילה ב- HTML, בואו נסו אותו תחילה. אנחנו צריכים לציין כמה רחב זה צריך להיות ולשים מרווח רחב יותר בצד ימין, כך שהטקסט הראשי לא יתנגש נגדו. אני גם שם גבול מסביב. הוסף את ה- CSS הבא למסמך styles.css שלך: המאפיין בסגנון רשימה מגדיר את הרשימה בתוך קטע הניווט ללא קליעים או מספרים, והקובץ .footer מדגיש את סעיף זכויות היוצרים כך שיהיה קטן יותר ומרוכז בתוך הקטע. על ידי מיקום הקטע הראשי שלך עם מיקום מוחלט אתה יכול להיות בטוח שזה יישאר בדיוק איפה אתה רוצה שזה יישאר בדף האינטרנט שלך. עשיתי 800px שלי רחב כדי להתאים את צגים גדולים יותר, אבל אם יש לך צג קטן יותר, ייתכן שתרצה לעשות את זה צר יותר. הצב את המסמך הבא במסמך styles.css שלך: מאז אני כבר להגדיר את הגופן פסקה לעיל, רציתי לתת כל פיסקה קצת תוספת "בעיטה" כדי להפוך אותו להתבלט יותר. עשיתי את זה על ידי הצבת הגבול על הדף כי הדגיש את הפסקה יותר מאשר רק את התמונה לבד. הצב את המסמך הבא במסמך styles.css שלך: החלטתי לעשות את זה כמעמד שנקרא "topline" ולא רק להגדיר את כל הפסקאות בצורה זו. בדרך זו, אם אני מחליט שאני רוצה להיות פסקה ללא שורה צהוב העליון, אני יכול פשוט לעזוב את הכיתה = "topline" בתג פסקה וזה לא יהיה הגבול העליון. תמונות בדרך כלל יש גבול סביבן, זה לא תמיד גלוי אלא אם התמונה היא קישור, אבל אני אוהב להיות בכיתה בתוך גיליון סגנונות CSS שלי מכבה את הגבול באופן אוטומטי.עבור גיליון סגנונות זה, יצרתי את הכיתה "noorder", ורוב התמונות במסמך הן חלק ממחלקה זו. החלק המיוחד האחר של תמונות אלה הוא המיקום שלהם בדף. רציתי שהם יהיו חלק מהפיסקה שהם היו בלי להשתמש בטבלאות כדי ליישר אותם. הדרך הפשוטה ביותר לעשות זאת היא להשתמש במאפיין CSS הצף. הצב את המסמך הבא במסמך styles.css שלך: כפי שאתה יכול לראות, יש גם תכונות השוליים להגדיר על התמונות, כדי לוודא שהם לא מרוסק נגד טקסט צף כי הוא לידם בפסקאות. לאחר שמירת CSS אתה יכול לטעון מחדש את דף Pets.htm בדפדפן האינטרנט שלך. הדף שלך צריך להיראות דומה לזה המוצג בתמונה זו, כאשר התמונות מיושרות והניווט ממוקם נכון בצד שמאל של הדף. בצע את אותם השלבים עבור כל הדפים הפנימיים שלך עבור אתר זה. אתה רוצה שיהיה דף אחד עבור כל דף בניווט שלך. תקן את שולי הדף
שינוי הגופן בדף
ביצוע הקישורים שלך יותר מעניין
עיצוב סרגל הניווט
מיצוב הסעיף הראשי
עיצוב הסעיפים שלך
עיצוב התמונות
עכשיו תסתכל על הדף שלך הושלם
