Facebook
Twitter
RSSמדריך ASP.NET MVC – איך לשלב CSS
בפרקים הקודמים במדריך יצרנו תצוגות שונות המשתלבות יחדיו לכדי תוכנית שלמה. במקרים אשר בנינו HTML הקפדנו להשתמש ב-CSS classes על מנת לאפשר Customization של ממשק המשתמש בהמשך. עם זאת, נשים לב כי עדיין לא הגדרנו את ה-classes הללו כך שרוב התצוגות נראות פשוטות למדי.
ASP.NET MVC בשונה מ-ASP.NET Web Forms (אשר מכיל תמיכה ב-Theme וב-Skin) איננו מציע אבסטרקציה מעל יכולות ה-CSS. המשמעות היא שלא צריך ללמוד שום דבר חדש על מנת ל"שחק" עם הגדרות התצוגה. כל מה שצריך הוא להגדיר קובץ CSS ולהוסיף אליו קישור מתוך קובץ התצוגה המתאים.
להורדת הקוד של הפרק הקודם לחץ כאן
הרץ את התוכנית. ובחן את התצוגה הנוכחית הפשוטה:
העתק את התוכן של קובץ ה-CSS הבא
אל תוך הפרויקט תחת המיקום הבא: Content\Site.css. קובץ זה הינו קובץ ברירת המחדל של ASP.NET MVC עבור הגדרות CSS. ניתן להוסיף קבצי CSS נוספים על פי הצורך ולרוב נשמור אותם תחת המחיצה Content. בנוסף, שים לב כי תצוגת הפריסה של הפרויקט מכילה הפניה לקובץ זה:
<head>
<title>@ViewBag.Title</title>
...
<link href="@Url.Content("~/Content/Site.css")"
rel="stylesheet" type="text/css" />
@RenderSection("head", false)
</head>
הרץ את התוכנית. שים לב כיצד התצוגה משתנה לכדי תצוגה יותר מרשימה:
בחן את התוכן של הקובץ Site.css ושים לב כיצד הוראות ה-CSS מתייחסות לאלמנטים השונים בתוך התצוגות השונות.
אחד המאפיינים היפים של ASP.NET MVC הוא שמפתחים המכירים את הטכנולוגיות הסטנדרטיות בעולם ה-WEB כמו HTML ו-CSS יכולים בקלות להביא יכולות אלו לידי ביטוי. CSS היא דוגמא מצויינת לאופן הקל שבו ניתן לשלבו אל תוך הפרויקט ה-MVC שלנו.
בפרק זה למדנו כיצד ניתן לשלב CSS בתוך הפרויקט. בפרק הבא נלמד כיצד ASP.NET MVC מאפשר לא רק להשתמש בתכונות סטנדרטיות של עולם ה-WEB אלא גם להשתמש בקלות בקוד פתוח של הקהיליה ולשלבו בפרויקט.
תגובות בפייסבוק