1. مهمان گرامی، جهت ارسال پست، دانلود و سایر امکانات ویژه کاربران عضو، ثبت نام کنید.
    بستن اطلاعیه

..::|آموزش صفر تا صد css |::..

شروع موضوع توسط ViRTUS ‏8/2/13 در انجمن CSS

  1. کاربر ارشد

    تاریخ عضویت:
    ‏8/12/11
    ارسال ها:
    12,529
    تشکر شده:
    3,781
    امتیاز دستاورد:
    0
    درود

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

    آموزش صفر تا صد css

    بخش اول معرفی ابتدایی css

    css مجموعه ای از دستورات متنی هستش که برای اعمال تغییرات در کدهای به زبان html استفاده میشه که با استفاده از اون میشه اکثر خواص ظاهری صفحه نگاشته شده با html رو ویرایش کرد .

    کدهای css رو به سه طریق میتوان به کار برد :

    1. در داخل تگ با استفاده از خصوصیت style . برای مثال

    کد:
    [LEFT]
    <div style="text-align = left; ">.....</div>[/LEFT]
    
    2. کدهای css در داخل تگ head تعریف شود و برای هر تگ فراخوانی شود . دستورات در بین دو تگ زیر قرار می گیرند .

    کد:
    [LEFT]
    <head> <style type="text/css">......</style>[/LEFT]
    
    3. دستورات در فایلی جداگانه قرار بگیرند و به صفحه دستورات html شما پسوند داده شوند .که توسط تگ زیر در داخل تگ head به صفحه لینک می شود .

    کد:
    [LEFT]
    
     <link rel="stylesheet" type="text/css" href="style.css" />
    
    
    [/LEFT]
    
    تا اینجای این بحث در تمام آموزش های موجود یکسان بوده و ممکن است در تمامی آموزش های css شاهد آن باشید .
    در قسمت دوم به شرح Selector ها و خواص آنها می پردازیم .
     
  2. کاربر ارشد

    تاریخ عضویت:
    ‏8/12/11
    ارسال ها:
    12,529
    تشکر شده:
    3,781
    امتیاز دستاورد:
    0
    پاسخ : ..::|آموزش صفر تا صد css |::..

    با بخش دوم آموزش css در خدمتتون هستیم

    از این پس این تاپیک هر روز آپدیت و بخش جدید آموزش قرار داده خواهد شد .

    در این بخش قرار شده به بررسی selector ها بپردازیم و یرای اینکه شما بهتر متوجه بشید به اختصار و با حذف موارد کم کاربرد به توضیح خواهم پرداخت .

    1. ID Selector

    این نوع Selector که فقط برای یک عنصر قابل استفاده است به صورت زیر تعریف خواهد شد
    کد:
    [LEFT]
    
    # ID Name  } {[/LEFT]
    
    و برای عناصر به صورت زیر فراخوانی می شود:

    کد:
    [LEFT]
    <p id="ID Name ">.....</p>[/LEFT]
    
    در اختصاص ID Selector دقت کنید چون اگر برای چند عنصر به کار رود فقط برای عنصر اول عمل خواهد کرد .

    2. Class Selector

    این نوع Selector بر خلاف ID می تواند برای بیشمار عنصر به کار رفته و محدودیتی در این زمینه ندارد . برای تعریف یک class به مثال زیر توجه کنید :

    کد:
    [LEFT]
    
     . Class name  } {[/LEFT]
    
    فراخوانی آن نیز برای عناصر متفاوت به صورت زیر است :

    کد:
    [LEFT]
    <div class="Class Name>......</div>[/LEFT]
    
    اگر بخواهید Selector ها را برای عناصری خاصی در سند HTML خود تخصصی کنید می بایست به صورت زیر عمل کنید .

    کد:
    [LEFT]
     p.Mehrdad {font:20px tahoma;}[/LEFT]
    
    در این مثال من class تعریف شده با نام Mehrdad را فقط مختص پاراگراف ها یا <P> کرده ام .

    دو مورد Selector دیگر نیز موجود هست که کاربرد چندان بالایی ندارند

    3.Descendate Selector

    هنگامی که بخواهیم عناصر فرزند را به تنهایی خطاب قرار دهیم و یا خواص را برای عنصر فرزند به ارث بگذاریم از این Selector استفاده میکنیم .

    ** عنصر فرزند : به عناصری که زیر مجموعه عناصر دیگر گفته می شوند خطاب میشود برای مثال تگ <td> در تگ <table> یک عنصر فرزند محسوب می شود .

    نحوه معرفی این Selector به صورت زیر می باشد
    کد:
    [LEFT]
    p.Mehrdad h3{...... ; }[/LEFT]
    
    در مثال فوق عناصر h3 ای که در تگ <p> با class معرفی شده با نام Mehrdad وجود دارد خصوصیات معرفی شده را می پزیرد .


    در بخش بعد به معرفی کلاس های کاذب و اهمیت بخشیدن به Selector ها می پردازیم
     
  3. کاربر ارشد

    تاریخ عضویت:
    ‏8/12/11
    ارسال ها:
    12,529
    تشکر شده:
    3,781
    امتیاز دستاورد:
    0
    پاسخ : ..::|آموزش صفر تا صد css |::..

    بخش سوم آموزش css

    درود



    خب ادامه آموزش

    کلاس های کاذب Pseudo Class

    این نوع Selector برای اعمال تغییر در وضعیت های مختلف یک شی استفاده می شود . برای مثال توسط این نوع Selector می توانید نحوه تغییر شی هنگامی که نشانگر ماوس روی آن می رود را تعیین کنید .

    برای معرفی این نوع کلاس شما می بایست یک : ابتدای آن قرار دهید . در زیر برخی کلاس های کاذب Dynamic رو براتون معرفی میکنم

    به عناصری که نشانگر ماوس در حال حاضر روی آن قرار دارد اشاره می کند Hover:
    به عنصری که در حال حاضر focus روی آن می باشد اشاره می کند focus:
    به عنصری که در حال حاضر کاربر بر روی آن کلیک کرده اشاره می کند Active:

    کلاس های فوق در مورد اکثر عناصر Html به کار می روند و اما دو کلاسی که در زیر معرفی میکنم فقط برای تگ <a> کاربرد دارد

    به لینکی که کاربر آن را قبلا مشاهده کرده اشاره می کند Visited:
    به لینک های بازدید نشده اشاره دارد Link:

    با استفاده از این کلاس ها میتوانید سند HTML خود را پویا کنید و به کاربران خود لذت بیشتری در استفاده از آن بدهید

    نمونه زیر کادر شما را پس از رفتن نشانه گر ماوس بر روی آن سایه دار نشان می دهد .

    کد:
    [LEFT]
    
     .Mehrdad {     border : 1px;  } .AlvlIr:hover { -moz-box-shadow: 0 2px 3px #cacaca; -webkit-box-shadow: 0 2px 3px #CACACA; box-shadow: 0 2px 3px #CACACA; }[/LEFT]
    

    تعدد مواردی که سایه ی کادر را مشخص میکند به خاطر اینه که هر مرورگر از کدهای متفاوتی برای سایه دار کردن استفاده میکنه و با این کار سایه ها در همه مرورگر ها نمایش داده میشه

    قاعده Important
    استفاده از این قاعده باعث تقدم صفت تعریف شده با این قاعده نسبت ه دیگر صفت ها خواهد شد . برای مثال اگر کلاسی را به یک عنصر نسبت داده اید که در آن بکگراند تعریف شده و در صفات مربوط به خود عنصر هم بکگراندی تعریف کر ده اید با قاعده Important میتوانید یکی را بر دیگری تقدم دهید .

    نحوه استفاده از قاعده Important

    کد:
    [LEFT]
    .Mehrdad { font : 12px Arial !important; {[/LEFT]
    
    علامت تعجب ! در هنگام استفاده از این قاعده نشانه پایان صفات و آغاز قاعده Important می باشد .

    امیدوارم مورد توجهتون قرار بگیره .
     
  4. عضو جدید

    تاریخ عضویت:
    ‏15/8/15
    ارسال ها:
    5
    تشکر شده:
    6
    امتیاز دستاورد:
    3
    جنسیت:
    مرد
    ممکنه درباره margin و padding یه توضیح مختصر بدبد.
     
    AftabGardoon از این پست تشکر کرده است.
  5. داره راه میوفته!

    تاریخ عضویت:
    ‏31/10/17
    ارسال ها:
    34
    تشکر شده:
    8
    امتیاز دستاورد:
    8
    margin: فاصله عنصر مورد نظر نسبت به عناصر اطرافش را مشخص می کنه.
    padding: فاصله محتوای درون عنصر مورد نظر نسبت به محیط عنصر مورد نظر را مشخص می کنه.
    در لینک زیر تصویری هست که تفاوتشون رو آشکارا نشون میده.
    https://stackoverflow.com/questions/5958699/difference-between-margin-and-padding
     
    AftabGardoon از این پست تشکر کرده است.
  6. داره راه میوفته!

    تاریخ عضویت:
    ‏31/10/17
    ارسال ها:
    34
    تشکر شده:
    8
    امتیاز دستاورد:
    8
    میشه در انتهای هر آموزش بفرمایید که در آموزش بعدی چه مطالبی رو قصد دارید یاد بدید؟
     
    AftabGardoon از این پست تشکر کرده است.