نحوه نوشتن دستورات CSS

سلام دوستان امیدوارم که حالتون خوب باشه، در این بخش میخواهیم با نحوه نوشتن دستورات CSS آشنا شویم. لطفا در ادامه و تا پایان با من همراه باشید.

نحوه نوشتن دستورات CSS

دستورات زبان CSS یا سی اس اس نیز همانند دیگر زبان ها ( برنامه نویسی یا .. ) دارای یکسری قواعد هستند که ما باید آنها را رعایت نماییم تا بتوانیم از دستورات آن زبان استفاده نماییم.

در زبان CSS ما باید نحوه نوشتاری ( سینتکس یا Syntax ) دستورات این زبان را بلد باشیم تا بتونیم از دستورات یا ویژگی های این زبان استفاده نماییم.

کلمه CSS میشه مخفف Cascading Style Sheets یعنی ( شِت های آبشاری استایل ) خب یعنی چه؟ یعنی دستورات CSS بصورت آبشاری زیرهم نوشته میشن.

مثال :

h1{
color: blue;
background-color: white;
font-size: 14px;
}

همونطور که مشاهده مینمایید دستورات بصورت آبشاری زیرهم نوشته شدن، ولی سوال اینه که آیا حتما باید دستورات را بصورت آبشاری بنویسیم؟!

پاسخ : نه هیچ اشکالی نداره که شما دستورات رو بصورت آبشاری بنویسید یا بصورت فشرده پشت سرهم، مهم فقط اینه که دستورات رو درست نوشته باشید.

برای اینکه دستورات CSS شما خوانایی بالایی داشته باشن و همچنین از نظر نوشتاری تمیز و مرتب باشند پیشنهاد میکنم دستورات رو بصورت آبشاری بنویسید.

شکل نوشتاری یا سینتکس یا Syntax دستورات CSS

شکل کلی دستورات CSS بصورت زیر می باشد : (عکس زیر)

حالا دستور بالا داره چی میگه : داره میگه انتخاب کن تگ H1 رو از کل صفحه ، بعد با استفاده از ویژگی color رنگ متنش رو آبی میکنه و بعدش دوباره با استفاده از ویژگی font-size اندازه فونتش رو ۱۲ پیکسل میکنه.

• Selector : یعنی انتخابگر یعنی انتخاب کن فلان تگ رو از صفحه
• Property : اون ویژگی یا اون عملی که قراره رو تگ مورد نظر اعمال کنیم
• Value : مقدار اون ویژگی که قراره رو تگ مورد نظر اعمال شه

پس اون h1 میشه قسمت انتخابگر ما (یعنی اون قسمت یا تگی که قراره روش عملی انجام بدیم) و Property میشه ویژگی ما (یعنی اون ویژگی یا چیزی که میخوایم روی تگ انتخاب شده پیاده کنیم) و در نهایت هر ویژگی دارای یک مقدار می باشد که باید مقدارشم وارد کنیم. به همین راحتی !

پس در کل باید اینجوری یک دستور CSS بنویسیم - اول انتخاب میکنیم که میخوایم رو چه چیزی دستور پیاده کنیم ، مثلا نام یک تگ یا کلاس یا ID رو مینویسیم بعدش یک } باز میکنیم سپس اون ویژگی که قراره رو تگمون پیاده کنیم مینویسیم سپس یک : میگذاریم بعدش مقدار ویژگی مون رو مینویسم و در نهایت علامت ; و در آخر { را مینویسیم.

دیگه همینطور تا هرچقدر که دلمون بخواد میتونیم از ویژگی های CSS استفاده نماییم.

مثال های بیشتر

مثال شماره ۱ : نوشتن دستورات CSS بصورت آبشاری ( کلیک کنید )

مثال شماره ۲ : نوشتن دستورات CSS بصورت خطی (فشرده) ( کلیک کنید )

منبع: سایت آموزشی فری لرن
برای مشاهده آموزش های بیشتر لطفا به سایت مراجعه نمایید.