טיפים שימושיים CSS למתחילים

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

בין אם אתה מעוניין להרים CSS כדי ליצור אתר משלך, או רק כדי לצבוט את המראה של הבלוג שלך מרגיש קצת - זה תמיד טוב להתחיל עם יסודות כדי לקבל בסיס חזק יותר. בואו נסתכל על כמה עצות CSS חשבנו שאולי כדאי למתחילים. רשימה מלאה לאחר קפיצה.

1. להשתמש reset.css

   כשמדובר טיוח סגנונות CSS, דפדפנים כמו Firefox ו- Internet Explorer יש דרכים שונות לטפל בהם. reset.css מאפס את כל הסגנונות הבסיסיים, כך שאתה מתחיל עם סגנונות חדשים ריקים חדשים.

   הנה כמה נפוץ reset.css מסגרות - יאהו אפס CSS, אריק Meyer של איפוס CSS, טריפולי

2. השתמש ב- CSS קצר

   CSS קצרנות נותן לך דרך קצרה יותר של כתיבת קודי ה- CSS שלך, והכי חשוב - זה הופך את קוד clearner וקל יותר להבין.

   במקום ליצור CSS ככה

   .כותרת background-color: #fff; background-image: url (image.gif); רקע-לחזור: לא לחזור; רקע מיקום: למעלה משמאל; 

   זה יכול להיות קצר לתוך הדברים הבאים:

   .header background: #fff url (image.gif) no-repeat top left

   יותר - מבוא CSS קצרנות, שימושי CSS קיצור תכונות

3. הבנה מעמד ו תעודת זהות

   אלה שני בוררים לעתים קרובות לבלבל מתחילים. ב CSS, מעמד מיוצגת על ידי נקודה "." בזמן id הוא חשיש # id משמש על סגנון ייחודי ואינו חוזר על עצמו, מעמד בצד השני, יכול להיות שימוש חוזר.

   יותר - מחלקה לעומת מזהה | מתי להשתמש ב- Class, ID | החלת מחלקה ומזהה יחד

4. כוח של

