סטיילינג פנקס יצירת דף אינטרנט עם 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 {
שוליים: 0px;
ריפוד: 0px;
border: 0px;
משמאל: 0px;
top: 0px;
}

04 מתוך 10

שינוי הגופן בדף

הגופן הוא לעתים קרובות הדבר הראשון שתרצה לשנות בדף אינטרנט. גופן ברירת המחדל על דף אינטרנט יכול להיות מכוער, והוא למעשה את דפדפן האינטרנט עצמו, אז אם אתה לא מגדיר את הגופן, אתה באמת לא יודע איך הדף שלך ייראה.

בדרך כלל, היית משנה את הגופן על פסקאות, או לפעמים על המסמך כולו. עבור אתר זה נגדיר את הגופן בכותרת וברמת הפיסקה. הוסף את המסמכים הבאים למסמך styles.css שלך:

p, li {
font: 1em Arial, Helvetica, sans-serif;
}
h1 {
font: 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, הוסף את הפרטים הבאים:

קישור {
משפחת גופן: אריאל, הלויטיקה, סאנס-סריף;
צבע: # FF9900;
טקסט-קישוט: קו תחתון;
}
a: ביקרו {
צבע: # FFCC66;
}
a: ריחוף {
רקע: #FFFFCC;
מודגש;
}

אני להגדיר שלושה סגנונות הקישור, את: קישור כמו ברירת המחדל, א: ביקרתי כאשר הוא ביקר, אני משנה את הצבע, ו: רחף. עם: לרחף יש לי את הקישור לקבל צבע רקע וללכת מודגש כדי להדגיש את זה קישור ללחוץ.

06 מתוך 10

עיצוב סרגל הניווט

מכיוון שאנו מציבים את קטע הניווט (id = "nav") תחילה ב- HTML, בואו נסו אותו תחילה. אנחנו צריכים לציין כמה רחב זה צריך להיות ולשים מרווח רחב יותר בצד ימין, כך שהטקסט הראשי לא יתנגש נגדו. אני גם שם גבול מסביב.

הוסף את ה- CSS הבא למסמך styles.css שלך:

#nav {
רוחב: 225px;
margin-right: 15px;
border: medium solid # 000000;
}
#nav li {
style-style: none;
}
.footer {
font-size: .75em;
תנקה את שניהם;
רוחב: 100%;
text-align: center;
}

המאפיין בסגנון רשימה מגדיר את הרשימה בתוך קטע הניווט ללא קליעים או מספרים, והקובץ .footer מדגיש את סעיף זכויות היוצרים כך שיהיה קטן יותר ומרוכז בתוך הקטע.

07 מתוך 10

מיצוב הסעיף הראשי

על ידי מיקום הקטע הראשי שלך עם מיקום מוחלט אתה יכול להיות בטוח שזה יישאר בדיוק איפה אתה רוצה שזה יישאר בדף האינטרנט שלך. עשיתי 800px שלי רחב כדי להתאים את צגים גדולים יותר, אבל אם יש לך צג קטן יותר, ייתכן שתרצה לעשות את זה צר יותר.

הצב את המסמך הבא במסמך styles.css שלך:

#main {
רוחב: 800px;
top: 0px;
תפקיד מוחלט
משמאל: 250px;
}

08 מתוך 10

עיצוב הסעיפים שלך

מאז אני כבר להגדיר את הגופן פסקה לעיל, רציתי לתת כל פיסקה קצת תוספת "בעיטה" כדי להפוך אותו להתבלט יותר. עשיתי את זה על ידי הצבת הגבול על הדף כי הדגיש את הפסקה יותר מאשר רק את התמונה לבד.

הצב את המסמך הבא במסמך styles.css שלך:

.כותרת {
הגבול העליון: עבה מוצק # FFCC00;
}

החלטתי לעשות את זה כמעמד שנקרא "topline" ולא רק להגדיר את כל הפסקאות בצורה זו. בדרך זו, אם אני מחליט שאני רוצה להיות פסקה ללא שורה צהוב העליון, אני יכול פשוט לעזוב את הכיתה = "topline" בתג פסקה וזה לא יהיה הגבול העליון.

09 מתוך 10

עיצוב התמונות

תמונות בדרך כלל יש גבול סביבן, זה לא תמיד גלוי אלא אם התמונה היא קישור, אבל אני אוהב להיות בכיתה בתוך גיליון סגנונות CSS שלי מכבה את הגבול באופן אוטומטי. עבור גיליון סגנונות זה, יצרתי את הכיתה "noorder", ורוב התמונות במסמך הן חלק ממחלקה זו.

החלק המיוחד האחר של תמונות אלה הוא המיקום שלהם בדף. רציתי שהם יהיו חלק מהפיסקה שהם היו בלי להשתמש בטבלאות כדי ליישר אותם. הדרך הפשוטה ביותר לעשות זאת היא להשתמש במאפיין CSS הצף.

הצב את המסמך הבא במסמך styles.css שלך:

#main img {
צף: משמאל;
margin-right: 5px;
margin-bottom: 15px;
}
.אין גבול {
border: 0px none;
}

כפי שאתה יכול לראות, יש גם תכונות השוליים להגדיר על התמונות, כדי לוודא שהם לא מרוסק נגד טקסט צף כי הוא לידם בפסקאות.

10 מתוך 10

עכשיו תסתכל על הדף שלך הושלם

לאחר שמירת CSS אתה יכול לטעון מחדש את דף Pets.htm בדפדפן האינטרנט שלך. הדף שלך צריך להיראות דומה לזה המוצג בתמונה זו, כאשר התמונות מיושרות והניווט ממוקם נכון בצד שמאל של הדף.

בצע את אותם השלבים עבור כל הדפים הפנימיים שלך עבור אתר זה. אתה רוצה שיהיה דף אחד עבור כל דף בניווט שלך.