جدول دوره‌ها

آموزش پیشرفته CSS

• کتاب خارجی CSS
• مقدمه CSS
• زبان اساسی CSS
• زبان پیشرفته CSS
• انتخاب‌گرهای مشتق CSS
• انتخاب‌گرهای id CSS
• انتخاب‌گرهای کلاسی CSS
• ایجاد CSS
• پس‌زمینه CSS
• تنظیمات متن CSS
• تنظیمات فونت CSS
• لیست‌های CSS

مدل فریم CSS

• 概述 مدل فریم CSS
• حاشیه داخلی CSS
• حاشیه CSS
• حاشیه خارجی CSS
• ادغام حاشیه خارجی CSS

تعیین مکان CSS

• 概述 قرارگیری CSS
• قرارگیری نسبی CSS
• قرارگیری مطلق CSS
• حرکت شناور CSS

انتخاب‌گر CSS

• انتخاب‌گرهای عناصر CSS
• گروه‌بندی انتخاب‌گرهای CSS
• تفصیلات انتخاب‌گرهای کلاسی CSS
• تفصیلات انتخاب‌گرهای id CSS
• تفصیلات انتخاب‌گرهای ویژگی CSS
• انتخاب‌گرهای نسل CSS
• انتخاب‌گرهای فرزند CSS
• انتخاب‌گرهای خواهر CSS

درس‌های انتخابی

پیشنهاد دوره‌ها:

• جعبه ابزار CodeW3C.com

ویژگی‌های فونت CSS تعریف می‌کند سریه‌های فونت، اندازه، اضافه کردن فونت (مثلاً تیره‌تر) و سبک (مثلاً خمیده) و تغییرات (مثلاً کوچک‌تر از حروف بزرگ).

سری‌های CSS

در CSS، دو نوع مختلف از نام‌های مجموعه فونت‌ها وجود دارد:

• مجموعه فونت‌های عمومی - مجموعه‌های فونت‌های سیستم‌های مشابه (مثلاً "Serif" یا "Monospace")
• مجموعه فونت‌های خاص - مجموعه‌های فونت‌های خاص (مثلاً "Times" یا "Courier")

در CSS، دو نوع مختلف از نام‌های مجموعه فونت‌ها وجود دارد:

• فونت‌های Serif
• فونت‌های Sans-serif
• فونت‌های Monospace
• فونت‌های Cursive
• فونت‌های Fantasy

اگر می‌خواهید اطلاعات بیشتری در مورد مجموعه فونت‌ها بدست آورید، لطفاً مطالعه کنید: سری‌های CSS.

مجموعه عمومی فونت‌ها

استفاده کنید ویژگی font-family مجموعه فونت‌های متن را تعریف کنید.

استفاده از مجموعه عمومی فونت‌ها

اگر می‌خواهید مستند از یک فونت sans-serif استفاده کند، اما به نوع فونت اهمیتی نمی‌دهید، این یک بیان مناسب است:

body {font-family: sans-serif;}

خودتان امتحان کنید

کاربرagent به فونتی از مجموعه فونت‌های sans-serif (مثلاً Helvetica) انتخاب می‌کند و آن را به عنصر body اعمال می‌کند. به دلیل ارث‌برداری، این انتخاب فونت به تمام عناصر داخل عنصر body نیز اعمال می‌شود، مگر اینکه یک انتخاب‌کننده خاص‌تر آن را پوشش دهد.

مجموعه عمومی فونت‌ها

در علاوه بر استفاده از مجموعه عمومی فونت‌ها، شما می‌توانید از ویژگی font-family برای تنظیم فونت‌های خاص‌تر استفاده کنید.

در این مثال، تمام عناصر h1 با فونت Georgia تنظیم شده‌اند:

h1 {font-family: Georgia;}

خودتان امتحان کنید

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

ما می‌توانیم این مشکل را با ترکیب نام فونت خاص و مجموعه عمومی فونت‌ها حل کنیم:

h1 {font-family: Georgia, serif;}

خودتان امتحان کنید

اگر خواننده فونت Georgia را نصب نکرده باشد، اما فونت Times (یک فونت از خانواده فونت‌های serif) را نصب کرده باشد، کاربر ممکن است فونت Times را برای عنصر h1 استفاده کند. اگرچه Times با Georgia کاملاً مطابقت ندارد، اما حداقل به اندازه کافی شبیه است.

بنابراین، ما پیشنهاد می‌دهیم که در همه قوانین font-family یک مجموعه عمومی از فونت‌ها را ارائه دهید. این کار یک راه بازگشتی را فراهم می‌کند، به طوری که اگر کاربر نتواند فونتی که با این قوانین مطابقت دارد را ارائه دهد، می‌تواند یک فونت نامزد را انتخاب کند.

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

p {font-family: Times, TimesNR, 'New Century Schoolbook',}}
     Georgia, 'New York', serif;}

خودتان امتحان کنید

بر اساس این لیست، کاربرگرا به ترتیب مشخص شده این فونت‌ها را جستجو می‌کند. اگر تمام فونت‌های لیست در دسترس نباشند، به طور ساده یک فونت serif قابل استفاده انتخاب می‌شود.

استفاده از قیدها

شاید توجه کرده باشید که در مثال‌های بالا از قیدهای مجزا استفاده شده است. تنها زمانی که نام فونت شامل فضاهای خالی (مثلاً New York) باشد یا اگر نام فونت شامل نمادهایی مانند # یا $ باشد، باید در تعیین font-family از قیدها استفاده شود.

قیدهای مجزا یا دوگانه هم قابل پذیرش هستند. اما اگر یک ویژگی font-family در ویژگی style HTML قرار گیرد، باید از قیدهای خود این ویژگی استفاده شود:

<p style="font-family: Times, TimesNR, 'New Century Schoolbook', Georgia,
 'New York', serif;">...</p>

خودتان امتحان کنید

سبک فونت

خصوصیت font-styleمعمولاً برای تعیین متون italic استفاده می‌شود.

این ویژگی سه مقادیر دارد:

• normal - نمایش متون عادی
• italic - نمایش متون italic شده
• oblique - نمایش متون کج شده

مثال

p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}

خودتان امتحان کنید

تفاوت italic و oblique

font-style بسیار ساده است: برای انتخاب بین متون normal، italic و oblique استفاده می‌شود. تنها نکته پیچیده این است که تفاوت بین متون italic و oblique را مشخص کنیم.

italic یک سبک فونت ساده است که تغییرات کوچکی در ساختار هر حرف ایجاد می‌کند تا ظاهر تغییر کرده را نشان دهد. برخلاف این، متون oblique نسخه‌ای کج شده از متون عمودی عادی است.

در شرایط معمولی، متون italic و oblique در مرورگرهای وب به نظر می‌رسند که کاملاً مشابه هستند.

تغییرات فونت

خصوصیت font-variantمی‌توان حروف بزرگ کوچک را تنظیم کرد.

حروف بزرگ کوچک حروف بزرگی نیستند که معمولی هستند، و همچنین حروف کوچک نیستند، این حروف از حروف بزرگ با اندازه‌های مختلف استفاده می‌کنند.

مثال

p {font-variant:small-caps;}

خودتان امتحان کنید

چگالی فونت

ویژگی font-weightچگالی متن را تنظیم کنید.

با استفاده از کلمه‌ی کلیدی bold می‌توان متن را به صورت چگال تنظیم کرد.

کلمات کلیدی 100 ~ 900 برای指定 9 مرحله‌ی فونت چگالی تعیین شده‌اند. اگر یک فونت این سطح‌های فونت چگالی را داشته باشد، این اعداد مستقیماً به سطح‌های پیش‌تعیین شده‌ی آن‌ها تطبیق داده می‌شوند، 100 به معنای نازک‌ترین تغییر فونت است و 900 به معنای چگال‌ترین تغییر فونت است. عدد 400 برابر با normal و 700 برابر با bold است.

اگر اندازه فونت یک عنصر به صورت bolder تنظیم شود، مرورگر اندازه فونت را به اندازه‌ای تنظیم می‌کند که از مقدار ارث‌برداری شده‌ی آن بیشتر باشد. برعکس، استفاده از کلمه‌ی کلیدی lighter باعث می‌شود که مرورگر اندازه فونت را کاهش دهد نه افزایش دهد.

مثال

p.normal {font-weight:normal;}
p.thick {font-weight:bold;}
p.thicker {font-weight:900;}

خودتان امتحان کنید

اندازه فونت

ویژگی font-sizeاندازه متن را تنظیم کنید.

