تبلیغات

ساختار دستورات و روشهای نوشتن CSS

ساختار دستورات و روشهای نوشتن CSS

برای شروع CSS می توانید از نوت پد استفاده کنید، بله! تعجب نکنید!
CSS یک شیوه نوشتاری می باشد و نیاز به محیط کدنویسی خاصی ندارد و می توان از نوت پد ساده استفاده کرد و همین نیز توصیه می شود.
البته برای بهتر شدن از Notepad++ استفاده کنید، که عین نوت پد ساده بوده ولی با قابلیت Syntax Highliting یعنی نمایش قشنگ تر و تمیز تر و خواناتر کد و تنظیمات اضافی …


تعریف یک دستور در CSS

selector

1- Selector یا گزینشگر
2- Declaration یا اعلان

در عکس بالا شما یک مثال از یک دستور را مشاهده می کنید که بخش های مختلف آن نام گذاری شده اند.

مفهوم Selector: چیز هایی که میخوایم روی اون ها اعلان هامون رو انجام بدیم که در پست بعدی بیشتر به آن خواهیم پرداخت.
مفهوم Declaration: تنظیماتی که روی selector ما اعمال خواهد شد. و هر اعلان شامل یک Property و یک Value می باشد. و Property یعنی خصوصیت و ویژگی.


یک مثال کوچک:

خب یک روش برای نوشتن سی اس اس اینه که کدهارو بین تگ style بنویسید و type اون رو هم مشخص کنید، البته توجه کنید که از این شیوه در سی اس اس داخلی استفاده می شه. به دو روش دیگه هم خواهم پرداخت.

–> فعلا کاری نداریم که در مثال بالا selector رو تگ p قرار دادیم چون بهش در پست بعدی خواهیم پرداخت.
–> همچنین property رو هم در میان { باز و } بسته مشاهده می کنید. و هر property با ; به پایان خود خواهد رسید و بعضی از property ها می توانند بیش از یک مقدار را برای خود داشته باشند ه با فاصله جدا خواهند شد.

نکته: تمام این نکات را به یاد داشته باشید.


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

انواع روش های استفاده از CSS

1- نوشتن CSS در ویژگی style تگ ها:
این روش ابتدایی ترین روشه که ما اعلان هارو در داخل ویژگی style اون تگمون می نویسیمو در این حالت نیازی به Selector نداره چون مستقیما داریم توی تگ خاصی اون رو سرایت میدیم.

2- نوشتن CSS در بین تگ Style:
علاوه بر ویژگی استایلی که برای هر تکی وجود داره، یک تگ html هم برای نوشتن کدهای css در بدنه آن وجود داره!
درک می کنم کمی دشوار گفتم! به این صورت که شما در مثال بالا دیدید، ما از این تگ استفاده کرده و کد css را در داخل آن نوشتیم.
نکته مهم اینجاست که به دلیل این که selector به همه تگهای p اشاره کرده است، پس از ویژگی class استفاده نمی کنیم و مستقیما اعلان ها بر تمامی تگ های p سرایت خواهند کرد.
البته باز این موضوع به بخش Selector ها مربوط می شود.

3- نوشتن CSS خارجی:
روشی هم وجود داره برای نوشتن css که اونرو به صورت فایل خارجی می نویسیم، یعنی خارج از فایل html موجود و بعد از نوشتن آن را به روش خود که در پایین ذکر خواهد شد، وارداون فایل Html ای که میخوایم می کنیم.

روش انجام این کار نیز به شرح زیر می باشد:

می بینید که اولا باید تو head باشه و دوما این که چجوری ایمچورت می شه.
mystyle.css نیز آدرس فایل css می باشد.
از این شیوه برای ایمپورت Css های خود استفاده کنید.

لازم به ذکر است در پست بعدی به Selector ها و انواع مثال ها خواهیم پرداخت.

تبلیغات
0
کانال تلگرام فول کده
تبلیغات

درباره نویسنده

هادی اکبرزاده

[ مدیر فول کده ]

علاقه‌مند به اشتراک گذاری اطلاعات در هر زمینه‌ای / برنامه‌نویس / مدیر فول کده

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

نظرات ثبت شده بدون دیدگاه