CSS چیزی است که به یک وب سایت شکل و حالت اضافه می کند. بدون CSS، صفحات وب به صورت متن ساده، روی پس‌زمینه سفید هستند و استفاده از آن ها بسیار دشوار است! CSS بر اساس HTML ساخته می شود تا تصاویری را که هر روز در وب سایت ها می بینید ایجاد کند.
CSS مخفف چیست؟
CSS مخفف عبارت Cascading Style Sheets است.
CSS چیست؟
CSS چیزی است که به هر صفحه وب سبک و رنگ اضافه می کند. در حالی که HTML ساختار یک سند را با پاراگراف ها، سرتیترها و تصاویر کنترل می کند. CSS به شما امکان می دهد رنگ ها، فونت ها، طرح بندی ها و موارد دیگر را مشخص کنید. اگر یک سند وب را بدن انسان بدانیم،HTML سر و اسکلت بدن است و CSS شکل و استایل آن خواهد بود. مثلاً رنگ چشم‌ها، اندازه گوش‌ها، رنگدانه‌های پوست و حتی لباس‌هایی که می‌پوشیم. به عبارت دیگر، CSS ظاهر و سبک ما است. برای ارائه یک دید کلی، جاوا اسکریپت معادل نحوه تعامل ما با دیگران است. مثلا نحوه صحبت کردن، دست دادن، چشمک زدن، تکان دادن سر و غیره.
CSS چگونه کار می کند؟
انتخابگرهای CSS
انتخابگر CSS چیزی است که ما برای هدف قرار دادن تگ های HTML در صفحات وب خود استفاده می کنیم که در نظر داریم برای آن تگ، یک شکل و ظاهر طراحی کنیم. انتخابگر بخشی از یک قانون CSS است که به مرورگر اطلاع می دهد که در کجا CSS در یک صفحه پیاده سازی شده است.
قانون CSS
یک قانون CSS از یک یا چند انتخابگر و لیستی از اعلانات جدا شده با نقطه ویرگول در داخل پرانتز تشکیل شده است. هر اعلان دارای ویژگی و مقداری است که با دو نقطه از هم جدا شده است. یک قانون از یک یا چند انتخابگر تشکیل شده است. در مثال زیر، انتخابگر یک عنصر پاراگراف است که با حرف P نشان داده شده است. این بدان معنی است که این قانون برای همه پاراگراف ها اعمال می شود. این اعلان بیان می کند که رنگ متن داخل یک پاراگراف، آبی خواهد بود. به املای “رنگ” توجه کنید.
p {color:teal}
فایل CSS چیست؟
یک فایل “css.” پسوندی است که صفحات وب ما را قالب بندی می کند. فایل های مختلف به عناصر موجود در سایت ها و برنامه های ما سبک های متفاوتی می دهند. یک فایل CSS می تواند مانند یک الگو باشد که دارای ویژگی های سفارشی شده برای نحوه استایل دادن به عناصر HTML یک وب سایت است.
فایل های CSS توسط طراحان برای حفظ یک سبک مشابه در کل وب سایت استفاده می شود. این فایل ویژگی های هر صفحه از سایت را در یک مکان ذخیره می کند. هنگامی که در حال طراحی یا طراحی مجدد یک وب سایت هستید، این فایل فوق العاده مفید است، زیرا به این معنی است که مجبور نیستید هر صفحه را به صورت جداگانه استایل دهید.
شما می توانید به سرعت و به راحتی یک، برخی یا همه عناصر مشخص شده را در یک صفحه یا حتی تمام صفحات سایت مورد هدف قرار دهید.
با استفاده از آن، می توانید عناصری را که به طور بالقوه می خواهید از یک مکان واحد، هدف قرار دهید. اگر تغییری ایجاد کنید، آنها در صفحه یا صفحات منتشر می‌شوند. اگر نیاز به ویرایش سبک دارید، می توانید این کار را از یک مکان انجام دهید و عناصر هدف بلافاصله آن تغییر را منعکس می کنند. جالب اینجاست که شما همچنین می توانید سبک های مختلفی را بسته به دستگاهی که قرار است محتوای شما در آن مشاهده شود اعمال کنید. ممکن است ابعاد عناصر را برای مشاهده در تلفن هوشمند کاهش دهید، سپس هنگام مشاهده مثلاً در لپ تاپ یا دسکتاپ، آنها را افزایش دهید.
CSS خارجی، داخلی و درون خطی
CSS را می توان به سه روش Inline ،Internal و External استفاده کرد. در اینجا تفاوت بین این سه را توضیح می دهیم:
- CSS خارجی (External) چیست؟ شیوه نامه های خارجی بسیار مفید هستند، به خصوص زمانی که می خواهید یک سبک را در کل سایت حفظ کنید. قوانین سبک باید فقط یک بار ایجاد شوند و در تمام صفحات مورد نیاز یک سایت اعمال شوند. اگر لازم است سبک را در تمام صفحاتی که از این صفحه خارجی استفاده می کنند کمی تغییر دهید، فقط باید یک بار تغییر داده شود و به طور خودکار برای همه صفحات اعمال می شود، که این روش خیلی مفید است! به طور کلی، این روش استاندارد استفاده از CSS است.
- CSS داخلی (Internal) چیست؟ این فقط برای صفحه ای که روی آن کار می کنید صدق می کند. اگر برای یک صفحه از برنامه وب شما به یک سبک منحصر به فرد نیاز باشد، می توان از این مورد استفاده کرد.
- CSS درون خطی (Inline) چیست؟ CSS درون خطی، که در مثال زیر از آن استفاده خواهم کرد، به یک عنصر صفحه خاص مربوط می شود. در مثال زیر، ما از CSS برای تبدیل یک عنوان به رنگ قرمز در یک صفحه استفاده می کنیم. متوجه خواهید شد که این دستور در متن HTML جاسازی شده است، که چگونه نوشته می شود. با این حال، Inline CSS تنها در جایی استفاده می شود که می خواهید یک سبک منحصر به فرد را به یک عنصر خاص اعمال کنید.
<!DOCTYPE html> <html> <body> <h2 style="color:red;">This is a Red Heading</h2> </body> </html>
حاصل نمایش کد بالا در نهایت به شکل زیر خواهد بود:
This is a Red Heading
ترجمه: ابوالفضل محمدی جو
منبع:
https://codeinstitute.net/nl/blog/what-is-css-and-why-should-i-learn-it