ویژگی 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; }
}

ویژگی های مربوط به جدول در css

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

ویژگی border-spacing

فاصله بین حاشیه های (border) خانه های جدول که در کنار یکدیگر قرار دارند را می توان با استفاده از ویژگی border-spacing تغییر داد؛ این ویژگی برابر با خصوصیت (attribute) cellspacing در اچ تی ام ا ل است. W3C مقدار صفر را به عنوان مقدار پیش فرض برای این ویژگی قرار داده است، اما بیشتر مرورگرها مقدار 2پیکسل را به عنوان مقدار پیش فرض در نظر می گیرند.

border-spacing : inherit | <length> [<length>]

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

.spacing {
border-spacing: 5px 10px;
}

border-spacing یک ویژگی مربوط به جدول است، نه ویژگی مربوط به خانه های جدول، بنابراین همانطور که در مثال زیر می بینید این ویژگی به عنصر <table> اعمال می شود:

<table class="spacing">
<caption>جدول من</caption>
<tr>
<td>خانه اول، ردیف اول </td>
<td>خانه دوم، ردیف اول</td>
</tr>
<tr>
<td>خانه اول، ردیف دوم</td>
<td>خانه دوم، ردیف دوم</td>
</tr>
</table>

در تصویر بالا همین جدول را می بینید که هر کدام از خانه های جدول با یک حاشیه مشکی ساده ایجاد شده است.

خانه های جدول دارای border و padding هستند، اما margin ندارند؛ به جای آن باید از ویژگی border-spacing استفاده کنیم. padding در مورد خانه های جدول مثل سایر عناصر عمل می کند و مثل خصوصیت cellpadding در اچ تی ام ال است.

ویژگی border-collapse

ویژگی border-collapse مشخص می کند که آیا حاشیه های جدول به یک حاشیه تنها یا جداگانه تبدیل شود.

border-collapse : inherit | separated | collapse

به طور معمول خانه های جدول حاشیه های مربوط به خود را دارند و این حاشیه ها توسط فاصله ای که در ویژگی border-spacing تعیین می شود از هم جدا می شوند. اگر حاشیه ها با مقدار collapse تعیین شده باشند، خانه های جدول حاشیه ها را با یکدیگر به اشتراک می گذارند و هر مقداری که برای border-spacing تعیین شده باشد نادیده گرفته خواهد شد.

table { border-collapse: collapse;}

با اعمال کردن این ویژگی، جدول ذکر شده در مثال بالا به این شکل نمایش داده می شود:

ویژگی caption-side

عنصر <caption> یک برچسب برای جدول ایجاد می کند. با استفاده از ویژگی caption-side می توانیم محل قرارگیری این برچسب را تغییر دهیم.

caption-side : inherit | top | bottom

عنوان معمولا در بالای جدول قرار می گیرد، اما با استفاده از ویژگی caption-side می توانیم مشخص کنیم که برچسب در پایین جدول قرار گیرد. این ویژگی به عنصر <caption> اعمال می شود، اما می توانیم این ویژگی را برای عنصر <table> تنظیم کنیم به خاطر اینکه این ویژگی به ارث برده می شود.

caption { caption-side: bottom; }

ویژگی empty-cell

یک خانه جدول که دارای محتوا نیست به صورت معمول حاشیه و پس زمینه خود را نمایش می دهد. با استفاده از ویژگی empty-cell می توانیم این رفتار را تغییر دهیم.

empty-cell : inherit | show | hide

با تنظیم کردن مقدار این ویژگی با مقدار hide حاشیه و پس زمینه خانه جدول نمایش داده نمی شود. Layout جدول با استفاده از این ویژگی تغییر نمی کند.

ویژگی table-layout

ویژگی table-layout مشخص می کند که آیا عرض خانه های جدول باید ثابت باشند یا انعطاف پذیر. برخلاف سایر ویژگی های مربوط به جدول، ویژگی table-layout خصوصیات خود را از عنصر والد به ارث نمی برد:

table-layout : auto | fixed

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

/* ثابت نگاه داشتن عرض خانه های جدول */
.fixed { table-layout: fixed; }

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

