عضویت العربیة English
امام حسین علیه السلام: چشمان هر کس که در مصیبت‌هاى ما قطره‌اى اشک بریزد، خداوند او را در بهشت جاى مى‌دهد. احقاق الحق، ج 5، ص523

آموزش جامع CSS (سی اس اس)

 
hosseinb68
hosseinb68
کاربر طلایی1
تاریخ عضویت : بهمن 1389 
تعداد پست ها : 1269
محل سکونت : بوشهر

آموزش جامع CSS (سی اس اس)
یک شنبه 26 مرداد 1393  11:47 ق.ظ

آموزش Css (آموزش سی اس اس) اصلی ترین بخش برای زیبا کردن سایت است.

سی اس اس

تقریباً همه کسانی که صاحب تجارتخانه های کوچک و بزرگ می باشندبایستی دارای طراحی وب سایت باشند.دانش عمومی طراحی وب سایت با یادگیری پایه ای HTML و CSS باعث می شود  وب سایت خود را با آخرین تکنولوژیهای طراحی وب سایت بسازید.

Css (سی اس اس) به عبارت ساده برای زیبایی صفحات وب در طراحی سایت می باشد.

آموزش درست سی اس اس و یادگیری حرفه ای آن، می تواند فرق اصلی بین طراح سایت مبتدی و حرفه ای قالب های سایت باشد. مقالات Css ما بصورت کاملا حرفه ای به مقوله پرداخته اند. آموزش سی اس اس بسیار ساده می باشد و دستورات آن محدود می باشند ولی نوع استفاده از آن و هماهنگی آن با اچ تی ام ال و نیز رعایت نکات آن است که Css را پیچیده کرده است.

آموزش cssنکته ی مهم اینکه بدون استفاده از سی اس اس نیز میتوان صفحات وب را قالب دهی نمود (توسط جدول ها)، ولی سی اس اس مزایایی دارد که این روش را منسوخ کرده است. 

از مهمترین مزایای Css میتوان به انعطاف پذیری بالای css ، کاهش استفاده از پهنای باند شبکه، کم حجم کردن فایل html ، هماهنگی راحت تر نمایش ظاهر سایت در مرورگر های مختلف و ... می باشد.

تمرین زیاد و آموزش کامل سی اس اس، شما را می تواند در استفاده از دستورات Css حرفه ای کند. کدهای سی اس اس بصورت متنی می باشند و تنها نرم افزار مورد نیاز برای آن NotePad ویندوز می باشد. css مخفف Cascading Style Sheets به معنی الگو های آبشاری می باشد. پس از یادگیری این زبان میتوانید مفهوم این عبارت را متوجه شوید.

با استفاده از CSS میتوان تگ های html را به راحتی به استایل های مختلف در آورد. رنگ بندی و تعیین پس زمینه ، تعیین مکان و عرض و طول ، فرمت دهی font و ... همگی کارهایی است که با آموزش Css می توان به راحتی آنها را برای صفحات وب سایت هایمان انجام دهیم.

امیدواریم بخش آموزش سی اس اس برای شما مفید باشد.

 

مقدمات آموزش CSS

CSS چیست ؟

مزایای سی اس اس ( CSS )

طریقه نوشتن CSS - خاصیت Style تگ ها

طریقه نوشتن CSS - تگ Style در Head صفحه

طریقه نوشتن CSS - فایل خارجی در پروژه

اصول نوشتن کدهای CSS

 

 

آموزش خواص مقدماتی CSS

تنظیم طول و عرض ( Height , Width ) عناصر در CSS

تنظیم پس زمینه Background در CSS

تنظیم قلم و فونت CSS Styling Font

تنظیم متن و نوشته CSS Styling Text

تنظیم لیست ها CSS Styling List

تنظیم خواص باکس ها Border , Margin , Padding

 

 

آموزش خواص پیشرفته CSS

خواص مربوط به سرریزی Overflow عناصر در CSS

محل قرارگیری عناصر - خواص مربوط به Position

محل قرارگیری عناصر - خواص Clear , Float

خواص نمایش عناصر Cursor , Display , Visibility

تنظیم شفافیت عناصر Opacity

آموزش و معرفی انتخابگرها CSS Selectors

 

 

مرجع امکانات CSS

مرجع واحدهای شمارش در CSS

