آموزش Css

**Search** · Tuesday 13 November 2007, 11:31 AM

چگونه از CSS در صفحات خود استفاده کنیم

سه نمونه فایل Css داشتیم
در اینجا روش استفاده از هر نوع را برای صفحات Html توضیح میدهیم

در ابتدا External Style Sheet
این نوع فایل CSS بسیار ایده ال است برای زمانی که شما صفحات زیادی دارید و می خواهید به تمامی آنها یک شکل و رنگ را اختصاص دهید برای این کار باید آدرس فایل CSS خود را بین تگ <Head> قرار دهید و باید از تگ <link> استفاده کنید. به صورت زیر:

کد:

<head>

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

مرورگر شما استایلها را از فایل css به نام mystyle.css باز خوانی میکند فایل Css شما لازم نیست که حتما دارای تگهای Html باشد کافی است که فقط آنرا در Notepad بنویسید و با پسوند.css آنرا ذخیره نمایید مثل زیر

کد:

hr {color: sienna}

 
p {margin-left: 20px} 
body {background-image: url("images/back40.gif")}

توجه داشته باشید که فاصله بین دستورات را رعایت کنید چون فقط IE6 این فاصله ها را نادیده میگیرد ولی سایر مرورگرها نسبت به این فواصل دارای حساسیت هستند برای مثال دستور margin-left: 20 px در همه مرورگرها اجرا میشود ولی این دستور را margin-left: 20px فقط IE6 میتواند درک کند و در ورژن های پایین تر یا موزیلا در حین اجرای آن اختلال به وجود می آید.

Internal Style Sheet
استایل داخلی زمانی مورد استفاده قرار میگیرد که شما بخواهید فقط به یک صفحه استایل به خصوصی را نسبت دهید و باید کلیه استایل خود را بین تگ <head> با استفاده از تگ <Style> بنویسید به صورت زیر:

کد:

<head>

 
<style type="text/css"> 
hr {color: sienna} 
p {margin-left: 20px} 
body {background-image: url("images/back40.gif")} 
</style> 
</head>

دقت داشته باشید که مرورگرها از تگ هایی که نمی شناسند چشم وشی میکنند مثلا مرورگرهای قدیمی تگ <Style> را اگر نشناسند آنرا نشان نمیدهند ولی محتویات نوشته شده بین آنرا نمایش میدهند برای جلوگیری از این مسئله بهتر است به شیوه زیر عمل کنیم

کد:

<head>

 
<style type="text/css"> 
<!-- 
hr {color: sienna} 
p {margin-left: 20px} 
body {background-image: url("images/back40.gif")} 
--> 
</style> 
</head>

Inline Styles
این نوع استایل زمانی مورد استفاده قرار میگیرد که شما می خواهید یک استایل را به قسمت مشخصی از یک صفحه اختصاص دهید برای این عمل باید از دستور <style> بین تگ مورد نظری که لازم به تغییر دارد استفاده کنید به صورت زیر

کد:

<p style="color: sienna; margin-left: 20px">

 
این یک پاراگراف است 
</p>

مسئله بسیار مهم این است که شاید شما از هر سه روش بالا برای یک صفحه استفاده کرده باشید باید حتما توجه داشته باشید که اولویت در ابتدا با Inline Styles بوده پس از آن Internal Style Sheet بر روی تگ اثر میگذارد و در آخر External Style Sheet پس به مثال زیر دقت کنید
اگر یک استایل خارجی داشته باشیم که تاثیر زیر را بر روی H3 داشته باشد

کد:

h3 

 
{ 
color: red; 
text-align: left; 
font-size: 8pt 
}

و یک استایل داخلی که بر روی همان تگ تغییراتی متفاوت به شکل زیر داشته باشد

کد:

h3  
{ 
text-align: right;  
font-size: 20pt 
}

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

کد:

color: red;  
text-align: right;  
font-size: 20pt

**Search** · Tuesday 13 November 2007, 11:32 AM

برای شروع شما باید کمی در مورد HTML اطلاعات داشته باشید.

CSS چیست؟
· Cascading Style Sheets صفحه های تعریف شده آبشاری
· سه نمونه استایل داریم. استایل داخلی و خارجی (External,Internal) و Inline Style
· استایل تعیین میکند کدهای Html چگونه نمایش داده شوند
· استایل ها در Style Sheet ذخیره میشوند
· استایل برای رفع بعضی از مشکلات Html در ورژن 4 به آن افزوده شدند
· استایل خارجی شما را از انجام کارهای حجیم و بیهوده آسوده میکند
· استایل خارجی در فایل های Css ذخیره میشود
· سه نمونه استایل می توانند بر یک فایل موثر واقع شوند.

کدهای html برای نشان دادن محتویات یک صفحه طراحی شدند. آنها به گونه ای طراحی شدند که با استفاده از هر کد آیتم خاصی را نشاد دهند مثلا "این یک جدول است" "این یک سر صفحه است" و غیره که برای هر یک کد جداگانه ای موجود بود. هنگامی که مرورگر Netscape به رقابت با اینترنت اکسپلورر پرداخت هر دو تلاش کردند که کدهای جدید Html و مشخصه های جدیدی را به مرورگرهای خود اضافه نمایند تا در میدان رقابت از یکدیگر پیشی بگیرند اضافه کردن این کدها و مشخصه ها مانند تگ فونت و یا مشخصه رنگ و افزایش آنها باعث پیش آمدن مشکلات بسیار زیادی در طراحی صفحات چند لایه ای شد . پس از افزایش مشکلات World Wide Web Consortium (W3C) تقبل نمود که با استفاده از معیار مشخص و یک استاندارد معین استایل هایی برای افزودن به HTML 4.0 به وجود بیاورد که از این مشکلات بکاهد.
استایل ها تعیین کننده چگونگی نمایش کلیه کدهای موجود در صفحات Html ی هستند که به آن فایل CSS پیوند شده اند . Style sheetهای خارجی بسیار متداول تر هستند چون می توانیم آن را به هر تعداد صفحه Html که میخواهیم بسط دهیم. به طور کل مانند چراغهای یک ساختمان که با زدن یک کلید همگی با هم تغییر رنگ دهند و نیازی به زدن کلید تک تک چراغها نباشد
این مسئله باعث صرفه جویی بسیار در وقت طراحان وب میگردد چون اگر بخواهید فونت 50 صفحه Html را تغییر دهید کافی است که فقط فایل .CSS مربوط به آنها را دستکاری نمایید
همچنین شما میتوانید به طور همزمان چندین استایل مختلف را به یک فایل Html ربط دهید که فایل مربوطه بسته با اولویت استایل آنرا اعمال میکند بیشترین اولویت با دستورات Inline style بوده و پس از آن ترتیب زیر را رعایت میکنند
Internal style sheet
External style sheet
و حالت پیش فرض مرورگر
که یک دستور Inline style می تواند Internal style sheet و External style sheet را برای کد html ی که استفاده شده بی اثر نماید
کلیه مطالب عنوان شده و مطالبی که در آینده بازگو میشود از سایتهای آموزشی انگلیسی زبان می باشد
مطلب فوق از سایت W3School است.

**Search** · Tuesday 13 November 2007, 11:35 AM

اجزای تشکیل دهنده یک فایل Css (قسمت اول)
یک فایل Css از سه جزء تشکیل شده است
Selector: انتخابگر
Property: خاصیت
Value: مقدار

کد:

Selector {Property: Value}

Selector به طور معمول شامل تگهای HTML می باشد و Property صفت و خاصیتی است
که شما به آن تگ مخصوص نسبت می دهید. هر Property شامل یک ارزش یا مقدار عددی
می باشد که Value تعیین کننده مقدار آن می باشد.Property و Value با دو نقطه ":" از یکدیگر جدا میشوند و درون آکولاد "{}" قرار میگیرند.

کد:

Body {color: red}

اگر که Value از چندین کلمه تشکیل شده باشد کلمات درون علامت "نقل قول" قرار میگیرد

کد:

P {font-family: "sans serif"}

اگر که بخواهید چندین Property را به یک selector نسبت بدهید باید آنها را توسط
سمی کالن ";" از همدیگر جدا کنید.

کد:

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

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

کد:

p{text-align: center;color: black;font-family: arial}

