בחלק את הראשוןבסדרת בית ספר הלילה שלנו על איך ליצור אתר אינטרנט, למדנו קצת על עצמות דף אינטרנט: HTML. בשיעור של היום, אנחנו הולכים להתחיל לשים את הבגדים באתר שלנו באמצעות סטיילינג ו-CSS.
הסרטון שלמעלה מנחה אותך בשלוש הדרכים בהן תוכל להחיל סגנון על אלמנטים במסמך HTML. זה מניח שכבר צפיתהשיעור הראשון, אז אם לא עשית זאת, אולי תרצה לעשות זאת קודם. בסוף שיעור זה, תבין כיצד להוסיף מאפייני סגנון לאלמנטים בדף האינטרנט שלך. לחומר עזר נוסף, עיין בטקסט למטה.
מה תצטרך
עורך טקסט רגיל לכתיבת HTML שלך
דפדפן האינטרנט המועדף עליך לבדיקת ה-HTML שלך
רצון לחזק את הידע שלך על איך האינטרנט עובד
כפי שאתה יכול לראות, לא צריך הרבה כדי להתחיל.
מה הם סגנונות ו-CSS?
CSS מייצגגעולהסכֹּל כָּךסגיליונות, וזו השפה שבה משתמש הדפדפן שלך כדי לפרש כיצד אלמנטים בדף אינטרנט צריכים להיראות. שפת ה-CSS די קלה להבנה: אתה מגדיר מאפייני CSS ספציפיים, המשתרעים על כל דבר, החל מממדי אלמנטים (רוחב וגובה), טקסט (משקל, סגנון, סוג גופן, צבע וכו'), מיקום ומרווח (שוליים ורווחים). ריפודים).
בעיקרו של דבר, אם יש לזה קשר לאופן שבו אלמנט צריךמַבָּט, זה קשור ל-CSS. כדי להרחיב על המטאפורה למעלה, HTML והאלמנטים במסמך שלך הם עצמות האתר. הם מספקים מבנה. CSS מלביש את האתר שלך וגורם לו להיראות יפה - או לא. החלק הזה תלוי בצלעות העיצוב שלך.
בכתב, למשל, CSS נראה בערך כך: אם רציתי להוסיף צבע לפיסת טקסט, מאפיין ה-CSS התואם הוא, באופן לא מפתיע,color. כדי להגדיר את מאפיין הצבע, פשוט תקלידcolor, נקודתיים, הכריז מה הסגנון צריך להיות, ואז סיים בנקודה-פסיק. אז, למשל,color:red;
כיצד להחיל CSS על אלמנטים
כמובן, אתה צריך לדעת היכן ליישם את סגנונות ה-CSS שלך כך שהאלמנטים בדף שלך ישקפו אותם. (לא יכולת פשוט ללכת להקלידcolor:red;ברצוננו ולצפות לתוצאות. אתה יכול להשתמש ב-CSS כדי להחיל סגנונות על כל רכיב בדף האינטרנט שלך באחת משלוש דרכים:
סגנונות מוטבעים:שיטה זו היא הטובה ביותר עבור סגנונות מהירים וחד-פעמיים שברצונך ליישם על אלמנט אחד ללא הרבה תקורה. ניתן להוסיף סגנונות מוטבעים לכל אלמנט על ידי הגדרת תכונת הסגנון של אלמנט. לְדוּגמָה:
<p style="color:red;">The text inside this paragraph tag will be red.</p>
אתה יכול להגדיר יותר ממאפיין אחד באמצעות סגנונות מוטבעים כל עוד אתה זוכר את הנקודה-פסיק ביניהם:
<p style="color:red; font-family:Helvetica; font-size:20px;">The text inside this p tag will be red, 20-pixels wide, and use Helvetica.<p>
גיליונות סגנונות פנימיים:בתוך המסמך (לעיתים קרובות בתוך הראש), אתה יכול להגדיר סגנונות עבור אלמנטים בדף באמצעותבוררים. גיליונות סגנונות פנימיים נראים כך:
בדוגמה למעלה, ה
h3הוא הבורר. זה אומר, "כל רכיבי H3 בדף זה צריכים להשתמש בסגנונות הבאים." אתה יכול גם להגדיר בוררים באמצעות מחלקות או מזהי אלמנטים.גיליונות סגנונות חיצוניים:גיליונות סגנונות אלה מעבירים את ה-CSS לקובץ חיצוני המסתיים ב-.css (לדוגמה,
style.css. התחביר עבור גיליונות סגנונות חיצוניים דומה בדיוק למה שראיתם עם גיליונות סגנונות פנימיים, אך אינכם זקוקים להצהרת הסגנון. במקום זאת, אתה מקשר לגיליון הסגנונות החיצוני שלך כך:<link href="stylesheets/style.css" media="screen" rel="stylesheet" type="text/css" />
במקרה הזה, יש לי את
style.cssקובץ בתוך תיקיית גיליונות סגנונות, ואני אומר לדפדפן האינטרנט: "כשאתה טוען את הדף, מחפש את ה-CSS כאן." הכל בפנים נראה זהה למה שנכנס לתגיות הסטייל של גיליונות הסגנונות הפנימיים.
מתי להשתמש במחלקות, מזהים ובבוררי אלמנטים?
לרוב, למען הארגון, תרצו להשתמש בגיליונות סגנונות חיצוניים. אבל איך מחליטים באילו בוררים להשתמש? בוא נעבור במהירות על האפשרויות שלך:
בוררי אלמנטים:עליך להשתמש בבורר אלמנטים כאשר אתה רוצהרוֹבאלמנטים מסוג זה להיראות באותו אופן בדף שלך. אז אם אתה רוצה שכל רכיבי h2 יהיו 30 פיקסלים, אתה יכול להוסיף את הדברים הבאים לקובץ ה-CSS שלך:
h2 { font-size:30px; }מכאן ואילך, כל h2 יכבד את הסגנון הזה אלא אם תעקוף אותו.
בוררי כיתות:שיעורים שימושיים עבור סגנונות רחבים שברצונך להחיל על יותר מאלמנט אחד, אבל זה עשוי להיות סגנון שאתה רוצה להשתמש בו בצורה קצת יותר סלקטיבית ממה שהיית עושה בעת שימוש בבורר האלמנטים. בסרטון הגדרתי את המשעמם מאוד
redכיתה ככה:.red { color:red; }באמצעות הנקודה (.) לפני הטקסט "אדום", אמרתי לדפדפן שלי שהבורר הזה הוא מחלקה שאני יוצר. כעת, בכל אלמנט בדף שלי, אני יכול להוסיף תכונה של class="red" והטקסט שלו יהיה אדום.
בוררי תעודות זהות:מוגדר ב-CSS על ידי hash קודם (#), בורר ה-ID מיועד לרכיב ספציפי אחד ואלמנט אחד בלבד. בעיקרון זה מספק דרך להתאים סגנונות עבור אלמנט אחד ספציפי מבלי להשתמש בסגנונות מוטבעים - שמירה על כל הסגנון שלך במקום אחד. (מזהים גם שימושיים מאוד עבור JavaScript, אבל זה הרבה מעבר לתחום שלנו כאן.) אם הייתי רוצה div 800x600px עם רקע אדום בשם my_red_div, זה היה נראה כך:
#my_red_div { width:800px; height:600px; background:red; }
צפו בסרטון כדי לראות את כל זה בפועל. קריאה היא דבר אחד, אבל הכל מתחיל להיות הגיוני יותר כאשר אתה יכול לראות את זה.
זהו זה?
בקיצור, כן! כמובן שיש עוד ב-CSS, ויש כמה דרכים מתקדמות יותר ברצינות לטפל בבוררי CSS כך שתוכלו באמת לצמצם את האופן שבו אלמנטים יורשים את הסגנונות שלהם, אבל זה באמת היסודות. הדבר היחיד שחסר: הנכסים!
עם זאת, אני לא הולך לעבור על כל נכס CSS זמין (למען האמת, אין לנו זמן בשיעור הזה). כמו ברוב הדברים הקשורים לתכנות, אתה תלמד יותר מחיפוש האפשרויות שלך ממה שיכולתי לספק במדריך קצר אחד. להלן מספר הפניות ל-CSS שאולי תרצה לעיין בהן:
אשמח לשמוע עוד מועדפים בהערות לכלי הפניה! אני בעיקר גולש של דברים מהסוג הזה. אני לא מומחה ל-CSS, אבל ביליתי הרבה זמן בפריצה ל-CSS עבור פרויקטים של חיית המחמד שלי, ותאמין לי: קצת הולך רחוק, אבל יש הרבה שאתה יכול ללמוד אם אתה רוצה להעמיק.
אתה יכול ליצור קשר עם אדם פאש, מחבר הפוסט הזה, בכתובת[מוגן באימייל]. אתה יכול גם לעקוב אחריולְצַפְצֵףופייסבוק.
