ویژگی media در css

Css راهی را در اختیار ما می گذارد که بتوانیم محتوا را بر اساس وسیله ای که سند را بر روی آن می بینیم به صورت متفاوت نمایش دهیم. این قوانین شرطی در بین یک قانون media قرار می گیرند، که این نوع دستور (قانون) باعبارت @media شروع می شود و پس از آن عبارتی است که دامنه را محدود می کند و یک آکولاد قرار دارد که قوانین شرطی در بین آن قرار می گیرند.
قانون @media در CSS2 معرفی شده است. :

@media screen{
     /* screen devices only */
}

انواع رسانه ها (Media types)

شرط نوع رسانه – همانطور که قبلا گفته شد - از نسخه css2 معرفی شده است؛ این شرط مقادیر معتبر زیر را در اختیار ما قرار می دهد، که مقدار پیش فرض آن all است و یعنی تمام ابزارها را شامل می شود:

all | aural | braille | handheld | print | projection | screen | tty | 	tv | embossed

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

/* فقط برای چاپ */
@media print{
/* مخفی کردن منوی ناوبری */
#navigation { display: none; }
/* عناصر h1 در بالای یک صفحه جدید قرار بگیرند */
h1 { page-break-before: always;}
}

معمولا قوانین مربوط به media در پایین style sheet قرار می گیرد، که اجازه می دهد دستورات آبشاری، قوانینی که قبلا تعریف شده اند را باطل کند. اگر شیوه نامه دارای تعداد زیادی قوانین شرطی باشد، ممکن است ترجیح دهیم آنها را به یک شیوه نامه جداگانه که بعد از شیوه نامه اولیه قرارداده می شود منتقل کنیم. بعد از آن می توانیم شرط مربوط به media را با استفاده از عنصر <link> در داخل فایل قرار دهیم.

<link rel="stylesheet" media="print" href="myprint.css">

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

Media queries

در css3 امکان جدیدتری ارائه شده است و یک قدم به جلوتر می رویم؛ در این نسخه علاوه بر تعیین نوع رسانه، قابلیت های رسانه را مورد بررسی قرار می دهد. در این نسخه از css محدوده وسیعی از ویژگی های رسانه هدف قرار می گیرد که می توانید در فهرست زیر ببینید:

width | height | device-width | device-height | aspect-ratio | device-aspect-ratio |
resolution | orientation | color | color-index | monochrome 

مهمترین ویژگی های رسانه که min-width و max-width هستند به شما این اجازه را می دهند که صفحات را به صورت پاسخگو (responsive) طراحی کنید که در این نوع طراحی ساختار صفحات وب بر اساس viewport مشخص می شود.

به این نکته توجه داشته باشید که ویژگی @media در تمام نسخه های مرورگرهای وب پشتیبانی نمی شود. در زیر، نحوه پشتیبانی از این ویژگی در مرورگرهای وب مختلف را می بینید:

• در مرورگر chrome: 21.0
• در مرورگر IE: 9.0
• در مرورگر FireFox: 3.5
• در مرورگر Safari: 4.0
• در مرورگر Opera: 9.0

یک پرس و جوی رسانه (media query)، نوع رسانه و یک یا چند ویژگی رسانه را باهم ترکیب می کند. به عنوان مثال قوانین نوشته شده در پرس و جوی زیر فقط زمانی اعمال می شود که رسانه ای که کاربر صفحات را در آن می بیند دارای عرض حداقل 600پیکسل باشد.

@media screen and  (min-width: 600px) {}

پرس و جوهای رسانه نسبت به کوچکی و بزرگی حروف حساس هستند، و همچنین استفاده از پرانتز در اطراف شرایط، ضروری است. عملگر and که در مثال بالا می بینید برای ترکیب کردن نوع رسانه و ویژگی رسانه استفاده می شود، اما می توان با این عملگر چند ویژگی را نیز با هم ترکیب کرد:

@media (max-width: 500px) and (min-aspect-ratio: 1/1) {}

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

عملگرهای منطقی (logical operators)

علاوه بر عملگر منطقیand، می توانیم در پرس و جوهای رسانه از عملگر منطقی not و عملگر منطقی only و همچنین عملگر منطقی or استفاده کنیم. به جای عملگر or از علامت کاما (,) استفاده می کنیم تا گروه های پرس و جوها را از یکدیگر جدا کنیم. قانونی که در مثال پایین نوشته شده است زمانی درست است که صفحه نمایش حداقل 700پیکسل عرض داشته باشد یا اینکه وسیله نمایش در حالت landscape باشد:

@media (min-width: 700px), (orientation: landscape) {}

از عملگر not برای این استفاده می کنیم که تمام یک پرس و جوی رسانه را خنثی (منفی) کنیم. این عملگر نمی تواند یک ویژگی را به تنهایی خنثی کند. به عنوان مثال قانون زیر تنها زمانی اعمال می شود که صفحه نمایش دستگاه دارای عرض 800 پیکسل نباشد:

@media not screen and (device-width: 800px) {}

عملگر onlyبرای این اضافه شده است که پرس و جوهای رسانه را از مرورگرهای وب قدیمی مخفی کنیم. بر اساس خصوصیات مربوط به این ویژگی، مرورگرهای وبی که از پرس و جوهای رسانه پشتیبانی نمی کنند قطعه دستور زیر را به عنوان نوع رسانه only در نظر می گیرد که یک مقدار نامعتبر است و در نتیجه این مرورگر قوانین سبک شرطی را نادیده خواهد گرفت:

