درود،میهمان گرامی ورود ثبت نام لیست اعضا تقویم راهنما جستجوجستجو
بازیابی رمز



آخرین ارسال ها
تاریخچه موتور سیکلت در ایران
شروع کننده:sana آخرین ارسالsana پاسخ ها:0 مشاهده:1
کاریکاتور سرا
شروع کننده:onlinelife آخرین ارسالsaeed_z پاسخ ها:37 مشاهده:2246
خلق یک متن هنری با چاقو+عکس
شروع کننده:saeed_z آخرین ارسالsaeed_z پاسخ ها:0 مشاهده:2
این موتور سیکلت الکتریکی جالب را ببینید
شروع کننده:sana آخرین ارسالsana پاسخ ها:0 مشاهده:3
عکس: وقتی مارادونا مرد عنکبوتی شد
شروع کننده:saeed_z آخرین ارسالsaeed_z پاسخ ها:0 مشاهده:2
درياي عجيبي كه در قرآن آمده را ببينيد + عكس
شروع کننده:hny! آخرین ارسالhny! پاسخ ها:0 مشاهده:4
موتورسیکلت یک مادربزرگ با سلیقه
شروع کننده:sana آخرین ارسالsana پاسخ ها:0 مشاهده:4
تصاویری از حضور هنرمندان در مراسم ختم پدر پیمان معادی
شروع کننده:saeed_z آخرین ارسالsaeed_z پاسخ ها:0 مشاهده:4
عکس/ مادری‌درحال‌غسل‌دادن‌فرزندشهیدش
شروع کننده:hny! آخرین ارسالhny! پاسخ ها:0 مشاهده:3
موتور سیکلت یک چرخ
شروع کننده:sana آخرین ارسالsana پاسخ ها:0 مشاهده:3
عکسی از موتورسیکلتی مجهز به توالت!!
شروع کننده:sana آخرین ارسالsana پاسخ ها:0 مشاهده:3
11 مدلهای هیوندای+عکس
شروع کننده:saeed_z آخرین ارسالsaeed_z پاسخ ها:10 مشاهده:12
موتور سیکلت نامرئی
شروع کننده:sana آخرین ارسالsana پاسخ ها:0 مشاهده:3
زن آمریکایی که خوردن سنگ را دوست دارد!+عکس
شروع کننده:hny! آخرین ارسالhny! پاسخ ها:0 مشاهده:3
یخمک (نوشته های طنز)
شروع کننده:دایی جان آخرین ارسالsaeed_z پاسخ ها:401 مشاهده:9533
تصاویر تنها موتور سیکلت ساخته شده توسط شرکت فراری
شروع کننده:sana آخرین ارسالsana پاسخ ها:0 مشاهده:3
نوزادی که هنگام زایمان سرش در دهانه رحم گیر کرد و کنده شد+عکس
شروع کننده:khamosh آخرین ارسالhny! پاسخ ها:1 مشاهده:32
گفتگوی آزاد (3 )
شروع کننده:admin آخرین ارسالsaeed_z پاسخ ها:1058 مشاهده:9054
11 مدلهای هیوندای
شروع کننده:saeed_z آخرین ارسالsaeed_z پاسخ ها:0 مشاهده:1
وظایف دختر و پسر در دوران نامزدی
شروع کننده:گــلایــه آخرین ارسالگــلایــه پاسخ ها:0 مشاهده:4
رده بندی کیفی خودروهای داخلی
شروع کننده:saeed_z آخرین ارسالsaeed_z پاسخ ها:0 مشاهده:3
اخبار روزانه ویژه سیستم اعتبار مالی
شروع کننده:admin آخرین ارسالadmin پاسخ ها:52 مشاهده:1075
آغاز سیاست های جدید فیات در هند
شروع کننده:saeed_z آخرین ارسالsaeed_z پاسخ ها:0 مشاهده:3
چشم
شروع کننده:Ashna آخرین ارسالگــلایــه پاسخ ها:18 مشاهده:2756
اطلاعات سامانه هوشمند سوخت تا پايان خرداد تجميع مي شود
شروع کننده:saeed_z آخرین ارسالsaeed_z پاسخ ها:0 مشاهده:3
ظرفيت توزيع سي ان جي از 2 ميليون مترمکعب گذشت
شروع کننده:saeed_z آخرین ارسالsaeed_z پاسخ ها:0 مشاهده:4
مزدا و فيات درباره مشارکت صنعتي گفتگو مي کنند
شروع کننده:saeed_z آخرین ارسالsaeed_z پاسخ ها:0 مشاهده:3
يک نوبت سوختگيري دارندگان کارت سوخت تا 25 خرداد ، ضروري است
شروع کننده:saeed_z آخرین ارسالsaeed_z پاسخ ها:0 مشاهده:3
ايساكو باز هم ركورد فروش بي‌سابقه‌اي بر جاي گذاشت
شروع کننده:saeed_z آخرین ارسالsaeed_z پاسخ ها:0 مشاهده:3
اسکار وایلد (Oscar Fingal O'Flahertie Wills Wilde)
شروع کننده:sana آخرین ارسالsana پاسخ ها:0 مشاهده:5
لئو نیکلایویچ تولستوی (Лев Никола́евич Толсто́й)
شروع کننده:sana آخرین ارسالsana پاسخ ها:0 مشاهده:10
پائولو کوئلیو ( Paulo de Almeida Coelho)
شروع کننده:sana آخرین ارسالsana پاسخ ها:0 مشاهده:10
یک مربی لیگ برتری ممنوع الفعالیت شد
شروع کننده:kingpayam آخرین ارسالadel پاسخ ها:1 مشاهده:15
اگه با نفر قبلی توی آسانسور گیر کنی چیکار میکنی ؟
شروع کننده:kingpayam آخرین ارسالkingpayam پاسخ ها:10 مشاهده:103
کافی شاپ آواکسی ها
شروع کننده:adel آخرین ارسالadel پاسخ ها:100 مشاهده:1138
لیلة الرغائب شب آرزوها
شروع کننده:elina_mn آخرین ارسالelina_mn پاسخ ها:1 مشاهده:36
عکس یادگاری با فردوسی پور در ساعت یک بامداد
شروع کننده:sana آخرین ارسالsana پاسخ ها:0 مشاهده:28
معرفی کتاب "شرق بهشت"
شروع کننده:sana آخرین ارسالsana پاسخ ها:0 مشاهده:11
معرفی کتاب "تاریخ بیهقی"
شروع کننده:sana آخرین ارسالsana پاسخ ها:0 مشاهده:9
معرفی کتاب مفهوم زمان
شروع کننده:saeed_z آخرین ارسالsaeed_z پاسخ ها:0 مشاهده:9
معرفی کتاب " اسماعیلیه"
شروع کننده:sana آخرین ارسالsana پاسخ ها:0 مشاهده:10
معرفی کتاب عرفان و شریعت
شروع کننده:saeed_z آخرین ارسالsaeed_z پاسخ ها:0 مشاهده:9
معرفی کتاب پشت پرده وهابیت
شروع کننده:saeed_z آخرین ارسالsaeed_z پاسخ ها:0 مشاهده:9
معرفی کتاب "زن تسخیر شده"
شروع کننده:sana آخرین ارسالsana پاسخ ها:0 مشاهده:10
معرفی کتاب از پشت سایه ها
شروع کننده:saeed_z آخرین ارسالsaeed_z پاسخ ها:0 مشاهده:9
معرفی کتاب طوفان دیگری در راه است
شروع کننده:saeed_z آخرین ارسالsaeed_z پاسخ ها:0 مشاهده:9
معرفی کتاب "زر باران"
شروع کننده:sana آخرین ارسالsana پاسخ ها:0 مشاهده:9
معرفی کتاب بنده ی خوب خدا
شروع کننده:saeed_z آخرین ارسالsaeed_z پاسخ ها:0 مشاهده:9
معرفی کتاب "روی پله های کنسرواتوار"
شروع کننده:sana آخرین ارسالsana پاسخ ها:0 مشاهده:9
معریف کتاب فلسفه علم
شروع کننده:saeed_z آخرین ارسالsaeed_z پاسخ ها:0 مشاهده:9
معرفی کتاب استاد عشق
شروع کننده:saeed_z آخرین ارسالsaeed_z پاسخ ها:0 مشاهده:9
معرفی کتاب فرزندان ایرانیم (داستان طنز)
شروع کننده:saeed_z آخرین ارسالsaeed_z پاسخ ها:0 مشاهده:11
معرفی کتاب "یوشی و درولین"
شروع کننده:sana آخرین ارسالsana پاسخ ها:0 مشاهده:8
معرفی کتاب خداحافظ کرخه
شروع کننده:saeed_z آخرین ارسالsaeed_z پاسخ ها:0 مشاهده:10
معرفی کتاب نامی برای همیشه: نگاهی به تاریخ خلیج فارس
شروع کننده:saeed_z آخرین ارسالsaeed_z پاسخ ها:0 مشاهده:9
مرثیه ای برای شکسپیر
شروع کننده:sana آخرین ارسالsana پاسخ ها:0 مشاهده:9
معرفی کتاب "رد پای زن اسطوره ای در سینما"
شروع کننده:sana آخرین ارسالsana پاسخ ها:0 مشاهده:7
معرفی کتاب از به
شروع کننده:saeed_z آخرین ارسالsaeed_z پاسخ ها:0 مشاهده:6
معرفی کتاب به سوی تو
شروع کننده:saeed_z آخرین ارسالsaeed_z پاسخ ها:0 مشاهده:9
معرفی کتاب "آفتاب در حجاب"
شروع کننده:sana آخرین ارسالsana پاسخ ها:0 مشاهده:6
معرفی کتاب مردی که خواب نمی دید
شروع کننده:saeed_z آخرین ارسالsaeed_z پاسخ ها:0 مشاهده:7
معرفی کتاب "نظام حکومت در اسلام"
شروع کننده:sana آخرین ارسالsana پاسخ ها:0 مشاهده:6
معرفی کتاب من او
شروع کننده:saeed_z آخرین ارسالsaeed_z پاسخ ها:0 مشاهده:6
معرفی کتاب عروج تا بی نهایت
شروع کننده:saeed_z آخرین ارسالsaeed_z پاسخ ها:0 مشاهده:6
معرفی کتاب "دین و آزادی"
شروع کننده:saeed_z آخرین ارسالsaeed_z پاسخ ها:0 مشاهده:6
معرفی کتاب "درختی‌که حرف می‌زد"
شروع کننده:sana آخرین ارسالsana پاسخ ها:0 مشاهده:6
معرفی کتاب" شب بی ستاره: خاطرات سردار علی فضلی"
شروع کننده:saeed_z آخرین ارسالsaeed_z پاسخ ها:0 مشاهده:7
معرفی کتاب" قبله مایل به تو"
شروع کننده:saeed_z آخرین ارسالsaeed_z پاسخ ها:0 مشاهده:7
معرفی کتاب "پسران زره‌پوش"
شروع کننده:sana آخرین ارسالsana پاسخ ها:0 مشاهده:6
چند اثر از چارلز دیکنز
شروع کننده:"ICE" آخرین ارسال"ICE" پاسخ ها:4 مشاهده:22
معرفی کتاب "چگونه با نوجوانم صحبت کنم؟"
شروع کننده:"ICE" آخرین ارسال"ICE" پاسخ ها:0 مشاهده:6
معرفی کتاب "پدر و دختر"
شروع کننده:sana آخرین ارسالsana پاسخ ها:0 مشاهده:6
معرفی کتاب "مسخ "
شروع کننده:"ICE" آخرین ارسال"ICE" پاسخ ها:0 مشاهده:6
معرفی کتاب "قدیس"
شروع کننده:saeed_z آخرین ارسالsaeed_z پاسخ ها:0 مشاهده:6
معرفی کتاب" درختی‌که حرف می‌زد"
شروع کننده:"ICE" آخرین ارسال"ICE" پاسخ ها:0 مشاهده:6
معرفی کتاب "پاییز 59"
شروع کننده:saeed_z آخرین ارسالsaeed_z پاسخ ها:0 مشاهده:6
معرفی کتاب "لیلی،نام تمام دختران زمین است"
شروع کننده:"ICE" آخرین ارسال"ICE" پاسخ ها:0 مشاهده:6
معرفی کتاب " الأصنام"
شروع کننده:sana آخرین ارسالsana پاسخ ها:0 مشاهده:7
معرفی کتاب "پوتین های مریم"
شروع کننده:saeed_z آخرین ارسالsaeed_z پاسخ ها:0 مشاهده:8
معرفی کتاب "زن تسخیر شده"
شروع کننده:"ICE" آخرین ارسال"ICE" پاسخ ها:0 مشاهده:7
title title title title title
آموزش پرورش اندام در 90 روز دستبندوگوشواره ماه تولد شما آموزش افزایش قد (کتاب و سی دی) جدیدترین روش بستن شال و روسری برنامه مشاهده همه شبکه های دنیا


ارسال پاسخ 
آموزش برنامه نویسی .CSS (استفاده از کلاس و id در طراحی صفحات با CSS)
نویسنده پیام
MoonLover

ناظم ارشد انجمن
******

ارسال ها: 18,519
تاریخ عضویت: 29 December 2008
امتیاز: 147
تشکرهای ارسالی : 16674
تشکرهای دریافتی : 26116
اعتبار: 202  واحد
1
آموزش برنامه نویسی .CSS (استفاده از کلاس و id در طراحی صفحات با CSS)
آموزش برنامه نویسی .CSS (استفاده از کلاس و id در طراحی صفحات با CSS)

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

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

        * سلکتور کلاس

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

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

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

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

    اکنون برای هر تگی که احتیاج به وسط چین داشته باشد می توانیم از کلاس بالا استفاده کنیم. به چند نمونه در زیر توجه کنید:
    کد:
    <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 زیر برای این مثال مورد استفاده قرار می گیرد:
    کد:
    <div class="test">
    <a href="#">لینک آزمایشی شماره 1</a>
    </div>
    <a href="#">لینک آزمایشی شماره 2</a>

    2 همانطور که در مثال بالا می بینید خواص لینک آزمایشی شماره 1 تحت تأثیر استایل مورد استفاده برای تگ DIV قرار دارد ولی لینک آزمایشی شماره 2 مانند سایر لینکهای خارج از DIV نمایش داده می شود.

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

    همانطور که می دانید با وجود اینکه برخی از عناصر در صفحه با هم تفاوت دارند، از یک تگ HTML برای ایجاد آنها استفاده می شود.برای مثال برخی از این عناصر را که از تگ <input> در به وجود آوردن آنها استفاده می شود می توانید در زیر مشاهده کنید:
    کد:
    <"input type="text>
    کادرهای متنی که در فرمها استفاده می شود.<"input type="checkbox>
    چک باکس هم با استفاده از تگ <input> به وجود می آید.<"input type="radio>
    در ساختن دکمه های رادیو هم از همان تگ استفاده می شود. <"input type="button>
    این تگ در ساختن هم استفاده می شود. <"input type="submit>
    برای ساختن دکمه ارسال فرم هم از تگ <input> استفاده می شود.

    حالا فرض کنید ما در یک صفحه از چند نمونه از عناصر بالا استفاده کرده ایم ولی فقط می خواهیم ویژگیهای یکی از آنها را تغییر دهیم. دو روش برای این کار وجود دارد: یکی استفاده از کلاس است که در این روش اگر تعداد زیادی از عنصر مورد نظر در صفحه وجود داشته باشد باید به همان تعداد از شناسه class در تگهای آنها استفاده کنیم و ممکن است این کار باعث افزایش حجم صفحه یا موجب سختی در نوشتن کد شود. روش دوم تعریف کردن سلکتور input برای عناصر مورد نظر است که به صورت زیر انجام می گیرد:
    فرض کنید می خواهیم فقط عرض کادرهای متنی را در صفحه تغییر دهیم. در صورتی که در استایل از سلکتور input به تنهایی استفاده کنیم عرض همه چک باکسها ، دکمه ارسال، دکمه های رادیو و سایر عناصری که از تگ <input> استفاده کرده اند نیز تغییر می کند. برای انجام این کار می توانید سلکتور را به صورت زیر تعریف کنیم:
    کد:
    input[type="text"] {
    width: 200px
    }

    کد استایلی که در بالا نوشتیم فقط بر روی کادر های متنی که در آنها از شناسه "type="text استفاده شده است اثر می گذارد.
    البته این روش ممکن است در مرورگر Internet Explorer پشتیبانی نشود اما مرورگرهای Firefox و Opera از آن پشتیبانی می کنند.

    سلکتور id

    روش دیگری که برای تعریف استایل وجود دارد استفاده از id است. شناسه id احتمالاً در آینده جایگزین شناسه name در تگهای HTML می شود بنا بر این در هرصفحه نباید بیش از یک بار از هر ID استفاده شود. اگر بیش از یک بار از یک id استفاده شود کارایی صفحه تغییری نمی کند ولی صفحه اعتبار خود را از دست می دهد. سلکتور id با علامت # مشخص می شود. با استایل زیر همه عناصر که شناسه "id="border دارند با کادری سبز رنگ نمایش داده می شوند:
    کد:
    #border { border: green thin solid }

    برای مثال ما از استایل بالا در این صفحه استفاده کرده ایم. حالا کد زیر را وارد صفحه می کنیم:
    کد:
    <h3 id="border">این یک سرفصل با اندازه 3 است</h3>
    <div id="border">این قسمت یک div است </div>

    در قسمت زیر می توانید نتیجه کد بالا را مشاهده کنید:
    این یک سرفصل با اندازه 3 است

    این قسمت یک div است
    همانطور که کلاس را می توانستیم برای یک عنصر مشخص تعریف کنیم در مورد id نیز می توانیم این کار را انجام دهیم. به استایل زیر توجه کنید:
    کد:
    p#border { border: green thin solid }

    استایل بالا فقط روی پاراگرافی که شناسه "id="green در آن به کا رفته اثر می گذارد.
    نکته : هرگز نام یک id را با یک عدد آغاز نکنید چون در این صورت مرورگرهای Mozilla و Firefox نمی توانند از آن استفاده کنند.

امضاء گاهی باید فراموش کرد..
به زودی میام..امتحان دارم فعلا!
آفلاین
Sunday 12 September 2010 23:10 نقل قول این ارسال در یک پاسخ
ارسال پاسخ 


موضوع های مرتبط با این موضوع...
موضوع: نویسنده پاسخ: بازدید: آخرین ارسال
  برنامه نویسی مؤمنه 1 498 Friday 15 April 2011 11:39
آخرین ارسال: user
  آموزش کامل و همه چیز درمورد ویروس Blaster MenDark 0 334 Friday 08 April 2011 18:19
آخرین ارسال: MenDark
  آشنایی با رابط کاربردی برنامه نویسی API حسام الدین 0 322 Wednesday 30 March 2011 12:40
آخرین ارسال: حسام الدین
At اکانت نامحدود برای استفاده در گیم نت ali6007206 1 337 Saturday 19 March 2011 13:00
آخرین ارسال: ali6007206
  اصول برنامه نویسی تحت وب onlinelife 1 410 Saturday 19 February 2011 17:41
آخرین ارسال: M3YS4M 1

پرش به انجمن:


کاربرانِ درحال بازدید از این موضوع: 1 مهمان
زمان کنونی: Thursday 24 May 2012, 16:55