توضیحاتی در مورد css

[NIIT]

سلام، وقت بخیر
سوالی در رابطه با کارایی css داشتم ....اینکه اصلا چی هست و چه کاربردی داره ؟
مثلا میشه یک css برنامه ای رو در برنامه خودمون کپی کنیم و از اون استفاده کنیم؟
و اینکه ممنون میشم اگه با نمونه کد توضیح بفرمایین

بااحترام،niit

موضوعات مشابه:

• 16BIT حل مسئله ی 8 وزیر به زبان c++(بازگشتی و غیر بازگشتی)
• آموزش توضیحات مقدماتی بوت لودر دوم تدریس شده در کلاس استاد رحیم پور
• توضیحاتی در مورد Cookie و Session
• توضیحاتی در مورد Meta Tag
• آموزش توضیحات مقدماتی بوت لودر اول تدرس شده در کلاس استاد رحیم پور

[Hossein]

Css مخفف Cascading Style Sheet هست . مورد استفادش هم جایی هست که شما بخوایید ویژگی های مورد نظرتون رو تو یه فایل ذخیره کنید بعد صفحات HTML مختلفی که میسازید خیلی راحت از این فایله و تعاریفی که توش نوشتید استفاده کنید بدون اینکه مجبور باشید تو تک تک صفحات اون المانها رو پیاده کنید . خوبی این کار اینه که اگه بعد از مدتی خواستید یک تغییر بدید کافیه وارد این فایل بشید و تغییراتتون رو اونجا اعمال کنید . این تغییرات تو کل صفحات اعمال میشه .
و جواب سوالتون بله هست .
پیشنهاد میکنم مقاله زیر رو بخونید . خوب توضیح داده :

شاید تا حالا این سه حرف رو خیلی جاها دیده باشید ، ولی ندونید چیه !
CSS مخفف Cascading Style Sheets هست . با استفاده از زبان ساده ی CSS شما می تونید تنظیمات خاصی رو روی تگ های html (یا زبان های Murkup دیگه مثل xml) اعمال کنید !
هدف CSS جداسازی طراحی بدنه ی یک فایل html از شیوه ی نمایش اون فایل html هست . با CSS شما می تونید تعیین کنید که هر تگ html به چه شکلی نمایش داده بشه . مثلا رنگ ، اندازه و نوع فونت متن درون تگ رو مشخص کنید . یا اینکه پس زمینه و ویژگی های دیگه ی تگ رو تعیین کنید .
! سوال : شاید با خودتون بگید که هر تگ html خودش یک سری ویژگی هایی داره که با دادن مقدار به اونها میشه نوع نمایش تگ رو مشخص کرد . پس دیگه CSS واسه چیه ؟
مثلا تگ <font>در زیر رو ببینید که ویژگی های رنگ و اندازه و نوع فونت رو در خودش داره :

<font color=”red” size=”12px” face=”Tahoma”>Ustmb.ir</font>

خروجی این کد متن Ustmb.ir هست که با رنگ قرمز ، اندازه ی 12 پیکسل و با فونت Tahoma نمایش داده میشه.

( اصطلاح : در html اصطلاحا به ویژگی هایی که روی هر تگ می تونید اعمال کنید attribute های اون تگ میگن . مثلا size و color از attribute های تگ font هستند )