/* درمرورگرهای قدیمی اثر ندارد  */
@media only screen and (min-width: 600px) {}

متاسفانه نسخه های IE6-IE8 این ویژگی ها را به درستی اعمال نمی کنند. بنابراین در مورد این نسخه های مرورگر پرس و جوی رسانه نادیده گرفته می شود حتی اگر عملگر only استفاده نشده باشد و در این حالت قانون رسانه برای همه نوع ابزار اعمال می شود.

/* کدهای زیر در نسخه های 8 الی 6 IE اعمال نمی شود. */
@media screen and (min-width: 600px) {}

تست کردن پرس و جوهای رسانه

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

راهنماهای مربوط به طراحی صفحات پاسخگو (Responsive)

هنگامی که یک صفحه بندی پاسخگو را طراحی می کنید، در اغلب اوقات راحت تر است که از صفحه بندی مربوط به موبایل شروع کنید و طراحی را طوری تعریف کنید که بدون نوشتن هیچ نوع قانون مربوط رسانه، کارمان انجام شود. هنگامی که محدوده دید کاربر (viewport)گسترش پیدا می کند توجه کنید که چه موقع نوع صفحه بندی شما دیگر خوب به نظر نمی رسد. اینجا نقطه ای است که باید شما مشخص کنید که طرح بندی صفحات خود را تغییر دهید. این تغییر می تواند شامل اضافه کردن یک ستون دیگر یا تغییر دادن طراحی به سمت یک نوار پیمایش پیشرفته تر باشد.
باید این نقطه ها را با استفاده از ویژگی های رسانه شامل min-widthو max-width مشخص کنید؛ با این روش، هنگامی که محدوده نمایش گسترش پیدا می کند، سبک قبلی لغو می شود؛

مثال زیر را ببینید؛ این روش را اینقدر ادامه دهید تا تمام نقاط انفصال را پیدا کنید تا زمانی که به یک رزولوشن با دقت بالا و کافی برسید. بر اساس نوع طرح بندی که شما از آن استفاده می کنید ممکن است لازم باشد فقط تعداد کمی نقطه انفصال ایجاد کنید:

@media (min-width: 800px){
body {background: red;}
}
@media (min-width: 410px) and (max-width: 799px) {
body { background: green; }
}
@media (max-width: 400px){
body { background: blue; }
}

فهرست ها (list)

در css از ویژگی های list برای عناصر فهرست استفاده می کنیم که این عناصر عبارتند از: <ul>, <ol>, <li>.

ویژگی list-style-type

فهرست ها با استفاده از یک نشانگر که قبل از هر آیتم عنصر فهرست (<li>) نشان داده می شود بوجود می آیند. با استفاده از ویژگی list-style-type می توانیم نوع این نشانگر را تغییر دهیم.

برای یک فهرست مرتب نشده (unordered list - ul) هر آیتم مربوط به فهرست به روش مشابه نشانه گذاری می شود. گلوله های از پیش تعریف شده که در پایین مشاهده می کنید را می توان در فهرست استفاده کرد، و مقدار disc به عنوان مقدار پیش فرض است (یک دایره توپر).

list-style-type : inherit | disc | circle | square | none

در یک فهرست مرتب شده (ordered list - ol) تمام آیتم های فهرست با یک کاراکتر عددی نمایش داده می شوند که این اعداد نشان دهنده ترتیب آیتم ها است. تمام مرورگرهای اصلی وب از انواع عددی ذکر شده در زیر پشتیبانی می کنند، و مقدار decimal به عنوان مقدار پیش فرض است:

list-style-type : inherit | decimal | none | upper-alpha | lower-alpha | 
upper-roman |lower-roman |  
lower-latin | armenian | georgian |
decimal-leading-zero

در مثال زیر یک سبک جدید فهرست را برای دو عنصر فهرست تعریف می کنیم. این امکان وجود دارد که <ul> را به صورت نشانگرهای مرتب شده و <ol> را به صورت نشانگرهای مرتب نشده نمایش دهیم(یعنی برخلاف ماهیت اصلی شان)، اما این کار، مناسب نیست:

ul { list-style-type : square; } /*  */
ol { list-style-type : upper-roman; } /* I, II, III, … */

رنگ نشانگر مشابه رنگ متن عنصر است. این نکته را به خاطر داشته باشید که هر عنصر را می توانیم مجبور کنیم آیتم های فهرست را نمایش دهد، برای این کار باید ویژگی display را با مقدار list-item مقدار دهی کنیم.

ویژگی list-style-image

به عنوان یک جایگزین برای نشانگرهایی که به صورت از قبل تعریف شده برای آیتم های فهرست وجود دارند، می توانیم با استفاده از ویژگی list-style-image از یک تصویر شخصی – مورد علاقه خودمان – به عنوان نشانگر برای آیتم های یک فهرست استفاده کنیم.

list-style-image : inherit | none | url(<url>)

با استفاده از تابع url در داخل css مسیر تصویر مورد نظرمان را مشخص می کنیم:

list-style-image : url(my-bullet.png);

