خلاصه نویسی دستورات 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;
}

 

5- transition –

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

 

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

 

 

ممکن است شما دوست داشته باشید
ارسال یک پاسخ

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

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.