وب

CSS چیست؟

Cascading Style Sheets برای مرورگر ها تعیین می کند که چگونه متن و هر محتوای دیگری را که شما در HTML می نویسید نمایش دهند.(توصیه می شود دوره آموزشی طراحی سایت و پکیج آموزش طراحی سایت  را مشاهده کنید)

توجه داشته باشید که CSS حساس به حروف بزرگ و کوچک است، بنابراین در تایپ حروف کوچک و بزرگ دقت کنید. CSS توسط تمام مرورگرهای اصلی به تصویب رسیده و به شما اجازه می دهد تا موارد زیر را کنترل کنید:

  • رنگ
  • فونت ها
  • موقعیت
  • فاصله
  • اندازه
  • آرایش صفحه
  • انتقال

سه شیوه اصلی برای استفاده از استایل CSS وجود دارد. شما می توانید استایل های درون خطی را مستقیما به عناصر HTML با ویژگی استایل اضافه کنید. همچنین شما می توانید دستور ها را در تگ های استایل در یک سند HTML قرار دهید. در نهایت شما می توانید دستور ها را در یک صفحه استایل خارجی بنویسید، سپس در سند HTML به آن فایل ارجاع دهید. اگرچه دو گزینه اول موارد استفاده خود را دارند، اکثر توسعه دهندگان صفحات استایل خارجی را ترجیح می دهند، زیرا استایل ها را از عناصر HTML جدا می کنند. این باعث بهبود قابلیت خواندن و قابلیت استفاده مجدد کد شما می شود. ایده CSS این است که شما می توانید یک انتخاب گر را برای هدف قرار دادن یک عنصر HTML در DOM (Document Object Model) استفاده کنید و سپس ویژگی های مختلفی را برای آن عنصر اعمال کنید تا نحوه نمایش آن در صفحه را تغییر دهید.

آموزش پیشنهادی برای شما : آموزش کامل CSS و CSS3

CSS مخفف Cascading Style Sheets است و یک کد است که نحوه نمایش HTML را توضیح می دهد و برای استایل و طرح بندی صفحات وب مورد استفاده قرار می گیرد، برای مثال برای تغییر فونت، رنگ، اندازه و فاصله مطالب خود، تقسیم آن به چندین ستون یا اضافه کردن انیمیشن ها و سایر ویژگی های تزئینی. در ادامه شما را در راه تسلط بر CSS، مبانی نحوه کار آن، از جمله انتخابگرها و خواص، نوشتن دستور ها، اعمال CSS به HTML، نحوه تعیین طول، رنگ و سایر واحدها، و اشکال زدایی آن همراهی می کنیم.

CSS چیست؟

پیش نیازها

قبل از شروع این ماژول باید موارد زیر را در نظر بگیرید:

  1. آشنایی با استفاده از رایانه ها و استفاده از Web passively (به عنوان مثال فقط جستجوی و مطالعه محتوا و مطالب)
  2. یک محیط کاری پایه و نصب نرم افزار و درک نحوه ایجاد و مدیریت فایل ها
  3. آشنایی عمومی با HTML

نکته: اگر شما بر روی کامپیوتر / تبلت / دستگاه دیگری کار می کنید که در آن شما توانایی ایجاد فایل های خود را ندارید، می توانید (بیشترِ) مثال های کد را در یک برنامه کد گذاری آنلاین مانند JSBin یا Thimble امتحان کنید.

CSS می تواند دستورالعمل های مختلفی برای نمایش HTML ارائه دهد. خواستن از مرورگر برای پیدا کردن همه عناصر <strong> و بولد و پررنگ کردن آن ها و یا یافتن همه عناصر <em> و ایتالیک کردن ها آنها فقط دو نمونه از این دستورالعمل هاست.

در این جا مثالی از کد CSS آورده شده است تا ببینید که از نظر ظاهری چگونه و چه شکلی است.

دستورات CSS

با نگاه کردن به مثال بالا، می توانید ببینید که یک دستور CSS از سه بخش تشکیل شده است: یک selector یا انتخاب گر، یک property یا ویژگی (یا صفت) و یک value یا مقدار.

متن خارج از براکت ها، انتخاب گر یا selector نامیده می شود. این انتخاب گر، نام تگ HTML است، بدون <and>. انتخابگر نشان می دهد که استایل روی کدام عنصر HTML باید اعمال شود.

متن در سمت چپ کولون ویژگی (یا صفت) یا property نامیده می شود. این نوع استایل اعمال می شود؛ برای مثال، وزن فونت، استایل فونت یا اندازه فونت.

متن در سمت راست کولون مقدار یا value نامیده می شود و در واقع استایلی است که قرار است مورد استفاده قرار گیرد و یا به عبارتی اعمال شود. (بعضی از مقادیر از واحدهای معینی استفاده می کنند) – به عنوان مثال، اندازه قلم ها به صورت پیکسل (px) نوشته می شود.

CSS چیست؟

CSS درون خطی

مرورگرهای وب دارای استایل های پیش فرض CSS برای نمایش HTML هستند – برای مثال، متن دستورالعمل در تگ های <strong> برای نمایش دادن به صورت bold، یا متن داخل تگ های <h1> برای نمایش با فونت ۳۲ پیکسل است.

با این حال، هر وبسایت، CSS سفارشی خود را نیز اضافه می کند. یکی از روش های سفارشی کردن این است که وب سایت ها این کار را با استفاده از یک ویژگی HTML و با جاسازی استایل CSS درست درون تگ HTML متناظر خود انجام می دهند. برای مثال، برای نمایش عنصر <strong> به رنگ بنفش، کد زیر مورد استفاده قرار می گیرد:

نتیجه به این صورت است:

.I am purple

توجه داشته باشید که استایل کلمه (attribute)، به دنبال علامت برابر می آید، و به دنبال آن مجموعه ای از علامت های نقل قول که حاوی کد CSS هستند. همچنین توجه داشته باشید که هیچ انتخاب گری وجود ندارد، زیرا قبلا مشخص است که کدام عنصر مورد نظر است.

CSS داخلی

CSS درون خطی غیر معمول است، زیرا زمان بارگذاری صفحه را کاهش می دهد. یک روش رایج تر این است که همه استایل های CSS را با هم جمع کرده و آنها را در تگ های <style> HTML قرار دهید. این حالت، برگه استایل داخلی یا internal style sheet نامیده می شود.

عنصر <style> متعلق به <head> یک صفحه وب همراه با عنوان، شرح و سایر عناصر اطلاعاتی است. یک صفحه استایل داخلی می تواند به اندازه دستور های CSS که برای صفحه مورد نیاز باشد، مورد استفاده قرار گیرد؛ و به اندازه ای که عناصر HTML متنوع هستند، صفحه استایل داخلی هم متنوع باشد.

CSS خارجی

یک روش سوم، برای اضافه کردن CSS به وبسایت وجود دارد، و آن نوشتن دستورات در یک فایل جداگانه است. مزیت این کار این است که می توان یک فایل CSS مشابه را به چندین صفحه در سایت پیوند داد. این روشی است که اکثر وب سایت ها از آن استفاده می کنند.

هنگامی که دستور ها در یک فایل خارجی نوشته شده است، باید با HTML اصلی مرتبط شود. برای انجام این کار، وب سایت ها از برچسب HTML زیر استفاده می کنند:

ویژگی rel = “stylesheet” نشان می دهد که این فایل، یک صفحه استایل است که به آن مرتبط است. ویژگی href نام پرونده صفحه استایل (در این جا style.css) را مشخص می کند. توجه داشته باشید که هیچ closing tag یا برچسب خاتمه ای وجود ندارد.

در مورد CSS بیشتر بدانید

این روزها CSS یک زبان بسیار قدرتمند است اما ما فقط اطلاعات بسیار سطحی از آن داریم. اگر می خواهید به اعماق CSS نفوذ کنید، باید دنیای وسیع HTML و CSS را بررسی کنید.

برخی از ارائه دهندگان عالی آموزش و یادگیری آنلاین مانند Treehouse و Codecademy وجود دارند. همچنین بسیاری از کتاب های خیلی مفید درباره CSS وجود دارد، از مبانی CSS3 گرفته تا CSS برای بچه ها!

نوشته های مشابه

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دکمه بازگشت به بالا