زبان اعلامی برای طراحی ظاهر From Wikipedia, the free encyclopedia
شیوه‌نامه آبشاری (به انگلیسی: Cascading Style Sheets) با کوته‌نوشت سی‌اس‌اس (به انگلیسی: CSS) یک زبان برای ساخت شیوه‌نامه است که از آن برای توصیف نمایش یک سند (که به یکی از زبان‌های نشانه‌گذاری مثل اچ‌تی‌ام‌ال نوشته شده‌است) استفاده میشود.[1] سی‌اس‌اس یکی از فناوری‌های بنیادین (در کنار اچ‌تی‌ام‌ال و جاوااسکریپت) در وب جهانگستر است.[2]
 | |
| پسوند(های) نام پرونده | .css |
|---|---|
| نوع رسانهٔ اینترنتی | text/css |
| شناسانه نوع یکسان | public.css |
| توسعه‌دهنده | ائتلاف وب جهانگستر |
| ارائهٔ اولیه | ۱۷ دسامبر ۱۹۹۶ |
| آخرین نسخه | CSS 2.1: مرحله ۲ بازبینی ۱ (۱۲ آوریل ۲۰۱۶) |
| گونه | زبان شیوه‌نامه (سبک نگارش) |
| دربرگیرنده | قواعد نگارشی برای عناصر HTML (تگ‌ها) |
| فراگیرنده | اسناد HTML |
| آزاد؟ | بله |
| وبگاه | |
سی‌اس‌اس روشی ساده برای نمایش چیدمان و جلوه‌های تصویری (مانند نوع قلم، رنگ و اندازه‌ها و واکنش گرایی وبسایت و همچنین جا به جایی محتوای داخل صفحه) بر صفحه‌های وب است.[3] سی‌اس‌اس از جنس زبان‌های نشانه‌گذاری، با ساختار متن سادهٔ رایانه هستند و درون هرکدام، دستورهایی آبشار مانند و پی‌درپی، برای چگونگی نمایش هر صفحه وب افزوده میشود. به گفته‌ای ساده‌تر، این دستورها روش نشان داده شدن قلم‌ها و اندازه‌شان، رنگ‌ها و پس زمینه‌ها، روش چیدمان موزاییک‌های دربرگیرنده داده‌ها (دیواره‌ها)، و بسیاری دیگر از عنصرهای ساختار هر صفحه وب را، درون خود جای می‌دهند.
بیشترین استفاده‌ای که از این زبان در حال حاضر میشود مشخص کردن سبک صفحهٔ وب اچ‌تی‌ام‌ال و اکس‌اچ‌تی‌ام‌ال است ولی آن را می‌توان بر هر نوع مستند اکس‌ام‌ال از جمله اس‌وی‌جی و اکس‌یوال اعمال کرد. نگهداری و تغییر مشخصات سی‌اس‌اس به عهدهٔ کنسرسیوم وب جهانگستر است.
در بحث طراحی با استانداردهای وب، همهٔ ساختار گرافیکی و تصویری صفحه‌های وب باید توسط دستورات سی‌اس‌اس مجزا تعیین شود و لابه‌لای صفحه‌های وب نباید دستورهایی برای درج چگونگی نمایش آن‌ها نوشته شود. به بیانی دیگر، نشانه‌گذاری یک صفحهٔ وب (کدهای html) و دستورات مربوط به گرافیک آن (دستورات css) باید کاملاً از یکدیگر جدا باشند.
در سال‌های نخست پیدایش وب، طراح‌ها از جدول‌ها و ترفند پنهان‌سازی آن‌ها برای چیدمان صفحهٔ وب کمک می‌گرفتند؛ اما روش مدرن طراحی وب، این روند را منسوخ کرده‌است. به طوری که امروزه کاربرد جدول‌ها به نمایش داده‌های ستونی محدود میشود و دیگر از آن‌ها برای چیدمان صفحه‌های وب استفاده نمی‌شود.
چیدمان یک صفحهٔ وب، امروزه اغلب با دیواره (یا DIV) انجام میشود که برتری‌های فراوانی نسبت به صفحه‌آرایی به کمک جدول‌ها (یا TABLE) دارد. در این روش، هر دیواره یک موزاییک مجازی بخش‌کنندهٔ صفحه است که کار چیدمان را آسان‌تر انجام می‌دهد. درواقع امروزه صفحه‌های وب به چند قسمت مجزا تقسیم می‌شوند که هرکدام، شامل قسمت‌های مجزای کوچک‌تر هستند و معمولا شامل محتوا می‌شوند و سی‌اس‌اس، امکانات زیادی برای کنترل چیدمان این اجزا در اخیار طراح می‌گذارد. از طرفی استفاده از جدول‌ها در طراحی وب، در بحث بهینه‌سازی موتور جستجو به آن لطمه می‌زند و این عوامل در مجموع، باعث می‌شوند که طراح‌های وب، تمایلی برای استفاده از جدول‌ها در چیدمان صفحهٔ وب نداشته باشند.
سی‌اس‌اس، افزون بر سبک‌تر کردن هر صفحه وب و پاک‌تر کردن آن از داده‌های تصویری و نمایشی استاندارد، روش طراحی وب را به میزان فراوانی آسان‌تر و دسترسایی و کارایی وب را بهتر کرده است.
یک فایل سی‌اس‌اس معمولاً در حافظه پنهان مرورگر ذخیره میشود، بنابراین می‌تواند بدون نیاز به بازخوانی در چندین صفحه استفاده شود که این امر باعث کاهش تبادل اطلاعات در شبکه میشود.
سی‌اس‌اس، روش چاپ شدن، روش شنیده شدن صدا برای کاربرانی با مشکل دسترسایی، و دستورهای فراوان دیگری را برای چگونگی نمایش سایه زیر قلم‌ها و پس زمینه‌های هر صفحه وب را در خود جای می‌دهند. آخرین نسخه پیشنهاد شده از استاندارد سی‌اس‌اس، نسخه ۳ می‌باشد که هنوز در مسیر پیشنهادی قرار دارد و مرورگرهای اینترنتی، هنوز تمام دستورهایش را پشتیبانی نمی‌کنند.
اولین ورژن CSS که در تاریخ ۱۷ دسامبر ۱۹۹۶ ارائه شد.
در این نسخه قابلیت تعیین قلم، تغییر رنگ متن، تغییر رنگ پس‌زمینه، چینش متن‌ها، قرارگیری عکس و … قرار داشت.
پس از ۲ سال از انتشار نسخه اول، در سال ۱۹۹۸ CSS2 توسعه و منتشر شد.
از تغییرات مهم این نسخه قابلیت‌های absolute و relative در کنار z-index بود. همچنین قابلیت‌هایی نظیر box-shadow و text-shadow در این نسخه معرفی شد.
این نسخه آخرین و بزرگ‌ترین بروزرسانی CSS تاکنون بوده‌است.
در حال حاضر CSS3 نسخه آخر CSS است ولی بر اساس Level بالا میرود. ولی شماره نسخه تغییری نمی کند.
برای درج CSS در یک سند اچ‌تی‌ام‌ال از یکی از سه روش زیر می‌توان بهره گرفت:
.css شناخته میشود، از تگ <link> در قسمت <head> استفاده میشود. مثال:<head>
<link rel="stylesheet" type="text/css" href="mystyle.css"/>
</head>
<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 تان انتخابگری با اولویت بیشتر تعریف کرده‌اید.
body #content .data img:hover
ارزش اولویت 122 خواهد بود (0,1،2,2 یا 0122): 100 برای
#content
، 10 برای
.data
، 10 برای
:hover
، 1 برای
body
و 1 برای
img
انواع
معمولاً برای صدا کردن عناصر CSS در HTML باید از class , id استفاده کرد که به همین شکل در HTML نوشته می شود ولی در CSS برای class از نقطه (.) و برای id از شارپ (#) استفاده میشود. ما در فایل CSS خود یک اسم دل بخواه که می تواند یا کلاس باشد یا آیدی بنویسیم و تمامی دیزاین های دلخواهمان را برای آن کلاس و یا آیدی مینویسیم و در فایل HTML آن را صدا میکنیم.
.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>
Seamless Wikipedia browsing. On steroids.
Every time you click a link to Wikipedia, Wiktionary or Wikiquote in your browser's search results, it will show the modern Wikiwand interface.
Wikiwand extension is a five stars, simple, with minimum permission required to keep your browsing private, safe and transparent.