این ویژگی هر نوع نشانگر که با استفاده از ویژگی list-style-type انتخاب شده است را تحت تاثیر قرار می دهد. بنابراین بهتر است برای مواقعی که تصویر تعیین شده برای نشانگر در دسترس نیست یک list-style-type جایگزین تعریف کنیم تا مشکلی پیش نیاید.

ویژگی list-style-position

نشانگر مربوط به فهرست معمولا در خارج از جعبه فهرست قرار می گیرد. ویژگی list-style-position یک جایگزین را در اختیار ما قرار می دهد. با استفاده از این ویژگی می توان نشانگر را در داخل جعبه فهرست قرار داد:

list-style-position : inherit | outside | inside 

انتخاب مقدار outside باعث می شود هر خطی از متن با شروع خط اول تراز شود، در حالیکه مقدار inside باعث می شود خط های متن زیر نشانگر تراز شوند. همچنین مقدار inside باعث می شود از نظر بصری، نشانگر دارای تورفتگی شود.

ویژگی list-style

ویژگی list-style کوتاه شده تمام موارد بالاست. مقادیر مربوط به این ویژگی را می توانیم با هر نوع ترتیبی ذکر کنیم، به خاطر اینکه این مقادیر هیچ نوع ابهامی نسبت به یکدیگر ندارند. البته می توان هر کدام از مقادیر را نیز نادیده گرفت. در این حالت مقدار پیش فرض این ویژگی مورد استفاده قرار می گیرد.

list-style : <list-style-type> | <list-style-image> | <list-style-position>

در مثال زیر نوع (type) و محل (position) مربوط به نشانگر مشخص می شود که این مقادیر به آیتم های فهرست اعمال می شود:

<ul style=”list-style: inside square;”>
<li>مورد اول</li>
<li>مورد دوم</li>
<li>مورد سوم</li>
</ul>

این نکته را در نظر داشته باشید که با استفاده از این ویژگی ها تنها نمی توان نگهدارنده های فهرست شامل ul و ol را سبک دهی کرد بلکه این ویژگی ها یک آیتم مربوط به فهرست را نیز سبک دهی می کنند.

Counters با استفاده از ویژگی های counter-increment و counter-reset می توان عناصر را به صورت خودکار در css شماره دهی کرد. ویژگی counter-reset نام شمارنده را مشخص می کنند. این ویژگی به صورت انتخابی به همراه مقدار اولیه شمارنده می آید که مقدار پیش فرض zero است.

/*ایجاد یک شمارنده با نام chapter */
body{counter-reset: chapter; }

ویژگی counter-increment نام شمارنده را می گیرد و یک عدد اختیاری به آن اضافه می کند. عددی که مشخص می کند با ظاهر شدن عنصر هر دفعه چه مقداری به آن اضافه می شود به صورت پیش فرض عدد 1 است.

/* این دستور شمارنده را در هر <h1> یکی اضافه می کند */
h1:before { counter-increment: chapter; }

مرحله نهایی برای ایجاد یک شمارنده این است که آن را با استفاده از تابع counter() در css نمایش دهیم. نام شمارنده به عنوان ورودی برای این تابع است. در این مثال شماره فصل قبل از عنصر های <h1> نوشته می شود.

/* افزایش دادن مقدار شمارنده و نمایش دادن آن */
h1:before{
content: “chapter “ counter(chapter) “ – “ ;
content-increment: chapter;
}

حالا تابع counter شماره فصل را قبل از <h1> اضافه می کند:

<h1>First</h1><!-- Chapter1 - First -->
<h1>Second</h1><!—Chapter2 - Second -->
<h1>Third</h1><!—Chapter3 - Third -->

ما می توانیم یک شمارنده دیگر را برای شمردن زیرعنوان های <h2> استفاده کنیم. در اینجا این شمارنده را در هر عنصر <h1> صفر می کنیم.

h2:before {
content: counter(chapter) “.” Counter(section) “ “;
counter-increment: section; 
}
h1{
counter-reset: section;
}

در مثال زیر مشاهده می کنید که شمارنده ها چگونه نمایش داده می شوند:

<h1>Head</h1><!--Chapter1 - Head -->
<h2>Sub</h2><!--1.1 Sub -->
<h2>Sub</h2><!--1.2 Sub -->
<h1>Head</h1><!-- Chapter2 - Head -->
<h2>Sub</h2><!--2.1 Sub -->

شمارنده های تودرتو (Nesting counters)

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

ul{ counter-reset: item; }
li:before{
content: counters(item, “ “ ) “ “;
counter-increment: item; 
}

قوانین نوشته شده در بالا به فهرست نامرتبی که در مثال زیر مشاهده می کنید اعمال شده است (توجه کنید که یک نمونه جدید از شمارنده به صورت خودکار برای هر فهرست تودرتو ساخته شده است):

<ul>
<li>item</li><!—1 item -->
<li>item</li><!—2 item -->
<ul>
<li>item</li><!—2.1 item -->
<li>item</li><!—2.2 item -->
</ul>
</ul>

شمارنده ها در تمام مرورگرهای اصلی پشتیبانی می شوند. تمام نسخه های Chrome, Firefox, Safari &Opera و IE8+.

ویژگی های مربوط به positioning یا تعیین موقعیت

