Formating - CSS
color מקבל שם צבע, למשל maroon, או ערך הקסדצימלי בשלושה ערוצים: RR לאדום, GG לירוק ו-BB לכחול. כל ערוץ נע בין 00 ל-FF, כך ש-#FF0000 הוא אדום, #00FF00 הוא ירוק, ו-#000000 הוא שחור.text-align: right מצמיד את הטקסט לימין. text-indent מזיז את תחילת הפסקה, ואפשר לתת לו ערך ב-px, ב-em או ב-pt.em פרופורציונלי לגובה האות M בגופן הנוכחי. יחידת pt מתאימה לנקודות במסמך וורד ואינה תלויה ברזולוציה.small, x-small, medium ו-xx-large, שנעים מקטן מאוד לגדול מאוד.font-style מקבל italic או oblique. font-variant: small-caps הופך את כל האותיות לגדולות, כשהאותיות שהיו גדולות מלכתחילה נראות גדולות יותר. font-weight מקבל bold או מספר כמו 900, שכהה מעט יותר.text-decoration מקבל underline (קו תחתון), line-through (קו באמצע), overline (קו עליון), או none לביטול עיצוב שכבר הוגדר.line-height קובע את גובה השורה, כאשר ערך 1 הוא ברירת המחדל וערך 1.5 מגדיל את המרווח ב-50%. word-spacing מרווח בין מילים, ו-letter-spacing בין אותיות. ערך שלילי גורם לאותיות להתקרב זו לזו.border-style (למשל solid, קו רציף), border-width (למשל 3px) ו-border-color. אפשר לכתוב הכול בשורה אחת.color: maroon;text-align: right;font-family: Verdana, Geneva, "Times New Roman", sans-serif;border: 1px solid green;להורדת קוד מקור של כל הדוגמאות בקורס HTML - לחץ כאן (להורדה ממחשב רגיל ולא מאובטח)
פרקי ההרצאה: Formating - CSS
תמלול ההרצאה: Formating - CSS
הטקסט המלא של הדקות הראשונות בהרצאה «Formating - CSS» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.
הדבר הבא שאנחנו הולכים לראות זה פעולות שקשורות לפורמטינג של מידע טקסטואלי. כלומר, כל מה שקשור לטקסט, צבעים, גופנים, גדלים ועוד.
אז בואו נתחיל על ידי פתיחת דף ה-HTML חדש. נלך ל-File, New File, נבחר HTML Page ו-Open. בואו נשמור אותו על ה-Desktop וניתן לו את השם "Formatting Text".
נוסיף גם קובץ CSS חדש. נבחר Style Sheet, אופן ונשמור אותו גם כן על הדסטופ כ-formatting.css. נבצע לינק אליו מקובץ ה-HTML ונתחיל עם איזושהי פסקה ראשונה שתדגים לנו יכולות של פורמטינג.
בואו נגדיר שהפסקה הזאת מכילה איזושהי שורת טקסט. אוקיי, קונטרול KD מסדר את כל התגיות בדף ואני רוצה לתת איזשהו פרט עיצובי עבור הפסקה הזאת והדבר הראשון שאנחנו נתחיל איתו זה צבעים.
בואו נגדיר קלאס פי אחת, נשמור, נחזור ל-CSS ונתחיל עם הגדרה של צבעים. אז עבור הפסקה הזאתי שהעיצוב שלה נמצא בקלאס פי אחת, נתחיל עם Color.
Color זה מאפיין של צבע גופן. ברגע שאני רושם נקודותיים אני מקבל מה שנקרא Name of a Color, כלומר שם של צבע ואני יכול לבחור איזשהו צבע כמובן לאחר מכן נקודה פסיק.
בואו נשמור, נאתר את הקובץ ונריץ אותו. עכשיו אני רואה שהצבע המרון שנתתי מתייחס לפסקה הזאת. נשאיר את הדפדפן פתוח ונשכפל את הפסקה לפסקה נוספת, כאשר הפעם נגדיר קלאס אחרת.
הקלאס השנייה, נשכפל אותה גם בקובץ ה-CSS, גם היא תיתן צבע, אבל הפעם אני רוצה לבחור איזשהו צבע על ידי גוונים ולא על ידי שם.
אז מה שאני מבצע, אני מגדיר סולמית ואני יכול לראות כאן שיש לי rr, gg, bb.
rr זה הגוון של ה-red, gg זה הגוון של ה-green, bb זה הגוון של ה-blue, כאשר האותיות האלה נכתבות בפורמט הקסא-דצימלי.
הגוון הנמוך ביותר הוא 0,0, והגוון הגבוה ביותר הוא ff ששווה ל-256. אם הייתי מגדיר ff, 0, 0, 0, 0 וכמובן נקודה פסיק. הצבע היה לגמרי אדום, 0 ירוק ו-0 כחול ולכן הצבע הזה היה הופך להיות אדום.
בואו נסתכל ונראה שעכשיו הצבע הוא אדום. בואו נגדיר שהכל אפסים. כל אפסים זה צבע שחור, יש לי פה צבע שחור. נגדיר 0, 0, F, F, 0, 0 וקיבלנו צבע ירוק. Red, green, blue.
Red הוא 0, green מלא, blue 0. אם אני מגדיר אותו מספר עבור כולם, קיבלתי פה משהו שנקרא Tone Color. כרגע זה Tone Gray, מפני שזה משהו שקרוב לאפור.
אוקיי, אז יש לי בעצם שתי אפשרויות לתת צבעים, או על ידי Name Color, או על ידי Red, Green, Blue.
הדבר הבא שנראה זה נתון בקשר ל-Text Align. אני מזכיר לכם שהטקסט בירוק זה סך הכל הערה שהמערכת מתעלמת ממנה, כדי שיהיה לנו יותר נוח להבין מה העיצוב שאני נותן כאן.
בואו נגדיר עכשיו עיצוב עבור קלאס P3. מאפיין טקסט-אליין יכול לקבל מספר ערכים בכדי להחליט איפה הטקסט הולך להיות מבחינת הדף.
בואו ניתן לו right. נחזור ל-HTML ונגדיר פסקה נוספת, הפעם עיצוב P3. נחזור לדפדפן ונראה שהצמדתי את הפסקה ימינה. זה היה טקסט-אליין.
הדבר הבא שאנחנו הולכים לראות זה טקסט אינדנט. אינדנט בעברית נקרא הזחה והמשמעות זה בעצם ביצוע טאב. טאב מאפשר להזיז את המידע ימינה או שמאלה, תלוי אם אנחנו עברית או אנגלית.
בואו נסתכל מה הכוונה. נגדיר קלאס שנקרא p4, נגדיר טקסט אינדנט ובואו נגדיר כרגע 30px. קודם כל, אנחנו כבר הולכים לדבר על היחידות עצמן שהגדרתי עבור המספר.
px נתייחס לפיקסלים וזה אומר שבכל האתר שלי אני אראה בעצם את ה-30 פיקסלים האלה עבור טקסט אינדנט. בואו נסתכל מה זה אומר.
אני חוזר לפסקה, משכפל אותה, מגדיר שהפסקה הזאת תקבל קלאס p4 ונסתכל מה מופיע בדפדפן. מה שאני רואה עכשיו זה שהפסקה הזאתי התחילה לא מההתחלה כמו הפסקאות האלה, אלא טיפה זזה במה שנקרא טאב מסוים שהגודל שלו הוגדר כ-30 פיקסלים.
אפשר להגיד שבמסך יש לי רזולוציה מסוימת שמגדירה לי את המרחבים בין הפיקסלים. אם אני כמובן אגדיר את זה ל-40 פיקסלים, אני יכול לראות שזה טיפה זז יותר כי הגדרתי 40 פיקסלים.
בואו נראה מה קורה עבור יחידות אחרות, לאו דווקא פיקסלים. ניקח פי 5. יחידה נוספת שקיימת נקראת EM, או בקיצור M. מה זה אומר יחידה שנקראת M?
אם הייתי מגדיר 1M, 1M מוגדר כמו הגובה של האות M באנגלית בגופן הנוכחי. זאת אומרת שיחידות שמוגדרות עם M הן פרופורציונליות לגופן.
מסתכלים מה הגובה של 1M, וזה 1M. אז 3M יהיה שלוש פעמים הגובה M, בגופן הנוכחי. בואו נסתכל עכשיו איך זה נראה. אז יש לי פה קלאס עבור p5, בואו נגדיר גם ב-HTML פסקה עבור קלאס p5, נשמור, ובדפדפן אני רואה שיש לי את הגובה של האות m, 3m כאלה,
זה בעצם הזכה מסוימת שהגדרתי כרגע. בואו נראה יחידה נוספת. יחידה נוספת זאת יחידה שמאוד מאוד דומה לפיקסלים, והיא נקראת points, נכתב על ידי pt.
יחידת פוינטס דומה ליחידת פיקסלים אבל פוינט זה בעצם יחידה שהיא לא פיקסלים אלא זה הגודל שקיים במסמך וורד. כאשר אני במסמך וורד מגדיר גופן בגודל 20 אני באמת בעצם הגדרתי 20 פוינט וזה לא קשור לפיקסלים ולדוגמה משהו שלא אמור להשתנות עם הרזולוציה כאשר פיקסלים כן אמור להשתנות עם הרזולוציה.
אז בואו נגדיר כרגע ב html פסקה נוספת עבור קלף p6 ונסתכל כרגע שהגדרתי 20 פוינט. בואו נראה דוגמה נוספת למשמעות של M. מה שאנחנו נעשה, ניקח את היחידות האלה של M ונגדיר אותן במקום על טקסט אינדנט, נגדיר אותן על פונט סייז.
כלומר, קלאס P5 מדברת על פונט סייז. בואו נחזור ל-HTML, נלך ל-P5 ונשנה פה קצת את הטקסט. שמתי פה בכוונה את האות M בשביל להבהיר מה זה אומר.
נחזור לדפדפן, נרפרש. מה שקורה כרגע, ואני רואה בעצם שהגודל של הגופן גדל, אבל לכמה הוא גדל? הגובה של האות M עכשיו היא שווה לשלוש פעמים מהגופן המקורי שהיה, כי הגדרתי שהגודל של הגופן הוא שלוש M. כמובן שכל אות אחרת גם כן גדלה פי שלוש מהגודל המקורי שלה.
אז היחידות האלה אולי הן קצת יותר מתאימות כאשר אני רוצה להתעסק עם גדלים של גופנים, ואני רוצה שהם יהיו יחסיים לגודל המקורי. אוקיי, אז זה בעצם היה טקסט אינדנט ופונט סייז.
בואו נסתכל עכשיו על גופנים עצמם. מה אנחנו יכולים לראות בקשר לגופנים? ראשית, נגדיר פסקה עבור גופנים, וכמובן גם קלאס עבור גופנים. אז יש לי את הקלאס p7, נשכפל פסקה ל-p7, ואם אני רוצה לתת איזשהו גופן, יש לי את פונט פמילי.
ראשית, אני רואה שאני יכול לבחור מפונד פאמילי שם של גופן. ברגע שאני בוחר איזשהו שם של גופן, זה הגופן שבעצם הדפדפן יגדיר עבור הפסקה שלי.
אבל בתור מעצבים אנחנו צריכים להבין שיש איזושהי בעיה מסוימת בנוגע לגופנים. מה הבעיה? הבעיה היא שגופן זה יחידה שאמורה להיות מותקנת במחשב שמסתכל בדפדפן, כלומר במחשב הלקוח.
יכול להיות שבמחשב הפיתוח של המעצב או של המתכנת קיים גופן שנקרא אריאל CYR, סוג מסוים של גופן, ולכן אני יכול להשתמש איתו.
ואם עכשיו אני מגדיר לעצמי את אריאל CYR ומסתכל מה זה הגופן הזה, אני רואה שזה הסוג של הגופן. אבל אם אצל הלקוח שגולש לאתר שלי לא מותקן במחשב ספציפית הסוג הזה,