6 پاسخ

مانند پاسخ های دیگر، ویژگی CSS را از آن به ارث می برد عنصر والد.

آنچه پاسخ های دیگر نتوانستند بگویند این است که چرا به آن نیاز دارید. زیرا در نهایت ویژگی های cssبه هر حال ارثی هستند، درست است؟

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

P (رنگ: آبی؛ ) div.important (رنگ: قرمز؛ )

حالا متن به جای قرمز آبی خواهد بود. اگر بخواهیم

سبک پدر و مادرش را داشت و نه سبک پیش‌فرض، باید آن را با CSS لغو کنیم. البته، می‌توانیم ارزش دارایی (قرمز) را تکرار کنیم، اما این باعث می‌شود DRY (تکرار نکنید). در عوض، ما از آن به ارث می بریم:

Div.important p (رنگ: ارث بری؛ )

اعلان font:inherit در بسیاری از شیوه نامه های CSS Reset استفاده می شود که اغلب در کتابخانه ها و چارچوب های مختلف کپی می شوند. Reset CSS اصلی توسط Eric Meyer دارای فونت:inherit است. انگیزه خاصی داده نشده است. گفته می شود که منطق کلی این است که "کاهش ناسازگاری مرورگر در مواردی مانند ارتفاع خط پیش فرض، حاشیه سرصفحه و اندازه فونت و غیره." اما مایر به پست قبلی اشاره می کند که در آن ایده را توضیح می دهد و از جمله می گوید: "من همه اینها را می خواهم زیرا نمی خواهم جلوه های شیک را بدیهی بگیرم. این دو هدف را دنبال می کند: اول اینکه باعث می شود در مورد آن فکر کنم. ، که از نظر معنایی سند من کمی پیچیده تر است. با استفاده از تنظیم مجددمن قوی را انتخاب نمی کنم زیرا طراحی نیاز به جسارت دارد. در عوض من انتخاب می کنم عنصر صحیح- قوی باشد یا em یا b یا h3 یا هر چیز دیگری - و سپس در صورت نیاز آن را پاک کنید."

چندین عنصر HTML دارای رندر پیش‌فرض در مرورگرها با توجه به ویژگی‌های فونت هستند: سرفصل‌ها، فیلدهای فرم، سلول‌های سرصفحه جدول، برخی عناصر عبارت و غیره. با استفاده از CSS Reset یا به طور خاص font: inherit به این معنی است که در مرورگرهایی که از inherit پشتیبانی می کنند، همه این عناصر در رندر می شوند. فونت متنکپی کنید مگر اینکه در شیوه نامه مشخص شده باشد.

بنابراین، ما داریم صحبت می کنیمدر مورد روش شناسی خاص (یا به قول بعضی ها ایدئولوژی یا مذهب) تألیف و طراحی. این محبوبیت به دست آورده است و اغلب به طور منظم استفاده می شود.

همه مرورگرها خواص فونت را برای همه عناصر به ارث نمی برند. Netscape 4.x در مورد وراثت بسیار بد است. سبک زیر را در نظر بگیرید:

بدنه (پس زمینه: سیاه، رنگ: سفید)

در Netscape 4.x هیچ رنگی روی عناصر جدول اعمال نمی شد، بنابراین متن سیاهی را در داخل جدول در پس زمینه سیاه به طور پیش فرض دریافت خواهید کرد.

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

جدول، فرم (فونت: ارث بردن)

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

به طور پیش فرض ویژگی inherit است، به این معنی که شما div و p دارید.

حالا شما سبک بدهید:

Div (فونت-خانواده: Tahoma؛) p (فونت-خانواده: ارث بردن؛)

این خانواده فونت برابر است با ed برای p از پدرش به ارث می برد عنصر div.

استفاده از (font:inherit;) در CSS منطقی است زیرا عوامل کاربر مختلف (مرورگرها با نام مستعار) دارای یک stylesheet عامل کاربر (بخوانید: شیوه نامه پیش فرض) با چیزی شبیه به

بدنه (فونت: -magic-font-from-user-preferences؛ ) textarea، ورودی (فونت: monospace;)

(font:inherit;) برای دور زدن استفاده می شود مناسبت خاصزمانی که فونت پیش‌فرض یا خانواده فونت به دلیل شیوه نامه عامل کاربر به ارث نمی‌رسد، اما نویسنده محتوا می‌خواهد خانواده فونت به ارث برسد.

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

گزینه های فونت

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

ویژگی font-family style نام فونتی را که متن در آن رندر می شود را مشخص می کند:

font-family: <список имен шрифтов, разделенных запятыми> | ارث بردن

