سی اس اس CSS

سی اس اس CSS: Cascading Style Sheets کنار HTML هستهٔ فناوری ساخت صفحه های وب هستن. CSS روشی ساده برای نمایش چیدمان و جلوه‌های تصویری (مثل نوع قلم، رنگ و اندازه‌ها) توی صفحه‌های وب هست. سی اس اس از جنس زبان‌های نشانه‌گذاری، با ساختار متن سادهٔ کامپیوتری هست و توی هرکدوم، دستورهایی آبشار مانند و پشت سر هم، برای چگونگی نمایش هر صفحه وب اضافه میشه. به زبان ساده‌تر، این دستورها روش نمایش قلم‌ها و اندازه های اونها ، رنگ‌ها و پس زمینه‌ها، روش چیدمان موزاییک‌های دربرگیرنده داده‌ها (دیواره‌ها)، و بسیاری دیگه از عنصرهای ساختار هر صفحه وب را، توی خودش جای میده.

در حال حاضر بیشترین استفاده‌ای که از این زبان می‌شه مشخص کردن سبک صفحهٔ وب HTML و XHTML هست ولی اونه میشه به هر نوع مستند XML از جمله SVG و XUL اعمال کرد. نگهداری و تغییر مشخصات CSS به عهدهٔ کنسرسیوم وب جهانگستر هست.

برتری‌های CSS

با اینکه تو سال‌های اولیه پیدایش طراحی وب، طراح‌ها از جدول‌ها و ترفند پنهان‌سازی اونها برای چیدمان کمک می‌گرفتن، ولی روش مدرن طراحی وب، این روند را منسوخ کرده. الان، تنها با دیواره (یا DIV)، که برتری‌های فراوانی نسبت به جدول‌ها (یا TABLE) دارن، انجام میشه. هر DIV، یک موزاییک مجازی بخش‌کننده صفحه هست که کار چیدمان را آسونتر انجام می‌ده. جدول‌ها به جایگاه نمایش داده‌های ستونی خودشون برگشتن و دیگه از اونها برای چیدن داده‌های صفحه‌های وب استفاده نمیشه. سی اس اس ، علاوه بر سبک تر کردن هر صفحه وب و تمیزتر کردن اون، از داده‌های تصویری و نمایشی استاندارد، روش طراحی وب را به میزان فراوانی آسان تر و دسترسایی و کارایی وب را بهتر کرده‌.

پهنای باند

یه فایل CSS معمولاً توی حافظه پنهان مرورگر ذخیره میشه، به همین دلیل میتونه بدون نیاز به بازخوانی توی چندین صفحه استفاده بشه که این باعث کاهش تبادل اطلاعات توی شبکه میشه.

CSS سی اس اس

CSS سی اس اس

نحوه استفاده

برای درج CSS توی یه سند HTML از یکی از سه روش زیر میشه استفاده کرد:

شیوه‌نامهٔ خارجی

تو این روش برای اتصال یک سند CSS که با پسوند .css شناخته میشه، از تگ <link> توی قسمت <head> استفاده می‌شود. مثال:

  1. <head>
  2. <link rel="stylesheet" type="text/css" href="mystyle.css"/>
  3. </head>

شیوه‌نامهٔ داخلی

شیوه‌نامهٔ داخلی تو قسمت <head> توی سند HTML، با استفاده از تگ <style> تعریف میشه. مانند زیر:

  1. <head>
  2. <style type="text/css">
  3. hr {color:sienna;}
  4. p {margin-left:۲۰px;}
  5. </style>
  6. </head>

شیوه‌نامهٔ درون خطی

تو این روش مشخصات شیوه‌نامهٔ توی تگ مربوطه نوشته میشه. مانند زیر:

  1. <p style="color:sienna;margin-left:20px">این بندی جدید است.</p>

 

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

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