مرجع نام و شماره رنگ ها در CSS

مرجع انتخابگرها در CSS - بخش اول

مرجع انتخابگرها در CSS - بخش دوم

مرجع انتخابگرها در CSS - بخش سوم

 

تشکرات از این پست
nezarat_ravabet
SABOORI
SABOORI
کاربر طلایی1
تاریخ عضویت : دی 1393 
تعداد پست ها : 4218
محل سکونت : خراسان رضوی

پاسخ به:آموزش جامع CSS (سی اس اس)
سه شنبه 14 بهمن 1393  08:29 ب.ظ

سلام

من یه وبلاگ دارم بخش تبلیغات داره چه جوری اندازه و عکسشو و متنشو عوض کنم؟

لطفا مکانشو مشخص کنین در زیر

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Language" content="en-us">
<title><-BlogAndPostTitle-></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="designer" content="Theme - Designer">
<meta name="designerUrl" content="http://www.theme-designer.com/">
<meta name="language" content="Farsi">
<meta name="author" content="<-BlogAuthor->">
<meta name="description" content="<-BlogAndPostTitle-> - <-BlogDescription->">
<meta name="keywords" content="<-BlogAndPostTitle->,<-BlogId->, Blog, Weblog, Persian,Iran, Iranian, Farsi, Weblogs">
<link rel="alternate" type="application/rss+xml" title="<-BlogTitle->" href="<-BlogXmlLink->" />
<link href="http://themeupload.theme-designer.com/64/c.css" type="text/css" rel="stylesheet">
<script src="http://themeupload.theme-designer.com/64/js/jquery-1.4.3.min.js" type="text/javascript"></script>
<script src="http://themeupload.theme-designer.com/64/js/jquery.tools.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://themeupload.theme-designer.com/64/js/scrolltopcontrol.js"></script>
<script language="javascript" type="text/javascript">
        // execute your scripts when the DOM is ready. this is mostly a good habit
        $(function() {

            // initialize scrollable
        $(".scrollable").scrollable({ circular: true }).autoscroll({ interval: 4000 });

        });
</script>
<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['form1'];
if (!theForm) {
    theForm = document.form1;
}
function __doPostBack(eventTarget, eventArgument) {
    if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
        theForm.__EVENTTARGET.value = eventTarget;
        theForm.__EVENTARGUMENT.value = eventArgument;
        theForm.submit();
    }
}
//]]>
</script>
<script  language="javascript">
  function GetBC(lngPostid)
   {
       intTimeZone=<-BlogTimeZone->;
       strBlogId="<-BlogId->";
       intCount=-1;
       strResult="";
       try {
      for (i=0;i<BlogComments.length;i+=2)
      {
           if (BlogComments[i]==lngPostid)
           intCount=BlogComments[i+1] ;
      }
           }  catch( e) {
           }
    if ( intCount==-1)  strResult="نظر دهید";
    if ( intCount==0)  strResult="نظر بدهید";
    if ( intCount==1)  strResult="یک نظر";
    if ( intCount>1)  strResult=intCount + " نظر" ;
 
  strUrl="/comments/?blogid=" +strBlogId + "&postid=" + lngPostid + "&timezone=" + intTimeZone ;
  strResult ="<a href=\"javascript:void(0)\" onclick=\"javascript:window.open('" + strUrl + "','blogfa_comments','status=yes,scrollbars=yes,toolbar=no,menubar=no,location=no ,width=500px,height=500px')\" >" +  strResult + " </a>" ;

  document.write ( strResult ) ;
 }
 
function OpenLD()
{
  window.open('/links','blogfa_ld','status=yes,scrollbars=yes,toolbar=no,menubar=no,location=no ,width=500px,height=500px');
  return true;
}
</script>
</head>
<!-- template64-blogfa -->
<!-- Design By : wWw.Theme-Designer.Com -->

<body background="http://themeupload.theme-designer.com/64/image/1.jpg" >

<!---------- he ---------------------------->
<!---------- address-image --------->
<div style="
    background-image:url('http://s4.picofile.com/file/8168284850/12.jpgg');
    background-repeat:no-repeat; background-position:center top;" dir="rtl">    
<!---------- address-image --------->

<div align="center"><div class="theme-designer-com_block-koli"><div align="right">

