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

1. ResetCss

אתה מתבקש להשתמש תמיד לאפס אם הוא יכול להיות אפס אריק מאייר, איפוס YUI, או לאפס מותאם אישית משלך, רק להשתמש משהו.

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

  הגוף HTML,, div, span, applet, object, h1, h2, h3, h4, h5, h6, iframe, 
  blockquote, מראש, abbr, acronym, כתובת, גדול, לצטט, קוד, דל, dfn, em, 
  font, img, ins, kbd, q, s, samp, קטן, להכות, חזק, תת, sup, tt, var, 
  DD fieldset, dl, dt,, צורה, תווית, אגדה, שולחן, כיתוב, tbody, tfoot, 
  thead, tr, th, td, קלט, בחר, Textarea 

  ; padding : 0 ; } (Margin: 0; padding: 0;) 


  ; padding : 0 ; } * (Margin: 0; padding: 0;) 

2. CSS קצרנות

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

קוד שגוי

  ( 
  margin-top: 10px; 
  margin-right: 7px; 
  text-bottom: 10px; 
  margin-left: 7px; 

  padding-top: 10px; 
  padding-right: 7px; 
  padding-bottom: 10px; 
  padding-left: 7px; 

  font-size: 12px; 
  font-weight: bold; 
  ; font-family: Arial, Verdana, Tahoma, sans-serif; 
  ) 

הקוד הנכון

 : 10px 7px 10px 7px ; padding : 10px 7px 10px 7px ; font :bold 12px Arial, Verdana, Tahoma, sans-serif ; } (Margin: 10px 7px 10px 7px; padding: 10px 7px 10px 7px; גופן: מודגש 12px Arial, Verdana, Tahoma, sans-serif;) 

3. לא משתמש כל כך הרבה כיתות זיהוי של

שמתי לב שרוב למתחילים להוסיף שיעורים הזהות של כמעט כל אלמנט בדף, וזה לא required.There להלן כמה דוגמאות של מה אני מתכוון.

קוד שגוי

 class = "wrapper" > <p class = "heading" > <strong class = "subheading" > Welcome </strong> </p> <p class = "linka" > <a href = "#" class = "link" > Home </a> </p> <p class = "linkb" > <a href = "#" class = "link" > About </a> </p> <p class = "linkc" > <a href = "#" class = "link" > Services </a> </p> <p class = "linkd" > <a href = "#" class = "link" > Contact </a> </p> </div> <div id = "wrapper" class = "wrapper"> בכיתה <p "heading" => בכיתה <strong "subheading" => ברוכים הבאים </ strong> </> בכיתה p <p "linka" => <a href = "#" class = "הקישור"> דף הבית </ a> </> בכיתה p <p "linkb" => href <a = "#" class = "link"> אודות </ a> </ p> <p = "linkc"> href בכיתה <a = "#" class = "link"> שירותים </ a> </> בכיתה p <p "linkd" => href <a = "#" class = "link"> צור קשר </ a> </ p> </ div> 

הנה הקוד הנכון

הקוד הנכון

 > <h1> Welcome </h1> <ul> <li> <a href = "#" > Home </a> </li> <li> <a href = "#" > About </a> </li> <li> <a href = "#" > Services </a> </li> <li> <a href = "#" > Contact </a> </li> </ul> </div> <div id = "wrapper"> <h1> ברוכים הבאים </ h1> <ul> <li> href <a "#" => דף הבית </ a> </ li> <li> href <a "#" => אודות </ a> </ li> <li> href <a "#" => שירותים </ a> </ li> <li> href <a "#" => צור קשר </ a> </ li> < / ul> </ div> 

4. ארגון לך Stylesheet

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

  / * Reset * / 
   elements שולי הסר ואלמנטים ריפוד 

  / * * אלמנטים בסיסיים / 
  סגנון הגדר עבור אלמנטים בסיסיים: הגוף, H1, H2, H3, H4, H6, ol, ul, dl, p וכו ' 

  / * Generic חוגים * / 
  סגנון הגדר עבור שיעורים כלליים: דברים פשוטים כמו להסיר את התחתון,  
  צפה הצדדים וכו '  
  / * * פריסה יסוד / 

  / * * פריסה יסוד / 
  להגדיר את סגנון עבור הפריסה הבסיסית: כותרת.  תחתונה, הצדדי וכו ' 

  / * Header * / 
  להגדיר את סגנון הכותרת 

  / * התוכן * / 
  להגדיר את סגנון עבור אזור תוכן 

  / * Footer * / 
  להגדיר את סגנון עבור תחתונה 

  / * וכו '* / 
  המשך 

5. השימוש מותנה גיליונותסגנון

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

הנה דוגמה

  LTE <!--[ if IE 6]> 
 
 
  href = "ie6.css" type = "text/css" media = "screen"  / > rel <link = "stylesheet" href = "ie6.css" סוג = "text/css" התקשורת = "screen" /> 
 
  -- > <! [Endif] -> 

מסקנה

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

אם אתה חושב שזה יכול להיות מדריך יותר טוב, בבקשה לשתף אותנו. תגובה אותנו

אם אתה מעוניין לקבל השראה יותר מאיתנו, אנא שקול מנוי שלנו על ידי הזנת RSS או באמצעות דוא"ל.

מתויק תחת: Css, הדרכות על ידי Admin