خلاصه نویسی دستورات css , html به کمک sublime Text

0
  • css-code-sample-printed

    طبق اموزش جلسه قبل ابتدا باید افزونه Emmet را در ادیتور sublime نصب کنیم سپس از دستورات زیر استفاده کنید :

    برای آشنایی با دستورات Emmet به صفحه زیر مراجعه کنید :

    http://docs.emmet.io/cheat-sheet

    کلا با کلید Tab کار داریم کافی است بعد هر یک از دستورات زیر Tab بزنیم :

     تعدادی از دستورات معروف HTML را با هم مرور میکنیم :

    1- Div#top

    خروجی :

    <div id="top"></div>

     

    2- p.class1.class2.class3

    <p class="class1 class2 class3"></p>

     

    3- html:5

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Document</title>
    </head>
    <body>
      
    </body>
    </html>

    4-  p>lorem10

    دستور lorem برای ایجاد  کلمه دلخواه است

    در کد فوق به اندازه 10 کلمه ایجاد میشود

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat, dolore.</p>

    5- Ul>li*8

    <Ul>
              <li></li>
              <li></li>
              <li></li>
              <li></li>
              <li></li>
              <li></li>
              <li></li>
              <li></li>
    </Ul>
    

     

     تعدادی از دستورات معروف CSS را با هم مرور میکنیم :

    1- +Bg

    background: #fff url() 0 0 no-repeat;

     

    2- +bd

    border: 1px solid #000;

    3- @

    @import url();

     

    4- +f@

    @font-face {
              font-family: 'FontName';
              src: url('FileName.eot');
              src: url('FileName.eot?#iefix') format('embedded-opentype'),
                        url('FileName.woff') format('woff'),
                        url('FileName.ttf') format('truetype'),
                        url('FileName.svg#FontName') format('svg');
              font-style: normal;
              font-weight: normal;
    }
    

     

    همچنین ببینید:
    GreatNews برنامه ای قوی برای خواندن و مدیریت فید ها

    5- transition –

    -webkit-transition: ;
              -moz-transition: ;
              -ms-transition: ;
              -o-transition: ;
              transition: ;
    

     

    برای دیدن بقیه دستورات به اینجا مراجعه کنید

     

     

    میانگین امتیازات ۵ از ۵
    از مجموع ۱ رای
    ممکن است شما دوست داشته باشید
    ارسال یک پاسخ

    آدرس ایمیل شما منتشر نخواهد شد.

    این سایت توسط reCAPTCHA و گوگل محافظت می‌شود حریم خصوصی و شرایط استفاده از خدمات اعمال.

    The reCAPTCHA verification period has expired. Please reload the page.