تماس درباره   صفحه اصلی
  برنامه نويسی مبتنی بر وب > CSS  
 
 

شيوه ها


شيوها روش ساده ای برای اضافه کردن اطلاعات قالب بندی (مانند فونت، رنگ، ترازبندی و غيره) به صفحات وب است. اين صفحه شامل اطلاعاتی است که چگونگی استفاده از شيوه ها را آموزش می دهد.

شيوه درونی
شيوه درون خطی
شيوه خارجی


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

استفاده از شیوه نامه ها يا مختصر (cascading style sheets) CSS با HTML 4.0 آغاز شد. بسیاری از قابلیت های دیگر که قبلاً در HTML وجود نداشت با CSS در دسترس طراحان قرار گرفت. شيوه ها باعث جداسازی محتوای صفحه از نحوه نمايش آن می شوند. اين جداسازی دسترسی یه محتوا را بهبود بخشيده انعطاف پذيری و کنترل بيشتری را در تعيين ويژگی های نمايشی عناصر در اختيار طراح صفحات وب قرار می دهد.

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

نکته. CSS ها تنها در برازرهای جديد (4.0 به بعد) پشتيبانی می شوند.

CSS Syntax

هر شيوه شامل دو قسمت است: گزينشگر (selector) ويک يا چند اعلان (declarations) . گزينشگر معمولا تگی از HTML است که می خواهيد فرمت آن را تعريف کنيد. هر اعلان شامل يک ويژگی (property) و يک مقدار (value) است. ويژگی خصوصيتی است که می خواهيد تغيير دهيد هر خصوصيت دارای يک مقدار است. اعلان ها هميشه به سميکولن ختم می شوند. و گروه اعلان ها درون آکولاد محصور می شوند.

CSS Syntax

مثال.

p
{
color : red;
text-align : center;
}


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

گزينشگر id برای تعيين يک شيوه روی تنها يک عنصر منحصر بفرد بکار می رود. برای ارتباط شيوه با عنصر موردنظر از خصوصيت id در تگ HTML استفاده می شود. گزينشگرهای id توسط علامت ( #) مشخص می شوند.


مثال. شيوه زير بر روی عنصری که خاصيت id="para1" باشد اعمال می شود.

#para1 {
text-align:center;
color:red;
}


نکته. نام id را هرگز با اعداد شروع نکنيد زيرا در مرورگر Mozilla/Firefox کار نمی کند.


گزينشگر class برخلاف گزينشگر id برای اعمال يک شيوه روی گروهی از عناصر کاربرد دارد. يعنی می توانيد يک شيوه خاص را روی کليه تگ های HTML که در يک کلاس قرار دارند تنظيم کنيد. گزينشگر class با علامت نقطه ( .) آغاز مشخص می شود و از خاصيت class در تگ HTML استفاده می کنند.


مثال. کليه عناصری که class="center" است طبق شيوه center. در مرکز تراز می شوند.

.center {text-align:center;}

مثال. می توانيد عناصر معينی را که بايد در يک کلاس باشند مشخص کنيد. در شيوه زير فقط عناصر پاراگراف تاثير می پذيرند.

p.center {text-align:center;}


نکته. نام کلاس را هرگز با اعداد شروع نکنيد زيرا در مرورگر Internet Explorer کار نمی کند.


سه روش برای درج يک شيوه روی عناصر HTML وجود دارد: شيوه درونی، خارجی و درون خطی که در ادامه توضيح داده خواهند شد.


شيوه درونی

ساده ترین راه برای افزودن شيوه به یک صفحه استفاده از شيوه درونی (Internal Style Sheet) است. اين روش وقتی به کار می رود که هر صفحه شيوه جداگانه ای داشته شود.

شيوه درونی را بايد در بخش توسط تگ styleتعريف کرد.


مثال. شيوه زير رنگ زمينه صفحه را قرمز و حاشيه سمت چپ پاراگراف را 20 پيکسل تنظيم می کند.

<head>
<style type="text/css">
body{ background-color: red }
p { margin-left: 20px }
</style>
</head>


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

<head>
<style type="text/css">
<!--
H1{
background-color:blue; color:white; font-size:40 pt;
font-family:arial; text-transform:uppercase; text-align:right
}
P{ text-indent: 2.5 em; font-size:12pt; font-family:tahoma }
-->
</style>
</head>


شيوه درون خطی

وقتی يک شيوه منحصر به فرد برای يک عنصر تکی بکار می رود از شيوه درون خط (inline style) استفاده می شود. برای استفاده بايد صفت style در تگ مربوطه استفاده شود. صفت style می تواند شامل هر خاصيت CSS باشد.


مثال. شيوه درون خطی زير تغيير رنگ و حاشيه چپ پاراگراف را نشان می دهد.

<p style="color: red; margin-left: 20px">
This is a paragraph
</p>


شيوه خارجی

هنگامی که قرار است شيوه ها بر روی چندین صفحه مختلف به طور یکسان اعمال شوند بهترین روش استفاده از یک فايل شيوه خارجی (external style sheet) و لينک کردن آن به صفحه موردنظر است. بدين صورت کدهای مربوط به شيوه فقط یکبار نوشته می شود. علاوه بر اين می توان ظاهر کل وب سايت را تنها با تغيير يک فايل عوض کرد.

هر صفحه بايد توسط تگ به فايل حاوی شيوه خارجی پيوند بخورد. تگ لينک در بخش head قرار می گيرد.


مثال. نحوه پيوند فايل شيوه mystyle.css به مستند.

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>


نکته. پسوند فایل های شيوه خارجی بايد css. باشد.


مثال. برای مشاهده يک نمونه استفاده از شيوه خارجی فايل فشرده زير را دانلود کنيد (راست کليک کرده و save link as يا save target as ). سپس کد آنها در يک ويرايشگر متن ملاحظه کنيد. با دوبار کليک روی فايل خروجی را در مرورگر مشاهده کنيد.

CSS_Example.zip

مثال. تغيير رنگ زمينه

مثال. قرار دادن تصوير پيش زمينه

مثال. ثابت نگهداشتن تصوير زمينه

مثال. حذف زيرخط هايپرلينک

مثال. تغيير رنگ هايپرلينک 1

مثال. تغيير رنگ هايپرلينک 2

مثال. گالری تصاوير

مثال. تعيين فرمت نمايش جدول

مثال. مخفی کردن يک عنصر


برای مشاهده مثال های بيشتر روی شيوه ها اينجا را کليک کنيد.


 

 


 

صفحه اصلی| PDF| درباره| تماس