5. a.k.a רשימת קישורים, הוא מאוד שימושי כאשר הם משתמשים נכון עם
   או
   , פרט לסגנון תפריט ניווט.

   • לשכוח , נסה

     אחד היתרונות הגדולים ביותר של CSS הוא השימוש

     כדי להשיג גמישות מוחלטת במונחים של סגנון.

     הם בניגוד

     , שבו התוכן 'נעול' בתוך

     של התא. זה בטוח לומר ביותר פריסות בר השגה עם השימוש ואת הסגנון הנכון, טוב אולי למעט תוכן טבלאי מסיבית. יותר - שולחנות מתים, טבלאות Vs. CSS, CSS לעומת טבלאות כלים לניקוי CSS זה תמיד טוב לקבל תצוגה מקדימה מיידית של הפריסה תוך tweaking CSS, זה עוזר להבין באגים סגנונות CSS טוב יותר. הנה כמה כלי איתור באגים של CSS ללא תשלום שתוכל להתקין בדפדפן שלך: FireFox Web Developer, DOM Inspector, Internet Explorer Developer Toolbar ו- Firebug. הימנע בוררים מיותרים לפעמים ההצהרה CSS שלך יכול להיות פשוט יותר, כלומר אם אתה מוצא את עצמך קידוד את הדברים הבאים: ul li ... ol li ... table tr td ... הם יכולים לקצר רק כדי פשוט li ... td ... הסבר: יהיה קיים רק בתוך או ו ו יהיה רק ​​בפנים אז באמת אין צורך להכניס אותם מחדש. לדעת !חשוב כל סגנון מסומן !חשוב יילקח לשימוש ללא קשר אם יש כלל החלפה מתחתיו. .דף background-color: blue! חשוב; צבע רקע: אדום; בדוגמה שלמעלה, צבע רקע: כחול יותאם כי הוא מסומן !חשוב, גם כאשר יש צבע רקע: אדום; מתחת. !חשוב משמש במצב שבו אתה רוצה לכפות סגנון ללא משהו מחליף אותו, אבל זה לא יכול לעבוד ב- Internet Explorer. החלף טקסט עם תמונה בדרך כלל זה נוהג להחליף כותרת מ כותרת טקסט מבוסס על התמונה. הנה איך אתה עושה את זה. h1 text-indent: -9999px; background: url ("title.jpg") no-repeat; רוחב: 100px; גובה: 50px; הסבר: text-indent: -9999px; זורק את כותרת הטקסט לבטל את המסך, הוחלף על ידי תמונה שהוצהר על ידי רקע כללי: … עם קבוע רוחב ו גובה. הבנת CSS CSS המאמר הבא נותן לך הבנה ברורה בשימוש במיקוד CSS - עמדה: … יותר - למד CSS מיקום בעשר שלבים CSS @import לעומת ישנן 2 דרכים לקרוא קובץ CSS חיצוני - בהתאמה באמצעות @import ו . אם אינך בטוח באיזו שיטה להשתמש, הנה כמה מאמרים שיעזרו לך להחליט. יותר - ההבדל בין עיצוב טפסים ב- CSS טופסי אינטרנט ניתן בקלות לעצב ולהתאים אישית עם CSS. המאמרים הבאים מראים לך כיצד: יותר - טבלה ללא טופס, גן טופס, עיצוב עוד יותר שולטת טופס קבל השראה אם אתה מסתכל על האתר מעוצב CSS מבוסס היטב עבור השראה, או פשוט פשוט גלישה כדי למצוא קצת ממשק משתמש טוב, הנה כמה אתר ראווה CSS אנו ממליצים: CSS רמיקס יופי CSS עלית מאניה CSS דליפה שמור על קודי CSS נקיים אם קודי ה- CSS שלך מלוכלכים, אתה הולך בסופו של דבר קידוד בלבול וקשה לשפץ את הקוד הקודם. בתור התחלה, אתה יכול ליצור הזחה נכונה, להעיר אותם כראוי. יותר - 12 עקרונות לשמירה על הקוד שלך נקי, פורמט קודי CSS באינטרנט טיפוגרפיה מדידה: px לעומת em נתקל בבעיה בעת בחירת יחידת המדידה px או em? אלה המאמרים הבאים עשויים לתת לך הבנה טובה יותר על יחידות טיפוגרפיה. טבלאות דפדפנים טבלאות כולנו יודעים כל דפדפן יש דרכים שונות של טיוח סגנונות CSS. זה טוב שיש התייחסות, תרשים או רשימה המציגה את תאימות CSS כולו עבור כל דפדפן. טבלת התמיכה של CSS: # 1, # 2, # 3, # 4. עיצוב multicolumns ב CSS נתקל בבעיה מקבל את העמודה השמאלית, האמצעית והימנית ליישר כראוי? הנה כמה מאמרים שעשויים לסייע לך: בחיפוש אחר הגביע הקדוש עמודות פו הסיבות העיקריות לכך שעמודות CSS שלך מתעסקות תיבות Litte (דוגמאות) ריבוי שורות פריסות לטפס מחוץ לקופסה עמודות מוחלטות קבל חינם CSS עורכי עורכי ייעודי תמיד טוב יותר פנקס. הנה כמה אנו ממליצים: יותר - פשוט CSS, פנקס רשימות ++, עורך CSS סגנון הבנת סוגי מדיה יש מעט סוגי מדיה כאשר אתה מכריז על CSS . הדפס, הקרנה ומסך הם כמה סוגים נפוצים. הבנה ושימוש בהם בדרכים נאותות לאפשר נגישות טובה יותר למשתמש. המאמר הבא מסביר כיצד להתמודד עם סוגי CSS Media. יותר - CSS וסוגי מדיה, W3 סוגי מדיה, סוגי מדיה, סוגי מדיה 20 שימושי iPhone Apps עבור מפתחים ומעצבים 20 שימושי כלי SVG גרפיקה טובה יותר 20 גופנים אור אולטרה אלגנטי עבור מעצבי אינטרנט המאמר הבא 20 שימושי תוספות Sidebar של Firefox המאמר הקודם 20 שימושי Apps כדי להפיק את המרב של Instagram