ویژگی های مربوط به positioning یا تعیین موقعیت برای این استفاده می شوند که مشخص کنیم عناصر چگونه و کجا نمایش داده شوند. این ویژگی ها به ما کمک می کنند بتوانیم طرح بندی صفحات وب (page layout) را با دقت کنترل کنیم.

ویژگی position

با استفاده از ویژگی position می توان عناصر را با چهار روش مختلف موقعیت دهی کرد. یک عنصر با ویژگی position که به صورت static تعریف شده باشد به عنوان یک عنصر تعیین موقعیت شده (positioned element) شناخته می شود.

position : static | relative | absolute | fixed

یک عنصر تعیین موقعیت شده (positioned) را می توان با استفاده از ویژگی های top, left, right, bottomحرکت داد. یعنی می توان مشخص کرد که آن عنصر در هر محلی از صفحه که تمایل داشتیم قرار گیرد و همچنین آن را از لحاظ افقی یا عمودی تغییر اندازه دهیم. در این مورد می توانید هم از مقادیر مثبت و هم از مقادیر منفی استفاده کنید که این مقادیر می توانند مقادیر طولی یا درصد باشند که درصد به نسبت ابعاد بلوک نگهدارنده محتوا در نظر گرفته می شوند.

top | right | bottom | left (positioned) : 
auto | <length>| <percentage>

ویژگی static

در حالت پیش فرض ویژگی position با مقدار static تعریف می شود. این مقدار به این معنی است که آن عنصر در محل حقیقی خود قرار می گیرد و توسط ویژگی های تعیین موقعیت عنصر (top, left, right, bottom) تحت تاثیر قرار نمی گیرد.

/* یک عنصر تعیین موقعیت نشده */
.static { position: static; }

از آنجا که ویژگی positionخصوصیات خود را از عنصر والد به ارث نمی برد، و مقدار پیش فرض static است، لازم نیست که به صراحت ویژگی position را با مقدار static مقدار دهی کنیم.

ویژگی relative

تغییر دادن مقدار position به relative باعث می شود که عنصر بتواند نسبت به موقعیت نرمال خود در صفحه مکان دهی شود. به عنوان مثال برای اینکه بتوانیم یک عنصر انتخاب شده را به اندازه 20 پیکسل نسبت به حالت نرمال خود پایین تر قرار دهیم از اعلان زیر استفاده می کنیم:

/*حرکت دادن عنصر به اندازه 20 پیسکل به سمت پایین – نسبت به حالت نرمال خود */
.relative{
position : relative;
top : 20px;
}

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

تاثیری که بر اثر جابجایی یک عنصر با استفاده از ویژگی relative ایجاد می شود را می توان با استفاده از margin نیز به دست آورد. در اغلب اوقات این روش ترجیح داده می شود مگر اینکه دلیل خاصی وجود داشته باشد که ما بخواهیم عنصر را مکان دهی کنیم؛ به عنوان مثال زمانی را در نظر بگیرید که عنصر به عنوان نگهدارنده یک عنصر فرزند که به صورت مطلق مکان دهی شده است در نظر گرفته شده باشد.

/*حرکت دادن عنصر به اندازه 20 پیکسل به سمت پایین*/
margin-bottom : -20px;

این نکته را در نظر داشته باشید که با استفاده از marginبر روی صفحه بندی تاثیر می گذاریم و فضای خالی با این روش پر می شود، در حالی که موقعیت دهی به صورت relative این کار را انجام نمی دهد.

ویژگی absolute

مقدار absolute برای ویژگی positionعنصر را از سایر عناصر نگهدارنده جدا می کند و به آن عنصر اجازه می دهد که نسبت به نزدیک ترین عنصر جد (والد) موقعیت دهی شده (positioned) – و یا اگر چنین عنصری وجود نداشته باشد نسبت به بدنه سند (document body) -مکان دهی شود.
منظور از یک عنصر موقعیت دهی شده عنصری است که با یک ویژگی غیر از staticموقعیت دهی شده باشد.

/*قرار دادن عنصر در گوشه بالا سمت چپ */
.absolute {
position: absolute;
top: 0;
left: 0;
}

ویژگی fixed

یک عنصر با ویژگی fixedنسبت به منطقه دیدviewport در صفحه مکان دهی می شود. چنین عنصری با اسکرول شدن محتوای صفحه جابجا نمی شود. مثل عناصری که به صورت مطلق مکان دهی شده اند عناصر fixed هیچ نوع فضایی را در جریان صفحه اشغال نمی کنند.

/*قرار دادن یک عنصر در قسمت پایین سمت راست صفحه*/
.fixed{
position: fixed;
bottom: 0;
right: 0;
}

ویژگی overflow

ویژگی overflowتصمیم می گیرد که سرریز محتوا (content overflow) برای یک عنصر از نوع بلوک چگونه کنترل شود. مقدار پیش فرض برای این ویژگی visible است، به این معنی که متن و عناصر فرزند که بر اساس محتوای این عنصر گسترش پیدا می کنند به صورت قابل مشاهده (visible) می باشند.
اگر برای این ویژگی مقدار hidden را قرار دهیم باعث می شود محتوای سرریز شده مخفی شود، و با مقدار scrollعنصر بلوک به صورت قابل اسکرول در می آید تا خود را با محتوای سرریز شده تطبیق دهد. مقدار auto مثل مقدار scroll عمل می کند، اما در این حالت فقط زمانی که لازم باشد نوار اسکرول نمایش داده می شود.

