חזרה אל היסודות מסקנות הסבר
CSS או גיליונות סגנונות מדורגים משלימים את השפה המגדירה של כללי העיצוב עבור האינטרנט שלנו. אמנים בכל מקום באמצעות CSS על בסיס יומי ליצור, לארגן, ולקודד קבוצות של כללים עבור פריסות אתר בסיסיות. זה הפך את השפה הפופולרית ביותר עבור עיצוב חזיתית ומספק יכולות מדהימות עם המהדורה האחרונה של CSS3. אבל מה המשמעות של כל הקוד הזה בעצם מתכוון?
השפה עצמה פותחה במלואה כבר כמה שנים. בלבול יכול להתעורר בעיקר בשל miscommunication ושימוש לרעה במונחים דומים. CSS מביא הרבה מושגים חדשים לשולחן. נסקור כמה מהמונחים הפופולריים ביותר כדי לשלוט בגורו של CSS.
למה להתמחות עם CSS?
שאלה זו הוצגה לפני, ואפילו כניסה 2011 אנחנו יכולים לראות את אותן תוצאות צצים. CSS היא שפה חזקה לא אוהבת סקריפטים או תכנות. זוהי שפת סגנון, במיוחד קוד המשמש לתיאור אופן הפעולה של דף אינטרנט.
באמצעות CSS אנו יכולים לתמרן תכונות ישירות מרכיבי HTML נפרדים. כל הבלוקים, הסעיפים, הקישורים והתמונות יכולים להיות מושפעים מכללי CSS. זיקוק סמנטיקה המצגת עבור האינטרנט תמיד היה צעד ענק. זוהי הסיבה העיקרית מדוע CSS הוא עדיין השחקן המוביל עבור מעצבים - אף אחד לא יצר משהו טוב יותר!
מאפיינים וערכים
זוהי הדרך הפשוטה ביותר לפרוץ ל- CSS. כל קוד נופל לתוך שתי פעולות: בחירת אלמנט ליישם עיצובים ומה ליישם. זה האחרון נוצר באמצעות זוגות ערך / ערך.
לדוגמא צבע אדום; הוא זוג מאוד פשוט ערך / ערך. הנכס שבו השתמשנו הוא צבע אשר מאפשר לנו לעבור בכל מקובל ערך כדי לשנות את צבע הטקסט. זה יכול להיות גם קוד hex או RGB (אדום-ירוק-כחול) נתוני צבע. פעמים רבות המעצבים לא יזכיר את הרעיון של ערכים כי זה יכול להיות מטעה.
מאפיינים וערכים הם באמת רעיון אחד. כל הצהרת רכוש דורשת ערך, וערכים בפני עצמם הם חסרי משמעות. יש הרבה תיעוד מקוון אשר עובר על מאפיינים שונים רבים וכיצד הם משפיעים על אלמנטים HTML. אני ממליץ לקנות ספר עיון CSS מכל חנות ספרים בקרבת מקום. הם זולים למדי להחזיק ביותר את כל המידע שאתה צריך.
ערכי בורר
בוררים נדרשים כדי להשלים שורה שלמה של קוד CSS. אלה הם מה שאנו מכריזים לקבוע איזה סוג של אלמנט אנו מכוונים. ישנם בוררים רבים רבים כל כך מפותל המעצב הממוצע לא צריך את הכישורים. בדוק מסמכים של בורר W3 אם אתה רוצה לדעת יותר.
הדרך הפשוטה ביותר להתחיל הגדרות הסגנון היא להשתמש באלמנטים חשופים כמו בוררי רכוש. משמעות הדבר היא מניפולציה קוד השורש כגון עמ ' עבור פסקאות, div עבור חטיבות, ואפילו הגוף ו HTML ניתן להשתמש כדי לתפעל את המסמך כולו דף אינטרנט. להלן דוגמה מהירה של עיצוב כל רכיבי הפיסקה.
p font-family: Arial, sans-serif; צבע: # 222; מודגש;
מה נותן משקל אמיתי CSS הוא איך מדויק צליפה בורר יכול להיות. הדרך הטובה ביותר להשיג סגנונות ממוקד היא באמצעות 2 שיטות הידועה בשם שיעורים ו תעודות זהות. אלה הם רעיונות נפוצים ב- HTML שבו אתה יכול להגדיר כל רכיב יש ערך מזהה בכיתה באמצעות תכונות. לאחר מכן באמצעות CSS זה פשוט ליישם סגנונות לבלוק מסוים.
p # firstpar font-size: 14px; / * סגנונות פסקה עם מזהה של "firstpar" * / p.comment font-size: 1.0em; line-height: 1.3em; / * סגנונות פסקה (ים) עם מעמד של "תגובה" * /
אורך יחידות וערכים
לעתים קרובות פעמים אלה תנאים להתבלבל, לא הפתעה גדולה. הערכים הוסברו קודם לכן כמיקום שבו אנו משתמשים כדי לתאר נכס. יחידות אורך הם גם ערכים בכך שהם משמשים לתיאור נכס.
ההבדל הוא ערכים אלה דורשים נתונים מספריים ולכן חייב להחזיר צורה כלשהי של יחידות. פיקסלים (px) הם הנפוצים ביותר וניתן להשתמש בהם לכל דבר ביותר: רוחב / גובה, גודל גופן, ריפוד / שוליים, עד כמה שם.
מלבד אלה אתה עשוי לראות אחוזי (%) משמש לעתים קרובות באמצעות פריסות נוזל. כאשר הגדרת ערכי רוחב לאחוז מהדר יניח 100% להיות רוחב כולו של דפדפן האינטרנט. זה נותן הרבה דיוק למעצבים בעת החלת סגנונות מבנים פריסה ואפילו טיפוגרפיה הדף.
בלוק ההצהרה
עכשיו אחרי לשים את כל התנאים האלה יחד אנחנו סוף סוף מסוגלים לדון על הרעיון הליבה מאחורי גיליונות סגנונות. בלוקים של קוד משמשים כדי להגדיר תחומי נושא ולציין פירוט האלמנט. לדוגמה, להלן שורת קוד עבור כלי ניווט פשוט:
הע לעולם מספר רוחב: 100%; ריפוד: 3px 6px; margin-bottom: 20px;
הדרך הקלה ביותר להציג קוד זה היא לשורות שורה אחת אחרי השנייה. מפתחי CSS השתמשו בלוקים של קוד כדי לשבור כל נכס על הקו שלו. סדר יום זה לא רק לוקח הרבה יותר מקום אבל מקטין את היכולת “רזה” הגיליון שלך כדי למצוא בדיוק את מה שאתה צריך.
דרך טובה יותר לשבור בלוקים של קוד היא להפריד אלמנטים מפותלים לתוך שלהם אחרי שהם מגיעים לסף. מספר זה הוא אישי ויהיה שונה בין מפתחים. זה נקודת המפנה שבה ההיגיון מכתיב את זה מטופש כדי לשמור על הכל בשורה אחת, בעיקר בגלל הקריאות.
להלן כתבתי דוגמה של בלוק של מאפייני ניווט ביחד. בפועל זה שומר על אלמנטים עמוקים יותר באותו מיקום, כך שעריכות לכל רכיבי הניווט פשוטים בהרבה.
הע לעולם מספר רוחב: 100%; ריפוד: 3px 6px; margin-bottom: 20px; div # nav ul list-style: none; בלוק תצוגה; div # nav ul li float: left; margin-right: 10px; font-size: 12px; div # nav ul li a color: # 0f0f0f; text-decoration: none; הצג: inline-block; ריפוד: 2px 5px;
התקדמות אפשרית מ CSS2 / CSS3
בכותרות לאחרונה היה ללא הפסקה לדבר על היתרונות המדהימים של CSS3. אבל מה באמת השתנה בשפה? ללא ספק קוד ישן עדיין יפעל בסדר גמור. זה לפחות מראה מלא לאחור תאימות בין מהדרים (תמיד דבר טוב).
ההבדלים העיקריים קשורים בעיקר נכסים חדשים. אלה מאפשרים פינות מעוגלות ואפקטים צל ירידה להיות שניתנו בתוך הדפדפן. CSS3 מציעה גם כלים חדשים לתיאור צבעים במסמך. HSL (Hue-Saturation-Lightness) הוא החדש ביותר בנוסף ל- HSLA הכולל ערוץ אלפא להפחתת אטימות.
בחירת בוררים הם צעד ענק קדימה לגבי עיצוב סימון ישר. עם סגנון זה של קוד אתה יכול למקד שם אלמנט מסוים המכיל תכונות עם ערכים מסוימים. אלה הם בעיקר שימושי כאשר עובדים עם סימון כגון XML שבו אין עקרונות עיצוב סטנדרטיים כדי לתפעל צמתים. הדוגמה הבאה היא רעיון פשוט יחסית:
div [attrib = = "1"] / * סגנונות כאן * /
הקוד לעיל הוא חלק מספריית בוררי CSS. הדבר ישפיע על כל רכיבי ה- div עם תכונה “Attrib” אשר מחזיקה גם את הערך “1”. אם זה עדיין מבלבל התייחסות הדוגמה הבאה כדי להבהיר. בתיאוריה אלה שני בוררים צריך לבצע את אותן פעולות.
p [id ^ = "primary"] / * סגנונות * / p # ראשי / * סגנונות * /
סיכום
לאחר פירוק כמה מבלבל ביותר במונחים CSS נראה כמו הליכה בפארק. השפה היא אינטואיטיבית מאוד מתחילים יכולים להתחיל בעיצוב בתוך השעות הראשונות על היד. זה מה שעושה CSS כל כך פופולרי בקרב מפתחי אינטרנט.
היתרונות של CSS3 רק החלו להיכנס לתוקף. על פני כמה שנים חדשות המתפתחת מגמות האינטרנט יראה לנו בדיוק כמה שליטה יש לנו באמת על עיצוב דף אינטרנט. CSS כיום עומד גאה כשפה הדומיננטית עבור עיצוב אתר אינטרנט חזיתי. תרגול לתוך מיומנויות ברמה בינונית אפילו יכול לייצר ניסיון עיצוב שופע ידע נוסף.
