رفتن به مطلب
جامعهٔ برنامه‌نویسان ایران

پست های پیشنهاد شده

در این آموزش به شما آموزش میدم که چه طور بتونیدازپلاگینEmmetدرhtmlوCssاستفاده کنید

پلاگین Emmetچیست؟

 

پلاگین Emmet روش نوشتاری است که به شما کمک می کنه تا سرعت تگ نویسی (کد نویسی)htmlوخصوصیت نویسیCss  بیشتر بشه و کار برای دیزاین سایت راحت تر بشه وحرفه ای به نظر برسید.

نکته:شما باید ادیتوری نصب کنید که پلاگین Emmetرا در خود داشته باشه یا اگر هم نداشته باشه بشه بهش اضافه کرد.

من در این آموزش از ادیتورBrackets استفاده میکنم.

نکته:شما باید ادیتوری نصب کنید که پلاگین Emmetرا در خود داشته باشه یا اگر هم نداشته باشه بشه بهش اضافه کرد.

من در این آموزش از ادیتورBrackets استفاده میکنم.

روش نصب پلاگینEmmetدر Brackets 

نرم افزارBracketsدانلود و نصب کنیدسپس نرم افزار رابازمیکنید باروش زیر پلاگینEmmet رادرخودBracketsنصب میکنید

Extension Manager>Search>Emmetدر آخرinstall

قسمت اول Html 

ساختار نویسی Html با استفاده از پلاگینEmmet

!+Tab

خروجی کد بعد ازفشاردادن دکمهTab

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
     
</body>
</html>

ما تونستیم توسط پلاگین Emmetچهارچوب htmlرو بنویسم با کمترین زمان ممکن

 

شروع یادگیری short cut نویسی 

من میخوام یک divداشته باشم که یک ulزیر مجموعه داشته باشه و ul هم 4 تا زیر مجموعه Liداشته باشه ودرLiهامtextبه نام menuداشته باشه

 

div>ul>li{menu}*4 + Tab

خروجی کد بعد ازفشاردادن دکمهTab

<div>
         <ul>
             <li>menu</li>
             <li>menu</li>
             <li>menu</li>
             <li>menu</li>
         </ul>
     </div>

خوب همون طور که متوجه شدین

علامت بزرگتر(<)برای نشان دادن زیرمجموعه

درکرلی براکتس({}) Textمی نویسم

(*)به عنوان تعداد تگ هایی که میخواهیم استفاده کنیم

   

خوب یه زمانی هست ما نیاز به کلاس و ایدی داریم خیلی ساده من به تگ بالا با استفاده ازپلاگین Emmet کلاس و ایدی میدم  

من میخوام یک divداشته باشم کلاسmainکه یکulزیرمجموعه داشته باشه با ایدیul_textوulهم 4تا زیرمجموعهLiداشته باشه و هرکدام ازLiهای یک تگAداشته باشن و درAها هم textبه نامmenuداشته باشه

 

div.main>ul#ul_text>li*4>a{menu} +Tab

 خروجی کد بعد ازفشاردادن دکمهTab

<div class="main">
         <ul id="ul_text">
             <li><a href="">menu</a></li>
             <li><a href="">menu</a></li>
             <li><a href="">menu</a></li>
             <li><a href="">menu</a></li>
         </ul>
</div>

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

input[type=text][name=username][value=txxxt][titel=btn] +Tab

خروجی کد بعد ازفشاردادن دکمهTab

<input type="text" name="username" value="txxxt" titel="btn">

ما در این جا یاد گرفتیم چه طوری از پلاگین EmmetدرHtmlاستفاده کنیم

قسمت دوم CSS 

خصوصیت نویسی CSSدر پلاگینEmmet

شروع یادگیری short cut

پلاگین Emmetدر CSSساده تر است شما فقط باید حروف اول کلمات خصوصیت CSSرو بلد باشیدمخفف آن را بنویسید

مثال:من میخوام بگراند پروژم را رنگ آن را تغییر بدم

bgc+Tab

خروجی کد بعد ازفشاردادن دکمهTab

 background-color: #fff;

مثال دیگر

btlr+Tab

خروجی کد بعد ازفشاردادن دکمهTab

border-top-left-radius:35px;

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

 

ویرایش شده در توسط axarbani
راست به چپ چپ به راست که برطرف شد

به اشتراک گذاری این ارسال


لینک به ارسال
به اشتراک گذاری در سایت های دیگر

به گفتگو ملحق شوید

شما همین الآن می‌توانید مطلبی را ارسال و بعداً ثبت‌نام کنید. اگر حساب کاربری دارید، و با حساب کاربری خود مطلب ارسال کنید.
نکته: مطلب شما قبل از انتشار نیاز به بازبینی توسط میانجی‌گر‌ها دارد.

مهمان
ارسال پاسخ به این موضوع ...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از ۷۵ اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به عنوان یک لینک به جای

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.


  • کاربران آنلاین در این صفحه   0 کاربر

    هیچ کاربر عضوی،در حال مشاهده این صفحه نیست.

×
×
  • جدید...