سی‌اس‌اس
شیوه‌نامه آبشاری (به انگلیسی: Cascading Style Sheets) با کوته‌نوشت سی‌اس‌اس (به انگلیسی: CSS) یک زبان برای ساخت شیوه‌نامه است که از آن برای توصیف نمایش یک سند (که به یکی از زبان‌های نشانه‌گذاری مثل اچ‌تی‌ام‌ال نوشته شده‌است) استفاده می‌شود. سی‌اس‌اس یکی از فناوری‌های بنیادین (در کنار اچ‌تی‌ام‌ال و جاوا اسکریپت) در وب جهانگستر است.
| پسوند(های) نام پرونده | .css |
|---|---|
| نوع رسانهٔ اینترنتی | text/css |
| شناسانه نوع یکسان | public.css |
| توسعه‌دهنده | ائتلاف وب جهانگستر |
| ارائهٔ اولیه | ۱۷ دسامبر ۱۹۹۶ |
| آخرین ویرایش | CSS 2.1: مرحله ۲ بازبینی ۱ (۱۲ آوریل ۲۰۱۶) |
| گونه | زبان شیوه‌نامه (سبک نگارش) |
| دربرگیرنده | قواعد نگارشی برای عناصر HTML (تگ‌ها) |
| فراگیرنده | اسناد HTML |
| قالب آزاد؟ | بله |
| وبگاه | |
| استانداردهای وب |
|---|
سی‌اس‌اس روشی ساده برای نمایش چیدمان و جلوه‌های تصویری (مانند نوع قلم، رنگ و اندازه‌ها) بر صفحه‌های وب است. سی‌اس‌اس از جنس زبان‌های نشانه‌گذاری، با ساختار متن سادهٔ رایانه هستند و درون هرکدام، دستورهایی آبشار مانند و پی‌درپی، برای چگونگی نمایش هر صفحه وب افزوده می‌شود. به گفته‌ای ساده‌تر، این دستورها روش نشان داده شدن قلم‌ها و اندازه‌شان، رنگ‌ها و پس زمینه‌ها، روش چیدمان موزاییک‌های دربرگیرنده داده‌ها (دیوارهها)، و بسیاری دیگر از عنصرهای ساختار هر صفحه وب را، درون خود جای می‌دهند.
بیشترین استفاده‌ای که از این زبان در حال حاضر می‌شود مشخص کردن سبک صفحهٔ وب اچ‌تی‌ام‌ال و اکس‌اچ‌تی‌ام‌ال است ولی آن را می‌توان بر هر نوع مستند اکس‌ام‌ال از جمله اس‌وی‌جی و اکس‌یوال اعمال کرد. نگهداری و تغییر مشخصات سی‌اس‌اس به عهدهٔ کنسرسیوم وب جهانگستر است.
استانداردهای تازه
در بحث طراحی با استانداردهای وب، همه ساختار گرافیکی و تصویری صفحه‌های وب باید درون این سی‌اس‌اس قرار گیرد و لابه‌لای صفحه‌های وب نباید دستورهایی از این جنس، برای درج چگونگی نمایش صفحه‌ها نوشته شود. به بیانی دیگر، ساختار سند و متن در هر صفحه، باید پاکیزه باشد و دستورهای چگونگی نمایش و زیبایی، همگی یکسره در سی‌اس‌اس افزوده شوند.
برتری‌ها
با اینکه در سال‌های نخست پیدایش طراحی وب، طراح‌ها از جدول‌ها و ترفند پنهان‌سازی آن‌ها برای چیدمان کمک می‌گرفتند، روش مدرن طراحی وب، این روند را منسوخ کرده‌است. چیدمان اکنون، تنها با دیواره (یا DIV)، که برتری‌های فراوانی نسبت به جدول‌ها (یا TABLE) دارند، انجام می‌شود. هر دیواره، یک موزاییک مجازی بخش‌کننده صفحه‌است که کار چیدمان را آسان‌تر انجام می‌دهد. جدول‌ها به جایگاه نمایش داده‌های ستونی خود بازگشتند و دیگر از آن‌ها برای چیدن داده‌های صفحه‌های وب استفاده نمی‌شود. سی‌اس‌اس، افزون بر سبک‌تر کردن هر صفحه وب و پاک‌تر کردن آن، از داده‌های تصویری و نمایشی استاندارد، روش طراحی وب را به میزان فراوانی آسان‌تر و دسترسایی و کارایی وب را بهتر کرده‌اند.
پهنای باند
یک فایل سی‌اس‌اس معمولاً در حافظه پنهان مرورگر ذخیره می‌شود، بنابراین می‌تواند بدون نیاز به بازخوانی در چندین صفحه استفاده شود که این امر باعث کاهش تبادل اطلاعات در شبکه می‌شود.
نسخه‌ها
سی‌اس‌اس، روش چاپ شدن، روش شنیده شدن صدا برای کاربرانی با مشکل دسترسایی، و دستورهای فراوان دیگری را برای چگونگی نمایش سایه زیر قلم‌ها و پس زمینه‌های هر صفحه وب را در خود جای می‌دهند. آخرین نسخه پیشنهاد شده از استاندارد سی‌اس‌اس، نسخه ۳ می‌باشد که هنوز در مسیر پیشنهادی قرار دارد و مرورگرهای اینترنتی، هنوز تمام دستورهایش را پشتیبانی نمی‌کنند.
CSS1
اولین ورژن CSS که در تاریخ ۱۷ دسامبر ۱۹۹۶ ارائه شد.
در این نسخه قابلیت تعیین فونت، تغییر رنگ متن، تغییر رنگ پس زمینه، چینش متن ها، قرارگیری عکس و ... قرار داشت.
CSS2
پس از ۲ سال از انتشار نسخه اول، در سال ۱۹۹۸ CSS2 توسعه و منتشر شد.
از تغییرات مهم این نسخه قابلیت های absolute و relative در کنار z-index بود. همچنین قابلیت هایی نظیر box-shadow و text-shadow در این نسخه معرفی شد.
CSS3
این نسخه آخرین و بزرگترین بروزرسانی CSS تاکنون بوده است.
نحوه استفاده
برای درج CSS در یک سند اچ‌تی‌ام‌ال از یکی از سه روش زیر می‌توان بهره گرفت:
- شیوه‌نامهٔ خارجی
- در این روش برای اتصال یک سند CSS که با پسوند
.cssشناخته می‌شود، از تگ <link> در قسمت <head> استفاده می‌شود. مثال:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css"/>
</head>
- شیوه‌نامهٔ داخلی
- شیوه‌نامهٔ داخلی در قسمت <head> در سند اچ‌تی‌ام‌ال، با استفاده از تگ <style> معین می‌گردد. مانند زیر:
<head>
<style type="text/css">
hr {color:sienna;}
p {margin-left:20px;}
</style>
</head>
- شیوه‌نامهٔ درون خطی
- در این روش مشخصات شیوه‌نامهٔ در تگ مربوطه ذکر می‌شود. مانند زیر:
<p style="color:sienna;margin-left:20px">این بندی جدید است.</p>
اولویت انتخاب قوانین
معمولاً دلیل اثر نداشتن قوانین CSS بر روی برخی عناصر اهمیت متفاوت انتخابگر (selector)ها می‌باشد. برای به حداقل رساندن زمان پیدا کردن باگ‌ها می‌بایست با طرز کار مفسر مرورگرها آشنایی کافی داشته باشید. در بیشتر موارد چنین مشکلاتی زمانی پیش می‌آیند که جایی در قوانین CSS تان انتخابگری با اولویت بیشتر تعریف کرده‌اید.
نحوه محاسبه اولویت
- روش اول: از 0 شروع کنید، برای خصوصیت (attribute) استایل 1000 را اضافه کنید؛ برای هر شناسه 100 اضافه کنید؛ برای هر خصوصیت، کلاس یا شبه کلاس 10 اضافه کنید؛ برای هر نام عنصر یا شبه عنصر 1 اضافه کنید؛ بنابراین در انتخابگر
body #content .data img:hover
ارزش اولویت 122 خواهد بود (0,1،2,2 یا 0122): 100 برای
#content
، 10 برای
.data
، 10 برای
:hover
، 1 برای
body
و 1 برای
img
- روش دوم: تعداد خصوصیت‌های شناسه در انتخابگر را بشمارید (= a). تعداد سایر خصوصیت‌ها و شبه کلاس‌ها در انتخابگر را بشمارید (= b). تعداد نام عناصر و شبه عناصر در انتخابگر را نیز بشمارید (= c). الحاق سه عدد a-b-c ارزش اولویت را نشان می‌دهد.
نمونه کد
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
خروجی:
جستارهای وابسته
- اچ‌تی‌ام‌ال
- دام
- وب
- کنسرسیوم وب جهانگستر
منابع
- ↑ "CSS developer guide". Mozilla Developer Network. Archived from the original on 2015-09-25. Retrieved 2015-09-24.
- ↑ Flanagan, David. JavaScript - The definitive guide (6 ed.). p. 1.
JavaScript is part of the triad of technologies that all Web developers must learn: HTML to specify the content of web pages, CSS to specify the presentation of web pages, and JavaScript to specify the behaviour of web pages.
- ↑ "HTML & CSS" (به انگلیسی). W3C. Retrieved 10 February 2012.
- ↑ «اولویت CSS: هر آنچه باید بدانید». بایگانی‌شده از اصلی در ۶ دسامبر ۲۰۱۳. دریافت‌شده در ۲۵ ژوئیه ۲۰۱۳.
- ویکی‌پدیای انگلیسی
- تعریف شیوه‌نامهٔ آبشاری، سایت کنسرسیوم جهانی وب
- اینترنت و وب جهان‌شمول: چگونه (آنرا) برنامه‌نویسی کنیم (چاپ چهارم) (انگلیسی)
- اینترنت و وب جهان‌شمول: چگونه (آنرا) برنامه‌نویسی کنیم بایگانی‌شده در ۲۷ آوریل ۲۰۰۶ توسط Wayback Machine (چاپ سوم) (انگلیسی)
پیوند به بیرون
- css3.info
- شیوه‌نامهٔ آبشاری در w3schools