آموزش پرسش و پاسخی css

[amirepsilon]

سلام
دوستان من کمی css بلدم
اگر کسی سوالی داره میتونه بپرسه !
ان شا الله جواب میدم
اساتید دیگه هم کمک کنند لطفا
یا علی

[neda]

دوست عزیز سلام
ممنون که این تاپیک رو ایجاد کردید ولی چون هدف ما اموزش هست شاید کسانی باشند که ندونن css چیه و چه کاربردی داره برای همین نمی تونن سوالی هم بپرسن پس بهتره شروع کنید خودتون اموزش بدین و گام به گام جلو برید تا کسانی که می خوان استفاده کنن مطالبتون رو دنبال کنن و اگر به مشکل برخوردند سوال بپرسند
با اجازه شما و برای شروع یه توضیحی در مورد اینه css چیست اینجا می ذارم تا شما ادامه و سایر عزیزان ادامه بدین
منتظریم...
css چیست

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

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

موفق و برقرار باشید

[neda]

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

کد PHP:

p.black {color: black}
p.red {color:red} 


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

کد PHP:

<p class="black">این متنی است که به رنگ مشکی نمایش داده می شود</p>
<p class="red">این متن به رنگ قرمز نمایش داده می شود.</p>/ 


نکته : شما می توانید بیش از یک کلاس برای یک تگ HTML تعریف کنید اما برای این کار نباید دو بار از شناسه class استفاده کرد. بلکه باید در یک شناسه class نام دو کلاس مورد نظر را با یک فاصله بین آنها وارد کرد. برای مثال برای پاراگراف زیر از دو کلاس فرضی red و center استفاده شده است:

کد PHP:

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


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

کد PHP:

=.center {text-align: center} 


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

کد PHP:

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


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

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

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

کد PHP:

.test { border: #F00 1px double }
.test a { color: green } 
.test a:hover { border: yellow 2px solid } 


کد HTML زیر برای این مثال مورد استفاده قرار می گیرد:

کد PHP:

<div class="test">
<a href="#">لینک آزمایشی شماره 1</a>
</div>
<a href="#">لینک آزمایشی شماره 2</a> 


موفق و برقرار باشید

[neda]

وارد کردن CSS در تگهای HTML با استفاده از شناسه Style
ساده ترین راه برای افزودن استایل به یک صفحه استفاده از شناسه style در تگهای HTML است.
برای افزودن استایل به یک تگ باید عبارت " "=style را وارد تگ مربوطه کنیم و ویژگیهای مورد نیاز خود را بین دو دابل کوت ( " ) وارد می کنیم. مثلاً فرض کنید می خواهیم به یک تگ DIV استایل اضافه کنیم. در این صورت تگ DIV به صورت زیر در می آید.

کد PHP:

<div style="property:value"> 


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

کد PHP:

< div  style="color:green “   متن داخل DIV </div> 


توجه کنید که بین ویژگی color و رنگ سبز ( green ) از علامت دو نقطه ( : ) استفاده شده نه از علامت مساوی که در تگهای HTML استفاده می شود. همچنین لازم نیست مقادیر مورد نظر را بین علامت های نقل قول ( " ) قرار دهیم. می توانید نتیجه به کارگیری کد بالا را در سطر زیر مشاهده کنید:
متن داخل DIV
به خاطر داشته باشید که برای اینکه خاصیت این استایل از بین برود باید تگی را که استایل در آن به کار رفته است ببندید. در اینجا تا زمانی که تگ DIV بسته نشده باشد متن ما به رنگ قرمز نمایش داده خواهد شد.
این امکان نیز وجود دارد که به یک تگ HTML بیش از یک ویژگی افزوده شود. تنها کافی است بین ویژگیهای مختلف از یک نقطه ویرگول ( ; ) استفاده کنیم. برای مثال اگر بخواهیم متنی که در یک DIV قرار دارد به رنگ قرمز و به صورت ایتالیک باشد می توانیم به صورت زیر کد DIV را بنویسیم:

کد PHP:

.</div>این متن قرمز رنگ و ایتالیک است <div style="color:red; font-style:italic"> 


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

کد PHP:

<div style="color:blue; font-style:italic; font-weight:bold; font-size:12pt; text-align:center">
</div>متن مورد نظر اینجا قرار می گیرد. 


در این مثال ما متنی را با رنگ آبی، ایتالیک، ضخیم، اندازه فونت 12pt و در وسط صفحه خواهیم داشت:
متن مورد نظر اینجا قرار می گیرد.

[neda]

تعریف کردن استایل در بخش head صفحه HTML
سلام به دوستان عزیز
با جلسه سوم اموزش سی اس اس در خدمتتون هستیم. ولی انتظار مکاری بیشتری رو از شما داریم هاااااا!!!!
امروز باز در مورد استایلها صحبت می کنیم
استفاده از استایلها می تونه به ما کمک کنه تا از دوباره نویسی فرمانها جلوگیری کنیم. برای انجام این کار ما می توانیم یک Style را در بخش HEAD در متن HTML خود تعریف کنیم. یک استایل در HEAD با تگ <STYLE> آغاز می شود و با <STYLE/> به پایان می رسد.در زیر می تونید یک نمونه از استایل را که مشخصاتی را برای تگ <SPAN> تعریف می کنه ببینید که در بخش HEAD در متن قرار گرفته است.

کد:

<head>
<style>
<!--
span { color:red; font-style:italic }
-->
</style>
</head>

در نوشتن استایل باید در نظر داشته باشید که نباید از علامتهای کوچکتر و بزرگتر ( < و > ) که در اطراف تگهای HTML استفاده می شود، استفاده کنید. همچنین به جای استفاده از علامتهای نقل قول ( " " ) که در متن HTML استفاده می شود از آکولاد ( { } ) در اطراف خواص استایل استفاده می کنیم. خواص مختلف یک استایل هم به وسیله یک نقطه ویرگول ( ; ) از هم جدا می شوند.
وقتی ما استایلی را در بخش HEAD متن خود برای یک تگ خاص تعریف می کنیم برای محتویات همه تگهایی که استایل برای آن تعریف شده در صفحه مورد استفاده قرار می گیرد. برای مثال وقتی که ما کد بالا را در HEAD متن خود قرار دادیم، هر تگ <SPAN> که در صفحه استفاده شود دارای متنی قرمز و ایتالیک است و نیاز ندارید هر بار دوباره مشخصات متن مورد نظر را تعریف شود.

مثال:

کد:

<span>این متن قرمز و ایتالیک است،</span> اما این متن خارج تگ &lt;span&gt; است و مشخصات آنرا ندارد.<br>
<span>این متن نیز قرمز و ایتالیک است.</span>

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

این متن قرمز و ایتالیک است، اما این متن خارج تگ <span> است و مشخصات آنرا ندارد.
این متن نیز قرمز و ایتالیک است.
با این روش ما می توانیم تقریباً خواص همه تگهای HTML را کنترل کنیم.

تا جلسه بعد
موفق و برقرار باشید

[hadi_nn]

نمیدونم وسط این آموزشها اجازه هست ما هم پست بدیم یا نه
فقط خواستم بگم به نظر من بهتره که از یک فایل استایل خارج از فایل html استفاده کنیم
یعنی بجای اینکه بیایم توی خود div یه استایل تعریف کنیم و یا اینکه اونو توی قسمت head قرار بدیم بهتره که از یه فایل خارجی استفاده کنیم و توی قسمت head اونو اینکلود کنیم
در این صورت اگر چندین صفحه داشته باشیم دیگه احتیاجی نیست که توی همه صفحات یه استایل تکراری رو بنویسیم و حجم صفحات رو بالا ببریم
میتونیم همون یک فایل خارجی رو توی همه صفحات اینکلود کنیم!

[3zar]

کسی هست این تاپیک را ادامه بده؟

[Morteza]

(12-03-2009 07:32 PM)3zar نوشته :  کسی هست این تاپیک را ادامه بده؟

این تایپیک تا همینجاش برا راه افتادن تون کافیه .
راه بیفتین می تونین از منابع کامل تری مثل کتاب " 101 نکته و ترفند سی اس اس " ترجمه ی " استاد عزیز و دوست خوبمون آقای " امیر عباس عبد العلی " انتشارات " ناقوس " استفاده کنید

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

[3zar]

متشکرم مرتضی جان

نسخه pdf را که خود امیر آقا ارائه کرده بودند دانلود کردم.