حالت موضوعی | حالت خطی

**Reza Ganji**

توجه:اين آموزش به كتاب الكتروني (ايبوك) تبديل شده و در آخرين پست لينك دانلود قرار گرفته است

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

در مورد تاریخچه سی اس اس دوست عزیزم آقای سمیع عادل مطالبی را در تاپیک تاریخچه سی اس اس گفتند و ما وارد جزئیات نمیشیم و مطاب آموزشی را شروع میکنیم.
البته برای یادگیری سی اس اس لازم است اچ تی ام ال هم یاد گرفت!

سی اس اس چیست؟

زبان HTML براي ايجاد يك سيستم كد سازي جهاني به وجود آمد تا بوسيله آن بتوان صفحات وب را بدون توجه به نوع كامپيوتر طراحي كرد. خاصيت مهم HTML قالب بندي ساختاري مي‌باشد ولی متاسفانه به طراحان قابلیت کنترل در همه زوایای صفحه را نمی‌دهد. برای قالب بندی و ایجاد افکت های بیشتر از CSS استفاده می‌کنیم.
در واقع CSS این امکان را ایجاد می‌کند تا طراح بتواند چندین مشخصه در طراحی صفحه را به یکباره تعیین کند بعنوان مثال خصوصیات تمامی تگهای h1 موجود در صفحه اعم از اندازه، فونت و رنگ را مشخص نمايد. و يا مشخصات ظاهري چندين صفحه را در يك فايل CSS تعيين نمايد.
CSS مخفف کلمه Cascading Style Sheets یا همان برگه سبک آبشاری ميباشند.
نسخه های مختلف CSS به شرح زیر می‌باشد:

CSS1
CSS2
CSS3
CSS-P

روشهای به کارگیری CSS

سه روش برای به کارگیری CSS وجود دارد:

1- محلی: (Inline)
در صورتیکه تا به حال از CSS استفاده نکرده‌اید بهتر است از این روش ساده استفاده کنید، اگر چه با این روش نمی‌توان یک style را برای یک مجموعه تگ در آن واحد اعمال کرد.
در این روش درون تگ HTML ای که می‌خواهیم قالب آن را تغییر دهیم ویژگی style را مانند زیر تایپ می‌کنیم.

کد: (انتخاب همه)

<tag style="css declarations"...>content </tag>



<p style="color:red"> content </p>



<p style="color:red;font-size:14pt;border:1pt blue dashed" p>

2-داخلی: (Internal)

این روش برای صفحات مجزایی که متن طولانی دارند بسیار مناسب می‌باشد. بدین صورت می‌توان style را در بالای سند HTML برای کل متن تعریف نمود.
در اینحالت در داخل تگ < head > تگ < style > را مانند زیر تایپ کنید.

کد: (انتخاب همه)

<html xmlns="http://www.w3.org/1999/xhtml">



<head>

  <title>

   <style type="text/css">codhaye css</style>

  </title>

</head>



<body>



</body>



</html>

نمونه حاوی کدهای سی اس اس:

کد: (انتخاب همه)

<head>

  <title>

   <style type="text/css">

   p{

   font-family:arial; color:red; font-size:12px;

   border:1px

 }



</style>

  </title>

</head>

3-خارجی: (External)

در صورتیکه بخواهید از یک style در چندین صفحه استفاده کنید این روش را به کار ببرید. در این حالت می‌توان برای تمام صفحات وب ظاهر متداول و یکسانی بوجود آورد. یعنی به جای آنکه برای هر صفحه از style های داخلی استفاده کنید می‌توانید تمام صفحات را با یک style خارجی طراحی کنید.
برای اینکار در برچسب head یک لینک به فایل سی اس اس میدهیم و توجه داشته باشید که فایل سی اس اس هم بر روی همان سرور قرار دارد.
نکته: url در یک style sheet خارجی(HREF)، مرتبط با محل فایل مذکور بر روی server می‌باشد.

[تصویر: 1294346234_1_29896e446a.gif]

در تصویر زیر تمامی صفحات به یک فایل سی اس اس لینک شده اند.

[تصویر: 1294346327_1_b9c9bd49df.gif]

اکنون هر تغییری که در فایل سی اس اس دهید در تمامی صفحات به طور اتوماتیک اجرا خواهد شد.

**Reza Ganji**

طریقه نوشتن CSS در روش داخلی و خارجی

طریقه نوشتن CSS در روش داخلی و خارجی به یکی از صورتهای عمومی زیر است:
فعلا فرض را بر این می‌گذاریم که selector همان تگ HTML است.

[تصویر: 1294347616_1_b912387b6a.gif]

نکات مورد توجه:

- خصوصیات هر تگ بایستی بین دو علامت {} قرار داده شوند. در ضمن بین هر خصوصیت و مقدار مربوطه به آن علامت ( : ) قرار داده می‌شود.
- می‌توان چند خصوصیت از یک تگ را به یکباره تعریف نمود. در این حالت خصوصیات مختلف را با علامت ( ; ) از هم جدا می‌کنند.
- میتوان خصوصیات چندین تگ را به یکباره تعریف نمود. البته مي بايستي هر کدام از تگها را با علامت (, ) از هم جدا نمود.

به عنوان مثال:

