باسلام

در این پست میخوام بهتون آموزش بدم که کدهای css خودتون رو چه طوری توی صفحه قرار بدید که کار کنه!
css مثل HTML نیست که هرجایی از صفحه قرار بگیره و برای گذاشتنش توی صفحه قواعدی داره.

توی این درس سه روش قرار دادن استایل CSS (همون CSS) درون صفحه وب رو یاد میگیریم.

پس با من همراه باشید !
خب.
حالا میخوایم بفهمیم از چند روش میشه CSS رو درون صفحه قرار داد.

اولین روش : روش قرار دادن کدهای CSS درون تگ <style></style>

در این روش کدهای css ی که مینویسید رو درون یک تگ <style></style> قرار میدید مثل کد زیر :

<style type="text/css">

کدهای css

</style>


خوب اینم از این روش ولی شاید بگید اون "type="text/css دیگه چیه توی کد؟

این تکه کد به مرورگر میفهمونه که اینها کدهای CSS هستند.

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

لازم بذکره تگ style که در بالا توضیح دادم فقط باید توی تگ head درون html قرار بگیره !

پس این تا اینجا : دی!


حالا میرسیم به روش دوم : قرار دادن کدها css درون یک فایل جداگانه و خارج از صفحه وب

میشه گفت کلا توی طراحی صفحات وب این روش از همه پرکاربرد تره!

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

ولی وقتی از روش اول یعنی قرار دادن کدها درون خود صفحه وب و با تگ style استفاده کنید اولا هم حجم صفحه وبتون هم از نظر کدنویسی و هم از نظر سنگینی بالا میره و مرورگر هم هی مجبوره کلا صفحه رو دریافت کنه و با وجود کدها css حجم صفحه میره بالا.

پس اگه کدهای css تون خیلی زیاد باشه بهتره از این روش (قرار دادن توی فایل جداگانه ) استفاده کنید!

روش قرار دادن کدها درون فایل جداگانه :

خوب من از اول تا آخر کار رو بهتون میگم :

مرحله اول : کدهاتون رو از طریق یک نرم افزار (note pad از ویندوز یا سایر نرم افزار ها مثل دریم ویور و یا فرانت پیج ) با فرمت css. ذخیره کنید : توجه کنید فایل فقط و فقط و فقط باید با فرمت css. ذخیره بشه مثل codegozar.css

مرحله دوم : کدهاتون رو توی یک فضای آنلاین مثل سایت های آپلودسنتر آپلود کنید . لینک فایل آپلود شده css باید حتما مستقیم باشه ! یعنی نباید جوری باشه که وقتی خواستید برید سراغ فایل اول برید توی سایت و بعد از اونجا دانلودش کنید.

لینک باید حتما مستقیم باشه و به محض اینکه وارد لینک شدید به کدها دسترسی پیدا کنید.

مرحله سوم : همانند زیر عمل کنید و کد زیر رو درون تگ head سایت تون قرار بدید و به جای و جایی که نوشتم کدهاتون رو قرار بدید : 

قبلش یه توضیح بدم که "rel="StyleSheet در کد زیر به مرورگ میگه که این کدها کدهای استایل دهی به صفحه یا همون کدهای css هستند .گزینه href هم نشون میده که مرورگ باید به آدرسی که روبروش هست بره.

<link rel="StyleSheet" href="لینک کدها در اینجا!" />



روش سوم : قرار دادن کد ها درون خود تگ های html

این روش معمولا برای اینه که مستقیما به یه تگ html استایل بدیم. به این روش روش درون خطی یا inline هم میگن.

خوب یه چیز دیگه بگم اینه که به این کد های اضافی که بعد از لینک میان میگن آتروبات ( فیلم آتروبات ها نه ! : دی)

که واژه فینگلیشش هم میشه Attribute .

آتروبات ها یه کدهای html خاصیت میدن. که فعلا من هرچی هم بگم نمی فهمین چی میگم ولی خودتون بعدا می فهمین : دی

مثلا کدی که در زیر به رنگ قرمز درش آوردم آتروبات هست و کلا هرچی که بعد از تگ html بیاد توسط مرورگر یه آتروبات محسوب میشه :

<Tag style=" "></Tag>

خوب اینم از این : حالا فهمیدین چه آتروبات ها چی هستند!

برای این که کدهای css رو اختصاصی برای یک تگ HTML تعریف کنیم باید اون ها رو درون آتروبات style  قرار بدیم.

توجه کنید آتروبات style نه تگ style.

مثل زیر :

<Tag style=" "></Tag>

خوب حالا هرچی درون اون دوتا  ( " " ) قرار بگیره به عنوان کدها css مخصوص اون تگ استافده میشه.

یعنی هرچی توی اون اتایل بنویسین فقط و فقط روی اون تگی که آتروبات استایل توش هست اعمال میشه .

برای مثال در بالا من اسم تگ رو به دلخواه گذاشتم Tag . حالا هرچی توی اون دوتا " " قرار بدید به عنوان استایل به تگ Tag اعمال میشن.

اشتباه نکنید :

وقتی توی این آتروبات استایل های css میزاریم دقیقا روی همین تگ اعمال میشه و کاری با تگ های شبیه به این ندارن!

یعنی  مثل زیر : 

<Tag style=" "></Tag>

<Tag></Tag>

<Tag></Tag>

<Tag></Tag>

در کدهای بالا همه تگ ها نامشون Tag هست ولی هر چی توی آتروبات style قرار بدم فقط روی همون تگ اعمال میشه و کار با بقیه تگ ها نداره !


باتشکر : پایان : دی!

اطلاعات مطلب
دسترسی بیشتر (ابزارهای مطلب)
نوع فونت متن :
اندازه فونت متن : (اندازه متن)
رنگ متن : (مقدار هگزادسیمال رنگ)

لینک این مطلب را در سایت خود قرار دهید :
تعداد حروف بکار رفته در متن :
اشتراک گذاری :