نام فونت ها به عنوان نام فونت ها مشخص می شوند، مانند Arial یا Times New Roman. اگر نام فونت دارای فاصله باشد، باید در علامت نقل قول قرار داده شود:

P (فونت-خانواده: Arial)

H1 (فونت-خانواده: "Times New Roman")

اگر ویژگی داده شدهسبک در سبک درون خطی وجود دارد، نقل قول ها با آپستروف جایگزین می شوند:

اگر فونتی که ما مشخص کردیم در رایانه بازدیدکننده وجود دارد، مرورگر اینترنتاز آن استفاده می کند. اگر چنین فونتی وجود نداشته باشد، متن با فونت مشخص شده در تنظیمات پیش فرض نمایش داده می شود. و صفحه وب ما ممکن است آنطور که در نظر داشتیم به نظر نرسد. (با این حال، فونت های Arial و Times New Roman بر روی هر کامپیوتری که ویندوز دارد موجود است.) می توانید نام فونت های متعددی را که با کاما از هم جدا شده اند مشخص کنید:

P (فونت-خانواده: Verdana، Arial)

سپس مرورگر وب ابتدا به دنبال فونت اول از فونت های مشخص شده، در صورت جستجوی ناموفق - دوم، سپس سوم و غیره به جای نام می گردد. فونت خاصمی توانید یکی از آنها را نام ببرید خانواده های فونت، مجموعه ای کامل از فونت های مشابه را نشان می دهد. پنج خانواده از این قبیل وجود دارد: serif (فونت‌های سریف)، sans-serif (فونت‌های sans-serif)، خط شکسته (قلم‌های دست‌نویس)، فانتزی (فونت‌های تزئینی)، و monospace (فونت‌های تک‌فضا):

H2 (فونت-خانواده: Verdana، Arial، sans-serif)

مقدار ویژه ارث بری مشخص می کند که متن این عنصر صفحه وب باید با همان فونت متن عنصر والد باشد. می گویند که در این موردیک عنصر صفحه وب فونت را از عنصر اصلی خود به ارث می برد. به هر حال، این مقدار پیش فرض ویژگی font-family style است. ویژگی font-size style اندازه فونت را مشخص می کند:

اندازه فونت: <размер >|xx-small|x-small|کوچک|متوسط|بزرگ|x-large|xx-بزرگ|بزرگتر|کوچکتر|ارث

اندازه فونت را می توان در مقادیر مطلق و نسبی تنظیم کرد. برای این، یکی از واحد های اندازه گیریپشتیبانی شده توسط CSS (جدول 8.1).

جدول 8.1.واحدهای اندازه که توسط استاندارد CSS پشتیبانی می شوند

تعیین واحد اندازه گیری انتخاب شده بعد از خود مقدار نشان داده می شود:

P (اندازه قلم: 10pt) STRONG (اندازه قلم: 1cm) EM (اندازه قلم: 150%)

توجه داشته باشید که تمام جدول. 8.1 واحد برای تنظیم مقادیر سایر ویژگی های سبک CSS مناسب است.

علاوه بر عددی ویژگی اندازه فونتهمچنین می تواند مقادیر کاراکتر را بگیرد. بنابراین، مقادیر از xx-small تا xx-large هفت اندازه فونت از پیش تعریف شده، از کوچک‌ترین تا بزرگ‌ترین را تعریف می‌کنند. و مقادیر بزرگتر و کوچکتر به ترتیب نشان دهنده اندازه فونت بعدی به ترتیب صعودی و نزولی است. به عنوان مثال، اگر عنصر والد دارای اندازه قلم متوسط ​​باشد، مقدار بزرگتر اندازه قلم عنصر فعلی را روی بزرگ تنظیم می کند.

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

ویژگی color style رنگ متن را تعیین می کند:

رنگ: <цвет> | ارث بردن

V فصل 7اشاره کردیم که رنگ را می توان با کد RGB (قرمز، سبز، آبی - قرمز، سبز، آبی) مشخص کرد. در قالب نوشته شده است

#<доля красного цвета><доля зеленого цвета><доля синего цвета> ,

که در آن نسبت همه رنگ ها به صورت آورده شده است اعداد هگزادسیمالاز 00 تا FF رنگ متن را قرمز کنید:

H1 (رنگ: #FF0000 ) و اکنون رنگ خاکستری: آدرس ( رنگ: #CCCCCC )

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

H1 (رنگ: قرمز)

فهرست کاملی از نام ها و رنگ های مربوط به آنها را می توان در صفحه وب یافت http://msdn.microsoft.com/en-us/library/aa358802%28v=VS.85%29.aspx .

مقدار ارثی مشخص می کند که این عنصر صفحه وب باید همان رنگ فونت عنصر والد را داشته باشد. این مقدار پیش فرض ویژگی font-size style است.

توجه!

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

با ویژگی color style می توانیم مثلا رنگ را تنظیم کنیم خط افقی HTML.

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

کدورت:<числовое значение>| ارث بردن

مقدار شفافیت عددی از 0 تا 1 است. که در آن 0 به معنی است شفافیت کاملعنصر (یعنی عنصر در واقع قابل مشاهده نیست)، و 1 شفافیت کامل است (این یک رفتار عادی است).

در اینجا نمونه ای از تنظیم نیمه شفافیت (مقدار 0.5) برای متن با قالب بندی ثابت آورده شده است:

PRE (مادرنگی: 0.5)

همانطور که اشاره کردیم توجه کنید عدد کسری- در اینجا به جای کاراکتر کاما از نقطه استفاده شده است.

در یک یادداشت

شفافیت معمولا فقط برای ایجاد مفید است جلوه های ویژه. V متن سادهاستفاده از آن توصیه نمی شود، زیرا ممکن است بازدید کننده را دلسرد کند.

ویژگی font-weight style "وزن" فونت را تعیین می کند:

وزن قلم: معمولی|پررنگ|پررنگ تر|سبکتر|100|200|300|400|500|600|700|800|900|ارث

هفت مقدار مطلق در اینجا موجود است، از 100 تا 900، که نشان دهنده "وزن" های مختلف فونت، از حداقل تا حداکثر است. در این حالت، فونت معمولی دارای "وزن" 400 (یا معمولی) و پررنگ - 700 (یا پررنگ) خواهد بود. مقدار پیش فرض 400 (معمولی) است. مقادیر پررنگ‌تر و روشن‌تر نسبی هستند و به ترتیب درجات بعدی «جسارت» را بالا و پایین نشان می‌دهند.

کد (وزن قلم: پررنگ)

ویژگی font-style سبک قلم را مشخص می کند:

سبک فونت: عادی|مورب|مورب|ارث بری

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

ویژگی text-decoration style "دکوراسیون" (زیر خط یا خط خطی) را که باید روی متن اعمال شود را مشخص می کند:

تزیین متن: هیچکدام|زیرخط|روی خط|خط از طریق|چشمک زدن|ارث بری

پنج مقدار در اینجا موجود است (بدون احتساب ارث):

هیچ کدام تمام "تزیینات" داده شده به فونت عنصر اصلی را حذف نمی کند.

زیر خط زیر خط نوشته;

روی متن "زیر خط" خط بکشید، یعنی یک خط روی خطوط بکشید.

ضربه های خطی از طریق متن.

چشمک زدن باعث می شود فونت سوسو بزند (روشن این لحظهتوسط سافاری پشتیبانی نمی شود).

توجه!

شما نباید زیر متن خط بکشید مگر اینکه کاملاً ضروری باشد. این به این دلیل است که مرورگرهای وب لینک‌ها را به‌طور پیش‌فرض زیرخط‌دار نشان می‌دهند، و متن‌های غیرهایپرپیوندی زیرخط‌دار می‌تواند برای بازدیدکننده دلسرد شود.

ویژگی font-variant style به شما این امکان را می دهد که نحوه انجام آن را مشخص کنید حروف کوچکفونت:

font-variant: معمولی|small-caps|ارث بری

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

ویژگی text-transform style به شما این امکان را می دهد که حروف حروف متن را تغییر دهید:

text-transform: بزرگ کردن|بزرگ|کوچک|هیچکدام | ارث بری

می‌توانیم متن را به حروف بزرگ (مقدار بزرگ این ویژگی) یا کوچک (کوچک) تبدیل کنیم، حرف اول هر کلمه را به بزرگ (بزرگ) تبدیل کنیم، یا آن را به عنوان (هیچ) بگذاریم.

ویژگی سبک line-height ارتفاع یک خط متن را تنظیم می کند:

خط-ارتفاع: معمولی| <расстояние> | ارث بردن

در اینجا می توانید مطلق و را تنظیم کنید ارزش نسبیفاصله، مشخص کردن واحد مناسب ابعاد CSS(جدول 8.1 را ببینید). در صورت عدم وجود، مقداری که تعیین می کنیم ابتدا در ارتفاع فونت فعلی ضرب می شود و سپس استفاده می شود. بنابراین، برای دو برابر کردن ارتفاع یک ردیف، می توانیم بنویسیم:

P (ارتفاع خط: 2)

مقدار عادی این ویژگی کنترل ارتفاع خط را به مرورگر وب برمی گرداند.

ویژگی style-spacing به شما امکان می دهد فاصله اضافی بین کاراکترهای متن را تنظیم کنید:

فاصله حروف: معمولی| <расстояние>

توجه داشته باشید که این دقیقاً فاصله اضافی است. به نسخه اصلی که توسط خود مرورگر وب تنظیم شده است اضافه خواهد شد.

در اینجا شما همچنین می توانید فاصله مطلق و نسبی را با تعیین واحد CSS مناسب تنظیم کنید (جدول 8.1 را ببینید). فاصله می تواند مثبت یا منفی باشد. v آخرین موردکاراکترهای فونت نزدیکتر از حد معمول به یکدیگر قرار خواهند گرفت. مقدار normal فاصله اضافی پیش فرض را صفر می کند.

ویژگی style-spacing مقدار وراثت را پشتیبانی نمی کند.

در اینجا مثالی از تعیین فاصله اضافی بین کاراکترها برابر با پنج پیکسل آورده شده است:

H1 (فاصله حروف: 5 پیکسل)

متنی که با چنین کاراکترهایی تایپ می شود پراکنده به نظر می رسد.

و در اینجا یک فاصله اضافی منفی بین کاراکترها برابر با دو پیکسل قرار داده ایم:

H6 (فاصله حروف: -2 پیکسل)

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

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

فاصله بین کلمات: عادی| <расстояние>

H1 (فاصله کلمات: 5 میلی متر)

خوب، 5 میلی متر احتمالاً کمی زیاد است ... اگرچه این فقط یک مثال است.

و در نهایت، ویژگی سبک فونت را در نظر بگیرید، که به شما امکان می دهد چندین پارامتر فونت را همزمان تنظیم کنید:

فونت: [ <начертание> ] [<вид строчных букв> ] [<"жирность"> ] [<размер> ] <имя шрифта>

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

متن پاراگراف ها را با فونت Times New Roman با اندازه 10 امتیاز قرار دهید:

P (فونت: 10pt "Times New Roman")

و برای سرفصل های سطح ششم - فونت Arial در سایز 12 نقطه و ایتالیک:

H6 (فونت: مورب 12pt Verdana)

اغلب زمانی که پروژه ای را به مشتری تحویل می دهیم، کنترل کد HTML را از دست می دهیم. گاهی اوقات مشتری از CMS (سیستم های مدیریت محتوا) استفاده می کند که به او می دهد کنترل کاملبالای قسمت های خاصی از کد HTML. گاهی اوقات یک مشتری به سادگی از الگوهای ما برای خروجی کد خود به یک سند استفاده می کند.
در بیشتر موارد، اطلاع رسانی به مشتری در مورد نحوه استفاده از الگوها یا CMS هایی که به او ارائه می دهید بسیار دشوار است، و گاهی اوقات ارائه سخنرانی های آتشین در مورد طرح معنایی و استانداردهای وب به سادگی غیرقابل قبول است. مشتری می‌تواند/از «نشانه‌گذاری قدیمی خوب» استفاده می‌کند، نشانه‌ای که می‌شناسد، صرفاً به این دلیل که کار می‌کند و به همان شکلی که به آن عادت کرده به نظر می‌رسد. به احتمال زیاد حاوی برچسب ها و ویژگی های ناخواسته (منسوخ شده) مانند bgcolor، تراز کردنو "ابدی" فونت. این مقاله در مورد نحوه مسدود کردن تگ های HTML ناخواسته با آن است با استفاده از CSSبنابراین به آرامی مشتری را در مسیر درست هدایت می کند.

چندین راه حل برای مشکل وجود دارد. یکی از آنها نمایش یک تصویر هشدار با CSS هنگام استفاده از برچسب های ناخواسته است. توضیحات مفصلی در مورد این روش وجود دارد و. راه حل دوم "برش" برچسب ها و ویژگی های ناخواسته در سمت سرور است. این روش موثرترین است، نکته دیگر این است که همیشه کنترل روی سروری که سایت در آن قرار دارد وجود ندارد.
ایده این است که آبشار طبیعی و میراث سبک‌ها را در تمام مرورگرها با «غیرفعال کردن» ظریف HTML که مشتری نمی‌خواهد استفاده کند، حفظ کنیم. و سپس مشتری استفاده از آن را متوقف خواهد کرد، زیرا برچسب های ناخواسته به سادگی "کار" را متوقف می کنند. روشی شیک و بدون تحریک برای مشتری که او را در مسیر درست راهنمایی می کند.
برچسب ها و ویژگی های HTML ناخواسته: