سیاساس

سیاساس

پسوند(های) نام پرونده	.css
نوع رسانهٔ اینترنتی	text/css
شناسانه نوع یکسان	public.css
توسعهدهنده	ائتلاف وب جهانگستر
ارائهٔ اولیه	۱۷ دسامبر ۱۹۹۶(۱۹۹۶-17}})
آخرین ویرایش	CSS 2.1: مرحله ۲ بازبینی ۱ (۱۲ آوریل ۲۰۱۶(۲۰۱۶-12}}))
گونه	زبان شیوهنامه (سبک نگارش)
دربرگیرنده	قواعد نگارشی برایعناصر HTML(تگها)
فراگیرنده	اسناد HTML
قالب آزاد؟	بله
وبگاه	www.w3.org/TR/CSS/

استانداردهای وب
HTML RDF CSS DOM XHTML XML SVG W3C DHTML

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

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

بیشترین استفادهای که از این زبان در حال حاضر میشود مشخص کردن سبکصفحهٔ وباچتیامالواکساچتیامالاست ولی آن را میتوان بر هر نوع مستنداکسامالاز جملهاسویجیواکسیوالاعمال کرد. نگهداری و تغییر مشخصات سیاساس به عهدهٔکنسرسیوم وب جهانگستراست.

استانداردهای تازه

در بحث طراحی بااستانداردهای وب، همهٔ ساختار گرافیکی و تصویری صفحههای وب باید توسط دستورات سیاساس مجزا تعیین شود و لابهلای صفحههای وب نباید دستورهایی برای درج چگونگی نمایش آنها نوشته شود. به بیانی دیگر، نشانهگذاری یک صفحهٔ وب (کدهای html) و دستورات مربوط به گرافیک آن (دستورات css) باید کاملاً از یکدیگر جدا باشند.

برتریها

در سالهای نخست پیدایشوب، طراحها از جدولها و ترفند پنهانسازی آنها برای چیدمان صفحهٔ وب کمک میگرفتند؛ اما روش مدرن طراحی وب، این روند را منسوخ کردهاست. به طوری که امروزه کاربرد جدولها به نمایش دادههای ستونی محدود میشود و دیگر از آنها برای چیدمان صفحههای وب استفاده نمیشود.

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

سیاساس، افزون بر سبکتر کردن هر صفحه وب و پاکتر کردن آن از دادههای تصویری و نمایشی استاندارد، روش طراحی وب را به میزان فراوانی آسانتر ودسترساییوکاراییوب را بهتر کرده است.

پهنای باند

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

نسخهها

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

CSS1

اولین ورژن CSS که در تاریخ ۱۷ دسامبر ۱۹۹۶ ارائه شد.

در این نسخه قابلیت تعیین قلم، تغییر رنگ متن، تغییر رنگ پسزمینه، چینش متنها، قرارگیری عکس و… قرار داشت.

CSS2

پس از ۲ سال از انتشار نسخه اول، در سال ۱۹۹۸ CSS2 توسعه و منتشر شد.

از تغییرات مهم این نسخه قابلیتهای absolute و relative در کنار z-index بود. همچنین قابلیتهایی نظیر box-shadow و text-shadow در این نسخه معرفی شد.

CSS3

این نسخه آخرین و بزرگترین بروزرسانی CSS تاکنون بودهاست.

در حال حاضر CSS3 نسخه آخر CSS است ولی بر اساس Level بالا میرود. ولی شماره نسخه تغییری نمی کند.

نحوه استفاده

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

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

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

<head>
<linkrel="stylesheet"type="text/css"href="mystyle.css"/>
</head>

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

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

<head>
<styletype="text/css">
hr{color:sienna;}
p{margin-left:20px;}
</style>
</head>

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

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

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

اولویت انتخاب قوانین

معمولاً دلیل اثر نداشتن قوانین CSS بر روی برخی عناصر اهمیت متفاوت انتخابگر (selector)ها میباشد. برای به حداقل رساندن زمان پیدا کردنباگها میبایست با طرز کارمفسرمرورگرها آشنایی کافی داشته باشید. در بیشتر موارد چنین مشکلاتی زمانی پیش میآیند که جایی در قوانین CSS تان انتخابگری با اولویت بیشتر تعریف کردهاید.

نحوه محاسبه اولویت

• روش اول:از 0 شروع کنید، برای خصوصیت (attribute) استایل 1000 را اضافه کنید؛ برای هر شناسه 100 اضافه کنید؛ برای هر خصوصیت، کلاس یا شبه کلاس 10 اضافه کنید؛ برای هر نام عنصر یا شبه عنصر 1 اضافه کنید؛ بنابراین در انتخابگر(این رو هم باید در نظر گرفت که برای صدا کردن عناصر CSS در HTML باید از

body#content.dataimg: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>

<h1class="center">Red and center-aligned heading</h1>
<pclass="center">Red and center-aligned paragraph.</p>

</body>
</html>

مثال برای آیدی تقریبا همانند کلاس است

#para1{
text-align:center;
color:red;
}

<!DOCTYPE html>
<html>
<head>

</head>
<body>

<pid="para1">Hello World!</p>
<p>This paragraph is not affected by the style.</p>

</body>
</html>

نمونه کد

body{
background-color:linen;
}

h1{
color:maroon;
margin-left:40px;
}

خروجی:

خروجی کد بالا

جستارهای وابسته

• اچتیامال
• دام
• وب
• کنسرسیوم وب جهانگستر

منابع

• ویکیپدیای انگلیسی
• تعریف شیوهنامهٔ آبشاری، سایت کنسرسیوم جهانی وب
• اینترنت و وب جهانشمول: چگونه (آنرا) برنامهنویسی کنیم(چاپ چهارم)(انگلیسی)
• اینترنت و وب جهانشمول: چگونه (آنرا) برنامهنویسی کنیمبایگانیشدهدر ۲۷ آوریل ۲۰۰۶ توسطWayback Machine(چاپ سوم)(انگلیسی)

پیوند به بیرون

• css3.info
• شیوهنامهٔ آبشاریدر w3schools