توانایی مدیریت اندازه متن در حوزه طراحی وب بسیار مهم است. اما، شما نباید اندازه متن را به گونه‌ای تنظیم کنید که پاراگراف به نظر برسد مانند عنوان یا عنوان به نظر برسد مانند پاراگراف.

همیشه از عناوین HTML صحیح استفاده کنید، مانند استفاده از <h1> - <h6> برای برچسب‌گذاری عنوان، استفاده از <p> برای برچسب‌گذاری پاراگراف.

مقدار font-size می‌تواند مطلق یا نسبی باشد.

مطلق:

• متن را به اندازه مشخصی تنظیم کنید
• اجازه ندهید کاربران در تمام مرورگرها اندازه متن را تغییر دهند (این برای دسترسی‌پذیری مضر است)
• اندازه مطلق در تعیین اندازه فیزیکی خروجی بسیار مفید است

اندازه نسبی:

• اندازه را در مقایسه با عناصر اطراف تنظیم کنید
• اجازه دهید کاربران متن را در مرورگر تغییر دهند

توجه داشته باشید:اگر اندازه فونت تعیین نشده باشد، اندازه پیش‌فرض متن عادی (مثل پاراگراف) 16 پیکسل است (16px=1em).

از pixel برای تنظیم اندازه فونت استفاده کنید

با تنظیم اندازه متن به صورت pixel، می‌توان کاملاً کنترل اندازه متن را به دست آورد:

مثال

h1 {font-size:60px;}
h2 {font-size:40px;}
p {font-size:14px;}

خودتان امتحان کنید

در Firefox، Chrome و Safari می‌توان اندازه متن مثال بالا را تنظیم کرد، اما در Internet Explorer نمی‌توان.

اگرچه می‌توان با استفاده از ابزار بزرگنمایی مرورگر اندازه متن را تنظیم کرد، اما این کار در واقع تنظیم کل صفحه است، نه فقط متن.

از em برای تنظیم اندازه فونت استفاده کنید

برای جلوگیری از مشکلات تنظیم متن در Internet Explorer، بسیاری از توسعه‌دهندگان از واحد em استفاده می‌کنند به جای pixels.

W3C توصیه می‌کند از واحد اندازه em استفاده شود.

1em برابر با اندازه فعلی فونت است. اگر اندازه فونت یک عنصر 16 پیکسل باشد، برای آن عنصر 1em برابر با 16 پیکسل است. در تنظیم اندازه فونت، اندازه em نسبت به اندازه فونت عنصر والد تغییر می‌کند.

اندازه پیش‌فرض متن در مرورگرها 16 پیکسل است. بنابراین اندازه پیش‌فرض 1em 16 پیکسل است.

می‌توان از این فرمول برای تبدیل پیکسل به em استفاده کرد:پیکسل‌ها/16=em

(توجه: 16 برابر اندازه پیش‌فرض فونت عنصر والد است، فرض کنید اندازه پیش‌فرض فونت عنصر والد 20px باشد، پس فرمول باید تغییر کند:پیکسل‌ها/20=em

مثال

h1 {font-size:3.75em;} /* 60px/16=3.75em */
h2 {font-size:2.5em;}  /* 40px/16=2.5em */
p {font-size:0.875em;} /* 14px/16=0.875em */

خودتان امتحان کنید

در مثال‌های بالا، اندازه متن به واحد em با مثال قبلی که به واحد پیکسل است، مشابه است. اما اگر از واحد em استفاده شود، می‌توان اندازه متن را در همه مرورگرها تنظیم کرد.

متاسفانه، در IE هنوز مشکلاتی وجود دارد. در تغییر اندازه متن، ممکن است بزرگتر یا کوچکتر از اندازه عادی باشد.

استفاده از درصد و em

راهی که در همه مرورگرها مؤثر است این است که برای عنصر body (عنصر والد) اندازه پیش‌فرض font-size را به صورت درصد تنظیم کنیم:

مثال

body {font-size:100%;}
h1 {font-size:3.75em;}
h2 {font-size:2.5em;}
p {font-size:0.875em;}

خودتان امتحان کنید

کد ما بسیار مؤثر است. در تمام مرورگرها، می‌توان اندازه متن مشابهی را نمایش داد و اجازه می‌دهد که اندازه متن در تمام مرورگرها تغییر کند.

ویژگی‌های فونت CSS

ابزارخانه

دستورالعمل‌های مرجع CSS

مثال‌های CSS

آزمون CSS

آموزش CSS

لینک‌های حامی