آموزش کار با استایل (CSS)

[FarbodEZRaeL]

با سلام خدمت دوستان گُل ایران هک[img]images/smilies/Smileys/8.gif[/img]

در این پست می خواهم درباره آموزش مباحث سی اس اس  توضیح بدهم

قوانین : لطفاً فقط از پست های اسپم خودداری کنید ،و اگر سوال خواصی دارید در پیام خصوصی بپرسید.


خوب برای شروع یک مقدمه می گم که اگه کسی نمیدونه سی اس اس چیست،الان متوجه بشه...

CSS یا همان Cascading Style Sheet روشی است برای قالب بندی و طراحی اجزای صفحه از قبیل متن، تصویر، زمینه صفحه، کادرها و تقریباً هر چیزی که در طراحی صفحه استفاده می شود بدون استفاده از کدهای HTML. از طریق این استایل شیتها می توانیم از دوباره نویسی کدهای HTML که باعث مشکل شدن کد نویسی و همچنین کند شدن سرعت بارگذاری صفحه در اینترنت می شود جلوگیری کنیم. برای مثال می توانیم یک بار نوع فونت مورد استفاده در یک صفحه را تعیین کنیم و دیگر مجبور نباشیم کد مربوط به فونت را در صفحه به کار ببریم. همچنین می توانیم از این ابزار قدرتمند در مواردی به جای جاوا اسکرپت نیز استفاده کنیم و چون مشکلات جاوا اسکرپت مثلاً غیر فعال بودن جاوا اسکرپت در مرورگر را ندارد با خیالی آسوده تر می توانیم از آن استفاده کنیم.
[hr]
خوب شروع به کد نویسی می کنیم من در این آموزش از نوت پد ++ استفاده می کنم
در این پست و پست بعدی به class و id می پردازیم
با استفاده از کلاس می توانیم برای یک تگ HTML استایلهای متفاوتی را تعریف کنیم. برای نمونه فرض کنیم می خواهیم در صفحه دو نوع پاراگراف داشته باشیم،یکی با متن مشکی و دیگری با متن قرمز. برای مشخص کردن این دو نوع پاراگراف می توانیم از سلکتور کلاس استفاده کنیم. ابتدا استایل را به صورت زیر می نویسیم:[php]p.black {color: black}
p.red {color:red}[/php]

و می تونید فایل استال خود را به نام  style.cssسیو کنید

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

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

اکنون برای هر تگی که احتیاج به وسط چین داشته باشد می توانیم از کلاس بالا استفاده کنیم. به چند نمونه در زیر توجه کنید:
[php]<p class="center">متن این پاراگراف به صورت وسط چین نمایش داده می شود</p>
<div class="center">متن این قسمت به صورت وسط چین نمایش داده می شود</div>
<h2 class="center">متن این سرفصل به صورت وسط چین نمایش داده می شود</h2> [/php]
ادامه در جلسه بعد...

[FarbodEZRaeL]

RE: آموزش کار با استایل (CSS)

خوب برای ادامه بحث یک عکس قرار می دهم که مفهم خوب بفهمید



گزینشگرهای کلاس کاذب : این سیلکتورها برای نمایش رویدادهای پویا مورد استفاده قرار می گیرند ؛ این رویدادها می توانند مثل حرکت موس یا کلیک بر روی عنصر باشند. کلاس های کاذب به طراح، آزادی عمل می دهند که چگونگی رفتار عنصر در شرایط مختلف را تعیین کند.طریقه استفاده از کلاس های کاذب به اینگونه است که پس از نام گزینشگر یک علامت : (دو نقطه) و سپس نام یکی از کلاس های کاذب می آید. کلاس های کاذب مختلف به همراه توضیحاتشان را می توانید ببینید

:link اشاره به لینک های بازدید نشده دارد
:visited اشاره به لینک های بازدید شده دارد
:hover اشاره به عناصری دارد که در حال حاضر اشاره گر موس کاربر روی آن ه شناور است
:focus اشاره به عناصری دارد که فوکوس روی آن ها است
:active اشاره به عنصری که کاربر روی آن کلیک کرده است

توجه داشته باشید که دو کلاس link  و visited فقط برای تگ های <a> استفاده می شوند و بقیه کلاسهای کاذب را می توان برای همه ی تگ ها استفاده کرد.

