| css | |
| پسوند(های) نام پرونده | .css |
|---|---|
| نوع رسانهٔ اینترنتی | text/css |
| شناسانه نوع یکسان | public.css |
| توسعهدهنده | ائتلاف وب جهانگستر |
| ارائهٔ اولیه | ۱۷ دسامبر ۱۹۹۶؛ ۲۹ سال پیش |
| آخرین نسخه | CSS 2.1: مرحله ۲ بازبینی ۱ (۱۲ آوریل ۲۰۱۶؛ ۱۰ سال پیش) |
| گونه | زبان شیوهنامه (سبک نگارش) |
| دربرگیرنده | قواعد نگارشی برای عناصر HTML (تگها) |
| فراگیرنده | اسناد HTML |
| آزاد؟ | بله |
| وبگاه | www.w3.org/TR/CSS/ |
شیوهنامۀ آبشاری (به انگلیسی: Cascading Style Sheets) با کوتهنوشت سیاساس (به انگلیسی: CSS) یک زبان برای ساخت شیوهنامه است که از آن برای توصیف نمایش یک سند (که به یکی از زبانهای نشانهگذاری مثل اچتیامال نوشته شدهاست) استفاده میشود.[۱] سیاساس یکی از فناوریهای بنیادین (در کنار اچتیامال و جاوااسکریپت) در وب جهانگستر است.[۲]
سیاساس روشی ساده برای نمایش چیدمان و جلوههای تصویری (مانند نوع قلم، رنگ و اندازهها و واکنش گرایی وبسایت و همچنین جا به جایی محتوای داخل صفحه) بر صفحههای وب است.[۳] سیاساس از جنس زبانهای نشانهگذاری، با ساختار متن سادهٔ رایانه هستند و درون هرکدام، دستورهایی آبشار مانند و پیدرپی، برای چگونگی نمایش هر صفحه وب افزوده میشود. به گفتهای سادهتر، این دستورها روش نشان داده شدن قلمها و اندازهشان، رنگها و پس زمینهها، روش چیدمان موزاییکهای دربرگیرنده دادهها (دیوارهها [en])، و بسیاری دیگر از عنصرهای ساختار هر صفحه وب را، درون خود جای میدهند.
بیشترین استفادهای که از این زبان در حال حاضر میشود مشخص کردن سبک صفحهٔ وب اچتیامال و اکساچتیامال است ولی آن را میتوان بر هر نوع مستند اکسامال از جمله اسویجی و اکسیوال اعمال کرد. نگهداری و تغییر مشخصات سیاساس به عهدهٔ کنسرسیوم وب جهانگستر است.
استانداردهای تازه
در بحث طراحی با استانداردهای وب، همهٔ ساختار گرافیکی و تصویری صفحههای وب باید توسط دستورها سیاساس مجزا تعیین شود و لابهلای صفحههای وب نباید دستورهایی برای درج چگونگی نمایش آنها نوشته شود. به بیانی دیگر، نشانهگذاری یک صفحهٔ وب (کدهای html) و دستورها مربوط به گرافیک آن (دستورها css) باید کاملاً از یکدیگر جدا باشند.
برتریها
در سالهای نخست پیدایش وب، طراحها از جدولها و ترفند پنهانسازی آنها برای چیدمان صفحهٔ وب کمک میگرفتند؛ اما روش مدرن طراحی وب، این روند را منسوخ کردهاست. به طوری که امروزه کاربرد جدولها به نمایش دادههای ستونی محدود میشود و دیگر از آنها برای چیدمان صفحههای وب استفاده نمیشود.
چیدمان یک صفحهٔ وب، امروزه اغلب با دیواره (یا DIV) انجام میشود که برتریهای فراوانی نسبت به صفحهآرایی به کمک جدولها (یا TABLE) دارد. در این روش، هر دیواره یک موزاییک مجازی بخشکنندهٔ صفحه است که کار چیدمان را آسانتر انجام میدهد. درواقع امروزه صفحههای وب به چند قسمت مجزا تقسیم میشوند که هرکدام، شامل قسمتهای مجزای کوچکتر هستند و معمولا شامل محتوا میشوند و سیاساس، امکانات زیادی برای کنترل چیدمان این اجزا در اخیار طراح میگذارد. از طرفی استفاده از جدولها در طراحی وب، در بحث بهینهسازی موتور جستجو به آن لطمه میزند و این عوامل در مجموع، باعث میشوند که طراحهای وب، تمایلی برای استفاده از جدولها در چیدمان صفحهٔ وب نداشته باشند.
سیاساس، افزون بر سبکتر کردن هر صفحه وب و پاکتر کردن آن از دادههای تصویری و نمایشی استاندارد، روش طراحی وب را به میزان فراوانی آسانتر و دسترسایی و کارایی وب را بهتر کرده است.
پهنای باند
یک فایل سیاساس معمولاً در حافظه پنهان مرورگر ذخیره میشود، بنابراین میتواند بدون نیاز به بازخوانی در چندین صفحه استفاده شود که این امر باعث کاهش تبادل اطلاعات در شبکه رایانهای میشود.
نسخهها
سیاساس، روش چاپ شدن، روش شنیده شدن صدا برای کاربرانی با مشکل دسترسایی، و دستورهای فراوان دیگری را برای چگونگی نمایش سایه زیر قلمها و پس زمینههای هر صفحه وب را در خود جای میدهند. آخرین نسخه پیشنهاد شده از استاندارد سیاساس، نسخه ۳ میباشد که هنوز در مسیر پیشنهادی قرار دارد و مرورگرهای اینترنتی، هنوز تمام دستورهایش را پشتیبانی نمیکنند.
CSS1
اولین ورژن CSS که در تاریخ ۱۷ دسامبر ۱۹۹۶ ارائه شد.
در این نسخه قابلیت تعیین قلم، تغییر رنگ متن، تغییر رنگ پسزمینه، چینش متنها، قرارگیری عکس و … قرار داشت.
CSS2
پس از ۲ سال از انتشار نسخه اول، در سال ۱۹۹۸ CSS2 توسعه و منتشر شد.
از تغییرات مهم این نسخه قابلیتهای absolute و relative در کنار z-index بود. همچنین قابلیتهایی نظیر box-shadow و text-shadow در این نسخه معرفی شد.
CSS3
این نسخه آخرین و بزرگترین بروزرسانی CSS تاکنون بودهاست.
در حال حاضر CSS3 نسخه آخر CSS است ولی بر اساس Level بالا میرود. ولی شماره نسخه تغییری نمی کند.
نحوه استفاده
یک دستور CSS یا CSS Rule از دو بخش تشکیل میشود: بخش انتخابگر (selector) و بخش استایلها (styles). در این ساختار، انتخابگر مشخص میکند کدام عنصر یا عناصر HTML هدف قرار گیرند، و سپس استایلهای تعریفشده در بخش styles روی آنها اعمال میشود.[۴]
برای درج 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 اضافه کنید؛ بنابراین در انتخابگر(این رو هم باید در نظر گرفت که برای صدا کردن عناصر CSS در HTML باید از
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 ارزش اولویت را نشان میدهد.[۵]
انواع
صدا کردن عناصر CSS
معمولاً برای صدا کردن عناصر CSS در HTML باید از class , id استفاده کرد که به همین شکل در HTML نوشته می شود ولی در CSS برای class از نقطه (.) و برای id از شارپ (#) استفاده میشود. ما در فایل CSS خود یک اسم دل بخواه که می تواند یا کلاس باشد یا آیدی بنویسیم و تمامی طراحی های دلخواهمان را برای آن کلاس و یا آیدی مینویسیم و در فایل HTML آن را صدا میکنیم.
مثال
- اول: ما در قسمت اول در فایل CSS خود یک کلاس به اسم center درست میکنیم که استایل های زیر را دارد
.center {
text-align: center;
color: red;
}
سپس اسم کلاس را برای تگ های مورد نظر با عنوان کلاس صدا میکنیم که تغییرات مورد نظر اعمال بشود
<!DOCTYPE html> <html> <head> </head> <body> <h1 class="center">Red and center-aligned heading</h1> <p class="center">Red and center-aligned paragraph.</p> </body> </html>
مثال برای آیدی تقریبا همانند کلاس است
#para1 {
text-align: center;
color: red;
}
<!DOCTYPE html> <html> <head> </head> <body> <p id="para1">Hello World!</p> <p>This paragraph is not affected by the style.</p> </body> </html>
نمونه کد
<html>
<head>
<style>
p
{
background-color: linen;
}
h1
{
color: maroon;
margin-left: 40px; <!-- فاصله بیرونی از دیوار -->
}
</style>
</head>
<body>
<h1> This is a heading</h1>
<p> This is a paragraph </p>
</body>
</html>
خروجی:
در شیوه نامه آبشاری کدهای متفاوتی وجود دارد که به آنها اشاره می کنیم. مثلا با استفاده از background .
<html>
<head>
<style>
h1
{
background-color:#012345;
background-image:url('addres file.jpg');
background-repeat:no-repeat;
background-position:right bottom;
background-attachment:fixed;
}
</style>
</head>
<body>
<h1> kind of background </h1>
</body>
</html>
جستارهای وابسته
منابع
- “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” (in English). W3C. Retrieved 10 February 2012.
- «کاربرد شبهکلاس :not() در CSS». learnclasico.com. دریافتشده در ۲۰۲۵-۰۸-۰۹.
- «اولویت CSS: هر آنچه باید بدانید». بایگانیشده از اصلی در ۶ دسامبر ۲۰۱۳. دریافتشده در ۲۵ ژوئیه ۲۰۱۳.
- ویکیپدیای انگلیسی
- تعریف شیوهنامهٔ آبشاری، سایت کنسرسیوم جهانی وب
- اینترنت و وب جهانشمول: چگونه (آنرا) برنامهنویسی کنیم (چاپ چهارم) (انگلیسی)
- اینترنت و وب جهانشمول: چگونه (آنرا) برنامهنویسی کنیم بایگانیشده در ۲۷ آوریل ۲۰۰۶ توسط Wayback Machine (چاپ سوم) (انگلیسی)[۱]
پیوند به بیرون
- css3.info
- شیوهنامهٔ آبشاری در w3schools
دیدگاهتان را بنویسید