شما همچنین می توانید selector ها را گروه بندی کنید و کافی است بین آنها از علامت
کاما "،" استفاده کنید

کد:

h1,h2,h3,h4,h5,h6 {color: green}

**Search** · Tuesday 13 November 2007, 11:37 AM

درس 2 Css:آموزش Class
به وسیله Class selector شما میتوانید استایلهای متفاوتی را برای یک عنصر html مشخص کنید به عنوان نمونه شما میخواهید دو نوع پاراگراف در صفحه خود داشته باشید یکی در سمت راست ردیف شده باشد و دیگری در وسط صفحه قرار بگیرد

کد:

p.right {text-align: right}
p.center {text-align: center}

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

کد:

<p class="right">این پاراگراف در سمت راست ردیف میشود</p><p class="center">این پاراگراف در وسط ردیف میشود</p>

باید توجه داشته باشید که برای هر Class شما می توانید فقط یک صفت و ویژگی تعریف کنید و بیش از این صفحه شما را دچار مشکل می کند دقت کنید برای مثال کد زیر غلط می باشد

کد:

<p class="right" class="center">این یک پاراگراف است</p>

همچنین میتوانید با حذف کردن تگ Html در سلکتور استایل مورد نظر را به تمامی تگهای

Html بسط بدهیم که در مثال زیر کلیه عناصر Html که دارای کلاس Class :"center" هستند

ردیف بندی Text در آنها وسط محدوده مشخص شده می باشد

کد:

.center {text-align: center}

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

قرار میگیرند

کد:

<h1 class="center">این سرفصل در مرکز قرار میگیرد</h1><p class="center">            این پاراگراف در مرکز قرار میگیرد</p>

مواظب باشید برای شروع کردن اسم یک Class از عدد استفاده نکنیدچون در مرورگرهای

موزیلا(فایرفکس) به مشکل برخورد خواهید کرد.

**Search** · Tuesday 13 November 2007, 11:40 AM

آموزش Css درس 3
یادگیری این قسمت میتونه تاثیر به سزایی در طراحی های هرشخصی داشته باشه چون میتوانید با آموختن این درس به تگهای مختلف استایل های یکسانی می توانید نسبت دهید ساختار استفاده از این ویژگی به شکل زیر می باشد

کد PHP:

  [left]#ID Name {property :value}
#Parantez {color :green}[/left]

به مثالهای زیر توجه کنید از تمامی این مثالها میتوان استفاده کرد فقط هر کدام دارای برد خاصی هستند

کد PHP:

  [font=Tahoma][left]<Selector id="id name">متن</selector>[/left][/font]
[font=Tahoma]<h1 id="parantez">متن </h1><p id="parantez">متن</p>[/font]

کد PHP:

  [font=Tahoma]p#parantez1{text-align: center;color: red}در مثال بالا رنگ سبز به دو عنصر متفاوت Html اختصاص داده بشه[/font]
[font=Tahoma][/font]

کد PHP:

  [font=Tahoma][font=Tahoma][color=black][left]p#parantez {color: blue}[/left][/color]در مثال بالا پاراگراف مورد نظر دارای ID به نام Parantez1 می باشد[/font]
[font=Tahoma][/font]
[font=Tahoma][font=Tahoma][color=black][/color][/font][/font][/font]

در این مثال که گفتیم هر تگ پاراگراف که دارای ID به نام پرانتز باشد رنگ آبی را در بر دارد ولی
دقت داشته باشید که فقط تگ P این مشخصه را در بر میگیرد برای نمونه مثال زیر را دقت کنید

کد PHP:

  [LEFT]<h1 id="parantez">متن</h1>[/LEFT]

در این مثال تگ H1 از قانون بالا تبعیت نمی کند
نام یک ID را با عدد شروع نکنید زیرا در مرورگرهای موزیلا به مشکل بر میخورید

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

کد PHP:

  /*یادداشت  */

به مثال های پایین دقت کنید

کد PHP:

  /* یادداشت 1*/p{text-align: center; /* یادداشت 2*/color: black;font-family: arial}

ابزارهای موضوع
پرینت این صفحه / حالت نمایش بصورت پرینت شده ارسال این صفحه به ایمیل یک دوست یا خودتان

آموزش Css

100 Search 2

100
Search 2