عضویت العربیة English
پیامبر اکرم صلّی‌الله‎علیه‎‌وآله: ثروتمندترین مردم کسی است که اسیر حرص و آز نباشد. بحار الانوار، ج 70، ص 23

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

آموزش جامع 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 - بخش سوم

 

hosseinb68

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

پاسخ به:آموزش جامع 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>

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

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

 

SABOORI

SABOORI
کاربر طلایی1
تاریخ عضویت : دی 1393 
تعداد پست ها : 4210
محل سکونت : خراسان رضوی
دسترسی سریع به انجمن ها