آموزش نحوه نوشتن دستورات CSS
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش نحوه نوشتن دستورات CSS با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
نحوه نوشتن دستورات CSS
دستورات زبان CSS یا سی اس اس نیز همانند دیگر زبان ها ( برنامه نویسی یا .. ) دارای یکسری قواعد هستند که ما باید آنها را رعایت نماییم تا بتوانیم از دستورات آن زبان استفاده نماییم.
در زبان CSS ما باید نحوه نوشتاری ( سینتکس یا Syntax ) دستورات این زبان را بلد باشیم تا بتونیم از دستورات یا ویژگی های این زبان استفاده نماییم.
کلمه CSS میشه مخفف Cascading Style Sheets یعنی ( شِت های آبشاری استایل ) خب یعنی چه؟ یعنی دستورات CSS بصورت آبشاری زیرهم نوشته میشن.
مثال :
|
1 2 3 4 5 |
h1{ color: blue; background-color: white; font-size: 14px; } |
همونطور که مشاهده مینمایید دستورات بصورت آبشاری زیرهم نوشته شدن، ولی سوال اینه که آیا حتما باید دستورات را بصورت آبشاری بنویسیم؟!
آیا اگه مثلا دستورات رو پشت سرهم نوشتیم بصورت زیر ، آیا اشتباه هست و دیگه دستورات روی تگ مورد نظر ما اعمال نخواهد شد!؟
مثال برای نحوه نوشتن دستورات CSS پشت سرهم :
|
1 |
h1{ color: blue; background-color: white; font-size: 14px; } |
پاسخ : نه هیچ اشکالی نداره که شما دستورات رو بصورت آبشاری بنویسید یا بصورت فشرده پشت سرهم، مهم فقط اینه که دستورات رو درست نوشته باشید.
برای اینکه دستورات CSS شما خوانایی بالایی داشته باشن و همچنین از نظر نوشتاری تمیز و مرتب باشند پیشنهاد میکنم دستورات رو بصورت آبشاری بنویسید.
اگه میخواید دستورات CSS تون رو فشرده کنید که یعنی حجم فایل تون کمتر شه پیشنهاد میشه دستورات CSS رو بصورت فشرده پشت سرهم بنویسید.
Free-Learn
شکل نوشتاری یا سینتکس یا Syntax دستورات CSS
شکل کلی دستورات CSS بصورت زیر می باشد : (عکس زیر)
حالا دستور بالا داره چی میگه : داره میگه انتخاب کن تگ H1 رو از کل صفحه ، بعد با استفاده از ویژگی color رنگ متنش رو آبی میکنه و بعدش دوباره با استفاده از ویژگی font-size اندازه فونتش رو ۱۲ پیکسل میکنه.
- Selector : یعنی انتخابگر یعنی انتخاب کن فلان تگ رو از صفحه
- Property : اون ویژگی یا اون عملی که قراره رو تگ مورد نظر اعمال کنیم
- Value : مقدار اون ویژگی که قراره رو تگ مورد نظر اعمال شه
پس اون h1 میشه قسمت انتخابگر ما (یعنی اون قسمت یا تگی که قراره روش عملی انجام بدیم) و Property میشه ویژگی ما (یعنی اون ویژگی یا چیزی که میخوایم روی تگ انتخاب شده پیاده کنیم) و در نهایت هر ویژگی دارای یک مقدار می باشد که باید مقدارشم وارد کنیم. به همین راحتی !
پس در کل باید اینجوری یک دستور CSS بنویسیم : اول انتخاب میکنیم که میخوایم رو چه چیزی دستور پیاده کنیم ، مثلا نام یک تگ یا کلاس یا ID رو مینویسیم بعدش یک } باز میکنیم سپس اون ویژگی که قراره رو تگمون پیاده کنیم مینویسیم سپس یک : میگذاریم بعدش مقدار ویژگی مون رو مینویسم و در نهایت علامت ; و در آخر { را مینویسیم.
دیگه همینطور تا هرچقدر که دلمون بخواد میتونیم از ویژگی های CSS استفاده نماییم.
Free-Learn
مثال های بیشتر
مثال شماره ۱ : نوشتن دستورات CSS بصورت آبشاری
|
1 2 3 4 5 6 |
<style> p{ background-color:blue; color:white; } </style> |
مثال شماره ۲ : نوشتن دستورات CSS بصورت خطی (فشرده)
|
1 2 3 |
<style> p{ background-color:blue; color:white; } </style> |