خب پس با توجه به اینکه هر تگی خودش می تونه نوع نمایشش رو تعیین کنه ، دیگه چه لزومی به استفاده از CSS هست ؟
! جواب : شما فرض کنید می خواید تو صفحه ی وبتون 100 بار (به تعداد زیاد) در جاهای مختلف صفحه ، متنی رو با شیوه ی نمایش خاصی بیارید . اگر بخواهید از attribute های هر تگ برای نوع نمایش اون استفاده کنید ، مثلا در مثال بالا باید 100 بار تگ font رو همراه با هر سه ویژگی color ، size و face در کد صفحه ی وبتونن بیارید .
ولی حالا توی CSS در نظر بگیرید : شما تنظیمات color ، size و face رو فقط در یک جای کد صفحه ی وبتون میارید و به این دسته تنظیمات یک اسم (توی css اصطلاحا Selector) اختصاص میدید و به جای اینکه در هر 100 مرتبه تنظیمات رو توی خود تگ بیارید ، فقط میگید که آقای تگ font برو و تنظیمات فلان Selector رو روی خودت اعمال کن . به صورت خاص در این مثال پیاده سازی CSS اون به شکل زیره :
اول باید Selector مد نظرتون رو با تنظیمات نمایشش در تگ<style> تعریف کنید . به شکل زیر :

<style>

.fontStyle1{color:red; font-size:12px; font-family:Tahoma;}

</style> 

و بعد هر جایی که خواستید می تونید از این Selector که در اینجا به نام fontStyle1 تعریف شده به شکل زیر استفاده کنید :

<font class=”fontStyle1“>Ustmb.ir</font>

از ویژگی class در همه ی تگهای html می تونید برای مشخص کردن تنظیمات اعمالی روی تگ استفاده کنید . که البته تنظیماتی با چنین اسمی باید قبلا توی تگ Style نوشته باشید . مثلا در کد بالا تمام تنظیمات سلکتور fontStyle1 روی تگ font اعمال میشه !
(در این پست ، هدف آموزش CSS نیست . این مثال صرفا برای درک بهتر از اینکه چرا باید از CSS استفاده کنیم آورده شده . در پست های آینده به صورت مفصل وارد بحث آموزش CSS خواهیم شد)
:: خوب حالا این همه قصه گفتیم ، مزیت استفاده از CSS در مقابل ویژگی های خود تگهای html چیه ؟
1) کاملا مشخصه که اگه بخواید از attribute های خود html استفاده کنید ، بدلیل اینکه باید اونها رو در هر تگ دوباره و چندباره تکرار کنید حجم فایل html شما خیلی زیاد میشه ، در صورتی که ما با استفاده از CSS میتونیم یک دسته از attribute ها رو فقط یکبار و در یکجا تعریف کنیم و تگهای مختلف به اون دسته تنظیمات ارجاع بدن و نیازی به آوردن تنظیمات در خود تگ و اتلاف فضای بیشتر نباشه . با CSS کلی در اندازه ی فایل صفحه ی وبتون صرفه جویی می کنید !
2) خوب هر چی اندازه ی فایل وبتون کوچیکتر باشه سرعت لود شدن صفحه ی وب هم مسلما بیشتر میشه . که اینکار با CSS میسره !
3) تغییر دادن صفحه ی وبتون به مراتب راحتتر میشه . تو مثال بالا فرض کنید بعد از یه مدتی استقلالی میشید و عاشق رنگ آبی . و تصمیم می گیرید همه ی اون 100 تا جایی که Ustmb.ir رو با رنگ قرمز تو صفحه وبتون آورده بودید آبی کنید . حالا اگه از attribute های html استفاده کرده باشید باید تمام کد صفحه تون رو جستجو کنید و هر جا متن Ustmb.ir رو آوردید برید و مقدار ویژگی color تگ font رو از red به blue تغیر بدید . ولی اگه از CSS استفاده میکردید فقط همون یکجا (توی Selector مورد نظر) red رو تبدیل به blue می کردید و همه ی تگهایی که به این Selector ارجاع میدادند تغیرات رو متوجه میشن !
4) تنظیمات CSS رو می تونید توی فایل جداگونه بزارید و به این ترتیب استفاده و نگهداریش راحتتره !
و …

منبع

:: CSS چیست ؟ - مقاله

[NIIT]

