گرادیان ها

گرادیان یک محدوده رنگ شده است که به آرامی از یک رنگ به رنگ دیگر تبدیل می شود. این ویژگی در css3 ارائه شده است و در هر قسمتی که به یک تصویر نیاز داریم می توانیم از آن استفاده کنیم؛ اما معمولا این ویژگی به همراه ویژگی background و background-image استفاده می شود تا یک پسزمینه به حالت گرادیان بوجود آید.

ویژگی linear-gradient

تابع linear-gradient() یک گرادیان را به وجود می آورد که به آرامی از یک رنگ به رنگ دیگر تبدیل می شود:

linear-gradient([<angle> | to <side-or-corner>]
                       {, <color stop> [stop position] (2-∞) )

در ساده ترین حالت، گرادیان شامل دو رنگ است که به آرامی از بالا به پایین تغییر می کنند. در مثال پایین، گرادیان از رنگ خاکستری شروع می شود و به رنگ سیاه ختم می شود (از بالا به پایین).

.mygradient {
   background-image :linear-gradient(gray, black);
}

تصویر بالا: یک گرادیان ساده خطی

با استفاده از کلیدواژه to می توانیم زاویه گرادیان را مشخص کنیم. با استفاده از این کلیدواژه، مقصدی که قرار است گرادیان در آن نقطه پایان پذیرد مشخص می کنیم: top, right, bottom, left یا هر ترکیبی از آنها. مثال زیر را ببینید:

linear-gradient(to bottom right,  gray, black);

تصویر بالا: یک گرادیان خطی به سمت پایین، راست

با استفاده از واحد درجه (deg) می توانیم زاویه را به صورت دقیق مشخص کنیم. صفر درجه (0deg)همانند نوشتن top است. درجه ها در جهت گردش عقربه های ساعت محاسبه می شوند، و زاویه های منفی نیز قابل قبول هستند.

linear-gradient(0deg, gray, black); /* to top */
linear-gradient(90deg, gray, black); /* to right */
linear-gradient(180deg, gray, black); /* to bottom */
linear-gradient(-90deg, gray, black); /* to left */

در بین رنگهای ابتدا و انتها می توان رنگ های دیگر هم اضافه کرد. فضای مربوط به هر رنگ را می توان بر اساس درصد یا مقدار طولی مشخص کرد. اگر فضای مربوط به هر رنگ را مشخص نکنیم، رنگ ها به طور مساوی تقسیم می شوند. در مثال زیر، رنگ سفید به اندازه 25% مشخص شده است، در حالی که مقدار پیش فرض برای آن 50% است. در تصویر زیر نتیجه را مشاهده می کنید: linear-gradient(gray, white 25%, black);

تصویر بالا: یک گرادیان خطی با استفاده از چند رنگ

ساختار استانداردی که در بالا ذکر شد فقط در نسخه های خاصی از مرورگرهای وب پشتیبانی می شود:
Chrome26+, Firefox16+, IE10+, Safari1.6+, Opera12.1+. با استفاده از پیشوندهای –moz, -webkit, -o می توان پشتیبانی از این تابع را تا این نسخه ها افزایش داد: Firefox3.6, Chrome1, Safari4, Opera11.1.

.linear-gradient{
background-color : red; /* رنگ جایگزین */
/* chrome 1-9, Safari 4-5 */
background :-webkit-gradient(linear, left top, right top, from(red) , to(orange));
/* Chrome 10-25, Safari 5.1-6.1 */
background :-webkit-linear-gradient(left, red, orange);
/* Firefox 3.6-15 */
background :-moz-linear-gradient(left, red, orange);
/* Opera 11.1-12.1 */
background : -o-linear-gradient(left, red, orange);
/* standard syntax */
background : linear-background(to right, red, orange);
}

گرادیان دایره ای
یک گرادیان دایره ای به صورت تدریجی از نقطه مرکزی به سمت خارج – به صورت دایره ای - تشکیل می شود. در css با استفاده از تابع radial-gradient() می توانیم این نوع از گرادیان را ایجاد کنیم.

radial-gradient([<shape> + <size>] [at <position>]
		{,<color stop> [stop position]} {2-∞} )

برای اینکه بتوانیم یک گرادیان دایره ای شکل ایجاد کنیم باید حداقل دو نقطه رنگی ایجاد کنیم. گرادیان دایره ای که در شکل زیر وجود دارد با رنگ خاکستری در وسط شکل شروع و به رنگ مشکی در کناره های شکل ختم می شود (این نکته را نیز در نظر داشته باشید که برای ایجاد یک گرادیان دایره ای، مثل یک گرادیان خطی با کمک ویژگی های background و background-image استفاده می کنیم).

.radial-gradient{
	background-image: radial-gradient(gray, black);	
             width: 300px;
             height: 300px;
}

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

مثل تابع linear-gradient می توانیم بیشتر از دو رنگ را در گرادیان دایره ای شکل داشته باشیم که می توانید به صورت اختیاری یک مقدار بر اساس طول یا درصد برای محل قرارگیری هر رنگ مشخص کنید که محل تمام شدن هر رنگ را مشخص می کند. مثال زیر را مشاهده کنید:

radial-gradient(black 25%, white, black 75%);

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

می توانیم گرادیان دایره ای را طوری تعریف کنیم که شکل آن به شکل دایره یا لوزی باشد. شکل پیش فرض به صورت بیضی - ellipse - است؛ در این حالت گرادیان می تواند خود را متناسب با طول و عرض فضایی که در آن اعمال می شود شکل دهد، مثل شکل مثال بالا (البته مثال بالا یک مربع به اندازه 300 در 300 پیکسل است و این باعث شده که شکل گرادیان به صورت دایره ای شکل باشد، مگر نه در حالت پیش فرض، گرادیان خود را با عرض و ارتفاع مطقه ای که در آن تعریف شده است تطبیق می دهد). مقدار جایگزین دیگر، دایره - circle - است که در مثال پایین مشاهده می کنید، که گرادیان را مجبور می کند به شکل دایره باشد و با طول و عرض شکلی که در آن اعمال شده است هیچ رابطه ای ندارد (بر خلاف مثال های قبل).

radial-gradient(circle, black 25%, white, black 75%);

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

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

radial-gradient(75% 25%, gray, black);

تصویر بالا: یک گرادیان دایره ای که در آن اندازه هر رنگ تغییر داده شده

اگر برای ایجاد گرادیان به دقت کمتری احتیاج داشته باشید می توانید از مقادیر از پیش تعریف شده نیز استفاده کنید، این مقادیر شامل این موارد هستند: closest-side, closest-corner, farthest-side, farthest-corner. این مقادیر مشخص می کنند که نقطه مرکزی گرادیانی که شکل می گیرد تا چه اندازه نسبت به کناره های عنصر یا گوشه های عنصر فاصله داشته باشد. به عنوان مثال مقدار farthest-side گرادیان را به شکلی بوجود می آورد که آخرین رنگ مربوط به گرادیان در دورترین نقطه کناری عنصر نسبت به نقطه مرکزی قرار گیرد.

radial-gradient(farthest-side, gray, black);

در حالت پیش فرض، نقطه مرکزی مربوط به یک گرادیان در قسمت مرکز عنصر قرار دارد. نقطه مرکزی مربوط به گرادیان را می توان با استفاده از کلیدواژه at مشخص کرد که پس از آن موقعیت مورد نظر شما قرار می گیرد. مقدار موقعیت دقیقا مثل ویژگی background-position تعیین می شود. ابتدا موقعیت افقی (horizontal position) را تعیین می کنیم، و سپس موقعیت عمودی (vertical position) قرار می گیرد که موقیت عمودی یک مقدار اختیاری است. موقعیت را می توان با اسفتاده از کلیدواژه های left, center, right + top, center, and bottom و مقادیر طولی یا مقادیر درصدی، یا ترکیبی از آنها مشخص کرد. یک مثال را در شکل زیر می بینید، که نقطه مرکزی گرادیان در آن به قسمت پایین سمت راست منتقل شده است:

radial-gradient(at right bottom, gray, black);

تصویر بالا: یک گرادیان دایره ای که مرکز آن در پایین سمت راست قرار دارد

پشتیبانی از تابع radial-gradient() به همراه استفاده از پیشوندهای –moz, -webkit و -o تاحدود زیادی شبیه به تابع linear-gradient() است. مثل تابع linear-gradient() ساختار دستوری گرادیان دایره ای شکل نیز در طول زمان مورد بازبینی های مختلفی قرار گرفته است. یک مثال در مورد ساختار دستوری که در تمام مرورگرها پشتیبانی می شود را در زیر مشاهده می کنید:

.radial-gradient
{
background-color:red;/*رنگ جایگزین*/

/*Chrome1-9,Safari4-5 */
background:-webkit-gradient(radial,centercenter,0px, center center,100%,color-stop(0%,red), color-stop(100%,orange));

/*Chrome10-25,Safari5.1-6.1*/
background:-webkit-radial-gradient(center,ellipse cover,red 0%, orange  100%);

/*Firefox3.6-16*/
background:-moz-radial-gradient(center,ellipse cover,red 0%, orange  100%);

/*Opera 11.6-12.1*/
background:-o-radial-gradient(center,ellipse cover,red 0%, orange  100%);

/*Standardsyntax*/
background:radial-gradient(ellipseatcenter,red 0%,orange  100%);
}

گرادیان های تکرار شونده

در گرادیان های دایره ای و بیضی شکل این امکان وجود ندارد که یک طرح را تکرار کنیم به خاطر اینکه در این نوع گرادیان ها به صورت طبیعی رنگها و ویژگی های تعریف شده در کل عنصر اعمال می شود. دو تابع دیگر وجود دارند که می توانیم با استفاده از آنها گرادیان های تکرار شونده ایجاد کنیم:
repeating-linear-gradient() و repeating-radial-gradient().
برای اینکه بتوانیم یک گرادیان خطی را تکرار کنیم از تابع repeating-linear-gradient() استفاده می کنیم. ورودی های مربوط به این تابع دقیقا مثل تابع linear-gradient() است.

repeating-linear-gradient([<angle> | to <side-or-corner>]
                                       {, <color stop> [stop position]} (2-∞) )

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

repeating-linear-gradient(-45deg, white 0, black 10%, white 20%);

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

دستور زبان مربوط به نوشتن گرادیان ها نسبت به سایر قسمت های css کمی پیچیده تر است. به همین دلیل ممکن است ترجیح دهید برای ساختن گرادیان ها از یک ابزار آنلاین استفاده کنید. یکی از این ابزارها را می توانید در آدرس colorzilla.com پیدا کنید. علاوه بر کدهای استاندارد که مورد پشتیبانی تمام مرورگرها هستند، در این آدرس می توانید کدهای مربوط به پیشوندها را نیز پیدا کنید تا حداکثر تطابق را با تمام مرورگرهای وب به دست آورید.
تابع تکرار شونده برای گرادیان دایره ای دارای دستوری مشابه تابع غیرتکرار شونده آن دارد. مثالی که در زیر مشاهده می کنید تابع تکرار شونده را نشان می دهد. همانطور که می بینید تصویر مثال زیر دارای لبه های تیز است.

repeating-radial-gradient(black, black 5%, white 5%, white 10%);

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

کارکردن با پس زمینه

ویژگی background-color 

با استفاده از ویژگی background-color می توانیم پس زمینه یک عنصر را مشخص کنیم. مقدار پیش فرض این ویژگی، مقدار شفاف (transparent) است.

background-color: transparent | <color>

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

background-color : #ccc;

ویژگی background-image 

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

background-image : none | url();

آدرسی که در قسمت url مشخص می کنیم می تواند نسبت به آدرس فایل css یک آدرس ثابت یا یک آدرس نسبی باشد.

/* آدرس نسبی */
background-image :url(../images/myimg.jpg);
/* آدرس ثابت */
background-image : url(http://www.yourdomain.com/images/myimage.jpg);

ویژگی background-repeat 

به صورت پیش فرض تصویر پس زمینه هم به صورت عمودی و هم به صورت افقی تکرار می شود. با استفاده از ویژگی background-repeat می توانیم این خصوصیت را تغییر دهیم و مشخص کنیم که تصویر فقط به صورت افقی (repeat-y)، یا فقط به صورت عمودی (repeat-x) تکرار شود یا اینکه اصلا تکرار نشود (no-repeat).

background-repeat :repeat | repeat-x | repeat-y | no-repeat

ویژگی background-attachment 

هنگامی که نمای قابل مشاهده در پنچره مرورگر را پیمایش می کنید در حالت پیش فرض، پس زمینه در ادامه صفحه نیز ادامه پیدا می کند. این رفتار با استفاده از ویژگی background-attachment مشخص می شود که مقدار پیش فرض آن نیز scroll است. اگر مقدار این ویژگی را fixed انتخاب کنیم محل قرار گیری پس زمینه نسبت به نمای قابل مشاهده ثابت باقی می ماند و در این حالت حتی اگر کاربر صفحه را به بالا یا پایین پیمایش کند باز هم پس زمینه ثابت باقی می ماند.

background-attachment :scroll | fixed | local

در css نسخه 3، یک مقدار سوم نیز برای این ویژگی وجود دارد: local. این ویژگی پس زمینه را نسبت به محتوای عنصر ثابت می کند نه نسبت به کل نمای قابل مشاهده. با این مقدار پس زمینه فقط زمانی که عنصر را پیمایش می کنیم نسبت به محتوا پیمایش می شود (این قابلیت با استفاده از ویژگی overflow به دست می آید). این ویژگی فقط در نسخه های خاصی از مرورگرها پشتیبانی می شود:
Chrome 4+, Firefox 25+, IE 9+, Safari 5+, Opera 10.5+ 

ویژگی background-position 

با استفاده از ویژگی background-position می توانیم یک تصویر را در پس زمینه یک عنصر قرار دهیم. این ویژگی دارای دو مقدار است، یکی برای موقعیت عمودی تصویر و یکی برای موقعیت افقی تصویر. هر دوی این مقادیر را می توانیم بر اساس واحد طول یا درصدی از اندازه عنصر تعیین کنیم؛ البته می توانیم از مقادیر منفی نیز استفاده کنیم.
برای این دو مقدار، مقادیر از پیش تعریف شده نیز وجود دارد: top, center, & bottom برای موقعیت عمودی (vertical placement) و left, center, & right برای موقعیت افقی (horizontal placement).

background-position :<length><length> | <percentage><percentage>|
			top/ center/ bottom + left/ center/ right

در حالت پیش فرض تصویر در قسمت بالا و سمت چپ منطقه padding عنصر والد قرار می گیرد. تمام مقادیری که به موقعیت تصویر داده می شود به نسبت همین نقاط اعمال خواهند شد. به عنوان مثال، ویژگی زیر تصویر را به اندازه 5 پیکسل به سمت پایین و به اندازه 10 پیکسل به سمت راست منتقل می کند: background-position :5px 10px; در نسخه 3 از css، 4 ویژگی وجود دارد، و به شما این امکان را می دهد که مشخص کنید تصویر نسبت به عنصری که درون آن قرار دارد در کدام سمت قرار گیرد. با استفاده از این روش، در مثال زیر مشخص می کنیم که تصویر به جای اینکه نسبت به نقطه بالا سمت چپ جایگزاری شود، نسبت به نقطه پایین سمت راست جایگزاری شود:

background-position : bottom 5px right 5px;

این شیوه فقط در نسخه های خاصی از مرورگرها پشتیبانی می شوند:
Chrome 25+, Firefox 13+, IE 9+, Safari 5.28+, Opera 10.5+

ویژگی background-size 

اندازه تصویر پس زمینه در حالت عادی برابر با اندازه اصلی تصویر مورد استفاده است. ما می توانیم با استفاده از ویژگی background-size اندازه تصویر را تغییر دهیم. با این کار می توانیم اندازه های تصویر را بر اساس پیکسل یا به نسبت درصدی از منطقه قرارگیری پس زمینه تغییر دهیم.

background-size (1-2) : auto | <length> | <percentage> | cover | contain

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

background-size : 150% 100%; 

اگر فقط یک مقدار را برای این ویژگی بنویسیم، عرض تصویر را تعیین می کند. در این صورت ارتفاع تصویر به صورت خودکار(auto) تعیین می شود و نسبت بین اجزای تصویر نیز حفظ خواهد شد (aspect ratio):

background-size : 150%;

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

این ویژگی در نسخه css3 اضافه شده است و بنابراین در نسخه های خاصی از مرورگرها پشتیبانی می شود:
Chrome4+, Firefox4+, IE9+, Safari9+, Opera10.5+. برای اینکه از این ویژگی در نسخه های Chrome1+, Safari3+, Firefox3.6+ بتوانید استفاده کنید از پیشوندهای –webkit, -moz استفاده کنید. 

ویژگی background-clip

محدوده رنگ آمیزی مربوط به یک تصویر پسزمینه یا رنگ پسزمینه را می توان با استفاده از ویژگی background-clip تعیین کرد.

background-clip :border-box | padding-box | content-box

در حالت عادی، پسزمینه تا لبه خارجی مرز (border-box) گسترش دارد و زیر هر مرز قابل مشاهده قرار می گیرد. وقتی که مقدار padding-box انتخاب شده باشد پسزمینه در داخل محدوده padding قرار می گیرد. مقدار سوم، content-box است که در این حالت پسزمینه در محدوده محتوا قرار می گیرد. در مثال زیر زمینه پسزمینه تا لبه خارجی محتوا گسترش می یابد:

background-clip :content-box; 

ویژگی background-clipدر نسخه های خاصی از مرورگرها پشتیبانی می شود:
Chrome1+, Firefox4+, IE9+, Safari3+

ویژگی background-origin 

ویژگی background-origin نقطه آغازین تصویر پسزمینه یا رنگ پسزمینه را مشخص می کند.

background-origin :padding-box | border-box | content-box

به صورت عادی تصویر پسزمینه از نقطه بالا سمت چپ منطقه padding (padding-box) آغاز می شود. اما می توان این نقطه را تغییر داد و به نقطه بالا سمت چپ ناحیه مرز (border-box) منتقل کرد یا می توان این نقطه را به نقطه بالا سمت چپ ناحیه محتوا (content-box) منتقل کرد.
ویژگی background-originمعمولا به همراه ویژگی background-clip استفاده می شود. به مثال زیر توجه کنید:

background-origin : content-box;
background-clip :content-box;

ویژگی background-origin در نسخه css3 ارائه شده است که در نسخه های خاصی از مرورگرهای وب پشتیبانی می شود:
Chrome4+, Firefox4+, IE9+, Opera10.5+, Safari5+. با استفاده از پیشوندهای –moz و –webkitتمام نسخه های فایرفاکس، و کرم و همچنین Fafari4+ از این ویژگی ها پشتیبانی می کنند (مثال زیر). توجه داشته باشید که فایرفاکس تا قبل از نسخه 4 خود از مقادیر padding و border استفاده می کند. و قبل از آن نیز هیچ مقداری برای مشخص کردن content box وجود ندارد.

/* Chrome 1-3, Safari 4 */
-webkit-background-origin : border-box;
/* Firefox 1-3.6 */
-moz-background-origin : border;
background-origin : border-box;

ویژگی background 

ویژگی background یک میانبر برای تنظیم کردن تمام ویژگی های مربوط به پسزمینه در یک اعلان به صورت یکجا است.

background : <background-color> | <background-image> |
<background-repeat> | <background-attachment> |
	<background-position> | <background-size> |
	<background-clip> | <background-origin>

ترتیب ذکر شدن مقادیر مهم نیست به خاطر اینکه هیچ گوه ابهامی در ذکر کردن مقادیر وجود ندارد. هر کدام از مقادیر را می توان کنار گذاشت؛ اما توجه داشته باشید که اگر یک مقدار را کنار بگذاریم، مقدار پیش فرض آن در نظر گرفته می شود.

background :url(bg.png) no-repeat fixed right bottom;

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

background-image :url(bg.png);
background-repeat : no-repeat;
background-attachment :fixed;
background-position :right bottom;

چند پسزمینه (پسزمینه چندگانه)

ما می توانیم بیشتر از یک پسزمینه را به یک عنصر نسبت دهیم. برای این کار برای هر ویژگی می توانیم بیشتر از یک مقدار قرار دهیم و بین مقادیر از علامت ویرگول (,) استفاده کنیم. اولین پسزمینه که در فهرست قرار گرفته است در قسمت بالا ظاهر می شود، و هر پسزمینه دیگر در قسمت شفاف پسزمینه که در قسمت بالا قرار دارد قابل مشاهده است.

background-image :url(bg1.png), url(bg2.png);
background-repeat :no-repeat , repeat-y;
background-attachment :fixed, fixed;
background-position :right bottom, top left;

برای استفاده از چند پسزمینه نیز می توان از روش میانبر استفاده کرد. برای این کار به شکل زیر عمل می کنیم.

background :url(bg1.png) no-repeat fixed right bottom,
	url(bg2.png) repeat-y fixed top left;

پشتیبانی از چند پسزمینه در نسخه css3 اضافه شده است و در نسخه های خاصی از مرورگرها جواب می دهد:
Chrome4+, Firefox3.6+, IE9+, Safari3.1+, Opera10.5+. در مرورگرهای وب که از این ویژگی پشتیبانی نمی کنند همان تصویر اولیه تکرار می شود.

background-image :bg.png; /* تصویری که جایگزین می شود */
background-image :bg1.png, bg2.png;

کارکردن با فونت ها

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

ویژگی font-family

ویژگی font-family نوع فونت مورد نظر را مشخص می کند. مقدار مربوط به این ویژگی را می توان با نام یک فونت خاص مثل times یا verdana تنظیم کرد؛ یا می توان یک نام کلی مربوط به یک خانواده فونت را استفاده کرد، مثل sans-serifserif, یا monospace.
در css دو نوع از خانواده های فونت وجود دارند:

• خانواده عمومی (generic family): که یک گروه از فونت هایی هستند که ظاهری مشابه یکدیگر دارند (مثل Sefir یا Monospace)
• خانواده فونت (font family): که یک خانواده فونت خاص است مثل Arial

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

font-family :inherit | <family-names> | <generic-families>

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

font-family : “Times New Roman”, times, serif;

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

ویژگی font-size

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

font-size :inherit | <length> | <percentage> | 
smaller | larger | xx-small | x-small |
small | medium | large | x-large | xx-large

مقادیر larger و smaller به اندازه فونت عنصر والد بستگی دارند؛ اما سایر مقادیر از پیش تعریف شده مقادیر مطلق و ثابت هستند. اندازه اولیه medium است، که برای متن عادی برابر با 1em(16 pixel) است.
به این مساله هم توجه داشته باشیدکه در اچ تی ام ال، عناصری مثل h1، h2 و... وجود دارند که می توانیم از آنها برای مشخص کردن سرتیترها استفاده کنیم و لازم نیست اندازه فونت ها را تغییر دهیم. بنابراین بهتر است برای عناوین و سرتیتیر ها از این نوع عناصر استفاده کنیم و برای متن های عادی از عنصر پاراگراف (p) استفاده کنیم. این روش باعث می شود ساختار صفحات اچ تی ام ال ما منظم تر و مرتب تر باشند. 

ویژگی font-style

با استفاده از ویژگی font-style می توانیم فونت را مورب کنیم. این ویژگی دو مقدار italic و oblique را می پذیرد. البته در بیشتر فونت ها هر دوی این ویژگی ها منجر به نتیجه مشابه می شود.

font-style : inherit | normal | italic | oblique

ویژگی font-variant

ویژگی font-variant مشخص می کند که آیا حروف بزرگ در یک متن با اندازه کوچک تر (نسبت به حالت عادی) نوشته شوند یا خیر(small caps). در یک متن که به صورت small-caps باشد تمام حروف کوچک به حروف بزرگ تبدیل می شوند؛ اما با این تفاوت که این حروف بزرگ نسبت به حروف بزرگ معمولی با اندازه کوچک تری نوشته می شوند.

font-variant :inherit | normal | small-caps

ویژگی font-weight 

این ویژگی مقدار ضخامت فونت را تعیین می کند. مقادیر bolder و lighter، ضخامت فونت را نسبت به محتوای عنصر والد تعیین می کنند؛ و مقادیر عددی، مقادیر مطلق و ثابت را تعیین می کنند. مقدار bold برابر با 700 است و مقدار normal برابر با 400. 

font-weight : inherit | normal | bold | bolder | lighter | 100 | 200 | … | 900

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

ویژگی font 

یک ویژگی راحت و کوتاه شده با نام font وجود دارد که تمام ویژگی های مربوط به یک فونت را در یک اعلان مشخص می کند:

font :inherit | <font-style> + <font-variant> + <font-weight> +
<font-size>/ <line-height>+ <font-family>

تازمانی که ترتیب ذکر شده در بالا حفظ شود، شما می توانید هرکدام از ویژگی هایی که تمایل داشتید را کناربگذارید؛ البته به استثنای font-size و font-family که اجباری هستند. اگر یک ویژگی راکنار بگذارید، مقدار پیش فرض مربوط به آن در نظر گرفته می شود که آن را از عنصر والدش به ارث می برد. با استفاده از مثال زیر، 4ویژگی را به عنصر پاراگراف نسبت می دهیم:

P { font : italic 50% 125% Verdana; }

با استفاده از مثال بالا مقادیر مربوط به font-style, font-size, line-height, font-family را در یک اعلان مشخص کرده ایم. از آنجا که مقادیر مربوط به font-variant و font-weight مشخص نشده اند اثر جانبی نوشتن چنین اعلانی در این است که مقدار این دو ویژگی به حالت نرمال تنظیم می شود. 

فونت های شخصی

وقتی شما فونتی را برای وب سایت خود انتخاب می کنید، این فونت ها فقط زمانی برای کاربر قابل مشاهده هستند که کاربر آنها را بر روی کامپیوتر خود داشته باشد. اگر به یک فونت غیراستاندارد نیاز دارید می توانید با استفاده از قانون @font-faceفونت مورد نظر خود را از یک مکان (بر روی وب) بارگذاری کنید: @font-face{ font-family :MyFont; src :url(myfont.ttf); } 

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

p { font-family : “MyFont”, arial, sans-serif; }

استفاده از دستور @font-face در نسخه های خاصی از مرورگرهای وب پشتیبانی می شوند، بنابراین دقت داشته باشید که استفاده از این دستور ممکن است در برخی از مرورگرها برای شما مشکل ایجاد کند. اگر مرورگر کاربر وب سایت شما از این دستور پشتیبانی نکند، مرورگر به سراغ فونت های بعدی موجود در لیست خواهد رفت – پس فونت های بعدی را با دقت انتخاب کنید تا در ظاهر وب سایت شما اشکالی ایجاد نشود. نسخه های مختلف مرورگر که از این دستور پشتیبانی می کنند:

 Chrome5+, Firefox3.5+, IE9+, Safari3.1+, Opera10+.

فاصله گذاری

ویژگی line-height 

از ویژگی line-height برای مشخص کردن فاصله بین خطوط استفاده می کنیم. مقدار پیش فرض برای این ویژگی normal است که معمولا به اندازه 120% اندازه فونت در نظرگرفته می شود. همچنین می توانیم فاصله بین خطوط را بر اساس واحد اندازه گیری طول، درصدی از اندازه فونت فعلی، یا یک عدد بدون بعد که در اندازه فونت فعلی ضرب می شود مشخص کنیم.

 

line-height :inherit | normal | <length> | <percentage> | <number>

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

/* در قطعه کد زیر، فاصله بین خطوط به اندازه 1.5 برابر اندازه فونت است */
line-height :1.5;

ویژگی line-height بر روی عناصر جایگزین شده خطی (inline replaced elements) مانند <img> تاثیری ندارد. هنگامی که در مورد عناصر جایگزین نشده خطی استفاده می شوند، فاصله بین خطوط همانطور که مورد انتظار است تنظیم می شود. در مورد عناصری که به صورت بلوک هستند ویژگی line-height بر اساس کمترین فاصله بین خطوط داخل باکس تنظیم می شود. 

ویژگی های word-spacing و letter-spacing 

با استفاده از ویژگی word-spacing فاصله بین کلمات را تنظیم می کنیم، و با استفاده از letter-spacing فاصله بین کاراکترها (حروف) را مشخص می کنیم. برای هر دوی این ویژگی ها می توان از مقادیر منفی استفاده کرد.

word-spacing :inherit | normal | <length> letter-spacing : inherit | normal | <length>

در مثال زیر مشخص می کنیم که بین حروف به اندازه 3 پیکسل فاصله باشد و بین کلمات به اندازه 5 پیکسل فاصله وجود داشته باشد. این قانون برای متن داخل پاراگراف ها نوشته شده است:

p{ 
letter-spacing : 3px;
word-spacing : 5px;
}

ویژگی white-space 

ویژگی white-space مشخص می کند که کاراکترهای فاصله در داخل یک عنصر بلوکی به چه صورت مورد پردازش قرار بگیرند. 

 

white-space (block) : inherit | normal | nowrap | pre | pre-wrap | pre-line

در حالت معمول چند کاراکتر فضای خالی در داخل یک فایل اچ تی ام ال به یک کاراکتر کاهش پیدا می کنند، و اگر لازم باشد عرض بلوکی که متن در آن قرار دارد را اشغال می کند.

/* Wrap text and collapse newline, spaces and tabs */
p { white-space : normal; }

با تنظیم کردن مقدار white-space به nowrap باعث می شویم متن به هیچ تگی غیر از تگ <br> واکنش نشان ندهد. البته مقدار pre(preformatted) هم باعث می شود که متن بسته بندی (wrap) نشود، اما این ویژگی از تمام کاراکترهای فضای خالی نیز جلوگیری می کند. این مقدار مثل عنصر <pre> در اچ تی ام ال عمل می کند.
هر دو ویژگی pre-wrap و pre-line باعث می شوند که متن به صورت عادی بسته بندی شود، با استفاده از pre-wrap ترتیب فضاهای خالی حفظ می شود و با استفاده از pre-line این فضاهای خالی کاهش پیدا می کنند (یکی می شوند). تفاوت بین pre-line و normal در این است که مقدار pre-lineکاراکترهای خط جدید را حفظ می کند. توجه داشته باشید که پشتیبانی از دو مقدار اخیر از نسخه 8 به بعد IE اضافه شده است.

کارکردن با متن

ویژگی رنگ (color)
ویژگی رنگ برای این استفاده می شود که رنگ متن را با یکی از سه نماد رنگ مشخص کنیم. همانطور که قبلا نیز گفته شد رنگها را می توانیم با سه روش مشخص کنیم:

• با استفاده از نام؛ مثلا white
• با استفاده از مقادیر مبنای 16
• بر اساس مقدار rgb

به صورت پیش فرض، مقدار آن به صورت inherit تنظیم می شود. یعنی اینکه مقدار آن بر اساس مقدار عنصر والد تنظیم می شود.

   

color : inherit |<color>

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

p { color : #00f; }

ویژگی text-transform
ویژگی text-transform نحوه نمایش متن (ازنظر بزرگی و کوچکی حروف) را کنترل می کند (که البته این ویژگی مربوط به حروف لاتین است). مقادیر ممکن به شرح زیر هستند، و مقدار none به عنوان مقدار اولیه تنظیم شده است:

 

text-transform :inherit | none | uppercase | lowercase | capitalize

همانطور که در بالا می بینید، این ویژگی باعث می شود متن به صورت تمام حروف بزرگ (uppercase)، تمام حروف کوچک (lowercase) نمایش داده می شود. و مقدار capitalize باعث می شود حرف اول هر کلمه به صورت بزرگ نوشته شود. این ویژگی به صورت پیش فرض ویژگی عنصر والد خود را به ارث می برد، شما می توانید از ویژگی none استفاده کنید تا مقدار به ارث گرفته شده text-transform را نادیده بگیرید.

text-transform :none; /* باعث می شود مقدار به ارث گرفته شده حذف شود */

ویژگی text-decoration
با استفاده از ویژگی text-decoration می توان یک یا بیشتر از یک افکت تصویری را به متن اضافه کرد.

 

text-decoration :none | underline + overline + line-through + blink

برای اینکه بیشتر از یک افکت تصویری را به متن اضافه کنید بعد از مقدار اول یک فاصله بگذارید و مقدار بعدی را بنویسید. در مثال پایین (که یک انتخاب کننده از نوع کلاس را تعریف کرده ایم) در بالا و پایین متن مربوط به کلاس، یک خط قرار می گیرد:

.highlight { text-decoration : underline overline; }

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

a{
text-decoration: none; 
}

ویژگی text-indent (تورفتگی)
با استفاده از ویژگی text-indent می توان خط اول مربوط به یک بلوک متن را دارای تورفتگی کرد. می توان برای این ویژگی یک واحد اندازه گیری مشخص کرد یا اینکه مقدار آن را بر اساس درصدی از عرض عنصر والد تعریف کرد. با استفاده از یک مقدار منفی، میزان تورفتگی را برعکس می کنیم. یعنی خط اول کمی جلوتر از کل بلوک متن باشد.

 

text-indent(block) : inherit | <length> | <percentage>

در مثال زیر، خط اول هر پاراگراف به اندازه یک em دارای تورفتگی خواهد بود:

p { text-indent :1em; }

ویژگی text-align
محتوای یک بلوک متن را می توان با استفاده از ویژگی text-align مرتب سازی کرد(به صورت افقی). می توان این ویژگی را جایگزین صفت منسوخ شده align در اچ تی ام ال کرد.

 

text-align (block) : inherit | left | center | right | justify

متن و سایر عناصر درونی مربوط به آن را می توان چپ چین، وسط چین، یا راست چین کرد. و ویژگی justify متن را از سمت راست و چپ می کشد تا خطوط به صورت برابر با یکدیگر قرار گیرند.

p { text-align : justify; }

ویژگی text-align مقدار خود را از عنصر والد خود به ارث می برد، بنابراین در عناصر فرزند باید آن را تغییر داد تا به مقدار اولیه خود که چپ چین (left) است برگردد. 

ویژگی direction
با استفاده از ویژگی direction می توانیم جهت متن را تغییر دهیم:

 

direction (block) :inherit | ltr | rtl

مقدار پیش فرض این ویژگی ltr است یعنی چپ به راست (برای زبان های لاتین). اما برای زبان فارسی یا زبانهای مشابه زبان فارسی باید این مقدار با rtl یا راست به چپ تنظیم شود. این مقدار مشخص می کند که متن باید از راست به چپ خوانده شود.

<p style="direction: rtl;">
متن داخل این پاراگراف به صورت راست به چپ نوشته می شود. 
</p>

این ویژگی مقدار خود را از عنصر والد خود به ارث می برد، بنابراین می توانید این مقدار را در عنصر body تنظیم کنید و مطمئن باشید که این ویژگی در تمام سند اعمال خواهد شد. 

ویژگی text-shadow
با استفاده از ویژگی text-shadow می توان افکت سایه را به متن اعمال کرد.

   

text-shadow :inherit | none | <offset-x><offset-y> | [<blur-radius>] [<color>]

سایه را می توان با تعریف کردن دو مقدار انحراف (offset) تعریف کرد؛ پس از آن دو مقدار انتخابی وجود دارند که یکی مربوط به شعاع محو شدن (blur radius) و دیگری مربوط به رنگ (color) سایه است. مقادیر انحراف x و y به عنوان مقادیر طولی مشخص می شوند که وابسته به متن هستند. مقادیر مثبت سایه را به سمت راست و پایین حرکت می دهند؛ مقادیر منفی سایه را به سمت چپ و بالا حرکت می دهند.
با تنظیم کردن مقدار شعاع محو شدن می توان اثر محو شدن را نیز اضافه کرد. این کار باعث می شود سایه کشیده شده و در کناره ها محو شود. آخرین مقدار انتخابی، رنگ سایه است. اگر هیچ رنگی مشخص نشود بیشتر مرورگرها رنگ سایه را مشابه رنگ متن انتخاب می کنند.

در مثال زیر قانون مربوط به css را طوری نوشته ایم که متن داخل عنصر h1 دارای یک سایه کوچک محو شده خاکستری در قسمت بالا سمت راست باشد:

h1{ text-shadow : 1px -1px 1px gray}

ویژگی text-shadow یک ویژگی مربوط به نسخه 3 css است که توسط بیشتر مرورگر های وب پشتیبانی می شود:
Chrome 2+, Firefox 3.5+, IE10+, Safari 1.2+& Opera 9.5+ 

ویژگی box-shadow
علاوه بر این که می توان برای متن سایه ایجاد کرد، با استفاده از ویژگی box-shadow می توان به یک عنصر بلاک نیز سایه داد.

box-shadow(block) : inherit | none | <inset><offset-x><offset-y> [<blur-radius>] [<spread-radius>] [<color>]

مقادیر مربوط به ویژگی box-shadow همانند مقادیر مربوط به ویژگی text-shadow است، و فقط دو استثنا در این زمینه وجود دارد. مقدار spread-radius که می توان با تنظیم کردن این مقدار سایه را کوچک یا بزرگ کرد. این مقدار به صورت انتخابی است و اگر مشخص نشود مقدار پیش فرض آن 0 است و در این صورت سایه با همان اندازه عنصر ساخته می شود. در مثال زیر یک سایه محو خاکستری در قسمت پایین سمت راست بلوک قرار داده می شود.

.drop-shadow { box-shadow : inset 3px 3px 3px 6px #ccc; }

ویژگی box-shadow یک ویژگی مربوط به نسخه 3 css است که در این نسخه های مرورگرهای وب پشتیبانی می شود:
Chrome 10+, Firefox4+, IE9+, Safari5.1+, & Opera10.5+.
شما می توانید با استفاده از پیشوندهای مخصوص مرورگرهای مختلف (-webkit, -moz) میزان استفاده از این ویژگی را افزایش دهید و امیدوار باشید که ویژگی مورد نظر شما در تعداد مرورگرهای بیشتری نمایش داده می شود:

.drop-shadow{
/* Chrome 1-5, Safari 2-5.1+ */
-webkit-box-shadow: 3px 3px 5px 6px #ccc;

/* Firefox 3.5+ */
-moz-box-shadow: 3px 3px 5px 6px #ccc;

Box-shadow: 3px 3px 5px 6px #ccc;
}

پیشرفت قدم به قدم

هنگامی که تصمیم می گیرد یکی از ویژگی های جدید css را در وب سایت خود استفاده کنید، باید به این فکر کنید که ظاهر وب سایت شما بدون استفاده از آن ویژگی به چه شکلی خواهد داشت؟ اگر آن ویژگی باعث می شود سایت شما بهتر شود و پیشرفت کند – مثل استفاده از ویژگی border-radius- ممکن است بخواهید از آن ویژگی استفاده کنید، مگر اینکه آن ویژگی فقط توسط تعداد اندکی از کاربران وب سایت شما قابل مشاهده و استفاده باشد. خودتان باید بررسی کنید که آیا حتما لازم است از آن ویژگی استفاده کنید یا خیر؟ اگر به این نتیجه رسیدید که استفاده نکردن از این ویژگی به ظاهر سایت شما یا خدماتی که در آن سایت ارائه می کنید لطمه می زند می توانید با احتیاط از آن ویژگی استفاده کنید. 

 
زمان به نفع شما به عنوان یک طراح وب عمل می کند، و با کنار گذاشتن مرورگر های قدیمی توسط کاربران در طول زمان، تعداد بیشتری از کاربران وب سایت شما می توانند آن ویژگی را مشاهده کنند؛ که این کار باعث می شود از دیدن وب سایت شما بیشتر لذت ببرند.

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

پیشوند های مربوط به مرورگرهای مختلف

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

مهمترین این پیشوندها عبارتند از: -moz مربوط به مرورگر موزیلا، -msمربوط به مروگر IE، -o مربوط به مرورگر اپرا، و –webkit مربوط به مرورگرهای chrome, safari, and iOS. نسخه های اخیر Opera به موازات پیشوند –o پیشوند –webkit را نیز پیاده سازی کرده اند. به عنوان مثال برای اینکه مطمئن شویم ویژگی border-radius در تعداد بیشتری از مرورگرهای کاربران نمایش داده می شود، می توانیم از پیشوندهای زیر استفاده کنیم. توجه داشته باشید که نسخه بدون پیشوند را باید حتما در انتهای قانون بیاورید:

/* Safari 3-4, iOS 1-3.2, Android 1.6-2.0 */
-webkit-border-radius: 3px;
/* Firefox 1-3.6 */
-moz-border-radius: 3px;
/* Opera 10.5+, IE9+, Safari 5+, Chrome1+, Firefox4+, iOS4+, Android2.1+ */
border-radius: 3px;

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

حالت Quirks

هنگامی که اچ تی ام ال و css توسط w3c یا کنسرسیوم وب جهان گستر، استانداردسازی شد، مرورگرهای وب نتوانستند فقط با این استانداردهای جدید خود را تطبیق دهند، این مساله به دلیل این است که اگر این مرورگرها فقط با استانداردهای جدید خود را تطبیق دهند(و استانداردهای قدیمی را به کلی نادیده بگیرند)، محتوای بسیاری از وب سایتهای قدیمی، دیگر قابل مشاهده توسط کاربران نخواهد بود. به جای این که مرورگرها فقط با استانداردهای جدید خود را تطبیق دهند دو حالت پردازش متفاوت را بوجود آوردند: یک حالت برای وب سایتهایی که با استانداردهای جدید سازگار هستند و یک حالت برای سایت های قدیمی (حالت quirks).

در حالت استاندارد کامل، مرورگر سعی می کند محتوای صفحه را به بهترین شکل بر اساس اچ تی ام ال و css پردازش کند. یک مقدار نوع سند (doctype) معتبر در ابتدای صفحه، مثل مقدار HTML5 که در مثال پایین مشاهده می کنید، تضمین می کند که محتوای سند در حالت استاندارد کامل پردازش شود:

<!DOCTYPE html>
<html> ….. </html>

این نوع سند تمام حالت های استاندارد را در مرورگر راه اندازی می کند و تا نسخه IE6 به عقب بر می گردد که مطمئن شود تا جایی که امکان دارد استانداردها در نظر گرفته شده باشند.

کلیدواژه های عمومی

علاوه بر کلیدواژه inherit، دو کلیدواژه عمومی دیگر نیز وجود دارند که ممکن است در هنگام کار کردن با css با آن مواجه شویم: initial و unset. هر دوی این کلیدواژه ها در نسخه 3 css ارائه شده اند و می توان از آنها برای تمام ویژگی ها استفاده کرد.

کلیدواژه initial ، مقدار اولیه مربوط به یک ویژگی را که توسط css تعریف شده است به آن نسبت می دهد. این کلیدواژه در نسخه هایChrome 1+، Firefox 19+، Safari 1.2+، و Opera 15+پشتیبانی می شود؛ اما فعلا در هیچ کدام از نسخه های IE پشتیبانی نمی شود. به خاطر اینکه IE از این کلیدواژه استفاده نمی کند، این مقدار خیلی مفید نیست. توصیه می شود که مقدار اولیه یک ویژگی را صریحا مشخص کنید تا خیالتان از مقدار اولیه که به صورت پیش فرض تعریف شده است راحت شود.

سومین کلیدواژه عمومی، کلیدواژه unset است. این کلیدواژه ترکیبی از کلیدواژه های inherit و initial است. با استفاده از این مقدار، اگر یک مقدار به ارث برده شده وجود داشته باشد آن مقدار ریست می شود. در غیر این صورت مقدار ویژگی به مقدار اولیه تنظیم می شود. در حال حاضر این کلیدواژه فقط توسط Firefox 27+ پشتیبانی می شود. پس بهتر است ازاین کلیدواژه فعلا استفاده نکنیم.

ویژگی ها در css

سعی می کنیم از این قسمت به بعد در مورد ویژگی های (property) زیادی که در کدنویسی css وجود دارد صحبت کنیم. برای نشان دادن یک ویژگی و مقادیر مربوط به آن از دستور نشانه گذاری رسمی استفاده می کنیم که در پایین یک نمونه از آن را مشاهده می کنید: 

text-shadow : inherit | none | <offset-x><offset-y> [<blur-radius>] [<color>]

نمونه بالا به این معنی است که ویژگی text-shadow می تواند یکی از سه مقدار مشخص شده در بالا را به خود اختصاص دهد. مقدار پیش فرض به عنوان اولین مقدار نوشته شده است؛ در این حالت مقدار پیش فرض inherit است. به خاطر اینکه کلیدواژه inherit را می توانیم برای هر ویژگی اختصاص دهیم، این ویژگی را ذکر نمی کنیم مگر اینکه به عنوان مقدار پیش فرض باشد. مقدار دوم، none، هم یک کلیدواژه است. این مقدار، مقدار اولیه این ویژگی است که می توان از آن برای غیر فعال کردن اثر ویژگی به ارث بردن استفاده کرد.
سومین گزینه در این نشانه گذاری، شامل 4 مقدار است، که دوتای آنها لازم و دوتای دیگر اختیاری هستند.
مقادیر اختیاری با علامت [] نشان داده می شوند.
نشانه های <> مشخص می کنند که مقادیر داده شده کلیدواژه نیستند؛ آنها انواع دیگر مقادیر هستند.
در مثال بالا این مقادیر شامل سه مقدار طول و یک مقدار رنگ هستند. بر اساس مثال توضیح داده شده در بالا، در قسمت پایین یک مثال معتبر از ویژگی ذکر شده را مشاهده می کنید:

text-shadow: 1px 1px 1px red;