ورود به حساب ثبت نام جدید فراموشی کلمه عبور
برای ورود به حساب کاربری خود، نام کاربری و کلمه عبورتان را در زیر وارد کرده و روی “ ورود به حساب” کلیک کنید.





اگر فرم ثبت نام برای شما نمایش داده نمیشود، اینجا را کلیک کنید.









اگر فرم بازیابی کلمه عبور برای شما نمایش داده نمیشود، اینجا را کلیک کنید.





نمایش نتایج: از 1 به 3 از 3
  1. #1
    Astyage
    كاربر عادي
    تاریخ عضویت
    2013 Jun
    محل سکونت
    Tehran
    نوشته ها
    12
    0
    12

    ۱۰ تمرین عملی css برای بهبود کدهایتان

    کد می نویسد بعد از مدتی متوجه می شوید کدهای شما خیلی شلوغ و درهم و برهم است چرا؟از همان اول شما شروع به نوشتن بصورت در هم یا در حین تکمیل پروژه با تغییرات نظم کدهای شما از بین رفته این بار ۱۰ نکته رو برایتان می نویسم تا بتوانید کدهایی با نظم بیشتر و قابلیت مدیریت راحت تری بنویسید.

    ۱٫نظم داشته باشید

    داشتن نظم لذت کار کردن به کد نویسی شما می دهد بجای اینکه یک سری کدهایی که اتفاقی به ذهنتان میخورد و بنویسید شما با نظم و قاعده خاصی کدهایتان را می نویسید یک ساختار منطقی برای نوشتن کدهایتان استفاده کنید بجای استفاده از id و class سعی کنید بصورت منظم از آن ها استفاده کنید قابلیت ارث بری.

    سعی کنید آیتم های که عمومیت بیشتری دارند را در اول تعیین و تعریف کنید بعد ایتم های بعدی،اینطور نوشتن به شما اجازه می دهد تا بتوانید ارث بری را به درستی تعیین کنید که هم در سرعت و هم در تولید کد کمتر(دوباره نویسی استایل) موثر است

    بهترین ساختار با توجه به توسعه و ویرایش که در آینده در نظر دارید بکار ببرید:

    ۱٫استایل reset و بازنشانی

    ۲٫پیوند و المنت ها

    ۳٫لایه بندی اصلی

    ۴٫ساختار لایه های ثانویه

    ۵٫عناصر فرم

    ۶٫متفرقه

    *
    {
    margin:0;
    padding: 0;
    }
    img {border:none;}
    /*link & type */
    body
    {
    font-family:'BYekan';
    font-size:100%;
    }
    a:link,a:active,a:visited{text-decoration:none;}
    a:hover {color:#999;text-decoration:underline;}
    h1{}
    h1 a {}
    h1 a:hover { color:#fff;}

    2.عنوان ها،تاریخ و امضا

    بگذارید بقیه بدونن کی این کدها را نوشته و در صورت داشتن هر سوالی با شما در ارتباط باشند زمانیکه طراحی انجام میدهد
    Copyright 2013 © imind
    Website: www.imind.ir
    Author:Astyage vaisy
    Email: info@imind.ir
    useful-color:
    --------------
    #3498db - light blue
    #1d74be - mid blue
    e1e1e1 - light gray
    a3a3a4 - mig dray
    */
    شاید تعجب کنید از تصویر بالا ولی نوشتن رنگ هایی ساده و کاربردی که در استفاده کرده اید می تواند خیلی مفید باشد برای ویرایش در آینده یا توسعه دادن پروژه ، با انجام این کار دیگر نیازی به باز کردن فتوشاپ و …. برای دیدن رنگ ها نیست براحتی به قسمت بالا رفته و کد رنگ را کپی می کنید.

    ۳٫کتابخانه ای از Template

    زمانیکه کارتون تموم شد تمامی قسمت هایی که عمومی نیستن در یک فایل Template css ذخیره کنید تا بعدا بتونید ازش استفاده کنید همچین میتونید به چندین نوع برای کاربر ذخیره اش کنید:تک ستونی،دوستونی،و …. اگر کاربر مکینتاش هستید Coda یک ویرایشگر هستش می تونه این کار رو براتون به راحتی انجام بده
    قفسه پرونده

    ۴٫استفاده و نامگذاری درست

    در قسمت های بالا من برای ID ستون ها از col-alpha و col-beta استفاده کردم در حالیکه میتونستم از col-right و col-left استفاده کنم چرا نکردم؟همیشه به آینده فکر کنید که ممکن است تغییراتی در وب سایت انجام بدید مثلا ستون چپ به راست و راست به چپ تغییر بدم شما نباید دیگر HTML را دستکاری بکنید بجای تغییر نام و …. می توانید موقعیت آنها را تغییر بدهید.همچنین شما می تونید موقعیت ستون ها را از چپ به راست تغییر دهید و ID را بصورت #col-left نگه دارید،ولی گیج کننده بنظر نمیرسه؟ID چپ باشه به نظر می رسه که ستون در سمت چپ قرار گرفته و این کار جلوی مانور شما را در آینده برای انجام هر تغییری می گیرد .

    یکی دیگه از مزایای CSS این است که شما می تونید استایل ها را از محتوا جدا کنید و کل سایت را دوباره طراحی کنید فقط و فقط با اعمال تغییرات بروی CSS،بدون اینکه نیازی به تغییر در HTML باشد پس کدهای CSS تون رو به اسامی محدود نکنید .در انتخاب نام عناصر سعی کنید بر اساس چیزی که هستند نام را انتخاب کنید نه چیزی که شبیه به آن هستند

    ۵٫مرورگرهای قدیمی با _ (خط زیر) مشکل دارند یا اصلا پشتیبانی نمی کنند.پیشنهاد می کنیم برای سازگاری بیشتر سعی کنید از خط فاصل ( – ) استفاده کنید

    ۶٫تکرار نکنید !

    با گروه بندی عناصر بجای دوباره اعلان کردن آن ها،دوباره استفاده کردن از صفت ها بعنوان مثال اگر عناصر h1،h2 دارای رنگ و سایزی مشابه هستند با استفاده از کاما آنها را گروه بندی کنید مثال:
    {

    margin:1em 0 2em 0;
    font-size:1em;
    color:#222;

    }
    در جاهایی که ممکن است سعی کنید از میانبرها استفاده کنید همیشه منتظر باشید فرصتی برای گروه بندی کردن و بکار بردن میانبرها داشته باشید.

    margin-top:10px;
    margin-bottom:2em;
    margin-left:0;
    margin-right:0;

    }
    درک استفاده از میانبرها خیلی موضوع مهمی هستش که کدام یک از میانبرها به ترتیب تسفیر و اجرا می شود ضروری است Top,right,left,bottom و همچنین اگر مقادیر top ، bottom ، right و left یکی هستند بصورت زیر عمل کنید:
    H1 {margin:1em 0;}


    توسط دستور بالا حاشیه بالا و پائین ۱em و حاشیه چپ و راست را صفر تنظیم میکند.

    ۷٫اگر نکته هایی که ذکر شده اند و رعایت کرده باشید حجم استایل را کم کردید که اینکارها بمعنی لود سریعتر و نگه داری بیشتر است در نوشتن استایل ها سعی کنید تا جایی که میتونید مستقل باشه چیزهایی را که لازم ندارید جدا کنید و تا حد امکان سعی کنید گروه بندی کنید و زمانیکه از فریم ورک های CSS استفاده می کنید در حجم و زمان صرفه جویی شده و ارث بری می شود.

    و روشی دیگر برای کم کردن حجم CSS،برای مقادیر صفر نیازی نیست که واحد اندازه گیری خاصی را تعیین کنید مانند ۰px یا ۰em عدد صفر،صفر است.

    ۸٫ابتدا سعی کنید برای مرورگرهای Grecko،سپس Webkit و بعد IE

    برای خلاص شدن از مشکلات ناسازگاری و … سعی کنید ابتدا پایه و اساس کارتون و برای مرورگرهای Grecko که شامل Mozilla,Camino,Netscape,Flock هستند بنویسید و سپس برای Webkit شامل safari،Chrome و سپس برای IE مایکروسافت بنویسید.اگر CSS برای این مجموعه ها به درستی کار کند می توان گفت که برای کروم و IE و سافاری نیز کار خواهد کرد (اطمینان ۱۰۰% نیست)

    ۹٫معتبر سازی

    اگر مشکلی در کد نویسی تان بود یا طراح تان آنطوری که میخواستید نشد W3C’s free CSS validator می تواند کمک بزرگی براتون باشه تا خطاها را پیدا کنید.

    ۱۰٫همیشه مرتب و با نظم نگه دارید.

    یکی از راه ها برای منظم نگه داشتن کدهایتان جدا کردن مرورگرهای مشخص از صفحات استایل منحصر بفرد،Css و شامل شدن جاواسکریپت ،کدهای Server-side و Conditional comment در جای لازم که در حفظ نظم و پرهیز از هرج و مرج در کدهاتون کمک میکنه و کدهای شما قابل مدیریت هستن.

    منبع:[برای نمایش لینک باید عضو شوید. ]
    ناحیه اشترام گذاری آموخته های ما
    [برای نمایش لینک باید عضو شوید. ]
  2. 1
  3. #2
    adminmsp
    مدیر کل و موسس سایت
    تاریخ عضویت
    1970 Jan
    محل سکونت
    M.S.P Soft
    نوشته ها
    1,590
    759
    465
    مطلب خوبی بود !
    سایت خوبی هم دارید (وردپرس) میشه افزونه ای که برای قرار دادن کد ها تو تگ استفاده کردین رو قرار بدید !
    با M.S.P Soft به دنياي برنامه نويسي وارد شويد[برای نمایش لینک باید عضو شوید. ]
  4. #3
    Astyage
    كاربر عادي
    تاریخ عضویت
    2013 Jun
    محل سکونت
    Tehran
    نوشته ها
    12
    0
    12
    این افزونه Crayon هستش اینجا تو فروم در[برای نمایش لینک باید عضو شوید. ] گذاشتم.
    ناحیه اشترام گذاری آموخته های ما
    [برای نمایش لینک باید عضو شوید. ]
  5. 1
نمایش نتایج: از 1 به 3 از 3

اطلاعات موضوع

کاربرانی که در حال مشاهده این موضوع هستند

در حال حاضر 1 کاربر در حال مشاهده این موضوع است. (0 کاربران و 1 مهمان ها)

کلمات کلیدی این موضوع

مجوز های ارسال و ویرایش

  • شما نمیتوانید موضوع جدیدی ارسال کنید
  • شما امکان ارسال پاسخ را ندارید
  • شما نمیتوانید فایل پیوست کنید.
  • شما نمیتوانید پست های خود را ویرایش کنید
  •  

Content Relevant URLs by vBSEO 3.6.0 RC 2