<div align="center"><div class="theme-designer-com_makan_blogtitle"><div align="right">
<div class="theme-designer-com_blogtitle"><a href="<-BlogUrl->"><-BlogTitle-></a></div>
<div class="theme-designer-com_description"><-BlogDescription-></div>
</div></div></div>
<!---------- he ---------------------------->

<div align="center"><div class="theme-designer-com_menutop-background"><div align="right">
<ul id="alibehnamfar-ir" align="right">
        <li><a href="<-BlogUrl->" class="home" title="صفحه ي نخست"><div class="title-menu-top" style="padding:8px 25px 0px 0px;">صفحه ي نخست</div></a></li>
    <li><a href="mailto:<-BlogEmail->" class="email" title="پست الکترونیک"><div class="title-menu-top" style="padding:8px 5px 0px 0px;">پست الکترونیک</div></a></li>
    <li><a href="<-BlogArchiveLink->" class="archive" title="آرشیو مطالب"><div class="title-menu-top" style="padding:8px 0px 0px 25px;">آرشیو مطالب</div></a></li>
    <li><a target="_blank" target="_blank" href="/posts/" class="list-post" title="عناوين مطالب"><div class="title-menu-top" style="padding:8px 0px 0px 25px;">عناوين مطالب</div></a></li>
    <li><a href="<-BlogXmlLink->" class="rss" title="لينك rss" target="_blank"><div class="title-menu-top" style="padding:8px 0px 0px 25px;">لينك rss</div></a></li>
    <BlogProfileLinkBlock>
    <li><a href="<-BlogProfileLink->" class="profile" title="پروفایل مدیر" target="_blank"><div class="title-menu-top" style="padding:8px 0px 0px 25px;">پروفایل مدیر</div></a></li>
    </BlogProfileLinkBlock>
  </ul>
</div></div></div>

<!-- Date by www.Theme-Designer.com --->
<div class="theme-designer-com_makan_date"><div class="theme-designer-com_date-text"> [ <script type='text/javascript' language='javascript' src='http://www.theme-designer.com/s/history/?type=1'></script> ] </div></div>
<!-- Date by www.Theme-Designer.com --->

<div class="theme-designer-com_badane"><div class="theme-designer-com_badane2">

<div class="theme-designer-com_makan_search">
<div class="search">
<form method="Get" target="_blank" action="http://google.com/search" class=sch><input name="sitesearch" value="<-BlogUrl->" type="hidden">
<div style="height:34px; overflow:hidden; width:289px; overflow:hidden;">
<input type="submit" value="جستجو" class=but><input type="text" name="q" size="5" class=txt value="جستجو مطالب مورد نظر ..." onfocus="if (this.value == 'جستجو مطالب مورد نظر ...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'جستجو مطالب مورد نظر ...';}">
</div>
</form>
</div>
</div>

<!---------- slideshow ---------------------------->
<div class="theme-designer-com_makan_slideshow">
<div class="theme-designer-com_slideshow-background">

<div style="margin:0px 11px 0px 0px;">
<div class="scrollable">
<div class="items">
<!---------- address-image size:291-188 --------->
<div>
<a target='_parent' href="آدرس لینک عکس" title="تست"><img src="http://s4.picofile.com/6file/8168287750/05555161051359853866.jpg"></a>
</div>
<!---------- /address-image --------->
<!---------- address-image size:291-188 --------->
<div>
<a target='_parent' href="آدرس لینک عکس" title="تست"><img src="http://themeupload.theme-designer.com/64/image/slideshow/2.jpg"></a>
</div>
<!---------- /address-image --------->
<!---------- address-image size:291-188 --------->
<div>
<a target='_parent' href="آدرس لینک عکس" title="تست"><img src="http://themeupload.theme-designer.com/64/image/slideshow/3.jpg"></a>
</div>
<!---------- /address-image --------->
</div>
</div>
</div>

<div class="theme-designer-com_makan_slideshow-f-right"><a class="next browse right"><img border="0" src="http://themeupload.theme-designer.com/64/image/10.png"></a></div>
<div class="theme-designer-com_makan_slideshow-f-left"><a class="prev browse left"><img border="0" src="http://themeupload.theme-designer.com/64/image/9.png"></a></div>

</div>
</div>
<!---------- slideshow ---------------------------->

