تبلیغات در اینترنت

تبلیغات در اینترنتگیفت کارت گوگل پلی
نمایش نتایج: از 1 به 1 از 1

موضوع: آموزش کار با (CSS)

  1. Top | #1
    مدیر بازنشته

    تاریخ عضویت
    Jul 2011
    ورژن ویبولتین
    X.X.X
    نوشته ها
    1,419
    مورد پسند
    2,064 بار
    اطلاعات
    میزان امتیاز
    207

    پیش فرض آموزش کار با (CSS)

    مقدمه CSS یا همان Cascading Style Sheet روشی است برای قالب بندی و طراحی اجزای صفحه از قبیل متن، تصویر، زمینه صفحه، کادرها و تقریباً هر چیزی که در طراحی صفحه استفاده می شود بدون استفاده از کدهای HTML. از طریق این استایل شیتها می توانیم از دوباره نویسی کدهای HTML که باعث مشکل شدن کد نویسی و همچنین کند شدن سرعت بارگذاری صفحه در اینترنت می شود جلوگیری کنیم. برای مثال می توانیم یک بار نوع فونت مورد استفاده در یک صفحه را تعیین کنیم و دیگر مجبور نباشیم کد مربوط به فونت را در صفحه به کار ببریم. همچنین می توانیم از این ابزار قدرتمند در مواردی به جای جاوا اسکرپت نیز استفاده کنیم و چون مشکلات جاوا اسکرپت مثلاً غیر فعال بودن جاوا اسکرپت در مرورگر را ندارد با خیالی آسوده تر می توانیم از آن استفاده کنیم. CSS هم مانند جاوا اسکرپت این امکان را به ما می دهد که از یک فایل استایل خارجی برای تعیین خواص بخشهای مختلف صفحه های یک سایت استفاده کنیم. در این صورت می توانیم ظاهر همه صفحه ها را با ایجاد یک تغییر کوچک در فایل استایل خارجی تغییر دهیم. مثلاً فرض کنید که رنگ متن همچنین نوع فونت متن صفحه هایمان را در یک فایل استایل تعیین کرده ایم و از آن در طراحی چندین صفحه استفاده کرده ایم، حالا اگر بخواهیم رنگ متن همه این صفحات را تغییر دهیم تنها کافی است تا رنگ متن را در همان فایل استایل تغییر دهیم و نیازی به تغییر دادن صفحات نداریم.در این قسمت به معرفی قابلیتهای مختلف CSS خواهیم پرداخت .

    شروع به كار
    استفاده از کلاس و id در طراحی صفحات با CSS

    با استفاده از کلاس می توانیم برای یک تگ HTML استایلهای متفاوتی را تعریف کنیم. برای نمونه فرض کنیم
    می خواهیم در صفحه دو نوع پاراگراف داشته باشیم: یکی با متن مشکی و دیگری با متن قرمز. برای مشخص کردن این دو نوع پاراگراف می توانیم از سلکتور کلاس استفاده کنیم. ابتدا استایل را به صورت زیر
    می نویسیم:


    کد HTML:
    p.black {color: black}
    p.red {color:red}

    در مرحله بعد باید برای هر پاراگرافی که می خواهیم به رنگ مشکی باشد از شناسه "class="black در
    تگ
    استفاده کنیم و برای پاراگراف قرمز از شناسه "class="red البته نام کلاسها اختیاری است ولی بهتر است آنها را طوری انتخاب کنید که مفهوم داشته باشند تا وقتی که حجم استایل شما بیشتر شد به گنگ نباشد. در مثال زیر می توانید کد مربوط به نوشتن دو پاراگراف بالا را در متن HTML ملاحظه کنید

    کد HTML:
    <p class="black">این متنی است که به رنگ مشکی نمایش داده می شود</p>
    <p class="red">این متن به رنگ قرمز نمایش داده می شود.</p>
    نکته : شما می توانید بیش از یک کلاس برای یک تگ HTML تعریف کنید اما برای این کار نباید دو بار از
    شناسه
    class استفاده کرد. بلکه باید در یک شناسه class نام دو کلاس مورد نظر را با یک فاصله بین آنها وارد کرد. برای مثال برای پاراگراف زیر از دو کلاس فرضی
    (قرمز)red و(مركز يا وسط) center استفاده شده است:

    روش درست

    کد HTML:
    <p class="red center">این متن پاراگرافی است که تحت تأثیر دو کلاس red و center قرار دارد</p>
    

    روش غلط

    کد HTML:
    <p class="red ">این متن پاراگرافی است که تحت تأثیر دو کلاس red و center قرار دارد</p>
    
     <p class=" center">این متن پاراگرافی است که تحت تأثیر دو کلاس red و center قرار دارد</p>
    

    در نوشتن استایل می توان از نوشتن نام تگ در سلکتور کلاس چشم پوشی کرد. در این صورت ویژگیهای تعریف شده در آن کلاس بر هر تگ
    HTML که از کلاس مربوطه در شناسه class آن استفاده شده باشد اثر می گذارد. برای مثال در کلاس زیر ویژگی وسط چین را تعریف می کنیم و از نام تگ در سلکتور کلاس استفاده نمی کنی

    کد HTML:
    .center {text-align: center}

    اکنون برای هر تگی که احتیاج به وسط چین داشته باشد
    می توانیم از کلاس بالا استفاده کنیم. به چند نمونه در زیر توجه کنید


    کد HTML:
    <p class="center">متن این پاراگراف به صورت وسط چین نمایش داده می شود</p>
    <div class="center">متن این قسمت به صورت وسط چین نمایش داده می شود</div>
    <h2 class="center">متن این سرفصل به صورت وسط چین نمایش داده می شود</h2>

    تذکر : هیچ وقت نام کلاس را با یک عدد شروع نکنید
    چون در این صورت مرورگرهای
    Mozilla و Firefox نمی توانند از آن کلاس استفاده کنند.


    ما می توانیم از سلکتور کلاس برای تگی که حاوی شناسه class است استفاده کنیم که در قسمتهای قبلی در این مورد توضیح داده شد. علاوه بر این می توانیم از ویژگیهای تعریف شده در سلکتور کلاس برای تگهایی که در یک تگ محتوی شناسه class قرار دارند نیز استفاده کنیم. مثلا برای لینکهایی که در یک DIV قرار دارند و برای DIV کلاس تعریف شده است. برای این کار در نوشتن استایل مربوطه باید پس از نقطه که مشخص کننده سلکتور کلاس است نام کلاس را وارد کنیم و پس از وارد کردن یک فضای خالی نام تگی که می خواهیم ویژگیهای بر روی آن اعمال شود. به مثال زیر توجه کنید:

    در این مثال از استایل زیر در استفاده می کنیم:

    کد:
    
    .test { border: #F00 1px double }
    .test a { color: green } 
    .test a:hover { border: yellow 2px solid }
    کد HTML زیر برای این مثال مورد استفاده قرار می گیرد:

    کد HTML:
    <div class="test">
    <a href="#">لینک آزمایشی شماره 1</a>
    </div>
    <a href="#">لینک آزمایشی شماره 2</a>
    همانطور که در مثال بالا می بینید خواص لینک آزمایشی شماره 1 تحت تأثیر استایل مورد استفاده برای تگ DIV قرار دارد ولی لینک آزمایشی شماره 2 مانند سایر لینکهای خارج از DIV نمایش داده می شود.

    يك مثال رايج درباره كلاس

    بريد اين آدرس

    كليك كنيد

    در قسمت اول كه گفته شده
    ابتدا به ادمین سی پی --> جستجوی قالب بروید --> جستجو کنید : additional.css
    کد های زیر را به انتهای آن اضافه کنید :

    در اين قسمت كلاس ها رو تعريف كردن كه من نام كلاس رو با رنگ قرمز نشان دادم

    کد:
    .username_container {
        padding:2px 0;
        text-align:center;
    }
    .username_container .username strong {
        font-size: 16pt;
        font-weight:400;
    }
    .usertitle, .rank {
        text-align:center;
    }
    .usercenter {
        padding-top:5px;
        text-align:center;
    }
    .post_field {
        background: #fff;
        color: #414141;
        border: 1px solid #b9c4cd;
        padding: 3px 3px 3px 10px;
        margin-top: 2px;
        text-align:right;
    }
    .post_field strong {
        color: #587c1d;
    }
    .post_field dt {
        color: #587c1d;
        font-weight:700;
    }
    نام كلاس هر چي ميتونه باشه مثلا ميتونه اين باشه

    کد:
    
    .razagh {
        padding:2px 0;
        text-align:center;
    }

    و در قسمت دوم كه اين نوشته شده
    حالا به جستجوی قالب بروید و جستجو کنید :
    postbit_legacy
    درون آن را با کد زیر عوض کنید .


    در اينجا با استفاده از كلاس هاي بالا ما ميتونيم پست بيت رو كادر بندي كنيم
    مثلاً اين در
    postbit_legacy تعريف شده


    کد HTML:
    <vb:if condition="$post['joindate']"><div class="post_field"><dt>{vb:rawphrase join_date}</dt> <dd>{vb:raw post.joindate}</dd></div></vb:if>
    ویرایش توسط Razagh : 2011/11/25 در ساعت 01:37 PM




  2. گیفت کارت آیتونز

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

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

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

موضوعات مشابه

  1. آموزش طراحی قالب وردپرس به زبان ساده
    توسط Amir Lord در انجمن آموزش های وردپرس
    پاسخ: 17
    آخرين نوشته: 2016/04/13, 11:45 PM
  2. آموزش آپگراید ویبولیتن ورژن 3 به 4 ( اموزش تصویری )
    توسط Reza در انجمن اموزشهای تصویری ویبولتین
    پاسخ: 5
    آخرين نوشته: 2014/11/17, 09:38 PM
  3. آموزش كامل ftp
    توسط Zirmizi در انجمن آموزش ( غیر از ویبولتین )
    پاسخ: 0
    آخرين نوشته: 2011/09/14, 03:07 AM
  4. اموزش هماهنگ کردن رنگ کاربر ها با این هک
    توسط musicbl4st در انجمن پرسش و پاسخ
    پاسخ: 3
    آخرين نوشته: 2011/06/11, 12:39 PM

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

علاقه مندی ها (Bookmarks)

علاقه مندی ها (Bookmarks)

مجوز های ارسال و ویرایش

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