אם הייתי צריך לדמות את האינטרנט ללא CSS, אז הייתי רואה שלד בניין בטון אפור ומשעמם. כדי להפוך שלד זה לבניין שלם וגמור, כזה שנראה טוב, כיף ונוח לחיות בו, דרוש אדריכולת ועיצוב פנים, בדיוק כמו שדרוש CSS כדי להפוך את דפי האינטרנט להיראות נהדר, להיות ידידותיים ונגישים בכל מכשיר.
CSS גיליונות סגנונות מדורגים
CSS (Cascading Style Sheets), גיליונות סגנונות מדורגים, היא שפת עיצוב פשוטה שנועדה להציג את דפי האינטרנט בצורה נאה ומושכת.
CSS מטפלת במראה ובתחושה של דף אינטרנט. באמצעות CSS, אתה יכול לשלוט על צבע הטקסט, סגנון הגופנים, המרווח בין פסקאות, עיצובי פריסה וגדלי עמודות, תמונות וצבעי רקע, וריאציות בתצוגה עבור מכשירים בגדלים שונים כמו גם מגוון אפקטים אחרים. קל ללמוד ולהבין CSS והוא מספק שליטה רבת עוצמה על הצגת מסמך HTML.
היתרונות של CSS
CSS חוסך זמן – אתה יכול לכתוב CSS פעם אחת ולאחר מכן לעשות שימוש חוזר באותו גיליון במספר דפי HTML. אתה יכול להגדיר סגנון עבור כל רכיב HTML ולהחיל אותו על כמה דפי אינטרנט באתר שלך.
דפים נטענים מהר יותר – אם אתה משתמש ב-CSS, אינך צריך לכתוב תכונות תג HTML בכל פעם. פשוט כתוב כלל CSS אחד של תג והחל אותו על כל המופעים של התג הזה. אז פחות קוד אומר זמני הורדה מהירים יותר.
תחזוקה קלה – כדי לבצע שינוי גלובלי, פשוט שנה את הסגנון, וכל האלמנטים בכל דפי האינטרנט יתעדכנו אוטומטית.
סגנונות מעולים ל-HTML – ל-CSS יש מגוון רחב בהרבה של תכונות מ-HTML, כך שאתה יכול לתת מראה הרבה יותר טוב לדף ה-HTML שלך בהשוואה לתכונות HTML.
תאימות למספר מכשירים – גיליונות סגנונות מאפשרים לבצע אופטימיזציה של תוכן עבור יותר מסוג אחד של מכשיר. על ידי שימוש באותו מסמך HTML, ניתן להציג גרסאות שונות של אותו אתר אינטרנט עבור, מסכי מחשב גדולים, מסכי מחשבים ניידים, מחשבי כף יד ,טלפונים סלולריים ואפילו להדפסה.
תקני אינטרנט גלובליים – כיום תכונות HTML מוצאות משימוש ומומלץ להשתמש ב-CSS. אז זה רעיון טוב להתחיל להשתמש ב-CSS בכל דפי ה-HTML כדי להפוך אותם למתאימים לדפדפנים עתידיים.
מעצב/בונה אתרים – אם בעבר היתה הפרדה מאוד ברורה בין עיצוב אתרים לבניית אתרים, אז היום, בעקבות ההתפתחות של css והלמידה הקלה שלה, הרבה מאוד מעצבי אתרים גם בונים את האתרים של הלקוחות שלהם.
אופן השימוש
CSS היא שפה מבוססת כללים – אתה מגדיר כללים המציינים קבוצות של סגנונות שיש להחיל על אלמנטים מסוימים או קבוצות של אלמנטים בדף האינטרנט שלך. לדוגמה “אני רוצה שהכותרת הראשית בדף שלי תוצג כטקסט גדול בצבע כחול”
הקוד הבא מציג כלל CSS פשוט מאוד שישיג את הסגנון מתואר לעיל:
h1 {
color: blue;
font-size: 40px;
}
הקוד נפתח עם “סלקטור” שהוא האלמנט שאנחנו הולכים לסגנן; למשל – p, div, span, h1, input (פסקה, בלוק טקסט, קטע טקסט, כותרת ושדה-קלט) וכדומה.. במקרה זה שלנו אנו מעצבים כותרת H1.
לאחר מכן סוגריים מתולתלות { }. בתוך אלה תהיה “תכונה” שאנו רוצים לשנות באלמנט הנבחר, אחריה יבואו נקודתיים ולאחר מכן “ערך” (גודל, צבע, מיקום וכדומה..) שנרצה לתת לתכונה.
גיליון סגנונות CSS יכיל כללים רבים כאלה, שנכתבו בזה אחר זה. כמובן שכאן הבאתי דוגמא בסיסית ביותר. לשפת CSS אפשרויות כמעט בלתי מוגבלות שממשיכות להתפתח כל הזמן.
באמצעות CSS אפשר לסגנן דפי אינטרנט שנראים נפלא עם חווית משתמש, שבעבר רק אפשר היה רק לחלום עליה.
we♥ CSS
מומחה בניית אתרים וורדפרס עם ניסיון ומוניטין של מעל 20 שנה בעולם הדיגיטל.
אני בונה ומעצב אתרים וחנויות בוורדפרס, מתמחה באחסון ותחזוקה, ומלווה עסקים משלב האפיון ועד קידום במנועי חיפוש.
המאמרים שאני כותב מבוססים על ניסיון אמיתי בעבודה עם מאות אתרים ולקוחות, כדי לתת לך ידע שימושי וטיפים פרקטיים לעסק שלך.
השארת תגובה