overflow (block) : visible | hidden | scroll | auto 

این ویژگی هم سرریز افقی و هم سرریز عمودی را کنترل می کند. دو ویژگی اضافی نیز وجود دارند، overflow-x و overflow-y، با استفاده از این دو ویژگی می توان رفتار یک عنصر را در برابر سرریز افقی و سرریز عمودی به صورت جداگانه کنترل کنیم. مقادیر مربوط به این دو ویژگی دقیقا مثل مقادیر مربوط به ویژگی overflow است:

overflow: hidden; /*تمام سرریز را مخفی می کند*/
overflow-x: hidden; /*سرریز افقی را مخفی می کند*/
overflow-y: hidden; /*سرریز عمودی را مخفی می کند*/

ویژگی clip

اگر یک عنصر به صورت absolute یا fixed مکان دهی شده باشدویژگی clipمی تواند یک عنصر را به صورت یک چهارضلعی برش دهد. این ویژگی از یک تابع css با نام rect() استفاده می کند تا منطقه برش را مشخص کند.

Clip (absolute | fixed) :
auto | rect (<top> , <right> , <bottom>, <left>)

تابع left()به 4 مقدار طولی نیاز دارد، که هر کدام با یک ویرگول از یکدیگر جدا می شوند. این مقادیر به نسبت نقطه بالا سمت چپ سنجیده می شوند. مثالی که در شکل زیر مشاهده می کنید در عنصری که به آن نسبت داده شده است یک چهار ضلعی به ابعاد 200 در 400 پیکسل را برش می دهد.

.myclip{
position: absolute;
clip: rect(100px, 500px, 300px, 100px);
}

تصویر بالا: در تصویر بالا، ناحیه ای که تیره شده است حذف می شود.

می توان از کلیدواژه auto به عنوان مقدار برای کناره راست یا پایین عنصر استفاده کرد تا به ترتیب به عرض کامل یا ارتفاع کامل عنصر اشاره کند. همچنین این کلیدواژه به عنوان مقدار پیش فرض برای ویژگی clip است که در این حالت باعث می شود عنصر برش نخورد.

/* از سمت چپ و بالا 100پیکسل را حذف می کند */
clip: rect(100px, auto, auto, 100px);

/* بدون برش */
clip: auto;

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

/* دستوری که در نسخه های IE4-7 پشتیبانی می شود */
clip: rect(100px 500px 300px 100px);

ویژگی z-index

عناصری که جایگزاری شده اند (positioned) و با یکدیگر همپوشانی دارند به طور معمل بر اساس ترتیبشان در داخل سند لایه بندی می شوند. با استفاده از ویژگی z-index می توانیم این ترتیب قرارگیری را تغییر دهیم.

z-index (positioned) : auto | <integer>

ویژگی z-index به عنوان مقدار می تواند هم یک عدد مثبت و هم یک عدد منفی را بپذیرد و این عدد مشخص کننده ترتیب قرارگیری عناصر است. عناصری که دارای مقدار بزرگتری هستند در مقابل عناصری که دارای مقدار کوچک تری هستند قرار می گیرند. به مثال زیر توجه کنید:

<img src="picture.png" style="
position: absolute; 
left: 0;
top: 0;
z-index: 1; ">

<img src="picture2.png" style="
position: absolute;
left: 100px;
top: 100px;
z-index: 0; ">

در مثال بالا، تصویر اول بر روی تصویر دوم قرار می گیرد به خاطر اینکه دارای z-index بزرگتری است.

تصویر بالا: می توانیم ترتیب قرارگیری اجزاء صفحه را مشخص کنیم.

ویژگی vertical-align

با استفاده از ویژگی vertical-align می توانیم چینش عمودی یک متن یا یک عنصر inline در یک خط را کنترل کنیم. می توانیم از این ویژگی در سلول های جدول نیز استفاده کنیم.

vertical-align (inline | table-cell) : 
baseline | <length> | <percentage> | top | middle | 
bottom | text-top | text-bottom | super | sub

به طور پیش فرض، قسمت زیرین متن و عناصر inline، مثل تصاویر، بر اساس خط اصلی (baseline) چینش می شوندکه همان خط قابل رویت است که بر روی آن تمام حروف قرار می گیرند. مقادیر top و bottom تصور را با بالا و پایین خط هم ردیف می کند. مقدار middle کمی نامفهوم است، که وسط تصویر را با وسط حروف کوچک هم تراز می کند. وضیت این چینش ها و خطوط ذکر شده را در تصویر زیر مشاهده می کنید:

تصویر بالا: مقدار های معمول برای ویژگی vertical-align.

دو مقداری که کمتر برای ویژگی vertical-align مورد استفاده قرار می گیرند مقادیر text-bottom و text-top هستند. مقدار text-bottom قسمت زیرین یک عنصر را با قسمت زیرین متن هم تراز می کند. بر خلاف این مقدار، مقدار text-top قسمت بالایی یک عنصر را با قسمت بالایی متن هم تراز می کند. همچنین مقادیر sub و super نیز وجود دارند، که عنصر را با موقعیت های subscript و superscript هم تراز می کند.