فهرست ها (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+.

ویژگی های classification

ویژگی های classification مشخص می کنند که چگونه یک عنصر نمایش داده شود و مشخص می کند که آیا قابل مشاهده (visible) باشد یا نه.

ویژگی display

ویژگی display مشخص می کند جعبه ای که در اطراف یک عنصر قرار می گیرد از چه نوع باشد. این ویژگی می تواند هر عنصر را به گونه ای تعریف کند که در حالت inline یا block یا هر نوع دیگر نمایش داده شود. هر عنصر بر اساس نوع خود دارای یک مقدار پیش فرض برای این ویژگی است.

display: none | inline | block | list-item | inline-block | 
inline-table | table | table-cell | table-row |  
table-column | table-column-group | table-footer-group | 
table-header-group | table-row-group | flex | inline-flex | 
grid | inline-grid | run-in

بیشتر عناصر اچی تی ام ال یا به صورت inline هستند یا block؛ سایر عناصر دارای ویژگی display خاص هستند، مثلا list-item برای عنصر <li>و table-cell برای عنصر <td> و <th>. با استفاده از ویژگی display می توان هر عنصر را به شکلی تغییر داد که به یکی از این انواع یا هر نوع دیگری تبدیل شود. به عنوان مثال در زیر، یک لینک را به جای اینکه به صورت inline باشد به یک block تبدیل می کنیم:

<a href="#" style="display: block; ">یک لینک از نوع بلوک</a>

یکی از مفید ترین مقادیر مربوط به ویژگی display مقدار inline-block است که ویژگی های inline و block را باهم ترکیب می کند. یک عنصر با نوع inline-block یک عنصر inline است با این استثنا که می توان ویژگی های عرض، ارتفاع و margin عمودی مربوط به box model را برای آن تغییر داد.
این ویژگی ها دقیقا مشابه عناصر inline جایگزین شده (replaced inline elements) هستند؛ عناصری مثل <img> و <button>. به همین شکل این نوع عناصر در اچ تی ام ال نسخه 5 به صورت رسمی به عنوان inline-block بازتعریف شده اند.

یک کاربرد معمول برای مقدار inline-block تبدیل آیتم های یک فهرست به شکل مناسب برای منوی های پیمایشی افقی است. توجه داشته باشید که با تغییر دادن مقدار display برای آیتم های لیست به مقدار inline-block به صورت خودکار نشانگرهای فهرست پاک می شوند:

li{
display: inline-block;
width: 100px;
background: #ccc;
}

با نوشتن این قانون، همانطور که در شکل زیر مشاهده می کنید، سه جعبه با پس زمینه خاکستری در کنار هم ایجاد می شود.

<ul>
<li>آیتم اول</li>
<li>آیتم دوم</li>
<li>آیتم سوم</li>
</ul>

تصویر بالا: استفاده از مقدار inline-block

یک مقدار مفید دیگر برای ویژگی display مقدار none است. این مقدار یک عنصر را کاملا ناپدید می کند، و درواقع صفحه به گونه ای نمایش داده می شود که انگار اصلا آن عنصر وجود ندارد.

.removed{display: none;}

ویژگی visibility

ویژگی visibility می تواند یک عنصر را غیر قابل دیدن کند بدون اینکه فضایی که آن عنصر اشغال می کند از بین برود. برای این کار باید مقدار این ویژگی hidden باشد.

visibility (block) : inherit | visible | hidden | collapse

مقدارcollapse به این معنی است که فقط بر روی عناصر جدول به کار می رود: ردیف ها (<tr>)، ستونها (<col>)، گروه های ستون (<colgroup>)، و گروه های ردیف (<thead>, <tbody>, <tfoot>). بر اساس خصوصیات این ویژگی، مقدار collapse باید عنصر مخفی شده را پاک کند (مثل عبارت display: none) و فضا را برای سایر عناصر بازکند. متاسفانه تمام مرورگرهای وب این خصوصیت مربوط به این مقدار را رعایت نمی کنند. بهتر است برای این کار مقدار ویژگی display را none قرار دهید، چون این روش امن تر و مطمئن تر است.

ویژگی opacity

ویژگی opacity می تواند یک عنصر و محتوای آن را شفاف کند.

opacity:

یک عدد اعشاری بین 0.0 و 1.0 را می توانیم برای تعیین میزان شفافیت استفاده کنیم. اگر این مقدار 1 باشد، عنصر شفاف خواهد بود؛ مقدار 0 به این معنی است که عنصر کاملا غیرشفاف یا غیرقابل دیدن است.

.half-transparent { opacity : 0.5; }

این ویژگی یک ویژگی مربوط به css3 است که در نسخه های chrome1+, Firefox1+, IE9+, Safari1.2+, Opera9+ پشتیبانی می شود. با استفاده از فیلتر ذکر شده درمثال زیر می توان میزان پشتیبانی از این ویژگی را در مرورگر IE تا حدود زیادی افزایش داد:

.half-transparent{
filter: alpha(opacity=50) ; /* IE 5-8 */
opacity : 0.5;
}

ویژگی float

ویژگی float یک عنصر را از عنصر نگهدارنده آن جدا می کند و آن را در بالا، یا چپ یا راست شناور می کند. از این ویژگی می توان برای قراردادن (wrap) متن، دور یک تصویر که البته از آن برای صفحه بندی (layout) نیز استفاده می شود، استفاده کرد. شناور کردن یک عنصر inline باعث می شود آن عنصر به صورت خودکار به یک عنصر بلوک تبدیل شود.

float : none | left | right

برای اینکه محتوای شما اطراف یک تصویر را فرا بگیرد (wrap) می توانید آن را در سمت چپ یا راست شناور کنید.

<img style="float: left; " src="img.jpeg" alt="">

برای صفحه بندی نیز ویژگی float این اجازه را به ما می دهد که عناصر از نوع بلوک را به صورت افقی در کنار یکدیگر قرار دهیم. به عنوان مثال با استفاده از کلاس زیر می توانیم شبکه ای از جعبه ها را ایجاد کنیم:

.box{
float: left;
width: 100px; 
height: 100px;
margin: 0 1em;
background: #ccc;
border-radius: 10px;
}

این کلاس باعث می شود جعبه هایی که ایجاد کرده ایم به جای اینکه به صورت عمودی پشت سرهم قرار بگیرند، به صورت افقی در کنار هم قرار بگیرند.

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

تصویر بالا: جعبه های شناور

اثر جانبی استفاده از ویژگی float این است که هر عنصر دیگری که پس از چنین عنصری قرار می گیرد نیز به صورت افقی مرتب می شود. ویژگی clear برای متوقف کردن این رفتار به وجود آمده است.

ویژگی clear

از ویژگی clear برای این استفاده می کنیم که از شناور شدن یک عنصر در سمت راست یا چپ یا هر دو طرف یک عنصر دیگر جلوگیری کنیم:

clear (block) : none | left | right | both

معمولا برای این ویژگی یک کلاس را تعریف می کنیم که هم نام با همین ویژگی باشد:

.clear { clear: both; }

معمولا یک عنصر نگهدارنده <div> که ویژگی clear برای آن تعریف شده است بعد از عنصرهای شناور قرار داده می شود. این عنصر پاک شده به جای اینکه در کنار عناصر شناور شده قرار گیرد به قسمت پایین عناصر شناور شده حرکت می کند.

<div class="clear"></div>

از آنجا که صفحه بندی با استفاده از ویژگی های float کمی پیچیده و شکننده است، این روش معمولا با استفاده از روش های دیگر جایگزین می شود، مثل استفاده از ویژگی های positioning.

در مثال box-aligning که قبلا ارائه شد، یک روش جایگزین بهتر این است که جعبه را به یک عنصر inline-block تبدیل کنیم. با این روش یک کار مشابه انجام می دهیم، در حالی که در هنگام استفاده از clear لازم است عناصر شناور را حذف کنیم.

.box{
display: inline-block;
width: 100px;
height: 100px;
margin: 0 1em;
background: #ccc;
border-radius: 10px;
}

ویژگی cursor

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

تصویر بالا: مقادیر استاندارد برای نشانگر موس

علاوه بر این مقادیر، با استفاده از تابع url می توانیم نشانگر های موس شخصی نیز تعریف کنیم. اگر این نشانگر موس وجود نداشته باشد، می توان بعد از نشانگر موس شخصی، یک نشانگر موس عمومی مشخص کنیم که با علامت ویرگول جدا می شود:

cursor : url(new.cur), pointer;

ویژگی های مربوط به 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;”>جعبه پایین

ویژگی outline

منظور از outline خطی است که در اطراف یک عنصر و خارج از لبه حاشیه رسم می شود. این ویژگی معمولا به صورت یک خط نقطه چین در اطراف عناصر تعاملی نمایش داده می شود تا مشخص کند کدام عنصر به عنوان عنصر فعال است. اگر چه این ویژگی شبیه به border است اما outline هیچ فضایی را در box model اشغال نمی کند. علاوه بر این، بر خلاف borderتمام چهار جهت یک outline باید شبیه به هم باشند. ویژگی های مربوط به outline را می توان به هر عنصری اعمال کرد و این ویژگی از عنصر والد خود چیزی را به ارث نمی برد.

ویژگی outline-style 

سبک مربوط به outline با استفاده از ویژگی outline-style تعیین می شود. مقدار پیش فرض برای این ویژگی مقدار none است و اگر بخواهیم که outline نمایش داده شود باید مقداری غیر از none را بنویسیم.

outline-style : none | solid | dotted | dashed | double | 
groove | ridge | inset | outset 

مقادیر مربوط به این ویژگی دقیقا مثل border-style است به استثنای این مورد که مقدار hidden یک مقدار معتبر برای outline-style نیست. شکل مربوط به هر کدام از مقادیر را در زیر می بینید:

تصویر بالا: حالت های مختلف ویژگی outline

ویژگی outline-width

ضخامت outline با استفاده از ویژگی outline-width تعیین می شود. مثل ویژگی border-width مقدار مربوط به این ویژگی می تواند طول باشد یا یکی از این کلیدواژه ها: thin, medium, thick.

outline-width : <length> | thin | medium | thick 

cssضخامت outline را به صورت عددی مشخص کرده است، اما معمولا به صورت 1px, 3px, & 5px نمایش داده می شوند. مثل ویژگی border-width مقدار پیش فرض مربوط به این ویژگی مقدار medium است.

ویژگی outline-color

با استفاده از ویژگی outline-color می توانیم رنگ outline را تغییر دهیم. علاوه بر رنگ های استانداردی که وجود درد، می توان مقدار invert را نیز برای این ویژگی قرار داد.

outline-color : invert | <color>

برای اینکه مطمئن شویم به کنتراست مورد نظر خود می رسیم، خصوصیات مربوط به این اعلان پیشنهاد می کند که مقدار invert را به عنوان پیش فرض انتخاب کنیم، این کار باعث می شود رنگ outline رنگی مخالف پس زمینه خود انتخاب شود. با این وجود فقط IE8+ و Opera7+ واقعا از این مقدار پشتیبانی می کنند. بنابراین این مقدار معمولا استفاده نمی شود.

ویژگی outline

ویژگی outline حالت کوتاه شده برای دسترسی به تمام ویژگی هایی است که در بالا به آنها اشاره شد. با این دستور می توان تمام خصوصیات outline را به صورت یکجا تنظیم کرد:

outline : <outline-width> + <outline-style> + <outline-color>

از آنجایی که مقادیر موجود در دستور بالا کاملا با یکدیگر متفاوت هستند و هیچ نوع ابهامی نسبت به یکدیگر ندارند، می توان این مقادیر را با هر ترتیبی استفاده کرد. و البته هر کدام از آنها را می توان نادیده گرفت:

outline : thin solid red;

این کار را می توان با تنظیم کردن هر کدام از مقادیر به صورت جداگانه نیز انجام داد، اما مسلما دستور بالا ساده تر و راحت تر است:

outline-width : thin;
outline-style : solid;
outline-color : red;

ویژگی outline-offset

میزان فضای بین outline و لبه حاشیه را می توان با استفاده از این ویژگی تنظیم کرد. این ویژگی در css3 ارائه شده است.

outline-offset : <length>;

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

outline-offset : 3px;

اگرچه این ویژگی در مروگر IE پشتیبانی نمی شود، اما در تمام مرورگرهای مهم دیگر مورد پشتیبانی قرار می گیرد.

ویژگی border

همانطور که در قسمت قبل اشاره شد، منظور از border حاشیه ای است که در اطراف متن و padding قرار می گیرد.
ویژگی های مربوط به حاشیه را برای این استفاده می کنیم که حاشیه های اطراف عنصر را فرمت دهی کنیم. این ویژگی ها را می توان به هر عنصر اعمال کرد و این ویژگی ها به ارث برده نمی شوند. 

border-style

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

border-style (1-4) | border-top-style |
border-right-style | border-bottom-style |
border-left-style :
none | dashed | dotted | double | groove | 
hidden | inset | outset | ridge | solid

سبک solid سبکی است که از همه بیشتر مورد استفاده قرار می گیرد (یعنی یک خط معمولی که می توانیم ضخامت و رنگ آن را تعیین کنیم)، اما گزینه های بیشتر دیگری نیز برای نشان دادن حاشیه وجود دارد، شکل زیر را ببینید. ویژگی hidden باعث می شود که حاشیه دیده نشود و مثل مقدار none است.

تصویر بالا: حالت های مختلف حاشیه

ویژگی border-style را می توان با یک تا چهار مقدار، مقداردهی کرد. هنگامی که کمتر از 4 مقدار را اختصاص می دهیم مقدار ویژگی border-style تکرار می شود؛ به شکل زیر نگاه کنید (در این شکل ترتیب تکرار شدن ویژگی ها را می بینید):

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

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

border-style : solid none solid none;
border-style : solid none solid;
border-style : solid none;

برای اینکه تمام حاشیه های مربوط به یک عنصر به صورت یک خط ساده ایجاد شود (solid)، فقط یک مقدار ساده را برای این ویژگی می نویسیم:

border-style : solid;

ویژگی border-style دارای 4 زیر ویژگی است که می توان از آن برای هر کدام از طرف های مربوط به حاشیه استفاده کنیم.

border-top-style : dotted;
border-right-style : dashed;
border-bottom-style : ridge;
border-left-style : inset;

ویژگی border-width

ویژگی border-widthعرض مربوط حاشیه را کنترل می کند. برای این ویژگی می توان از یک واحد اندازه گیری استفاده کرد یا اینکه می توانید از مقادیر پیش فرض استفاده کنید. این مقادیر پیش فرض عبارتند از: thin, medium یا thick. مقدار اولیه medium است که معمولا به صورت 3پیکسل در نظر گرفته می شود.

border-width (1-4) | border-top-width | 
border-right-width | border-bottom-width | 
border-left-width :
| thin | medium | thick

این ویژگی هم مثل ویژگی border-style می تواند 1 الی 4 مقدار داشته باشد و برای تنظیم کردن عرض هر سمت از حاشیه دارای 4 زیر ویژگی است.

/* ویژگی به صورت خلاصه شده */
border-width: thin medium; 

/* Full-length property */
border-top-width: thin;
border-right-width: medium;
border-bottom-width: thin;
border-left-width: medium;

اگر عرض را صفر بگذاریم هیچ حاشیه ای نمایش داده نمی شود. این مقدار دقیقا شبیه به این است که border-style را به مقدار none تنظیم کنیم.

ویژگی border-color

ویژگی border-color رنگ حاشیه را تنظیم می کند. Css مشخص نمی کند که رنگ پیش فرض برای حاشیه چه رنگی است، اما بیشتر مرورگرها رنگ پیش فرض را gray در نظر می گیرند. این ویژگی می تواند از 1 تا 4 مقدار را بپذیرد و دارای 4 زیرویژگی برای تعیین رنگ هرکدام از سمت های حاشیه است.

border-color (1-4) | border-top-color |
border-right-color | border-bottom-color | 
border-left-color : 
| transparent

با تنظیم کردن مقدار color به transparent حاشیه شفاف می شود بدون اینکه سبک صفحه بندی تغییر کند.

border-color: transparent;	

ویژگی border

ویژگی border برای تعیین عرض (width)، سبک (style)، و رنگ (color) مربوط به یک حاشیه در یک اعلان استفاده می شود. بهترین و کامل ترین روش برای تعیین کردن ویژگی های حاشیه استفاده از این دستور است؛ به خاطر اینکه با این دستور به صورت یکجا به همه ویژگی های حاشیه دسترسی داریم و کدهای ما در این صورت مرتب تر و مفهوم تر خواهند بود:

border | border-top | border-right | 
border-bottom | border-left: 
<border-width> + <border-style> + <border-color>

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

border: 1px solid black;

ویژگی border دارای 4 زیرویژگی است تا بتوان از طریق آنها تنظیمات مربوط به هر طرف حاشیه را تعیین کرد.

border-top: 1px solid red;
border-right: 1px solid blue;
border-bottom: 1px solid aqua;
border-left: 1px solid lime;

ویژگی border-radius

با استفاده از ویژگی border-radiusیا با استفاده از یکی از 4 زیر ویژگی آن می توان کناره های مربوط به هر حاشیه را به صورت منحنی درآورد.

border-radius (1-4) |border-top-left-radius | 
border-top-right-radius | border-bottom-right-radius |
border-bottom-left-radius :
<length> | <percentage> [ / <length> | <percentage> ]

ویژگی border-radius می تواند یک الی چهار مفدار را بپذیرد. هر کدام از مقادیر مربوط به radius را می توان با استفاده از یک مقدار برای ایجاد انحنای دایره ای شکل یا دو مقدار برای ایجاد انحنای بیضی شکل تنظیم کرد. این مقادیر می تواند طول یا درصد باشد. اگر از درصد استفاده کنیم، مقدار به اندازه های ظرف نگهدارنده بستگی خواهد داشت. شکل مربوط به مثال های زیر را مشاهده کنید:

.a {border-radius: 5px;}
.b { border-radius: 5px 20px; }
.c { border-radius: 50%; }
.d { border-radius: 30px/10px; }

تصویر بالا: مثال هایی مربوط به گوشه های دارای منحنی

با استفاده از هرکدام از 4 زیرویژگی مربوط به border-radius می توانیم شعاع مربوط به هر کدام از 4گوشه را مشخص کنیم. مثالی که در زیر مشاهده می کنیم مثل شکل دوم (b) در شکل بالا عمل می کند:

border-top-left-radius: 5px;
border-top-right-radius: 20px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 20px;

ویژگی border-radius یک ویژگی است که به خوبی توسط css3 پشتیبانی می شود. برای اینکه این ویژگی توسط مرورگرهای وب قدیمی قابل پشتیبانی باشد می توانیم از پیشوندهای –webkit و –moz استفاده کنیم.

.round{
/* Safari 3-4 */
-webkit-border-radius: 5px;
/* Firefox 1-3.6 */
-moz-border-radius: 5px;
/* Opera10.5, IE9, Safari5, Chrome1, Firefox4 */
border-radius: 5px;
}

مدل جعبه (box model) در css

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

منظور از content محتوای داخل جعبه است که شامل متن و تصاویر است.
منظور از padding فضای خالی اطراف محتوا است که این فضا به صورت شفاف است.
منظور از border حاشیه ای است که در اطراف محتوا و padding قرار می گیرد.
منظور از margin فضای خالی اطراف حاشیه (border) است. به شکل زیر توجه کنید:

تصویر بالا: مدل جعبه (box model) در css

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

تفاوت Inline و Block

در اچ تی ام ال دو نوع اساسی عنصر (تگ) وجود دارد:
block و inline. مدل جعبه (Box model) با هر کدام از این دو نوع عنصر به صورت متفاوت برخورد می کند. ما باید تفاوت بین این دو نوع را به خوبی بشناسیم. به عنوان مثال در مورد عناصر inline می توانیم به عناصر <a>, <strong>, <em> اشاره کنیم و در مورد عناصر block می توانیم به <p>, <h1>, <form> اشاره کنیم.

عناصری که به صورت inline هستند در داخل محتوا قرار می گیرند و اگر نیاز باشد به دو قسمت تقسیم می شوند تا با عرض نگهدارنده (container) خود تطبیق پیدا کند. عناصر block نمی توانند در داخل عناصر inline قرار گیرند؛ البته به استثناء عنصر <a> که می تواند هر نوع عنصری را در داخل خود جای دهد.

عناصر از نوع block می توانند هم عناصر block و هم عناصر inline را داخل خود قرار دهند (تصویر). این نوع عناصر متن را با ایجاد یک جعبه مجازی که به صورت افقی گسترش پیدا می کند ساختاردهی می کنند، و محتوا را طوری نمایش می دهند که گویا قبل و بعد از هر قسمت از بلوک حالتی مانند رفتن به خط بعدی (line break) وجود دارد. به خاطر این ویژگی ها به عناصر block جعبه (boxes) یا نگهدارنده (containers) هم گفته می شود.

تصویر بالا: عناصر block و inline

جعبه هایی که در اطراف عناصر block و عناصر inline قرار دارند دارای ویژگی های متفاوتی هستند. در مدل جعبه ای (box model ) یک عنصر block می تواند تمام ویژگی های خود را داشته باشد؛ ویژگی هایی مثل طول و عرض فضای مربوط به محتوا، به علاوه border, margin, &padding. اگر عرض مشخص نشده باشد یک عنصر block به صورت افقی تا جایی که عنصر حاوی آن اجازه دهد گسترش پیدا می کند.

یک عنصر inline در این مورد محدودتر عمل می کند؛ برای این عناصر نمی توان margin های افقی و عمودی را تنظیم کرد(بالا یا پایین). همچنین این نوع عنصر نمی تواند عرض یا طول عنصر Inline خود را تغییر دهد. برای یک عنصر inline می توان کمترین ارتفاع را با استفاده از ویژگی line-height تنظیم کرد، اما طول و عرض به صورت خودکار تطبیق داده می شوند تا با محتوای داخلی خود تطبیق پیدا کند.

در مورد عناصر inline یک زیرگروه از عناصر inline وجود دارد، که به آنها عناصر جایگزین شده inline (replaced inline elements)گفته می شود، این نوع عناصر از اشیاء خارجی استفاده می کنند: مانند <img>, <video>, &<object>. همچنین عناصر فرم مثل <input>&<textarea>. در مورد این نوع عناصر inline، تمام ویژگی های مربوط به جعبه مثل یک عنصر block قابل اعمال هستند.

عناصر Span & div

استفاده از عناصر span و div برای ساختار دهی یک صفحه وب، یک روش عمومی و پرکاربرد است. این دو عنصر هیچ سبک (style) مخصوص به خود را ندارند، و همین ویژگی کمک می کند که این دو عنصر به صورت خاص برای کار کردن با انتخاب کننده های class و id مناسب باشند. تفاوت بین این دو عنصر در این است که عنصر <span> یک عنصر inline است و عنصر div یک عنصر block است.

>span>Inline>/span>
>div>Block>/div>

با استفاده از عنصر <span> به عنوان یک عنصرinline یک یا چند سبک را به قسمتی از متن اعمال می کنیم. با استفاده از این عنصر نمی توانیم عناصر بلوک را سبک دهی کنیم، به خاطر اینکه بر اساس ویژگی های مربوط به اچ تی ام ال، نمی توان عناصر بلوک را در داخل عناصر inline قرار داد (همانطور که در بالا نیز اشاره کردیم).

<span style=”color: red;” >متن قرمز</span>

از طرف دیگر، می توانیم با استفاده از عنصر <div> نگهدارنده های مربوط به عناصر بلوک یا inline را سبک دهی کنیم. این نوع نگهدارنده های شخصی سازی شده اغلب اوقات همان چیزی هستند که با استفاده از آنها صفحه بندی را مشخص می کنیم. از آنجا که عنصر <div> یک عنصر بلوکی است، در این عنصر می توان تمام ویژگی های مربوط به جعبه را اعمال کرد (width, height, padding, border, & margin):

<div class=”a”>
<div class=”b” >یک بلوک در داخل بلوک دیگر</div>
</div>