/ آموزش صفر تا صد css
وندا هاست
طراحی و راه اندازی وبسایت و انجمن توسط ویکی وی بی ویکی وی بی در قبال معاملات صورت گرفته با هر یک از اعضا و سفارشات طراحی خارج از این اطلاعیه هیچگونه مسئولیتی نمی پذیرد
بک لینک ها
تبلیغات شما وندا هاست
نمایش نتایج: از 1 به 6 از 6

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

  1. #1
    AmirHoss3in آنلاین نیست.
    AmirHoss3in
    مدير بازنشسته
    945نوشته1,402مورد پسند

    تاریخ عضویت
    Nov 2012
    شماره عضویت
    90
    پسندیده است
    672 پست
    بلاگ
    2 پست
    میزان امتیاز
    1413
    www.webmasterpro.ir

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

    درود

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

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

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

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

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

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

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

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

    کد:
     <link rel="stylesheet" type="text/css" href="style.css" />

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

    با تشکر مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی

    14 نفر از اعضا پست AmirHoss3in را پسندیده اند


    ? should write somethin

  2. نوين وردپرس تبلیغات شما

  3. #2
    AmirHoss3in آنلاین نیست.
    AmirHoss3in
    مدير بازنشسته
    945نوشته1,402مورد پسند

    تاریخ عضویت
    Nov 2012
    شماره عضویت
    90
    پسندیده است
    672 پست
    بلاگ
    2 پست
    میزان امتیاز
    1413
    www.webmasterpro.ir

    بخش دوم Selector ها

    درود

    با بخش دوم آموزش css در خدمتتون هستیم مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی

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

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

    1. ID Selector

    این نوع Selector که فقط برای یک عنصر قابل استفاده است به صورت زیر تعریف خواهد شد

    کد:
    # ID Name 
    }
    {
    و برای عناصر به صورت زیر فراخوانی می شود:

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

    2. Class Selector

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

    کد:
     . Class name 
    }
    {
    فراخوانی آن نیز برای عناصر متفاوت به صورت زیر است :
    کد:
    <div class="Class Name>......</div>
    اگر بخواهید Selector ها را برای عناصری خاصی در سند HTML خود تخصصی کنید می بایست به صورت زیر عمل کنید .
    کد:
     p.AMIR {font:20px tahoma;}
    در این مثال من class تعریف شده با نام AMIR را فقط مختص پاراگراف ها یا <P> کرده ام .

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

    3.Descendate Selector

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

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

    نحوه معرفی این Selector به صورت زیر می باشد

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


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

    13 نفر از اعضا پست AmirHoss3in را پسندیده اند


    ? should write somethin

  4. #3
    AmirHoss3in آنلاین نیست.
    AmirHoss3in
    مدير بازنشسته
    945نوشته1,402مورد پسند

    تاریخ عضویت
    Nov 2012
    شماره عضویت
    90
    پسندیده است
    672 پست
    بلاگ
    2 پست
    میزان امتیاز
    1413
    www.webmasterpro.ir

    بخش سوم کلاس های کاذب

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

    درود

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

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

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

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

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

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

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

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

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

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

    کد:
     .AlvlIr { 
       border : 1px; 
    }
    .AlvlIr:hover { -moz-box-shadow: 0 2px 3px #cacaca;
    -webkit-box-shadow: 0 2px 3px #CACACA;
    box-shadow: 0 2px 3px #CACACA;
    }
    تعدد مواردی که سایه ی کادر را مشخص میکند به خاطر اینه که هر مرورگر از کدهای متفاوتی برای سایه دار کردن استفاده میکنه و با این کار سایه ها در همه مرورگر ها نمایش داده میشه مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی

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

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

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

    امیدوارم مورد توجهتون قرار بگیره .
    حق نگهدارتون

    11 نفر از اعضا پست AmirHoss3in را پسندیده اند


    ویرایش توسط AmirHoss3in : 12-03-2012 در ساعت 10:10 AM
    ? should write somethin

  5. #4
    AmirHoss3in آنلاین نیست.
    AmirHoss3in
    مدير بازنشسته
    945نوشته1,402مورد پسند

    تاریخ عضویت
    Nov 2012
    شماره عضویت
    90
    پسندیده است
    672 پست
    بلاگ
    2 پست
    میزان امتیاز
    1413
    www.webmasterpro.ir

    بخش چهارم صفات بکگراند

    درود

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

    Background-color . I

    توسط این خاصیت میتونیم رنگ پس زمینه هر کدوم از عناصر یک سند HTML رو تغییر بدیم

    نمونه استفاده از این خاصیت :

    کد:
    background-color : نام یا کد هگز رنگ | transparent
    مقدار پیشفرض این قابلیت transparent هستش که در این حالت پس زمینه شفاف و بی رنگه .

    به 4 روش میتوان رنگ را در CSS معرفی نمود ولی 1 نمونه از آن تقریبا کم کاربرد بوده و استفاده نمیشود و ما به 3 مورد دیگر می پردازیم .

    1. استفاده از کلمات کلیدی رنگ ها شبیه : black , blue ,green , red , white , yellow , silver و .....

    2. استفاده از کد هگزادسیمال رنگ ها که فرم کلی آن به صورت rrggbb# هستش برای نمونه کد مقابل معرف رنگ سیاه هستش : 000000#

    3. استفاده از خلاصه کدهای هگزادسیمال . برای مثال کد روبرو معرف همان رنگ مشکی است : 000#

    Background Image . II

    این خاصیت تصویر زمینه ای برای سند HTML شما قرار می دهد .

    فرم کلی :
    کد:
    Background-image : URL | none
    URL به معنای آدرس تصویر مورد نظر شماست
    مقدار پیشفرض این خاصیت هم none می باشد .

    Background repeat . III

    نحوه تکرار عکس پس زمینه را مشخص میکند

    فرم کلی :
    کد:
    Background-image : Repeat | Repeat-X | Repeat-Y | no-Repeat
    Repeat : تکرار عکس در دو جهت
    Repeat-x : تکرار عکس به صورت افقی
    Repeat-y : تکرار عکس به صورت عمودی
    no-Repeat : عدم تکرار عکس

    Background attachment . IV

    حرکت یا عدم حرکت تصویر همراه با محتوای صفحه در هنگام استفاده از نوار پیمایش (Scroll Bar ) رو تعیین میکنه

    فرم کلی :
    کد:
    Background-attachment : scroll | fixed
    scroll برای حرکت عکس به همراه محتوا و fixed برای ثابت ماندن آن استفاده می شود

    Background position . V

    این خاصیت مکان قرار گیری تصویر زمینه رو مشخص میکنه

    فرم کلی :
    کد:
    (Background-position : (top | center | bottom ) | ( left | center | Right 
             (      مقادیر افقی       ) | (       مقادیر عمودی      )
    در این خاصیت ابتدا مقادیر افقی و پس از آن مقادیر عمودی به کار میروند

    مثال :
    کد:
    background-position: 2px 5px
    در مثال فوق تصویر با فاصله2 پیکسل گوشه بالا و سمت چپ و 5 پیکسل از بالا قرار می گیرد .

    امیدوارم مفید واقع بشه
    حق نگهدارتون مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی

    8 نفر از اعضا پست AmirHoss3in را پسندیده اند


    ? should write somethin

  6. #5
    AmirHoss3in آنلاین نیست.
    AmirHoss3in
    مدير بازنشسته
    945نوشته1,402مورد پسند

    تاریخ عضویت
    Nov 2012
    شماره عضویت
    90
    پسندیده است
    672 پست
    بلاگ
    2 پست
    میزان امتیاز
    1413
    www.webmasterpro.ir

    بخش پنجم خواص متن

    درود

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

    font family

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

    فرم کلی این دستور :

    کد:
    font-family : family name ;
    در مثال فوق family name نام خانواده فونت مورد نظر شماست برای مثال Sans یکی از فونت های از پیش تعریف شده در HTML می باشد .

    * اگر در نام فونت شما فضای خالی (Space) وجود دارد نام فونت را بین دو دبل کوتیشن ("times new roman") قرار دهید .
    **اگر میخواهید از چند فونت استفاده کنید تا درصورت موجود نبودن فونت اول سند از فونت دوم و یا بعدی استفاده کند می بایت بین نام فونت ها فاصله بگذارید .

    font style

    با استفاده از این خاصیت میتوان استایل متن رو مشخص کرد برای مثال میشه متن رو به حالت مورب (Italic) در آورد

    فرم کلی این دستور :

    کد:
    font-style : normal | Italic
    normal که مشخصه حالت عادی متن هستش و Itlic هم حالت مورب

    font weight

    این خاصیت ضخامت متن رو مشخص میکنه .

    فرم کلی این دستور :

    کد:
    font-weight : normal | bold | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
    مقادیر normal و bold که مقادیر مشخصی هستند اما در مورد اعدا میتوان گفت 400 همان normal و 700 همان bold هستش

    font size

    برای این دستور مقادیر مختلفی وجود داره ولی ما فقط به مقدار معمول اون که با واحد پیکسل هستش بسنده می کنیم

    فرم کلی :

    کد:
    font-size : XX px ;
    که به جای XX هر مقداری رو که مورد نیازتونه بگذارید برای مثال 10px

    امیدوارم مفید واقع بشه
    حق نگهدارتون مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی

    7 نفر از اعضا پست AmirHoss3in را پسندیده اند


    ? should write somethin

  7. #6
    AmirHoss3in آنلاین نیست.
    AmirHoss3in
    مدير بازنشسته
    945نوشته1,402مورد پسند

    تاریخ عضویت
    Nov 2012
    شماره عضویت
    90
    پسندیده است
    672 پست
    بلاگ
    2 پست
    میزان امتیاز
    1413
    www.webmasterpro.ir

    بخش ششم خواص نمایشی متن

    درود

    میدونم عنوان بخش ششم یکم ناجوره ! ولی مطالب رو که بخونید متوجه می شید چرا چنین عنوانی انتخاب شده مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی

    حاشیه رو بیخیال بهتره به آموزشمون برسیم

    Line Height

    این خاصیت فاصله عمودی بین دو خط رو معین میکنه

    فرم کلی :

    کد:
    line-height : normal  |  number  |  lenght ;
    number : شامل یک عدد برای مشخص کردن فاصله می باشد .

    Lenght : اگر به صورت فاصله بر حسب پیکسل نوشته بشه که مشخصه فاصله رو معین میکنه 10px اما اگه به صورت یه عدد منحصر به فرد نوشته بشه (3) عدد رو در مقدار font-size ضرب میکنه و

    فاصله رو معین میکنه . مثال : font-size : 12px line-height : 3 ==> 12*3 = 36 که 36 مقدار فاصله عمودی بین خطوط هستش !

    Word Spacing

    این خاصیت فضای خالی مشخصی بین کلمات یک متن ایجاد میکنه

    فرم کلی :

    کد:
    word-spacing : normal | lenght ;
    که به lenght میتوان بر حسب پیکسل یا هر واحد اندازه گیری دیگر در HTML مقداری را داد . راستی ! مقادیر منفی هم مجازه !!

    Text align

    یکی از پر کاربردترین خواص در HTML که خیلی هم معروفه ، برای تعیین مکان متن در جهت افقی به کار میره

    فرم کلی :

    کد:
    text-align : left | right | center | justify ;
    left و right و center که مشخصه چیکار میکنه ! اما justify متن رو براساس دو طرف صفحه تراز بندی میکنه

    text decoration

    برای کشیدن یک خط در مقاطع افقی روی متن به کار میره

    فرم کلی :

    کد:
    text-decoration : none | underline | overline | line-trough
    underline: یک خط زیر متن می کشه

    overline: یک خط بالای متن می کشه

    line-trough:یک خط در وسط متن می کشه

    یک مقدار دیگه هم این خاصیت داره به نام blink که باعث چشمک زدن متن میشه که تقریبا کسی ازش استفاده نمیکنه چون کمی متن رو ناخوانا میکنه

    text transform

    این خاصیت برای کنترل کوچک یا بزرگی حروف یک متن به کار میره

    فرم کلی :

    کد:
    text-transform : none | capitalize | uppercase | lowercase
    capitalize: اولین حرف هر کلمه رو به صورت حرف بزرگ نمایش میده

    uppercase: تمامی حروف کلمات رو با حرف بزرگ نمایش میده

    lowercase:تمامی حروف کلمات رو با حرف کوچک نمایش میده

    امیدوارم مفید واقع بشه
    حق نگهدارتون مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی

    6 نفر از اعضا پست AmirHoss3in را پسندیده اند


    ? should write somethin

اطلاعات موضوع

کاربرانی که در حال مشاهده این موضوع هستند

در حال حاضر 1 کاربر در حال مشاهده این موضوع است. (0 کاربران و 1 مهمان ها)

کلمات کلیدی این موضوع

مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی مجوز های ارسال و ویرایش

  • شما نمیتوانید موضوع جدیدی ارسال کنید
  • شما امکان ارسال پاسخ را ندارید
  • شما نمیتوانید فایل پیوست کنید.
  • شما نمیتوانید پست های خود را ویرایش کنید
  •  
خرید بک لینک