خلاصه نویسی دستورات 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: ;
برای دیدن بقیه دستورات به اینجا مراجعه کنید