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

طبق اموزش جلسه قبل ابتدا باید افزونه 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;
}

5- transition –

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

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

بیشتر ببینید:

تحول در یادگیری با ‌anki

یادداشت های میثم همتی

وب نوشته هایی با موضوع فناوری اطلاعات و زندگی

آموزش رایگان ساخت کاور های زیبای اینستاگرام + آموزش رایگان ربات نینجاگرام

دیدگاه خود را بنوبسید

Follow یادداشت های میثم همتی با موضوع IT و زندگی