• illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید تا کنون 6255 نفر در 14 دوره آموزشی سون لرن ثبت نام کرده اند !

سرعت در کدنویسی HTML و CSS ، بخش دوم: کار با پلاگین Emmet

8613 ۱۹ دی ۹۲

بنام یگانه هستی بخش. سلام.باز هم در خدمتتون هستم با بخش دوم سرعت در کد نویسی.ابتدا مروری بر بخش گذشته میکنیم. در بخش گذشته در ابتدا ادیتور Sublime Text رو معرفی کردم و گفتم از اینجا میتونید اون رو دانلود کنید. سپس پلاگین Emmet رو بهتون معرفی کردم و گفتم Emmet رو از اینجا دانلود و نصب کنید. بعد هم به توضیح اختصارات HTML پرداختم.در این بخش هم به اختصارات پلاگین Emmet در CSS میپردازم. emmet

Emmet چیست؟

Emmet مجموعه ای از اختصارات HTML / CSS / XML هست که میتوانیم به وسیله ی اون به جای نوشتن چند خط کد طولانی ، فقط یک خط کد بنویسیم.

چرا با Emmet کار کنیم؟

کار کردن با Emmet به کد نویسی سرعت می بخشد.و تنها این جزئی از فایده های این پلاگین است.همچنین کار کردن با این پلاگین لذت بخش است و یادگیری کدهارا آسان تر میکند و مثلا شما نیاز ندارید کد های بلندی مثل Doctype اچ تی ام ال 4 و یا XHTML رو حفظ کنید.

اختصارات CSS

خواص (properties)

توسط CSS به خواص المنت ها ، مقدار(value) هایی میدهیم. مانند اندازه فونت ، رنگ فونت ، رنگ پس زمینه ، اندازه ی المنت و ... . css-best-property-value Emmet هر خاصیت شناخته شده ی CSS را به صورت مخفف تعریف کرده است.مثلا مخفف font-size را به صورت fz تعریف کرده است.

یادآوری : میدونید که باید بعد از هر اختصاری که تایپ کردید ، بعد از اون بدون گذاشتن فاصله ، دکمه ی tab رو بزنید.
emmet-css-property

مقدار ها (values)

حالا که فهمیدیم چطور باید خاصیت هارو بنویسیم نوبت اینه که بدونم چطور باید به اونا مقداری رو بدیم. برای مثال با نوشتن fz18 ، خروجی شما font-size:18px خواهد بود.دقت داشته باشید برای مقدار دهی نمی خواهد که بعد از اعداد px رو اضافه کنید.زیرا Emmet به طور پیشفرض به مقدار های عددی ، واحد پیکسل رو میده. emmet-css-value

واحد ها

اگر شما همیشه از پیکسل استفاده نمیکنید و از واحد هایی مثل  درصد و یا em میکنید میتوانید به راحتی باگذاشتن یک حرف بعد از مقدار، اون واحد رو در خروجی داشته باشید.

px → پیشفرض

em → e

% → p

emmet-css-unit

مقدار های چندگانه

برخی از خواص ها مانند margin ، چندین مقدار میگیرد.مثلا به جای نوشتن:

 

ما در سی اس اس ، آنرا به صورت مختصر مینویسیم.به این صورت:

 

حال سوال اینجاست که باید چگونه این نوع مقدار دهی را به روش Emmet بنویسیم؟بسیار آسان است.میتوانید با "-" آنهارا از هم جدا کنید.به تصویر توجه کنید.

emmet-css-multiple-units

رنگ ها