<table border="0" width="1003" cellspacing="0" cellpadding="0">
<tr>
<td width="12" valign="top">&nbsp;</td>
<td width="667" valign="top">
<div align="center">
<div class="theme-designer-com_post-space1"></div>

<BLOGFA>
<div class="theme-designer-com_post-back1" align="right">
<table border="0" width="100%" cellspacing="0" cellpadding="0" height="54">
<tr>
<td width="94" valign="top">&nbsp;</td>
<td width="450" valign="top"><div class="theme-designer-com_post-title"><a href="<-PostLink->"><-PostTitle-></a></div></td>
<td width="106" valign="top"><BlogComment><div class="theme-designer-com-post-comment" align="center"><script type="text/javascript">GetBC(<-PostId->);</script></div></BlogComment></td>
</tr>
</table>
</div>
<div class="theme-designer-com_post-back2" align="right">
<div align="center"><div class="theme-designer-com-post-text-badane"><div align="right">
<div class="theme-designer-com-post-text"><-PostContent-></div>
<BlogPostCategoriesBlock>
<div class="theme-designer-com_width100-darsad">
<div class="post-abi-icon"></div>
<div class="post-abi-icon2">موضوعات مرتبط: <BlogPostCategories separator="، " ><a href="<-CategoryLink->"><-CategoryName-></a></BlogPostCategories></div>
</div>
<div style="theme-designer-com_clear"></div>
</BlogPostCategoriesBlock>
<BlogPostTagsBlock>
<div class="theme-designer-com_width100-darsad" style="margin:4px 0px 0px 0px;">
<div class="post-abi-icon"></div>
<div class="post-abi-icon2">برچسب‌ها: <BlogPostTags separator=", "><a href="<-TagLink->"><-TagName-></a></BlogPostTags></div>
</div>
<div style="theme-designer-com_clear"></div>
</BlogPostTagsBlock>
</div></div></div>
</div>
<div class="theme-designer-com_post-back3" align="right">
<table border="0" width="100%" cellspacing="0" cellpadding="0" height="56">
<tr>
<td width="519" valign="top"><div class="theme-designer-com_post-d-t-a">
<-PostDate->
ساعت : <-PostTime->
|
نویسنده : <-PostAuthor->
</td></div>
<td width="131" valign="top">
<BlogExtendedPost>
<div id="theme-designer-com-post-more"><ul>
<li><a href="<-PostLink->" >ادامه مطلب</a></li>
</ul></div>
</BlogExtendedPost>
</td>
</tr>
</table>
</div>
<div class="theme-designer-com_post-space2"></div>
</BLOGFA>

<BlogNextAndPreviousBlock>
<div class="post-link">
<div style="width:100%">
<BlogPreviousPageBlock>
<div style="width:49%;float:right;text-align:center"><a href="<-BlogPreviousPageLink->">
<b> « مطالب جدیدتر </b></a></div>
</BlogPreviousPageBlock>
<BlogNextPageBlock>
<div style="width:49%;float:left;text-align:center"><a href="<-BlogNextPageLink->">
<b>مطالب قدیمی‌تر    » </b></a></div>
</BlogNextPageBlock>
</div>
<br><br><br>
</div>
</BlogNextAndPreviousBlock>

</div>
</td>
<td width="312" valign="top">

<div class="theme-designer-com_menuleft-space1"></div>
<!-- social -->
<div class="theme-designer-com_menuleft-block-icon-share">
<ul id="alibehnamfar-ir" align="right">
    <li><a target="_blank" href="<-BlogXmlLink->" class="rss-icon" title="لينك rss"><div class="hidden">لينك rss</div></a></li>
    <li><div class="theme-designer-com_menuleft-block-icon-share-khat"></div></li>
    <li><a target="_blank" href="http://plus.google.com" class="google-icon" title="google+" rel="nofollow" ><div class="hidden">google+</div></a></li>
    <li><div class="theme-designer-com_menuleft-block-icon-share-khat"></div></li>
    <li><a target="_blank" href="http://twitter.com" class="twitter-icon" title="twitter" rel="nofollow" ><div class="hidden">twitter</div></a></li>
    <li><div class="theme-designer-com_menuleft-block-icon-share-khat"></div></li>
    <li><a target="_blank" href="http://facebook.com" class="facebook-icon" title="facebook" rel="nofollow" ><div class="hidden">facebook</div></a></li>