تصویر بالا: مقدارهای دیگر برای ویژگی vertical-align.

می توان عناصر را با مقادیر مثبت کمی بالا برد و یا با مقادیر منفی کمی پایین آورد که این مقادیر می توانند مقادیر طولی یا درصد باشند. هم مقادیر طولی و هم درصد از خط اصلی (baseline) شروع می شوند؛ مقدار درصد به نسبت ارتفاع خط تعیین می شود:

/* ترازکردن متن به اندازه 5 پیکسل پایین تر از متن معمولی */
Normal <span style="vertical-align: -5px; " >متن پایین تر</span>

هنگامی که این ویژگی را به خانه های جدول (شامل و ) نسبت می دهیم، ویژگی vertical-align مثل خصوصیت منسوخ شده valign در اچ تی ام ال عمل می کند. مقدار معتبر برای خانه های جدول عبارتند از baseline, bottom, middle, top. در مورد خانه های جدول، سایر مقادیر شامل مقادیر طولی و درصد را نبایدا ستفاده کرد.

مقدار top لبه بالایی padding مربوط به خانه جدول را با بالای ردیف هم تراز می کند. بر خلاف آن، مقدار bottom لبه پایینی padding مربوط به خانه جدول را با پایین ردیف هم تراز می کند. مقدار baseline محتوای خانه جدول را به گونه ای تراز می کند که این خانه بر اساس baseline مشابه خانه های دیگر جدول که بر اساس baseline تراز شده اند مرتب می شوند.

برخلاف عناصر نوع inlineکه مقدار پیش فرض برای آنها baseline است، خانه های جدول به صورت پیش فرض با مقدار middle تراز می شوند. در مورد خانه های جدول، مقدار middle خیلی ملموس تر عمل می کند و جعبه padding مربوط به خانه جدول را در قسمت میانی ردیف تراز می کند، و باعث می شود محتوای خانه جدول وسط چین شود.

در مثال زیر عنصر خانه جدول به صورت عمودی در قسمت پایین تراز می شود:

<table>
<tr>
<td style="vertical-align: bottom; ">زیر</td>
</tr>
</table>

ویژگی centering

در css روش های مختلفی وجود دارد که عناصر را وسط چین کنیم. یک روش معمول استفاده از ویژگی text-align است که می توانیم مقدار center را برای آن قرار داد.

.text-center {text-align: center; }

با اعمال کردن این ویژگی به عنصری که شامل محتوا است، متن داخل آن وسط چین می شود.

<p class="text-center">متن وسط چین شده</p>

این روش برای متن و عناصر inline عمل می کند، اما برای عناصر بلوک عمل نمی کند. برای وسط چین کردن عناصر نوع بلوک، می توانیم margin راست و چپ را با مقدار auto تنظیم کرد، که باعث می شود marginا فقی به صورت مساوی بزرگ شود، و باعث می شود که بلوک وسط چین شود.

.box-center{margin: 0 auto;}

این نکته را در نظر داشته باشید که برای اینکه بتوانیم یک عنصر بلوک را وسط چین کنیم، عرض آن باید ثابت شود و نباید انعطاف پذیر باشد؛ در غیر این صورت باعث می شود تمام عرض موجود افزایش یابد.

<div style="width: 50px; height: 50px; 
border:1px solid black;"
class="box-center"></div>

برای وسط چین کردن به صورت عمودی، راحت ترین راه برای تراز کردن محتوا به قسمت وسط استفاده از ویژگی vertical-alignدر عنصر والد با مقدار middle است. همانطور که انتظار می رود این رفتار فقط برای خانه های جدول عمل می کند، بنابراین لازم است که نگهدارنده محتوا به یک شکل خاص تبدیل شود، که در مثال زیر می بنیم از ویژگی display با مقدار table-cell استفاده می کنیم:

<div style="vertical-align: middle; 
display: table-cell; 
min-height: 100px; ">وسط چین شده</div>

ابعاد - dimensions در css

ویژگی های مربوط به ابعاد، اندازه یک عنصر و کوچکترین و بزرگ ترین ابعاد مربوط به عنصر را تنظیم می کند. این ویژگی ها، خصوصیات خود را از عنصر والد به ارث نمی برند و فقط به عناصر بلوک و جایگزین شده inline اعمال می شوند.

Width & height

با استفاده از ویژگی های width و height می توانیم عرض و ارتفاع محدوده محتوای مربوط به یک عنصر را تنظیم کنیم. این دو ویژگی را می توانیم با یک مقدار طولی یا درصد مشخص کنیم، که درصد به نسبت ابعاد عنصر والد تعیین می شود.

width | height: auto | <length> | <percentage>

مقدار پیش فرض برای این ویژگی، مقدار auto است. در حالت معمولی یک عنصر از نوع بلوک تا لبه های ظرف نگهدارنده خود کشیده می شود. در مقابل آن ارتفاع عنصر کم می شود تا با محتوا تنظیم شود. با استفاده از ویژگی های width و height می توان این رفتارهای پیش فرض را تغییر داد. در مثال زیر در عناصری که این کلاس به آنها اعمال شده است، عرض به اندازه 100 پیکسل و ارتفاع به اندازه 50 پیکسل تعیین می شود. پس از آنکه این اندازه ها به یک عنصر اعمال شد، آن عنصر این اندازه را پیدا می کند و حتی اگر اندازه صفحه تغییر کند بازهم اندازه عنصر تغییر نخواهد کرد.