برای تعیین رنگ های هگزادسیمال،میتونید بعد از گذاشتن یک مربع(#) ، کد هگزادسیمال مورد نظر رو بنویسید.emmet-css-colors

!important

با آنکه برجسب های !important اغلب استفاده نمیشوند ولی باز هم Emmet آن هارا ارائه داده است.میتوانید با گذاشتن یک علامت تعجب و زدن دکمه ی Tab ، برجسب !important را در خروجی داشته باشید. emmet-css-important

خواص چندگانه

حالا که فهمیدیم چطور باید خواص و مقدار ها را با Emmet تعریف کنیم وقت آن رسیده که بدانیم چطور میتوانیم خواص های چندگانه ای داشته باشیم.اگر یادتون باشه در قسمت اختصارات HTML ، برای اضافه کردن یک آیتم از + استفاده میکردیم.در CSS هم تقریبا به همون صورت انجام میشه و میتونید خواص هارو با + از هم جدا کنید. emmet-css-multiple-properties

پشتیبانی از مرورگر ها

یکی از اختصارات بسیار مفید و کاربردی Emmet ، پشتیبانی از مروگر هاست.مثلا برای تعریف یک transform که برای مروگرهای کروم،موزیلا،اپرا و اکسپلورر کار کند باید کدی به شکل زیر مینوشتید:

ولی با استفاده از Emmet ، میتوانید حرف اول پیشوند هر مرورگر را در داخل دو "-" قرار دهید.به تصویر توجه کنید.

10 البته ناگفته نماند که Emmet ،خاصیت هایی چون border-radius ,box-shadow, transition , transform و ... که نیاز به نوشتن پیشوند هر مرورگر داره رو به صورت پیشفرض برای همه ی مروگر ها تعریف میکنه. اختصار پیشوند ها به صورت زیر است:

webkit → w

moz → m

o → o

ms → s

مثالی از استایل دهی به صورت چندگانه و جداگانه

به یاد داشته باشید که شما میتوانید تمام این اختصارات را به صورت چندگانه یا جداگانه بنویسید.به تصویر زیر که در آن به یک div ، خاصیت هایی را به صورت چندگانه و جداگانه داده ایم نگاه کنید. emmet-css-example خب حالا روش استفاده از پلاگین Emmet رو به صورت کامل فرا گرفتید.در آخر هم تمام اختصارات HTML / CSS / XML رو در قالب یک صفحه ی HTML قرار میدم. بعد از دانلود و باز کردن فایل index.htm ، ابتدا نگاهی اجمالی بر همه ی صفحه بندازید و بعد هروقت که کد نویسی میکردید و می خواستید بدونید مثلا برای تعریف یک دکمه ارسال (submit button) در html چه اختصاری رو بنویسید؛ این صفحه رو باز کنید و سپس Ctrl+F رو بزنید و input رو سرچ کنید ... . به همین راحتی.

از کد نویسی لذت ببرید. در پناه حق باشید ؛ یا علی

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها 21 دیدگاه برای این مطلب ارسال شده است. نظردهی برای این مطلب بسته شده است .

  • ‏‏
    حسین محمدی(۱۹ دی ۱۳۹۲)

    سلام آقای امینی
    این سری آموزشی خیلی برام جالب و کاربردی بود….خیلی ممنون.. 😛

  • ‏‏
    ماهان(۱۹ دی ۱۳۹۲)

    این اممت چیز جالیه.کجا باید ازش استفاده کرد؟ادیتوره؟چیه؟

    • ‏‏
      لقمان آوند(۱۹ دی ۱۳۹۲)

      یک add-on هست که میشه در ادیتورهای دیگه مثل sublime و notepad++ نصب و ازش استفاده کرد .

  • ‏‏
    ماهان(۱۹ دی ۱۳۹۲)

    برای notepad++ چطور میتونم نصبش کنم؟

  • ‏‏
    ماهان(۱۹ دی ۱۳۹۲)

    فهمیدم.تشکر.

  • ‏‏
    ماهان(۱۹ دی ۱۳۹۲)

    نحوه کار با این پلاگین رو بی زحمت رو notepad++ توضیح بدید.
    تشکر

    • ‏‏
      لقمان آوند(۱۹ دی ۱۳۹۲)

      نحوه ی کارش با اینی که در پست گفته شده یکیه . توی notepad++ از منوی plugins گزینه ی plugin manager و show plugin manager رو بزن . از لیست پلاگین ها emmet رو تیک بزن و install بزن . فقط بعد از نوشتن اختصارات باید ctrl+alt+enter رو بزنی تا تبدیل به کدهای html رو انجام بده .

      • ‏‏
        ماهان(۲۳ دی ۱۳۹۲)

        تست کردم اما نشد….کد رو میبره خط بعدی و نشانک رو میبره خط بالای خطی که روش بودیم.

        • ‏‏
          لقمان آوند(۲۳ دی ۱۳۹۲)

          ببینید Emmet رو به درستی نصب کردید ؟ در منوی plugins گزینه ی Emmet وجود داره یا نه ؟

      • ‏‏
        ماهان(۲۴ دی ۱۳۹۲)

        بله.به درستی نصب شده و قرار داده شده.
        وقتی کد مختصر رو مینویسم و از منوی پلاگین Emmet میزنم کد رو کامل میکنه ولی با کلید ترکیبی این کار رو انجام نمیده.

        • ‏‏
          لقمان آوند(۲۴ دی ۱۳۹۲)

          کلید همون ctrl+alt+Enter هست و نباید مشکلی داشته باشه !

        • ‏‏
          علی امینی(۲۴ دی ۱۳۹۲)

          اینطور که گفتید باید درست کار کنه.فقط یه نکته:وقتی اخصار HTML نوشتی باید زبان ادیتور(پایین سمت راست ادیتور ST) ،اچ تی ام ال باشه و بعد TAB رو بزنی و یا وقتی اخصار CSS مینویسی ،یا باید تو تگ بنویسی و یا داخل یه فایل CSS بنویسی و باید دقت داشته باشی زبان ادیتور CSS باشه.

        • ‏‏
          علی امینی(۲۴ دی ۱۳۹۲)

          منظورم تو تگ Style بود

        • ‏‏
          ماهان(۲۴ دی ۱۳۹۲)

          والا نشد.وقتی از منوی پلاگین گزینه expand abbervation رو میزنم درسته کار میکنه ولی با کلید ترکیبی کار نمیکنه.

        • ‏‏
          ماهان(۲۴ دی ۱۳۹۲)

          خوب اوکی شد..به کمک خانم کلانتری از قسمت setting>Shortcode Mapper کلید ترکیبی ctrl+alt+enter رو به tab تغییر دادیم.اوکی شد.

        • ‏‏
          لقمان آوند(۲۴ دی ۱۳۹۲)

          بسیار خوب …
          موفق باشی

  • ‏‏
    مهشاد کلانتری(۱۹ دی ۱۳۹۲)

    خوب بود

  • ‏‏
    Paria RVN(۲۱ دی ۱۳۹۲)

    جالب بود،ممنون.

  • ‏‏
    Shady Rad(۲۶ تیر ۱۳۹۳)

    خدا خیرت بده خیلی جالبه این بخش 😆

  • ‏‏

    با یکی از شورت کاتها تداخل داره همونطور که دوستمون برات توضیح دادن باید از تنظیمات شورت کات تنظیم کنی.

  • ‏‏

    ضمنا اگر مشکلی داشت کسی میتونید از ادیتور رایگان brackets استفاده کنید.این ادیتور بصورت زنده میتونه نتیجه کا رو هم نمایش بده.خیلی سریع و کار جالبی از ادوبی است.بعداز نصب راحت و بی دردسر باید از گزینه file–extension manager افزونه emmet رو از قسمت available تیک و نصب نمایید.به همین راحتی.یک فایل اچ تی ام ال بسازید و ذخیره کنید و بعدا با نوشتن html:5 وزدن دکمه تب خواهید دید که براحتی داکیومنت های اچ-5 رو میسازه و بعد بوسیله همین آموزش بالا ودستورالعمل ها کار کنید.برای دانلود براکت از لینک زیر استفاده کنید:
    brackets.io
    برای مشاهده لیست دستورات امیت به سایتش بردی داکیومنتهای گستردش رو مشاهده کنید.

  • ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

    :: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
    برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
    عضویت/ ورود سریع با :
    در حال اتصال ...

    ورود به سایت

    ورود سریع با :
    در حال اتصال ...

    جستجو در سون لرن

    عبارت :
    7LearnTelegram