CSS مخفف Cascading Style Sheet است که به معنی شیوه نامه آبشار است و برای استایل دهی عناصر نوشته شده به زبان نشانه گذاری مانند HTML استفاده می شود. به صورت کلی سی اس اس به شما امکان می دهد خصوصیات مختلفی از جمله رنگ، اندازه، چیدمان و نمایش را به برچسب های HTML اختصاص دهید.
CSS به دلایلی ساده در سال 1996 توسط W3C (کنسرسیوم جهانی وب) توسعه داده شد. HTML طوری طراحی نشده بود که برچسب هایی برای کمک به قالب بندی صفحه داشته باشد. شما فقط قرار بود نشانه گذاری سایت را بنویسید.
برچسب هایی مانند <font> در نسخه HTML 3.2 معرفی شده اند، و این باعث ایجاد مشکلات زیادی برای توسعه دهندگان شده است. از آنجا که وب سایت ها دارای فونت ها، زمینه های رنگی و سبک های مختلفی بودند، بازنویسی کد یک روند طولانی، دردناک و گران بود. بنابراین، CSS توسط W3C برای حل این مشکل ایجاد شده است.
رابطه بین HTML و CSS به شدت با هم گره خورده است. از آنجا که HTML یک زبان نشانه گذاری است (پایه و اساس یک سایت) و CSS بر استایل (تمام زیبایی شناسی یک وب سایت) تأکید می کند، آنها دست به دست هم می دهند.
CSS از نظر فنی یک ضرورت نیست، اما هیچکس نمی خواهد سایتی که فقط دارای HTML است داشته باشد، چون HTML مانند یک فرد برهنه و CSS مانند لباس آن می باشد.
مزایای CSS
تفاوت بین وب سایتی که سی اس اس را پیاده سازی می کند با وب سایتی که نمی کند گسترده است و مطمئناً قابل توجه است.
احتمالاً وب سایتی را مشاهده کرده اید که قادر به بارگیری کامل نیست و دارای پس زمینه سفید است که بیشتر متن آن به رنگ آبی و سیاه است. این بدان معنی است که قسمت CSS سایت به درستی بارگیری نشده است یا در کل وجود ندارد.
خب قطعا یک وب سایت فقط با HTML موردتایید هیچ کسی نیست.
HTML هنگام طرح بندی محدودیت های خود را دارد. مطمئنا، شما دارای 6 سطح مختلف عنوان هستید. شما همچنین می توانید جداول برای نمایش داده های جدولی و برچسب ها برای تعیین لیست ها و … داشته باشید. اینها به اندازه کافی خوب هستند تا بتوانند یک مستند مناسب به دست آورند که ساختار واقعی اطلاعات را نشان می دهد.
با این حال، هدف HTML مشخص کردن سبک های یک سند HTML نیست. HTML به صورت خاص به ساختار اسناد و معنای عناصر موجود در صفحه مربوط می شود. این امر به ویژه با معرفی HTML5 صادق است.
وظیفه CSS برای تعریف استایل های سند HTML است. بنابراین با CSS کنترل بسیار بهتری در چیدمان صفحات وب خود دارید. مثلا می توانید دقیقاً مشخص کنید که اندازه یک فونت چقدر باشد، دقیقاً کدام عنصر در یک صفحه قرار بگیرد، هنگام چاپ، چه صفحه ای ظاهر می شود و موارد دیگر…
CSS همچنین می تواند در زمان زیادی صرفه جویی کند، به خصوص هنگام نگهداری یک سایت بزرگ.
پس به صورت کلی مزایای CSS شامل موارد زیر می شود:
- CSS موجب صرفه جویی در وقت می شود
با CSS، برای هر عنصر فقط باید یکبار این جزئیات را مشخص کنید. CSS هر زمان که این عنصر رخ دهد، به صورت خودکار سبک های مشخص شده را اعمال می کند.
- صفحات سریعتر بارگیری می شوند
کد کمتر به معنی بارگذاری سریعتر است.
- نگهداری آسان
برای تغییر سبک یک عنصر در کل سایت، شما فقط باید در یک مکان ویرایش کنید.
- سبکهای برتر به HTML
CSS برای سبک ها ساخته شده است. در حالی که مرورگرها معمولاً عناصر HTML را به روشی خاص نمایش می دهند، می توانید این کار را با CSS رد کنید.
CSS چگونه کار می کند؟
CSS از یک نحو ساده مبتنی بر انگلیسی با مجموعه ای از قوانین حاکم بر آن استفاده می کند. HTML فقط برای توصیف محتوا ایجاد شده است. به عنوان مثال: <p> این یک پاراگراف است. </p>
اما پاراگراف را چگونه می توانید استایل دهی کنید؟ ساختار نحوی CSS بسیار ساده است. این دارای یک انتخاب کننده و یک اعلامیه است. شما یک عنصر را انتخاب می کنید و سپس کاری را که می خواهید با آن انجام دهید اعلام می کنید. بسیار ساده ، درست است؟
با این حال، قوانینی وجود دارد که باید به خاطر بسپارید. قوانین ساختار بسیار ساده هستند، بنابراین نگران نباشید.
انتخاب کننده به عنصر HTML مورد نظر برای استایل دادن اشاره می کند. اعلامیه حاوی یک یا چند اعلامیه است که توسط نقاط مجزا از هم جدا شده اند.
هر اظهارنامه یا همان اعلامیه شامل یک نام خاصیت CSS و یک مقدار است. یک اعلامیه CSS همیشه با یک کلمه به پایان می رسد ، و بلوک های اعلامیه توسط پرانتزهای مجعد احاطه شده اند.
بیایید به یک مثال نگاه کنیم:
همه عناصر <p> به رنگ آبی و پررنگ می شوند.
<style>
p {
color: blue;
text-weight: bold;
}
<style>
<style>
p {
text-align: center;
font-size: 16px;
color: pink;
}
</style>
انواع سبک ها در CSS
خب بیایید با سبک داخلی شروع کنیم. با بارگیری مجدد وب سایت ها، سبک های سی اس اس که به این روش انجام می شوند، ممکن است باعث افزایش زمان بارگذاری شود. علاوه بر این، شما نمی توانید از همان سبک CSS همانطور که در یک صفحه وجود دارد، در چندین صفحه استفاده کنید. با این حال، این نیز با مزایایی همراه است. داشتن همه چیز در یک صفحه، اشتراک گذاری قالب برای پیش نمایش را آسان تر می کند.
روش خارجی ممکن است راحت ترین روش باشد. همه چیز به صورت خارجی با فایل .css انجام می شود. این بدان معناست که می توانید تمام یک ظاهر طراحی شده را روی یک فایل جداگانه انجام دهید و CSS را در هر صفحه ای که می خواهید بکار ببرید. سبک خارجی ممکن است زمان بارگذاری را نیز بهبود بخشد.
روش درون خطی با عناصر خاصی که دارای برچسب <style> هستند، کار می کند. هر مؤلفه باید استایل دهی شود، بنابراین ممکن است بهترین یا سریعترین روش برای مدیریت سی اس اس نباشد. اما می تواند مفید باشد. به عنوان مثال، اگر می خواهید یک عنصر واحد را تغییر دهید، می توانید تغییرات را به سرعت انجام دهید، یا شاید به پرونده های CSS دسترسی نداشته باشید.
جمع بندی
بیایید آنچه را که در اینجا آموخته اید خلاصه کنیم:
- CSS برای همکاری با زبانهای نشانه گذاری مانند HTML ایجاد شده است. و برای استایل دهی یک صفحه استفاده می شود.
- سه سبک اجرای CSS وجود دارد و می توانید از سبک خارجی برای هماهنگی چندین صفحه به طور همزمان استفاده کنید.
خب به پایان این مقاله رسیدیم، امیدواریم که با سی اس اس آشنا شده باشید. همچنین ممکن است بخواهید مقاله ما را در مورد نحوه اضافه کردن CSS سفارشی به وردپرس ببینید.