להתחיל היום לכתוב קוד CSS (קריאה קצרה ומתחילים)

היי!

אז מה בתוכנית היום?

צעדים ראשונים בכל מה שקשור ב-CSS.

מה אתם אומרים?

נכון שעד עכשיו היה ממש קליל ומובן? (ואם לא, כמובן שאשמח לשמוע מכם).

אז עכשיו אפשר להמשיך! :-)  אתם איתי?..

אז ככה;

 

בפוסט הקודם סיימתי בכך שקיימים שני סוגים של תגיות; תגיות עם display של inline ותגיות Block.

 

תגיות Block -  אלו תגיות שתופסות 100% מרוחב הדף. זאת אומרת, אם נשים תגית <p> למשל, שהיא תגית block, ולאחר מכן נשים תגית נוספת, למשל, <img> או <h4>, הן ימוקמו מתחת לתגית ה<p> מאחר והיא תפסה 100% מרוחב הדף.

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

דוגמאות:

 

 

לכל תגית יש את ה-default display שלה וצריך להכיר אותן כדי לדעת לעבוד איתן בצורה נכונה.

לדוגמא, תגיות עם block display:

<div>

<p>

<h1-h6>

ועוד..

 

תגיות עם inline display:

 

<span>

<img>

<a>

 

** התגית <span> היא בעצם כמו התגית <div> שעליה הרחבתי בפוסט הקודם אבל היא inline ומקבצת בתוכה אלמנטים שהם inline, לעומת div שעושה זאת עבור אלמנטי block.

התגית <span> מאפשרת לנו גם לגשת לאמנטים ספציפיים בתוכן, כך למשל כותבים את הקוד, ולמטה תוכלו לראות את התוצאה.

 

 

 

לכל אחת מתגיות הinline / block ניתן לשנות את ה-default display שלהן באמצעות כתיבת קוד קטן ב-css.

 

כדי לעשות את זה, נצטרך להשתמש בשם התגית ולכתוב לה את הsyntax  הבא:

 

 

בדוגמא מעלה ניתן לראות שלמרות שהתגיות h1-h2 הן תגיות block, בפועל הן מופיעות האחת ליד השניה, באותה השורה, ולא תופסות 100% מרוחב הדף כיאה לתגיות מסוג block . אז איך בכל זאת זה קורה?

שימו לב שבאמצעות שינוי הdefault display של התגיות h1-h2 גרמתי להן להפוך לתגיות מסוג inline.

 

הכל אפשרי! הללויה! :-)

 

 

**ידע כללי: בדר"כ, בבניית דף אינטרנט, נכתוב מסמך HTML  ומסמך CSS  בנפרד.

על מנת לחבר ביניהם, כדי שהתוכן שכתבנו בhtml יקבל את העיצוב שהגדרנו ב-CSS, נשתמש בתגית link כדי שהשניים יהיו מקושרים.

דוגמאות יפות מאוד לכך שאפשר לחבר מיליוני קבצים של CSS  למסמך HTML  אחד – תוכלו למצוא פה:

http://www.csszengarden.com/

 

עיצוב באמצעות CSS

 

לאחר שכתבנו כבר כמה דברים במסמך ה-html שלנו, אפשר לעבור לעצב אותו (כן, כן, אתם צודקים! עכשיו הכיף האמיתי מתחיל! ).

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

 

אבל ראשית, נלמד איך "לתפוס" אלמנטים ולקבוע עבורם עיצוב ייעודי.

כדי לתפוס אלמנטים  בדרך הפשוטה – נקרא בשמם.

אם יש לי במסמך הhtml תגית של <h1> , בcss אקרא לה כך:

h1{color:red;}

 

אכתוב את שמה ולאחר מכן סוגריים מסולסלים {} ובתוכם את הproperty שאני רוצה לעצב.

בשפת ה-css לתגיות ה html נקרא selectors כי הן בוחרות את האלמנטים שנרצה לעצב.

 

משחק עם selectors כדי קצת להבין יותר כיצד ניתן לבחור כמה ביחד, אחד ספציפי או כמה ספציפיים ביחד, ניתן לראות כאן:

try yourself

 

איפיוני העיצוב שניתן לhtml יהיו בעזרת properties. קיימים המון סוגים של properties ולכן יהיה מעט קשה להרחיב על כל אחד מהם, אבל בקרוב מאוד אעלה cheat sheet עם כל ה-properties שיש בcss, כדי שתוכלו להדפיס אותו ולתלות מעל שולחן העבודה J כל יום תוכלו לנסות אחד אחר וככה תיוודעו לכולם, אחד אחד...

 

אני יודעת שהכל נורא מסקרן, אך אם לא רואים דוגמאות בלייב , אין משהו שיגרה אתכם להמשיך ולחפש לבד ולכן אתן כמה דוגמאות בסיסיות :-)

 

להלן מספר properties בסיסיים שכדאי כבר עכשיו להכיר:

 

color – צבע הפונט -

font-family – משפחת הפונט, לדוגמא, אריאל, דיויד וכו -

font-size – גודל הפונט -

background – צבע הרקע -

display – כמו שלמדנו קודם, בלוק או אינליין -

align-content – יישור התוכן, מירכוז, שמאל או ימין -

font style – לאחר בחירת משפחת הפונט ניתן לבחור סגנון יותר ספציפי -

border – יצירת גבול -

text-align – יישור הטקסט -

text-decoration – קישוט הטקסט: הוספת קו תחתון, בולד וכו' –

 

כמו כן, שפת ה CSS מכירה לפחות 150 צבעים בשמם ה'פרטי'; למשל: tomato, olive, lavender וכו'..

 

אתם יכולים לבדוק את זה פה:  css colors

 

כמובן שקיימים עוד מיליוני properties, וכפי שסיכמנו – הם יופיעו בcheat sheet שעומד לצאת בקרוב! :-)

 

ולסיום, משחק קליל שמלמד  css selectorc כאן.

נו, מה אתם אומרים? איך היה?

נראה לי שזה מספיק חומר לפוסט אחד.

כבר נפתח לכם התיאבון?

אל תשכחו להירשם לעדכונים שלי, כדי להתקדם בלמידה! :-)

 

בהצלחה,

 

יעל