bluekerm
Member
خب دوستان آموزش CSS رو شروع میکنیم. منبع این آموزش سایت w3school هستش و یک روز در میان آموزشها رو در سایت قرار میدم.
از توضیح مفاهیم اولیه مثل استایل ، کاربرد CSSو... فاکتور میگیرم با این فرض که شما اینارو میدونید!
بریم سراغ آموزش
سه روش برای استفاده از کدهای CSS وجود دارد:
1)external style sheet (شیوه نامه ی خارجی ): در این روش کدهای css رو در یک فایل جداگانه نوشته و با پسوند .css ذخیره میکنیم. سپس در هر صفحه ی html ای که نیاز داشتید ، فایل css رو لینک میکنید. برای لینک کردن از کد زیر استفاده می کنیم:
این استایل شیت رو در هر برنامه ی ویرایشگر متنی میتونید تولید کنید ولی به دو نکته حتما دقت کنید:
1) حتما فایل با پسوند css ذخیره بشه
2) در این فایل از هیچگونه تگ html استفاده نکنید.
2)internal style sheet ( شیوه نامه ی داخلی):در این روش کدهای css رو داخل صفحه ی html مینویسم. در این صورت استایل های تعریف شده فقط در همان صفحه html قابل استفاده هستند. برای استفاده از این روش در قسمت head و با تگ style استایل ها را تعریف میکنیم:
3)inline style : در این روش کدهای css رو برای تگ خاصی و درون تگ خاصی مینویسیم. برای این کار از خصوصیت style هر تگ استفاده میکنیم. مثال:
حال این سوال پیش میاد که کدوم یکی از این روش ها رو استفاده کنیم؟
در صورتی که کدهای شما زیاد باشن و برای چند صفحه بخواهید استفاده کنید بهتره از روش اول استفاده کنید ولی اگه کدها کمه و مربوط به یک صفحه html میشه بهتره از روش دوم استفاده کنید. روش سوم زیاد توصیه نمی شه ولی در موارد جزئی ازش استفاده کنید. البته برای یه صفحه میتونید از هر 3 روش هم استفاده کنید. در این صورت اگه یه استایل رو به هر 3 صورت هم تعریف کرده باشید ، اولویت با روش inline style است و بعد از اون اولویت با internal style sheet است و در آخر external style sheet.
هر دستور css از دو قسمت تشکیل شده : سلکتور و declaration ( متاسفانه معادل فارسی خوبی برای این کلمه پیدا نکردم!)
سلکتور در واقع همان تگ یا جزیی از عناصر html است که قراره استایل رو براش تعریف کنیم. قسمت declaration شامل یک خصوصیت (ویژگی ، property) و مقداری برای آن خصوصیت است.
برای نوشتن دستورات css میتونید به چند روش عمل کنید.
1)یک راه استفاده از تگ هاست. مثل :
این کد باعث میشه همه ی تگهای P با رنگ قرمز نوشته بشن.
2)راه دیگه استفاده از id است. در این روش از یه اسم دلخواه به همراه # برای تعریف استایل استفاده میشه. و در تگ html ای که میخواهیم این استایل به آن اعمال شود از خصوصیت id اش برای ارجاع به استایل استفاده می کنیم. مثال:
این کدها رو نوشته و خروجی رو مشاهده کنید! میبینید که تگ p و تگh1 دوم که id اونها مقداردهی شده با رنگ قرمز نوشته میشوند.
3)روش دیگه استفاده از کلاس هاست. کلاسها رو با . شروع میکنیم و در تگهای html از خصوصیت class برای ارجاع به استایل استفاده میکنیم.
مثال:
در اینجا هم تگ p اول و تگ h1 با رنگ قرمز نوشته میشن.
همچنین میتونیم کلاسها رو برای تگ خاصی تعریف کنیم. مثل:
بعد از اجرای کدهای بالا مشاهده میکنید که کلاس setred فقط برای تگهای p کار میکنه! یعنی برای تگ h1 هیچ تاثیری نداره چون موقع تعریف استایل فقط برای تگ p تعریف شده.
*نکته: اسم کلاس ها و id ها رو با عدد شروع نکنید! چون فقط IE از اینجور اسمها پشتیبانی میکنه! یعنی مرورگرهای دیگه اصلا کلاسهای شما رو تشخیص نمیدن و استایلها رو اعمال نمی کنن.
خب امیدوارم خسته نشده باشین. این از استارت آموزش CSS سوالی در این مورد داشتین در خدمتم. ادامه ی آموزش در 11/12/88
از توضیح مفاهیم اولیه مثل استایل ، کاربرد CSSو... فاکتور میگیرم با این فرض که شما اینارو میدونید!
بریم سراغ آموزش
سه روش برای استفاده از کدهای CSS وجود دارد:
1)external style sheet (شیوه نامه ی خارجی ): در این روش کدهای css رو در یک فایل جداگانه نوشته و با پسوند .css ذخیره میکنیم. سپس در هر صفحه ی html ای که نیاز داشتید ، فایل css رو لینک میکنید. برای لینک کردن از کد زیر استفاده می کنیم:
کد:
[LEFT][RIGHT][FONT=Tahoma][SIZE=3]<head>[/SIZE][/FONT]
[FONT=Tahoma][SIZE=3]<link rel="stylesheet" type="text/css" href="mystyle.css" />[/SIZE][/FONT]
[FONT=Tahoma][SIZE=3]</head>[/SIZE][/FONT][/RIGHT]
[/LEFT]
1) حتما فایل با پسوند css ذخیره بشه
2) در این فایل از هیچگونه تگ html استفاده نکنید.
2)internal style sheet ( شیوه نامه ی داخلی):در این روش کدهای css رو داخل صفحه ی html مینویسم. در این صورت استایل های تعریف شده فقط در همان صفحه html قابل استفاده هستند. برای استفاده از این روش در قسمت head و با تگ style استایل ها را تعریف میکنیم:
کد:
[LEFT][RIGHT][FONT=Tahoma][SIZE=3]<head>[/SIZE][/FONT]
[FONT=Tahoma][SIZE=3]<style type="text/css">[/SIZE][/FONT]
[FONT=Tahoma][SIZE=3] ……….. [/SIZE][/FONT]
[FONT=Tahoma][SIZE=3]</style>[/SIZE][/FONT]
[FONT=Tahoma][SIZE=3]</head>[/SIZE][/FONT][/RIGHT]
[/LEFT]
<p style="color:red;"> This is a test!</p>
در صورتی که کدهای شما زیاد باشن و برای چند صفحه بخواهید استفاده کنید بهتره از روش اول استفاده کنید ولی اگه کدها کمه و مربوط به یک صفحه html میشه بهتره از روش دوم استفاده کنید. روش سوم زیاد توصیه نمی شه ولی در موارد جزئی ازش استفاده کنید. البته برای یه صفحه میتونید از هر 3 روش هم استفاده کنید. در این صورت اگه یه استایل رو به هر 3 صورت هم تعریف کرده باشید ، اولویت با روش inline style است و بعد از اون اولویت با internal style sheet است و در آخر external style sheet.
هر دستور css از دو قسمت تشکیل شده : سلکتور و declaration ( متاسفانه معادل فارسی خوبی برای این کلمه پیدا نکردم!)
سلکتور در واقع همان تگ یا جزیی از عناصر html است که قراره استایل رو براش تعریف کنیم. قسمت declaration شامل یک خصوصیت (ویژگی ، property) و مقداری برای آن خصوصیت است.
برای نوشتن دستورات css میتونید به چند روش عمل کنید.
1)یک راه استفاده از تگ هاست. مثل :
کد:
p {color:red;}
2)راه دیگه استفاده از id است. در این روش از یه اسم دلخواه به همراه # برای تعریف استایل استفاده میشه. و در تگ html ای که میخواهیم این استایل به آن اعمال شود از خصوصیت id اش برای ارجاع به استایل استفاده می کنیم. مثال:
کد:
[LEFT][RIGHT][FONT=Tahoma][SIZE=3]<head>[/SIZE][/FONT]
[FONT=Tahoma][SIZE=3]<style type="text/css">[/SIZE][/FONT]
[FONT=Tahoma][SIZE=3] #setred {color:red;}[/SIZE][/FONT]
[FONT=Tahoma][SIZE=3]</style>[/SIZE][/FONT]
[FONT=Tahoma][SIZE=3]</head>[/SIZE][/FONT]
[FONT=Tahoma][SIZE=3]<body>[/SIZE][/FONT]
[FONT=Tahoma][SIZE=3]<p id="setred"> Red color! </p>[/SIZE][/FONT]
[FONT=Tahoma][SIZE=3]<h1> Test </h1>[/SIZE][/FONT]
[FONT=Tahoma][SIZE=3]<h1 id="setred"> RED ! </h1>[/SIZE][/FONT]
[FONT=Tahoma][SIZE=3]</body>[/SIZE][/FONT][/RIGHT]
[/LEFT]
3)روش دیگه استفاده از کلاس هاست. کلاسها رو با . شروع میکنیم و در تگهای html از خصوصیت class برای ارجاع به استایل استفاده میکنیم.
مثال:
کد:
[LEFT][RIGHT][FONT=Tahoma][SIZE=3]<head>[/SIZE][/FONT]
[FONT=Tahoma][SIZE=3]<style type="text/css">[/SIZE][/FONT]
[FONT=Tahoma][SIZE=3] .setred {color:red;}[/SIZE][/FONT]
[FONT=Tahoma][SIZE=3]</style>[/SIZE][/FONT]
[FONT=Tahoma][SIZE=3]</head>[/SIZE][/FONT]
[FONT=Tahoma][SIZE=3]<body>[/SIZE][/FONT]
[FONT=Tahoma][SIZE=3]<p class="setred"> Red color! </p>[/SIZE][/FONT]
[FONT=Tahoma][SIZE=3]<p> Text in default color </p>[/SIZE][/FONT]
[FONT=Tahoma][SIZE=3]<h1 class="setred"> RED ! </h1>[/SIZE][/FONT]
[FONT=Tahoma][SIZE=3]</body>[/SIZE][/FONT][/RIGHT]
[/LEFT]
همچنین میتونیم کلاسها رو برای تگ خاصی تعریف کنیم. مثل:
کد:
[LEFT][RIGHT][FONT=Tahoma][SIZE=3]<head>[/SIZE][/FONT]
[FONT=Tahoma][SIZE=3]<style type="text/css">[/SIZE][/FONT]
[FONT=Tahoma][SIZE=3] p.setred {color:red;}[/SIZE][/FONT]
[FONT=Tahoma][SIZE=3]</style>[/SIZE][/FONT]
[FONT=Tahoma][SIZE=3]</head>[/SIZE][/FONT]
[FONT=Tahoma][SIZE=3]<body>[/SIZE][/FONT]
[FONT=Tahoma][SIZE=3]<p class="setred"> Red color! </p>[/SIZE][/FONT]
[FONT=Tahoma][SIZE=3]<p>text in default color </p>[/SIZE][/FONT]
[FONT=Tahoma][SIZE=3]<h1 class="setred">NOT RED ! </h1>[/SIZE][/FONT]
[FONT=Tahoma][SIZE=3]</body>[/SIZE][/FONT][/RIGHT]
[/LEFT]
*نکته: اسم کلاس ها و id ها رو با عدد شروع نکنید! چون فقط IE از اینجور اسمها پشتیبانی میکنه! یعنی مرورگرهای دیگه اصلا کلاسهای شما رو تشخیص نمیدن و استایلها رو اعمال نمی کنن.
خب امیدوارم خسته نشده باشین. این از استارت آموزش CSS سوالی در این مورد داشتین در خدمتم. ادامه ی آموزش در 11/12/88
آخرین ویرایش: