این آموزش در تاریخ ۱۴۰۲/۰۶/۲۶ آپدیت شده است.
آموزش نحوه نوشتن دستورات CSS
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش نحوه نوشتن دستورات CSS با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
نحوه نوشتن دستورات CSS
دستورات زبان CSS نیز همانند دیگر زبان ها دارای یکسری قواعد / قانون هستند که ما باید آنها را رعایت نماییم تا بتوانیم از دستورات آن زبان استفاده نماییم.
در زبان CSS ما باید نحوه نوشتاری ( سینتکس یا Syntax ) دستورات این زبان را بلد باشیم تا بتونیم از دستورات یا ویژگی های این زبان استفاده نماییم.
شکل کلی نوشتن دستورات CSS بصورت زیر می باشد :
حالا دستور بالا داره چی میگه : داره میگه انتخاب کن تگ H1 رو از صفحه ، بعد با استفاده از ویژگی color رنگ متنش رو آبی میکنه و بعدش دوباره با استفاده از ویژگی font-size اندازه فونتش رو ۱۲ پیکسل میکنه، به همین سادگی
- انتخابگر : یعنی انتخاب کن فلان تگ ( یا فلان Class یا فلان ID ) رو از صفحه
- ویژگی : اون دستور CSS هستش که قراره روی تگ اعمال بشه
- مقدار : اینم میشه مقدار اون ویژگی که قراره روی تگ اعمال بشه
پس در کل باید اینجوری یک دستور CSS بنویسیم :
اول انتخاب میکنیم که میخوایم رو چه چیزی استایل پیاده کنیم ، مثلا نام یک تگ یا کلاس یا ID رو مینویسیم بعدش یک } باز میکنیم سپس اون ویژگی که قراره رو تگمون پیاده کنیم مینویسیم سپس یک : میگذاریم بعدش مقدار ویژگی مون رو مینویسم و در نهایت علامت ; و در آخر { را مینویسیم.
|
1 2 3 4 |
.MyClass{ font-size:20px; color:blue; } |
Free-Learn
روش های نوشتن دستورات CSS
ما ۲ روش کلی برای نوشتن دستورات CSS داریم : بصورت آبشاری یاهم بصورت فشرده
- بصورت آبشاری ( زیر هم )
- در این روش دستورات CSS بصورت آبشاری زیرهم نوشته میشن، لطفا به مثال زیر توجه نمایید :
|
1 2 3 4 5 |
h1{ color: blue; background-color: white; font-size: 14px; } |
- بصورت فشرده ( پشت سرهم )
- تو این روش دستورات پشت سرهم نوشته میشن
|
1 |
h1{ color: blue; background-color: white; font-size: 14px; } |
برای اینکه دستورات CSS شما خوانایی بالایی داشته باشن و همچنین از نظر نوشتاری تمیز و مرتب باشند پیشنهاد میکنم دستورات رو بصورت آبشاری بنویسید ولی اگه میخواید حجم فایل CSS تون کمتر بشه باید دستورات رو بصورت فشرده بنویسید.
Free-Learn
مثال های بیشتر
مثال شماره ۱ : نوشتن دستورات CSS بصورت آبشاری
|
1 2 3 4 5 6 7 8 9 10 |
<style> h2{ background-color:#04aa6d; color:#fff; padding:10px; text-align:center; } </style> |
مثال شماره ۲ : نوشتن دستورات CSS بصورت خطی ( فشرده پشت سرهم )
|
1 2 3 4 5 |
<style> h2{ background-color:#04aa6d; color:#fff; padding:10px; text-align:center; } </style> |
خب همونطور که مشاهده مینمایید هر۲ مثال بالا خروجیشون یکیه، ولی خب قطعا خوانایی مثال شماره ۱ خیلی خیلی بهتر و بالاتره به نسبت مثال شماره ۲
اگه مثلا یه فایل CSS داشته باشیم که حجمش ۵۰۰ کیلوبایت باشه و اگه همین فایل رو دستوراتشو بصورت فشرده کنیم میبینی همین فایل از ۵۰۰ به مثلا ۳۰۰ کیلوبایت تبدیل میشه، که همین میتونه به سایت و سرعت بارگذاری و درکل بحث بهینه بودن سایت کمک کنه.