</ul>
</div>
<!-- / social -->

<BlogPreviousItemsBlock>
<div class="theme-designer-com_menuleft-back-menutitle">
<div class="theme-designer-com_menuleft-menutitle">آخرین مطالب</div>
</div>
<div class="theme-designer-com_menuleft-block"><div id="vmenu-l" align="right">
  <ul>
    <BlogPreviousItems items="15" ><li><a  href="<-PostLink->" title="<-PostDate->" ><-PostTitle-></a></li></BlogPreviousItems>
  </ul>
</div></div>
<div class="theme-designer-com_menuleft-block-space"></div>
</BlogPreviousItemsBlock>

<BlogProfile>
<div class="theme-designer-com_menuleft-back-menutitle">
<div class="theme-designer-com_menuleft-menutitle">درباره ما</div>
</div>
<div align="center"><div class="theme-designer-com_menuleft-block-other"><div align="center">
<BlogPhoto><div align="center" style="padding:5px 0px 5px 0px;"><img src="<-BlogPhotoLink->"></div></BlogPhoto>
<-BlogAbout->
</div></div></div>
<div class="theme-designer-com_menuleft-block-space"></div>
</BlogProfile>

<BlogCategoriesBlock>
<div class="theme-designer-com_menuleft-back-menutitle">
<div class="theme-designer-com_menuleft-menutitle">موضوعات</div>
</div>
<div class="theme-designer-com_menuleft-block"><div id="vmenu" align="right">
  <ul>
    <BlogCategories><li><a  href="<-CategoryLink->" ><-CategoryName-></a></li></BlogCategories>
  </ul>
</div></div>
<div class="theme-designer-com_menuleft-block-space"></div>
</BlogCategoriesBlock>

<BlogLinksBlock>
<div class="theme-designer-com_menuleft-back-menutitle">
<div class="theme-designer-com_menuleft-menutitle">لینک دوستان</div>
</div>
<div class="theme-designer-com_menuleft-block"><div id="vmenu" align="right">
  <ul>
    <BlogLinks><li><a target="_blank"  href="<-LinkUrl->"><-LinkTitle-></a></li></BlogLinks>
  </ul>
</div></div>
<div class="theme-designer-com_menuleft-block-space"></div>
</BlogLinksBlock>

<!-- Archive -->
<div class="theme-designer-com_menuleft-back-menutitle">
<div class="theme-designer-com_menuleft-menutitle">آرشیو مطالب</div>
</div>
<div class="theme-designer-com_menuleft-block"><div id="vmenu" align="right">
  <ul>
    <BlogArchive><li><a  href="<-ArchiveLink->"><-ArchiveTitle-></a></li></BlogArchive>
  </ul>
</div></div>
<div class="theme-designer-com_menuleft-block-space"></div>
<!-- /Archive -->

<BlogAuthorsBlock>
<div class="theme-designer-com_menuleft-back-menutitle">
<div class="theme-designer-com_menuleft-menutitle">نویسندگان</div>
</div>
<div class="theme-designer-com_menuleft-block"><div id="vmenu" align="right">
  <ul>
    <BlogAuthors><li><a href="<-AuthorLink->"><-AuthorName-></a></li></BlogAuthors>
  </ul>
</div></div>
<div class="theme-designer-com_menuleft-block-space"></div>
</BlogAuthorsBlock>

<BlogTagsBlock>
<div class="theme-designer-com_menuleft-back-menutitle">
<div class="theme-designer-com_menuleft-menutitle">برچسب ها</div>
</div>
<div class="theme-designer-com_menuleft-block"><div id="vmenu" align="right">
  <ul>
    <BlogTags><li><a href="<-TagLink->" title="<-TagCount->"><-TagName-> (<-TagCount->)</a></li></BlogTags>
  </ul>
</div></div>
<div class="theme-designer-com_menuleft-block-space"></div>
</BlogTagsBlock>

<BlogLinkDumpBlock>
<div class="theme-designer-com_menuleft-back-menutitle">
<div class="theme-designer-com_menuleft-menutitle">پیوندهای روزانه</div>
</div>
<div class="theme-designer-com_menuleft-block"><div id="vmenu" align="right">
  <ul>
    <BlogLinkDump><li><a target="_blank" title="<-LinkDescription->"  href="<-LinkUrl->" ><-LinkTitle-></a></li></BlogLinkDump>
    <li><a target="_blank" href="http://chatyha.ir/"  rel="nofollow" >چت</a></li>
    <li><a  href="javascript:void(0)" onclick ="OpenLD();">لیست تمام پیوند ها</a></li>
  </ul>