به مثال زیر دقت کنید :[php]a:link { color: #0000ff; }
a:visited { color: #ff00ff; }
a:hover { color: #ff0000; }
a:active { color: #00ff00; }[/php]

خوب می پردازیم به سلکتور id


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

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

همانطور که کلاس را می توانستیم برای یک عنصر مشخص تعریف کنیم در مورد id نیز می توانیم این کار را انجام دهیم. به استایل زیر توجه کنید:
[php]p#border { border: green thin solid } [/php]استایل بالا فقط روی پاراگرافی که شناسه "id="green در آن به کا رفته اثر می گذارد.نکته : هرگز نام یک id را با یک عدد آغاز نکنید چون در این صورت مرورگر  Firefox نمی توانند از آن استفاده کنند.

اینم بگم که فقط و فقط باید خلاقیت به خرج بدین [img]images/smilies/Smileys/139.gif[/img]

در جلسه بعدی تنظیم فونت صفحه با استفاده از استایل توضیح میدهم...

[FarbodEZRaeL]

RE: آموزش کار با استایل (CSS)

در این قسمت به روش تنظیم فونت متن با استفاده از استایل می پردازیم. بسیاری از اعمالی را که قبلاً با تگ <font> انجام می دادیم می توانیم با استایل انجام دهیم.

font-family

ویژگی font-family مشخص می کند که متن با چه فونتی باید نشان داده شود. این ویژگی در حقیقت جانشین شناسه face که در تگ font استفاده می شود است. گزینه پیش فرض برای فونت ممکن است در مرورگرهای مختلف تفاوت داشته باشد، اما معمولاً Times New Roman است.در مثال زیر از ویژگی font-family برای تغییر فونت متن داخل یک div به Arial استفاده می کنیم:
[php]<div style="font-family: Arial">این متن با فونت Arial نمایش داده می شود.</div>[/php]
 font-size

این ویژگی مشخص کننده اندازه فونت در صفحه می باشد. گزینه پیش فرض برای این ویژگی medium است.فرض کنید می خواهیم متن درون یک DIV با اندازه 30 پیکسل نمایش داده شود:
[php]<div style="font-size: 30px">این متن با اندازه 30 پیکسل نمایش داده می شود.</div>[/php]

در جلسه بعدی درباره تصاویر زمینه وب سایت بحث می کنم[img]images/smilies/Smileys/136.gif[/img]

[FarbodEZRaeL]

RE: آموزش کار با استایل (CSS)

خوب میرسیم به دنباله آموزش
این ویژگی برای مشخص کردن تصویر زمینه به کار می رود.کاربرد background-image همانند background-color است با این تفاوت که به جای مشخص کردن رنگ باید یک تصویر را تعیین کنیم. این ویژگی به صورت زیر نوشته می شود.[php]background-image:url(آدرس تصویر مورد نظر)

<span style="background-image: url(http://آدرس)"</span>


[/php]

ما با استفاده از شناسه background در تگ BODY می توانستیم برای صفحه تصویر زمینه مشخص کنیم. اما با استفاده از استایل می توانیم کنترل بیشتری بر این تصویر زمینه داشته باشیم چه این تصویر زمینه برای کل صفحه استفاده شود چه برای قسمت مشخصی از صفحه. برای مثال می توانیم تصویر زمینه را به گونه ای تعریف کنیم که تکرار نشود، ثابت باشد، یا برای آن نقطه شروع تعیین کنیم. برخی از این خواص را می توانید در زیر ملاحظه کنید:



برای استفاده از این ویژگیها و کاربرد آنها برای تگ BODY می توانید یک استایل در قسمت HEAD متن تعریف کنید یا از استایل خارجی استفاده کنید
[php]<style type="text/css">
<!--
body {
background-image:url(http://آدرس عکس);
background-repeat:repeat-y }
-->
</style>[/php]background-repeat

همانطور که در درس قبل ملاحظه کردید در مورد background-image توضیحاتی داده شد. در اینجا به سایر ویژگیهای مربوط به تصویر زمینه می پردازیم. این ویژگی تعیین کننده نوع تکرار شدن تصویر زمینه است. در اینجا مقادیری را که می توان به این ویژگی اختصاص داد بیان می کنیم:repeat
این مقدار تعیین می کند که تصویر زمینه در صورتی که از اندازه پنجره کوچکتر بود هم به صورت افقی و هم عمودی تکرار شود تا همه زمینه پنجره را بپوشاند.
no-repeat
این گزینه مشخص می کند که تصویر زمینه نباید تکرار شود حتی اگر از اندازه پنجره کوچکتر بود.
repeat-x
این گزینه مشخص می کند که تصویر باید به صورت افقی تکرار شود نه عمودی.
repeat-y
این گزینه مشخص می کند که تصویر زمینه باید به صورت عمودی تکرار شود.

---------------------------------------------------------------------------------------------------------------------
background-position

این ویژگی جهت تعیین موقعیت تصویر زمینه در صفحه استفاده می شود. این ویژگی بیشتر زمانی مورد استفاده قرار می گردد که برای تصویر زمینه از background-repeat: no-repeat استفاده شده باشد. این ویژگی می تواند دو مقدار را همزمان به خود اختصاص دهد. با این دو مقدار می توانیم موقعیت عمودی و افقی تصویر در صفحه را تعیین کنیم. توجه داشته باشید که این دو مقدار باید با یک فاصله خالی از هم جدا شوند نه کاما یا نقطه ویرگول.

دو مقداری که می توان به این ویژگی اختصاص داد از مقادیر زیر انتخاب می شوند:

    top, center, or bottom
    left, center, or right

برای این ویژگی باید از هر دسته از مقادیر بالا فقط یکی انتخاب شود. در اینجا می توانید برخی از موارد قابل استفاده را مشاهده کنید:

    background-position:top right
    این ویژگی تصویر زمینه را در بالا و سمت راست صفحه نمایش می دهد.
    background-position:center right
    این ویژگی تصویر را در سمت راست وسط صفحه نمایش می دهد.
    background-position:bottom center
    این ویژگی تصویر زمینه را در پایین مرکز صفحه نمایش می دهد.

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

در این مثال از لوگوی سایت ما به عنوان زمینه صفحه استفاده شده است که در فاصله 20 پیکسل از بالا و 40 پیکسل از چپ صفحه قرار می گیرد. در ضمن از ویژگی background-attachment: fixed استفاده شده است تا در صورت حرکت دادن صفحه زمینه به صورت ثابت قرار بگیرد. کد زیر را به منظور تعیین تصویر زمینه صفحه در بخش HEAD صفحه قرار می دهیم:
[php]<style type="text/css">
<!--
body {
background-image:url(http://آدرس عکس);
background-attachment:fixed;
background-position:40px 20px }
-->
</style>[/php]
ادامه مبحث css در جلسه بعدی....