آموزش CSS ( قسمت دوم ) ساختار CSS

در این پست از وب سایت یک لرن با قسمت دوم آموزش CSS در خدمت شما هستیم , قسمت اول آموزش CSS را میتوانید از طریق پست های قبلی مطالعه کنید

در ادامه همراه ما باشید …

آموزش CSS ( قسمت دوم ) ساختار CSS

ساختار کد های CSS

همانطور که در تصویر زیر مشاهده میکنید کد های CSS یک ساختار کلی یا سینتکس کلی دارند که در اکثر مواقع از این سینتکس استفاده میکنیم

آموزش CSS ( قسمت دوم ) ساختار CSS

تعریف هر کدام از بخش ها :

1- انتخاب گر ( selector  ) : همانظور که در جلسه اول گفتیم کدهای CSS وظیفه استایل دهی به کدهای html را دارند اما چگونه باید مشخص کنیم که استایل ما برای کدام تگ html باشد ؟ درست حدس زدید ! در این جا انتخاب گرها کمک میکنند تا عناصر html را برای استایل دهی انتخاب کنیم

2- ویژگی یا خاصیت ( property ) : اما پس از اینکه انتخاب کردیم به کدام عنصر ( مانند تگ h1 ) استایل دهیم , وقت آن است که استایل دهی را شروع کنیم که در این قسمت یعنی property , ما ویژگی ها را برای عنصر مذکور در نظر میگیریم ( مثلا رنگ )

3- مقدار ( value ) : پس از انتخاب و نوشتن ویژگی ها باید هر ویژگی یک مقدار داشته باشد مثلا برای استایل دهی به عنصر h1 ابتدا آن را انتخاب میکنیم ( مرحله اول ) سپس ویژگی سایز را در نظر میگیریم ( مرحله دوم ) و مقداری که برای سایز در نظر میگیریم value است ( مرحله سوم )

مثال درباره نحوه قرار گیری کد ها

warning شما باید در پایان هر دستور از عبارت ; استفاده کنید تا مرورگر در هنگام اجرای کدها نقطه اتمام دستورات شما را درک کند .

در مثال زیر یک نمونه کد مشاهده میکنید فعلا با محتویات کد کاری نداریم

h1 {color:green;text-align:right;}

در اینجا پس از اتمام هر دستور یک ; استفاده کرده ایم مثلا دستور ” رنگ سبز باشد ” را مشاهده کنید پس از آن از یک ; استفاده شده است

شما میتوانید مثل مثال بالا کدهای CSS را در یک خط وارد کنید اما راه دیگر قرار گیری این کد ” هر دستور در یک خط ” میباشد این راه خیلی بهتر است زیرا نظم در کدنویسی شما رعایت میشود

با مثال بالا هیچ فرقی از لحاظ اجرایی ندارد و فقط یک فضای خالی به وجود آمده است که در کد زیر مشاهده میکنید

h1 {
color: green;
text-align: right;
}

پیشنهاد ما استفاده از راه دوم برای استایل نویسی است

کامنت ها در CSS

کامنت گذاری از جمله کارهایی است که برنامه نویسان حرفه ای از آن استفاده میکنند اما کامنت گذاری یا همان پیام گذاشتن در داخل کد چه فوایدی دارد ؟

1- برای تشخیص راحت تر کدها

2- برای ایجاد توضیح برای کدهای مهم

3- ویرایش آسانتر کدها توسط خود برنامه نویس یا برنامه نویسان دیگر

موارد بالا سه مورد از مهم ترین موارد بود که برای شما گفتیم

اما چگونه کامنت ایجاد کنیم ؟ در CSS برای شروع کامنت از */ و برای اتمام کامنت از /* استفاده میکنیم

h1 {
color: green; /*این یک کامنت یک خطی میباشد */
text-align: right;
}
/*
این یک کامنت
چند خطی میباشد
*/

warning کامنت ها توسط مروگر اجرا نمیشوند و صرفا فایده شان موارد بالا میباشد

در اینجا قسمت دوم آموزش به پایان رسید امیدوارم برای شما مفید بوده باشه
در صورت تمایل نظر خود را درباره این نوشته بیان کنید

فرادرس

برچسب ها : ، ، ، ، ، ، ، ، ، ،