توضیحاتتون واقعا عالی بود ....خیلی خیلی ازتون ممنونم ....
از خدمتتون سوالی داشتم و اون اینکه خاطرم هست استاد در رابطه با Style Sheet فرموده بودن که برای اینکه بتونیم ازش استفاده کنیم میتونیم از قسمت file ، از گزینه new و از قسمت file باید بریم Style Sheet رو بزنیم و در اونجا باید کلاسهای مختلف رو بنویسیم ، و بعد استاد گفتن که باید اون رو drag کنیم حالا ، میخواستم بپرسم که چطور باید کار drag کردن رو در قسمت اصلی source انجام داد؟ و

<style>
.fontStyle1{color:red; font-size:12px; font-family:Tahoma;}
</style>

اینی که فرمودین باید در قسمت source برنامه نوشته بشه؟ یا در همون style sheet ها باید نوشت؟
ممنون از شما

[Hossein]

توضیحاتتون واقعا عالی بود ....خیلی خیلی ازتون ممنونم ....
از خدمتتون سوالی داشتم و اون اینکه خاطرم هست استاد در رابطه با Style Sheet فرموده بودن که برای اینکه بتونیم ازش استفاده کنیم میتونیم از قسمت file ، از گزینه new و از قسمت file باید بریم Style Sheet رو بزنیم و در اونجا باید کلاسهای مختلف رو بنویسیم ، و بعد استاد گفتن که باید اون رو drag کنیم حالا ، میخواستم بپرسم که چطور باید کار drag کردن رو در قسمت اصلی source انجام داد؟ و




اینی که فرمودین باید در قسمت source برنامه نوشته بشه؟ یا در همون style sheet ها باید نوشت؟
ممنون از شما

درگ کردن یعنی اینکه فایل رو انتخاب کنید و بکشید و بندازی روی صفحه ای که دارید کد مینویسید اگه این کار رو بکنید بصورت خودکار اون یک خطی که ابتدای کدتون مینویسید تا از style sheet استفاده کنه خودش نوشته میشه .

در مورد سوال دومتون هم بله باید در همون استایل شیت نوشته بشه .( تو سورس هم میتونید بنویسید . البته در head . یک نمونه اینجا مثال زدم قرار دادن همزمان تصویر و جدول در برنامه)

[Miss World]

يه خلاصه ی خیلی کوتاه:
زبانhtmlیه زبان نشانه گذاریه نه یه زبان برنامه نویسی که باید حتما باcssترکیب بشه ( بخاطر استایل بندیش)...و در اخر باید با زبان phpترکیب بشه تا بتونیم ازش یه وب سایت 1پویا در بیاریم

[Hossein]

يه خلاصه ی خیلی کوتاه:
زبانhtmlیه زبان نشانه گذاریه نه یه زبان برنامه نویسی که باید حتما باcssترکیب بشه ( بخاطر استایل بندیش)...و در اخر باید با زبان phpترکیب بشه تا بتونیم ازش یه وب سایت 1پویا در بیاریم

البته نه الزاما فقط با php بلکه با زبانهای برنامه نویسی دیگه هم قابل استفاده است .فناوری asp.net یه نمونه دیگه است مثلا.

[Codex]

يه خلاصه ی خیلی کوتاه:
زبانhtmlیه زبان نشانه گذاریه نه یه زبان برنامه نویسی که باید حتما باcssترکیب بشه ( بخاطر استایل بندیش)...و در اخر باید با زبان phpترکیب بشه تا بتونیم ازش یه وب سایت 1پویا در بیاریم

البته نه الزاما فقط با php بلکه با زبانهای برنامه نویسی دیگه هم قابل استفاده است .فناوری asp.net یه نمونه دیگه است مثلا.

با این قسمت فناوری asp.net خیلی حال کردم! چون بعضی ها رعایت نمی کنند میگن زبان برنامه نویسی .... در صورتیکه اسکریپته
شکر خدا همه توضیحات داده شده
در کل css برای قالب بندی و خلاصه قشنگتر کردن صفحه استفاده میشه