گیفت کارت آیتونز
نمایش نتایج: از 1 به 8 از 8

موضوع: آموزش خلاصه نویسی css (تمام خاصیت های کاربری) + (اختصاصی وی بی ایران)

  1. Top | #1
    کاربر سایت

    تاریخ عضویت
    Aug 2013
    ورژن ویبولتین
    4.2
    نوشته ها
    591
    مورد پسند
    777 بار
    اطلاعات
    Windows 7/Server 2008 R2 Chrome 28.0.1500.95
    میزان امتیاز
    80

    پیش فرض آموزش خلاصه نویسی css (تمام خاصیت های کاربری) + (اختصاصی وی بی ایران)

    درود.
    خب در این آموزش خواستم با مبحث خلاصه نویسی آشناتون بکنم ، خیلی خیلی ساده هست ! و انجام دادن و ندادنشم زیاد تفاوتی نداره ! اما سرعت شما رو در کد نویسی 2 برابر می کنه ! و زیبا تره !
    من تمام خاصیت های کاربری رو می نویسم اگر چیزی از قلم افتاده به بزرگی خودتون ببخشیدم

    1- استفاده از اسپرایت ! :
    تا به حال دیدید که یک تصویر طراحان استایل می سازن و فرضا 20 تا آیکون توشه ! لوگو توشه ، و خیلی عکس دیگه ! خب معمولا کسی که خلاصه نویسی نکنه اینطوری می نویسه :
    کد:
    background: url(img.png);
    background-position: 20px 30px;
    خب ببینیم الان با خلاصه نویسی چی میشه !
    کد:
    background: url(img.png) 20px 30px;
    چقدر سرعت بخشیدیم به کار !
    2-مارجین (margin) :
    خیلی سادست ! یک کد نویس ، می خوای به بالا 10 بده ، به پایین 20 بده ، به راست 30 بده ، به چپ 40 بده ! (حالا چراشو نمی دونم )
    میاد اینطوری می نویسه :
    کد:
    margin-top: 10px;
    margin-bottom: 20px;
    margin-right: 30px;
    margin-left: 40px;
    من که حوصله سر رفت اینا رو تایپ کردم ، شما چطور ؟ ! پس بیاید خلاصش بکنیم :
    کد:
    margin: 10px 30px 20px 40px;
    چقدر ساده بود ! اما اینجا یه نکته داریم ! اگر بخوایم به بالا و پایین 20 بدیم و به راست و چپ 30 بدیم چی میشه ؟ یعنی باید 4 تا پیکسل نوشت و ... !!!! جواب : نچ ! اینطوری میشه :
    کد:
    margin: 20px 30px;
    چقدر راحت بود !
    3- border :
    همشون یه جورن در واقع ! اگر شما مفهوم رو متوجه شده باشید دیگه بقیش عین همن !
    یک کد نویس ، می خوات بیاد به بالا ، پایین ، راست ، چپ یک خط 1 پیکسل بکشه ! میاد اینطوری می نویسه اگر خلاصه نویسی نکنه :
    کد:
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    border-right: 1px solid #000;
    border-left: 1px solid #000;
    اوه اوه ! اوضاع خرابه بیاید خلاصش بکنید کد نویسه تعجب بکنه بگه من 1 ساعته دارم تایپ می کنم اینا توی 3 ثانیه نوشتن !
    کد:
    border: 1px solid #000;
    چقدر سرعت بخشید به کار ؟ !!!! به نظر بنده که خیلی عالی بود !
    4- را#### (radius)
    یه توضیح کوچولو می دم ! را#### (radius) زیر مجموعه ای از border هست (صرفا جهت اطلاعات عمومی )
    یه آقایی می خوات به بالا-راست ، بالا-جپ ، پایین-راست ، پایین-چپ به اندازه 10px براش تعیین بکنه ! صرفا جهت اطلاع : را#### کارش گرد کردن هست :
    کد:
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    این دیگه واقعا خسته کننده بود ! حالا خلاصش می کنیم :
    کد:
    border-radius: 10px;
    الان واقعا من دارم به خودم می خندم که چقدر تایپ کردم ! ولی الان در عرض 3 ثانیه تونستم همه جهت ها رو به میزان 10 پیکسل گرد بکنم !
    اینجا هم مثل margin یک نکته داریم !
    اگر بخوایم فرضا ! بالا سمت چپ و پایین سمت راست رو به میزبان 30 پیکسل گرد بکنیم و بالا سمت راست و پایین سمت چپ را به می زان 10 پیکسل گرد بکنیم چطوریه ؟
    کد:
    border-radius: 30px 10px;
    یک حالت دیگه هم داریم که در margin توضیح دادم ! حالا اینجا هم می دم !
    اگر بخوایم بالا سمت چپ رو به میزبان 10 پیکسل و بالا سمت راست رو به میزبان 20 پیکسل و پایین سمت راست رو به میزبان 30 پیکسل و پایین سمت چپ رو به میزبان 40 پیکسل گرد بکنیم چی میشه ؟ (چی گفتم اصن )
    کد:
    border-radius: 10px 20px 30px 40px;
    خیلی راحت بود ! بریم خاصیت کاربردی بعدی !
    5- padding :
    خب برای padding یه مسئله طرح بکنیم !
    اگر بخوایم بالا 10 پیکسل ، پایین 20 پیکسل ، سمت راست 30 پیکسل ، و سمت چپ 40 پیکسل بدیم باید چی کار بکنیم ؟
    کد:
    padding-top: 10px;
    padding-bottom: 20px;
    padding-right: 30px;
    padding-left: 40px;
    یکمی طول کشید اما شدنی بود خب خلاصه نویسی :
    کد:
    padding: 10px 30px 20px 40px;
    چقدر ساده بود !
    بریم خاصیت کاربردی بعدی
    6- فونت !
    خب دیگه از اون حالت ها اومدیم بیرون و رسیدیم به فونت !
    یه آقایی می خوات فونت بی یکان بده ، با سایز 13 پیکسل میاد میگه :
    کد:
    font-family: b yekna;
    font-size: 13px;
    حالا ببینید با خلاصه نویسی چقدر شیک تره !
    font: 13px byekan;
    خیلی هم خوب و شیک
    خب به نظر من تمام خاصیت های کاربری رو گفتم ، اگر بخوام همرو بگم 100% و قطع یقین دارم که گیچ می شدید ! من خودم در طول کارم از همین خاصیت ها استفاده می کنم و هیچ مشکلی هم نداشتم
    البته یه نکته ای رو لازمه که بگم ! فرضا من خودم برام پیش اومده خواستم مارجین بالا یه 10 پیکسل بدم ، خب اینطوری هست دیگه :
    کد:
    margin-top: 10px;
    دیگه نیازی نیست بنویسم مارجین : 10px 0 0 0
    خوردیم به یک نکته ! چرا من به جای اینکه بنویسم 0px نوشتم 0 ! اینم یه نکته نسبتا ریز در خلاصه نویسی هست که به جای 0px می تونید از 0 استفاده بکنید
    فکر می کنم کامل کامل توضیح دادم ، سعی کردم در وسط کار یک شوخی کوچیک هم بکنم چون برای بیننده می تونه این همه کد خسته کننده باشه !
    امیدوارم تونسته باشم رضایت شما رو جلب بکنم




  2. گیفت کارت آیتونز

  3. Top | #2
    Cry
    کاربر سایت

    تاریخ عضویت
    Apr 2013
    ورژن ویبولتین
    4.2.0
    نوشته ها
    2,661
    مورد پسند
    2,624 بار
    اطلاعات
    Windows 8 Chrome 28.0.1500.95
    میزان امتیاز
    325

    پیش فرض

    سلام . عالی ـه فقط قسمت بعدی هم داره این آموزش ؟

    در مورد ست کردن بعضی جاها ( استایل ) با هسته مرورگرهایی مثل فایرفاکس - گوگل کروم - سافاری و ...

    خلاصه آموزشی باشه میزنیم تو رگ .

    موفق باشید .

    کاربر مقابل از Cry بابت این پست مفید تشکر کرده است:


    . General Thread Of Wallpapers ... Click Here

  4. Top | #3
    کاربر سایت

    تاریخ عضویت
    Sep 2012
    ورژن ویبولتین
    5
    سن
    24
    نوشته ها
    1,305
    مورد پسند
    204 بار
    نوشته های وبلاگ
    7
    اطلاعات
    Windows 8 Chrome 28.0.1500.95
    میزان امتیاز
    141

    پیش فرض

    ممنون عزیز ادامه بده برای ست کردن مروگر هم کافی هستش به اول خاصیت ها این کلمه های زیر رو اضافه کنید:

    کد:
    -moz-
    -o-
    -webkit-
    -ms-
    مثالا به این صورت:

    کد:
    -moz-box-shadow: 4px 4px 3px inset;-webkit-box-shadow: 4px 4px 3px inset;
    -o-box-shadow: 4px 4px 3px inset;
    -ms-box-shadow: 4px 4px 3px inset;

    کاربر مقابل از imaniy بابت این پست مفید تشکر کرده است:


  5. Top | #4
    کاربر سایت

    تاریخ عضویت
    Aug 2013
    ورژن ویبولتین
    4.2
    نوشته ها
    591
    مورد پسند
    777 بار
    اطلاعات
    Windows 7/Server 2008 R2 Chrome 28.0.1500.95
    میزان امتیاز
    80

    پیش فرض

    درود.
    اگر منظور از ست کردن اینه که فرضا گراندیت ها در همه مروگر ها نمایش داده بشه جناب لوکال درست توضیح دادن
    اما اگر منظورتون اینه که در کروم اصن استایل یه چیزه ولی در فایر فاکس یه چیز دیگه این بر می گرده به اصولی کد نویسی نشدن استایل ! و چیزی نیست که این بنده حقیر بخوات آموزششو بده !

    4 تشکر توسط:


  6. Top | #5
    کاربر سایت

    تاریخ عضویت
    Sep 2012
    ورژن ویبولتین
    5
    سن
    24
    نوشته ها
    1,305
    مورد پسند
    204 بار
    نوشته های وبلاگ
    7
    اطلاعات
    Windows 8 Chrome 28.0.1500.95
    میزان امتیاز
    141

    پیش فرض

    عزیز اگه میشه اموزش فوق تخصصی emmet رو هم بزار ئوستان حال کنن.

  7. Top | #6
    کاربر اخراجی

    تاریخ عضویت
    Jun 2012
    ورژن ویبولتین
    All Versions
    نوشته ها
    3,123
    مورد پسند
    2,534 بار
    اطلاعات
    Windows 7/Server 2008 R2 Chrome 29.0.1547.62
    میزان امتیاز
    0

    پیش فرض

    درود
    فیلم های آموزشی رو نگاه نکنید دوستان چرا که هچ تاثیری در پیشرفت شما نخواهد داشت.
    باید با استفاده از آموزش های متنی پیش برید اگه می خواید پیشرفت کنید.

  8. Top | #7
    کاربر اخراجی

    تاریخ عضویت
    Jan 2014
    ورژن ویبولتین
    3.0
    نوشته ها
    27
    مورد پسند
    2 بار
    اطلاعات
    Windows 7/Server 2008 R2 Chrome 32.0.1700.76
    میزان امتیاز
    0

    پیش فرض

    من هیجی متوجه نشدم ممنون میشم توضیح بیشترب بدید

  9. Top | #8
    مدیر بازنشته

    تاریخ عضویت
    Dec 2011
    ورژن ویبولتین
    4.2.0
    نوشته ها
    2,420
    مورد پسند
    2,871 بار
    اطلاعات
    Windows 7/Server 2008 R2 Firefox 26.0
    میزان امتیاز
    305

    پیش فرض

    نقل قول نوشته اصلی توسط tarenoco نمایش پست ها
    من هیجی متوجه نشدم ممنون میشم توضیح بیشترب بدید
    درود
    شما برای فهمیدن این آموزش باید کمی با css اشنایی داشته باشید
    این اموزش خلاصه نویسی در css رو آموزش داده که به جای اینکه css رو در چند خط بنویسیم میام از خلاصه نویسی استفاده میکنیم و اون چند خط رو تبدیل میکنیم به 1 خط که هم سبک تر هست هم اصولی تر
    موفق باشید./

    کاربر مقابل از ForGraphic بابت این پست مفید تشکر کرده است:


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

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

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

موضوعات مشابه

  1. پاسخ: 185
    آخرين نوشته: 2018/06/12, 11:23 PM
  2. آوتار های شخصیت های کارتونی [اختصاصی وی بی ایران]
    توسط [email protected] در انجمن پک آواتار های وی بولتین
    پاسخ: 1
    آخرين نوشته: 2013/04/25, 03:36 PM
  3. پاسخ: 0
    آخرين نوشته: 2012/10/14, 04:49 PM
  4. پاسخ: 0
    آخرين نوشته: 2012/10/13, 09:39 PM

علاقه مندی ها (Bookmarks)

علاقه مندی ها (Bookmarks)

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

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