</div></div>
<div class="theme-designer-com_menuleft-block-space"></div>
</BlogLinkDumpBlock>

<div class="theme-designer-com_menuleft-back-menutitle">
<div class="theme-designer-com_menuleft-menutitle">دیگر موارد</div>
</div>
<div align="center"><div class="theme-designer-com_menuleft-block-other2"><div align="center">
<-BlogCustomHtml->
</div></div></div>
<div class="theme-designer-com_menuleft-block-space"></div>

<div class="theme-designer-com_menuleft-back-saye"></div>

</td>
<td width="12" valign="top">&nbsp;</td>
</tr>
</table>

</div></div>

<div class="theme-designer-com-footer-back">
<table border="0" width="100%" cellspacing="0" cellpadding="0" height="126">
<tr>
<td width="91" valign="top"><div class="theme-designer-logo"><a target="_blank" title="تم دیزاینر" href="http://www.theme-designer.com" rel="nofollow" ><img border="0" src="http://themeupload.theme-designer.com/64/image/22.png" width="70" height="70"></a></div></td>
<td width="" valign="top">
<div class="theme-designer-com-copyright" align="right">
تمام حقوق اين وب سايت و مطالب آن متعلق به <a href="<-BlogUrl->"> <-BlogTitle-> </a>مي باشد
.<br>
كد نويسي و گرافيك قالب توسط : <a target="_blank" title="قالب وبلاگ" href="http://www.theme-designer.com" rel="nofollow" >تم ديزاينر</a>
</div>
</td>
</tr>
</table>
</div>
<div class="theme-designer-com-footer-space1"></div>

</div></div></div>

</div>

</body>
</html>

 
عجیب است که:
پس از گذشت یک دقیقه به پزشکی اعتماد می کنیم !

بعد از گذشت چند ساعت به کلاهبرداری !
بعد از چند روز به دوستی !
بعد از چند ماه به همکاری !
بعد از چند سال به همسایه ای !
اما بعد از یک عمر به خدا اعتماد نمی کنیم ...!

 

تشکرات از این پست
moeintv
moeintv
کاربر جدید
تاریخ عضویت : آذر 1396 
تعداد پست ها : 20

آموزش های اولیه و ضروری HTML و CSS در 30 روز
پنج شنبه 13 اردیبهشت 1397  01:14 ب.ظ

حتی اگر هدف شما تبدیل شدن به طراح صفحات وب نیست، یادگیری HTML و CSS می‌تواند ابزاری شگفت‌انگیز برای داشتن آن در مجموعه مهارت‌هایتان هم در محل کار و هم در خانه باشد. اگر این امر برای مدتی در لیست کارهایی که باید انجام دهید بوده است، چرا سی روز را اتخاذ نکرده، به من (Jeffrey Way) محلق نمی‌شوید؟ روزی 10 دقیقه را به من بدهید، و من مفاهیم اساسی HTML و CSS را خواهم گفت. 
و نگران نباشید… ما از آغاز شروع خواهیم کرد! 

زبان نشانه‌گذاری ابرمتنی یا اچ‌تی‌ام‌ال، در کنار سی‌اس‌اس هستهٔ فناوری ساخت صفحه‌های وب هستند. اچ‌تی‌ام‌ال زبان توصیف ساختار صفحه‌های وب است. زبانی‌است برای نشانه‌گذاری ابرمتن که برای تدوین قالب و طراحی صفحه‌های وب به کار می‌برند. سی‌اس‌اس روشی ساده برای نمایش چیدمان و جلوه‌های تصویری (مانند نوع قلم، رنگ و اندازه‌ها) بر صفحه‌های وب است. سی‌اس‌اس از جنس زبان‌های نشانه‌گذاری، با ساختار متن سادهٔ رایانه هستند و درون هرکدام، دستورهایی آبشار مانند و پی‌درپی، برای چگونگی نمایش هر صفحه وب افزوده می‌شود. 

سطح مهارت: مبتدی 
زمان آموزش: 5 ساعت 
زبان: انگلیسی 
مشخصات فایل: MOV | 1280×720 

