کدهای css کجا قرار دارند؟

CSS   
20 می 2014   

همانطور که پیش از این گفته شد سه راه برای قرار دادن  کدهای css وجود دارد:

  • در قسمت header سایت و میان تگ های <style> و </style>
  • در یک فایل جداگانه با فرمت .css و فراخوانی آن
  • قراردادن این کدها به شکل درون خطی در صفت style از هز عنصر html

در ادامه با توضیح هریک می پردازیم.

کدهای css درون تگ <style>

اولین راه نوشتن کدها به شکل داخلی در فایل موردنظر است. این کدها درون تگ <style> که خود آن در تگ <head> قرار دارد، قرار می گیرند. کد زیر این قسمت ها را نشان می دهد:

 همانطور که مشاهده می شود تگ <style> در کنار بقیه کدهایی که درون تگ <head> هستند، قرار دارد.

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

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

مثال زیر نمونه ای از این شکل کدنویسی است:

 

قراردادن کدهای css در یک فایل خارجی

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

در این زمان می توانیم قطعه ای از کدهای مان را درون فایل موردنظر قرار داده و آن فایل را به فایل اصلی اضافه کرد. این کار روشی معمول در برنامه نویسی است.

پیش از این هم گفته شد که فایل حاوی کدهای CSS با همان فرمت .css شناخته می شود. همچنین یک فایل css دارای هیچگونه کد ابتدایی یا انتهایی (مانند html) نیست.

اگر فایلی با نام style.css در کنار فایل اصلی داشته باشیم آن را به شکل زیر به برنامه ی خود اضافه می کنیم:

می بینید که این تگ -یعنی تگ <link>- نیز مانند تگ <style> درون قسمت <head> قرار گرفته است و جزء کدهای سرصفحه است.

به قسمت مشخص شده در کد نگاهی بیندازید. ما برای افزودن فایل css از تگ <link/> استفاده می کنیم. این تگ شامل چند ویژگی می باشد. اولین ویژگی آن rel است که با مقدار stylesheet مشخص می شود که فایل مربوط به ظاهر صفحه است. همچنین ویژگی type نوع کدها را مشخص می کند که برابر text/css است؛ یعنی فایل موردنظر دارای کدهای css است؛ و ویژگی آخر که برای شما آشناست، href است و مسیر فایل موردنظر را تعیین می کند.

معمولا زمانی از این نوع تنظیمات استفاده می کنیم که بخواهیم از یک کد در چندین صفحه استفاده کنیم و در هربار آن را فراخوانی می کنیم. برای مثال در چندین صفحه از سایت خود، شما یک منو دارید که ظاهری شبیه به هم در هرصفحه دارد پس به جای این که کدهای مربوطه را در هرصفحه به طور جداگانه قراردهید بهتر است همه ی کدها را در یک فایل (برای مثال با نام menu.css) قرار دهید و آن را با روش گفته شده به صفحه ی خود اضافه کنید.

کدهای css به شکل درون خطی

هر عنصر صفحه که با تگ های html مشخص می شود صفتی با نام style می پذیرد که ویژگی های ظاهری آن را مشخص می کند (یعنی همان کدهای cssما):

برای مثال به کد زیر دقت کنید:

خروجی:

This text is red.

با کدهای css در آینده بیشتر آشنا خواهید شد.

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