این نکته را به خاطر داشته باشید که مقادیر مربوط به height و width شامل padding، border و margin نمی شود. این ویژگی ها عرض و ارتفاع فضای داخلی عنصر را مشخص می کنند.

.mybox{
width : 100px;
height : 50px;
}

ویژگی های min-width و min-height

این ویژگی ها، کمترین و بیشتری ابعاد یک عنصر را مشخص می کنند. با استفاده از این ویژگی ها بازهم طول و ارتفاع عنصر تا جایی گسترش پیدا می کند که با محتوا هماهنگ شود، اما عرض یا ارتفاع عنصر تا مقداری کمتر از کمترین ابعاد تعیین شده تنظیم نمی شود. همانطور که قبلا هم گفته شد این مقدار شامل padding, border & margin نمی شود.

min-width| min-height : <length> | <percentage>

مقادیر معتبر برای این دو ویژگی یک مقدار طولی یا یک مقدار بر اساس درصد است، که در آن درصد به نسبت ابعاد بلوک نگهدارنده محتوا محاسبه می شود. به عنوان مثال، در کلاس زیر مشخص می کنیم که یک عنصر حداقل 50درصد عرض و ارتفاع موجود را اشغال کند:

.half{
min-width : 50%;
min-height : 50%;
}

ویژگی های max-width و max-height

با استفاده از ویژگی های max-width و max-height می توانیم بیشترین ابعاد منطقه محتوای مربوط به یک عنصر را تعیین کنیم. این مقدار را می توان بر اساس یک مقدار طولی یا درصد مشخص کنیم؛ با استفاده از کلیدواژه none می توانیم مقداری که قبلا تعیین شده است را پاک کنیم.

max-width | max-height : none | <length> | <percentage>

با تنظیم کردن مقدار کمترین و بیشترین عرض و طول، شما می توانید یک فاصله را تعیین کنید که عرض یک عنصر چگونه تغییر کند. یک عنصر از نوع بلوک با استفاده از کلاسی که در زیر تعریف کرده ایم سعی می کند اگر امکان داشته باشد عرضی به اندازه 500 پیکسل داشته باشد. زمانی که فضای افقی محدود باشد، این کلاس عنصر را وادار می کند عرضش کمتر از 200 پیکسل نباشد.
در حالت عادی ممکن است عرض صفحه بیشتر از عرض تعریف شده توسط css باشد و در این حالت مرورگر به صورت خودکار یک نوار پیمایش ایجاد می کند. برای جلوگیری از این مساله، از این دو ویژگی استفاده می کنیم. در این صورت دیگر نگران ایجاد یک نوار پیمایش نخواهیم بود و مرورگر به صورت خودکار عرض را تنظیم می کند:

max-width : 500px;
min-width : 200px;

ویژگی max-width نسبت به ویژگی min-width دارای اولویت است. با این وجود این مساله در مورد ارتفاع متفاوت است، به خاطر اینکه ویژگی min-height دارای اولویت بیشتری نسبت به ویژگی max-height است. بنابراین در مثال زیر، عنصری که دارای کلاس تعریف شده زیر است دارای ارتفاع 5em خواهد بود مگر اینکه محتوای داخل عنصر به ارتفاع بیشتری نیاز داشته باشد. در این حالت عنصر به صورت عمودی تا بیشترین مقداری که اجازه داده شده است (20em) گسترش پیدا می کند.

.mybox{
max-height : 20em;
min-height : 5em;
}

این نکته را در نظر داشته باشید که مقادیر ثابت مربوط به طول و عرض را نباید با مقادیر min و max به صورت همزمان استفاده کنیم. چهار ویژگی مربوط به min و max که در بالا به آنها اشاره شد در بیشتر مرورگرهای معتبر مورد پشتیبانی قرار می گیرند؛ این مرورگرها شامل این موارد هستند:
Chrome 1+, Firefox1+, IE7+, Safari1+, Opera8+. از این ویژگیها به همراه قوانین مربوط به media برای طراحی صفحات برای نمایش در صفحه های با اندازه های مختلف استفاده می شود. ویژگی box-sizing ویژگی های مربوط به ابعاد معمولا به محدوده محتوا اشاره می کنند، و با محدوده padding یا border کاری ندارد. بنابراین برای اطلاع از عرض و ارتفاع واقعی که یک عنصر در مدل box model اشغال می کند، میزان padding و border که آن عنصر اشغال می کند نیز باید محاسبه شود.

/* یک عنصر با عرض 100 پیکسل */
.mybox{
padding : 3px;
border : 2px solid black;
width : 90px;
}

در css3 یک ویژگی با نام box-sizing در اختیار طراحان وب قرار گرفته است که به آنها اجازه می دهد این انتخاب را داشته باشند که عرض و طول ها چگونه محاسبه شوند. مقدار پیش فرض برای این ویژگی content-box است و به این نکته اشاره می کند که ویژگی های ابعاد فقط به محدوده محتوا اشاره می کند. مقدار جایگزین دیگر border-box است که padding و border را نیز در این اندازه گیری دخیل می کند.

