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: ;

 

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

 

 

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

دسته بندی‌ها: htm - CSS,آموزش

برچسب‌ها : <<,>>

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