کد: (انتخاب همه)

h1,h2,h3 {color: red}

کد بالا رنگ فونت هر سه تگ را قرمز می‌کند.

- از آنجا که تمام عناصر موجود در CSS توسط Browser ها شناخته نمی‌شود بهتر است محتویات داخل تگ < style > را بین دو علامت کوچکتر و بزرگتر [تصویر: 1294347961_1_db94c1fcff.gif]

قرار داده تا مشخصه ‌های تگ در Browser هايي كه اين عناصر را نمي‌شناسند به صورت اشتباه نشان داده نشوند.

ادامه دارد.....

**Reza Ganji**

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

دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.

**Reza Ganji**

لینک تصحیح شد !

**تیم اسان وب**

در فرمت PNG می توانیم شفافیت (Opacity) تصویر را تغییر دهیم.
اما متاسفانه مروگر IE6 از این فرمت بطور پیش فرض پشتیبانی نمی کند و اغلب کاربران در ایران از این مروگر قدیمی و آسیب پذیر استفاده می کنند.
به همین علت، هنوز استفاده از PNG برای تنظیم شفافیت (Opacity) راهکار مناسبی نیست و می توان از سی اس اس برای تنظیم شفافیت (Opacity) در تصاویر استفاده کرد.
استفاده از سی اس اس برای تنظیم شفافیت (Opacity) یک حسن دیگری نیز دارد
و آن این است که اگر شما به دو تصویر با شفافیت ۷۰% و ۱۰۰% نیاز داشته باشید
می توانید فقط از یک تصویر استفاده کنید و فقط شفافیت ها را در سی اس اس تغییر دهید.
البته متاسفانه تا زمان نگارش این مقاله هنوز w3c این خصیصه CSS را Valid نکرده است.
نکنته مهم این است کدی که برای تنظیم Opacity یا همان شفافیت استفاده می کنید در تمام مروگر ها کار کند.
برای این منظور از کد زیر استفاده کنید و فقط مقادیر شفافیت را تغییر دهید:

.transparent_class {
/* IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

/* IE 5-7 */
filter: alpha(opacity=50);

/* Netscape */
-moz-opacity: 0.5;

/* Safari 1.x */
-khtml-opacity: 0.5;

/* Good browsers */
opacity: 0.5;
}

**sina19910**

سلام من یک سایت با سیستم شیرترانیکس دارم
برای کادر دور عکس های یوذر های سایتم یک کد سی اس اس میخوام
میتونید کمکم کنید؟

**AsanWeb20**

(۲۴-۲-۱۳۹۱ ۰۳:۴۲ صبح)تیم اسان وب نوشته شده توسط: دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.
در فرمت PNG می توانیم شفافیت (Opacity) تصویر را تغییر دهیم.
اما متاسفانه مروگر IE6 از این فرمت بطور پیش فرض پشتیبانی نمی کند و اغلب کاربران در ایران از این مروگر قدیمی و آسیب پذیر استفاده می کنند.
به همین علت، هنوز استفاده از PNG برای تنظیم شفافیت (Opacity) راهکار مناسبی نیست و می توان از سی اس اس برای تنظیم شفافیت (Opacity) در تصاویر استفاده کرد.
استفاده از سی اس اس برای تنظیم شفافیت (Opacity) یک حسن دیگری نیز دارد
و آن این است که اگر شما به دو تصویر با شفافیت ۷۰% و ۱۰۰% نیاز داشته باشید
می توانید فقط از یک تصویر استفاده کنید و فقط شفافیت ها را در سی اس اس تغییر دهید.
البته متاسفانه تا زمان نگارش این مقاله هنوز w3c این خصیصه CSS را Valid نکرده است.
نکنته مهم این است کدی که برای تنظیم Opacity یا همان شفافیت استفاده می کنید در تمام مروگر ها کار کند.
برای این منظور از کد زیر استفاده کنید و فقط مقادیر شفافیت را تغییر دهید:

.transparent_class {
/* IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

/* IE 5-7 */
filter: alpha(opacity=50);

/* Netscape */
-moz-opacity: 0.5;

/* Safari 1.x */
-khtml-opacity: 0.5;

/* Good browsers */
opacity: 0.5;
}

سلام محمد جان همکار محترم لطفا آموزش را کامل قرار بدهید

باتشکر

سرپرست گروه آسان وب

شرکت فنی مهندسی آسان پردازشگر (فناوران مانــدگار)

**sajjad**

سلام...استاد...ایا پی اچ پی و سی اس اس مکمل همدیگه هستن....

~~neo63~~

این css 3 رو من وقت باشه بتونم کامل یادبگیرم jquery بی صاحابو میزارم کنار :|
خیلی تو دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.
کمک میکنه

**Reza Ganji**

درود
پی اچ پی زبان برنامه نویسی است ولی سی اس اس برای استایل دهی بکار میرود.البته در اچ تی ام ال 5 و سی اس اس 3 هم میتوان از توابع استفاده کرد .

در لینک زیر میتوانید برخی توابع آموزش داده شده در سایت دبیلوتری اسکول را مشاهده کنید :

دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.

در سایت بالا به زبان ساده میتوانید بیشتر زبان های نشانه گذاری و برنامه نویسی را یاد بگیرید.