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

بوسیله میثم همتی به روز رسانی شده در اردیبهشت 4, 1400

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

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