box-sizing : content-box | border-box;

با تغییردادن مقدار مربوط به box-sizing به border-box می توانید یک طرح بندی شبکه ای (grid layout) را بهتر ایجاد کنید به خاطر اینکه دیگر لازم نیست که خودتان مقدار مربوط به padding و border را محاسبه کنید.

/* یک عنصر با عرض 100 پیکسل */
.mybox{
box-sizing : border-box;
padding : 3px;
border : 2px solid gray;
width : 100px
}

ویژگی border-box خصوصیات خود را از عنصر والدش به ارث نمی برد، اما این ویژگی تمام خصوصیات خود را به تمام عناصری که در وب سایت از انتخاب کننده universal استفاده می کند نسبت می دهد. برای افزایش میزان پشتیبانی مرورگرهای وب از این ویژگی باید از پیشوندهای –webkit و –moz استفاده کنید:

/* استفاده از border-boxبرای تمام عنصر ها */
*{
/* Chrome 1-8, Safari 3-5 */
-webkit-box-sizing: border-box;
/* Firefox 1-28 */
-moz-box-sizing: border-box;
/* Chrome9+, Firefox29+, IE8+, Safari5.1+, Opera9.5+ */
box-sizing: border-box;
}

پشتیبانی از ویژگی box-sizing در وضعیت خوبی قرار دارد و تقریبا تمام مرورگرهای وب معتبراز آن پشتیبانی می کنند. به همین خاطر خیلی از وب سایت های جدید از این ویژگی استفاده می کنند تا محاسبات مربوط به شبکه ها در وب سایتشان آسان تر شود.

margins and paddings

از ویژگی های margin و padding برای تعیین محل قرار گیری عنصر و ایجاد فضا در اطراف آن استفاده می کنیم.

Padding

منظور از padding فضای بین محتوای یک عنصر و حاشیه آن است. این فضا را با استفاده از ویژگی padding تنظیم می کنیم. این ویژگی را می توان به هر عنصر نسبت داد و خصوصیات خود را از عنصر والد به ارث نمی برد.

padding (1-4) |padding-top | padding-right | padding-bottom | padding-left :
<length> | <percentage>

در هر سمت به طور جداگانه 4 ویژگی برای تنظیم کردن padding وجود دارد. در مثال زیر لبه های عمودی (vertical margins) یعنی بالا و پایین (top & bottom) 10 پیکسل خواهند بود و لبه های افقی (horizontal margins) صفر خواهند بود:

padding-top: 10px;
padding-right: 0px;
padding-bottom: 10px;
padding-left: 0px;

با استفاده از ویزگی padding می توانیم تمام اعلان بالا را در یک اعلان ساده خلاصه کنیم. در این حالت مقادیر مربوط به padding در جهت عقربه های ساعت مشخص می شوند: top, right, bottom, left.

padding 10px 0px 10px 0px;

مثل بسیاری از ویژگی های دیگر که به box model مربوط می شوند ویژگی padding نیز دارای یک الی چهار مقدار است که مربوط به گوشه های جعبه یک عنصر می شوند. اگر کمتر از 4 مقدار را مشخص کرده باشیم، مقادیر مانند شکل زیر تکرار خواهند شد:

تصویر بالا: ترتیب تکرار شدن ویژگی ها

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

padding 10px 0px;

توجه داشته باشید که ویژگی padding قسمتی از پس زمینه عنصر به حساب می آید و بر اساس ویژگی های اختصاص داده شده به پس زمینه مورد تاثیر قرار می گیرد، در حالی که این نکته که margin همیشه شفاف است.

ویژگی margin

لبه (margin) فضای اطراف border یک عنصر است که ویژگی های مربوط به آن با استفاده از دستور زیر تعیین می شود. این ویژگی ها را می توان به هر عنصری اعمال کرد و خصوصیات آن از عنصر والد به ارث برده نمی شود، با این تفاوت که لبه های عمودی (vertical margins) بر روی عناصر جایگزین نشده inline اثری ندارد.

margin (1-4) | margin-top | margin-right | 
margin-bottom | margin-left:
<length>| <percentage> | auto

برای margin و padding می توان از درصد هم استفاده کرد، که اندازه آنها به نسبت طول و عرض عنصر نگهدارنده تعیین می شود. بر خلاف padding، margin می تواند مقدار منفی داشته باشد، که به عناصر اجازه می دهد با یکدیگر همپوشانی داشته باشند. مقدار auto به مروگر این اجازه را می دهد تا مقدار margin را به صورت خودکار انتخاب کند.

مثل ویژگی های padding و border، ویژگی margin را می توان با یک الی چهار مقدار تنظیم کرد. در مثال زیر margin بالا و پایین به اندازه 1سانتی متر تعیین شده و margin بالا به اندازه صفر تنظیم می شود:

margin: 1cm 0;

لبه های بالا و پایین در عناصر مجاور به اشتراک گذاشته می شود، بنابراین فاصله عمودی بین دو جعبه مجموع دو لبه نیست، بلکه فقط به اندازه بزرگترین جعبه است. بنابراین فاصله بین دو عنصر <div> در مثال پایین فقط 10 پیکسل است:

<div style=”margin-bottom: 5px;”>جعبه بالا
<div style=”margin-top: 10px;”>جعبه پایین