فهرست مطالب: 
مقدمه 
معرفی دوره 
هفته اول 
اولین صفحه وب شما 
یافتن ویرایش‌‌گر کد مناسب 
لیست‌ها 
روابط والد-فرزندی 
تگ‌های Heading 
Blockqoute ها 
Anchor ها 
هفته دوم 
اولین Stylesheet شما 
ساختار پروژه‌های بی عیب و نقص 
عکس‌ها 
ضرورت Div ها 
ID ها و کلاس‌ها 
یک تخصیص 
راه‎های تخصیص 
Float ها و یک چیدمان ساده 
هفته سوم 
لیست‌‌های ناوبری 
مقدمه‌ای بر فرم‌ها 
تعویض عکس 
مبانی تیپوگرافی 
تفاوت بین موقعیت‌دهی نسبی و مطلق 
بازتولید یک تکه وبسایت 
اهمیت اعتبارسنجی 
هفته چهارم 
کدنویسی Zen 
نرمال‌سازی و ریست 
چارچوب CSS 
پروژه‌ی نهایی 
ایجاد نشانه‌گزاری 
نحوه‌ی برش زدن یک فایل PSD 
نحوه‌ی ایجاد Snippet 
CSS برای وبسایت ما 
تکمیل وبسایت 
مطالب پایانی 
پایان دوره

تشکرات از این پست
moeintv
moeintv
کاربر جدید
تاریخ عضویت : آذر 1396 
تعداد پست ها : 20

آموزش تصویری استفاده از خاصیت های ترانزیشن و ترنسفورمر در CSS
پنج شنبه 13 اردیبهشت 1397  01:16 ب.ظ

همانطور که می دانید از CSS برای فرمت دهی و طرح بندی، تعریف سبک متن (مانند نوع قلم، رنگ و اندازه‌ها)، اندازه جدول و جنبه های دیگری از صفحات وب که قبلا فقط در فایل HTML یک صفحه قابل تعریف بوده است استفاده می شود. CSS دارای خاصیت ها و افکت های مختلفی است که تنها با نوشتن قطعه کدهای ساده می توانند به ظاهر وب سایت شما دید ویژه ای اضافه کنند. 
به وسیله خاصیت Transition در CSS، می توانید تغییر اندازه، شکل، رنگ، موقعیت و ... یک عنصر را از یک حالت به یک حالت دیگر به صورت تدریجی و در قالب یک افکت تصویری، انیمیشن سازی کنید. به عنوان مثال فرض کنید، شما یک عکس دارید که نمونه کوچک آن را بر روی صفحه قرار داده اید و قصد دارید تا زمانی که کاربر موس خود را بر روی آن می برد، به صورت تدریجی به اندازه بزرگ و اصلی خود در بیاید و کاربر آن را مشاهده نماید و هنگامی که کاربر موس خود را از روی آن می برد، به انداز قبلی و کوچک خود بر گردد. 
خاصیت Transform در سی اس اس، این امکان را به ما می دهد که یک متن یا یک بخش را به شکل مورد علاقه ی خود بچرخوانیم، به عنوان مثال می توانید یک متن را در سایت خود با چرخش نشان دهید. 
این افکت ها از قابلیت های منحصر به فرد در CSS می باشند که تنها با نوشتن یک قطعه کد ساده امکانپذیر خواهند بود. 

در دوره آموزشی CSS: Transitions and Transforms شما با قابلیت های اساسی و کلیدی در انتقال و جابه جایی آبجکت ها در صفحات وب و با استفاده از سی اس اس آشنا می شوید. 
عناوین آموزشی: 
- درک اصول انتقال 
- کار ​​با انتقال های دو بعدی و سه بعدی 
- متحرک سازی تغییرات رنگ 
- محو کردن اشیاء 
- تغییر اندازه عناصر صفحه و فونت 
- استفاده از چند خاصیت انتقال به صورت همان زمان 
- درک مفهوم keyframe ها و انیمیشن ها 
- کار ​​کردن در z-index 
- اضافه کردن تعاملی جاوا اسکریپت 
- ساختن انتقال در Dreamweaver 
- و ... 

باتشکر از ادمین گرامی وب سایت راسخون

تشکرات از این پست
دسترسی سریع به انجمن ها