وراثت پذیری در CSS

اگر خصوصیات font-family یا color را برای عنصر<body>  مشخص کنید، این خصوصیات به اکثر عناصر فرزند آن اعمال می شوند. به این خاطر که مقدار ویژگی font-family به المان های فرزند به ارث می رسد.

این کار که به آن وراثت پذیری در CSS می گویند، باعث می شود شما مجبور نباشید یک ویژگی را به تک تک المان ها بدهید (و نتیجه آن داشتن یک فایل CSS ساده تر می باشد).

شما می توانید این را با ویژگی هایbackground-color  یا border مقایسه کنید. آنها توسط عناصر فرزند به ارث برده نمی شوند. اگر این ویژگی ها به همه عناصر کودک به ارث برده شود، این صفحه می تواند کاملا شلوغ و درهم شود.

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

در مثال زیر عنصر <div> با کلاس page ویژگی padding را از عنصر <body> به ارث می برد.

مثال

کد HTML:

<div class="page">

<h1>Potatoes</h1>

<p>There are dozens of different potato varieties. </p>

<p>They are usually described as early, second early and maincrop potatoes. </p>

</div>

کد CSS:

body {

font-family: Arial, Verdana, sans-serif;

color: #665544;

padding: 10px;

}

.page {

border: 1px solid #665544;

background-color: #efefef;

padding: inherit;

}

آموزش CSS

دلایل استفاده از فایل های خارجی CSS

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

این فایل ها می توانند میان تمام صفحات وب به اشتراک گذاشته شوند. این کار با استفاده از عنصر <link> در هر صفحه HTML سایت شما به منظور لینک دادن به یک فایل CSS امکان پذیر است. این بدان معنی است که نیازی به تکرار همان کد در هر صفحه نیست (که نتیجه آن کد کمتر و صفحات کوچکتر HTML است).

  روش طراحی سایت

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

به طور مثال می توانید برای تغییر تمام المان های <h1> فقط یک بار ویژگی مربوط به آن را در فایل CSS تغییر دهید و نیاز به تغییر آن در تمام صفحات نیست.

کدهای موجود در سند HTML برای خواندن و ویرایش ساده تر می شود، چرا که قوانین CSS زیادی در آن سند وجود ندارد. به طور کلی بهترین کار جدا کردن محتوای سایت از قوانین CSS می باشد.

گاهی اوقات ممکن است که شما بخواهید از قوانین CSS درون فایل HTML خودتان برای طراحی سایت، استفاده کنید.

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

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

برخی اوقات نیز، شما می توانید به منظور دیدن نحوه کار قوانین CSS، آن ها را درون المان <style> در عنصر <head> قرار دهید. در این مورد مشکلی پیش نخواهد آمد.

  طراحی وب سایت کوچک تجاری در 6 مرحله ساده

نسخه های مختلف CSS

CSS1 در سال 1996 منتشر شد و دو سال بعد از آن نسخه CSS2 بیرون آمد. در حال حاضر کار بر روی CSS3 ادامه دارد، اما مرورگرهای اصلی شروع به اجرای آن کرده اند.

همانطور که چندین نسخه از HTML وجود دارد، نسخه های مختلف CSS نیز وجود دارد.

آموزش CSS

برخی از مرورگرها چندین ویژگی CSS را به شیوه ای غیر منتظره نمایش می دهند. اما پیدا کردن و برطرف کردن این اشکالات راحت است، البته اگر شما آن را فرا بگیرید.

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

شما برای آزمایش سایت خود نیازی به تعداد زیادی رایانه ندارید، زیرا ابزارهای سایت های وجود دارد که به شما نشان میدهد هر صفحه ای در مرورگرهای مختلف چگونه به نظر می رسد:

  • http://browsershots.org/
  • https://crossbrowsertesting.com/

آموزش CSS

استفاده از این ابزارها، ایده خوبی است که سایت را در سیستم عامل های مختلف PC)، Mac و  (Linuxو نسخه های قدیمی تر مرورگرهای اصلی و همچنین نسخه های اخیر بررسی کنید.

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

هنگامی که یک ویژگی CSS آن گونه که انتظارش را دارید ظاهر نمی شود، به آن browser quirk یا CSS bug (مشکلات یا خطای CSS) گفته می شود.

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

  • http://positioniseverything.net/
  • https://quirksmode.org/compatibility.html/

آموزش CSS

به وبلاگ توسعه دهندگان وب خوش آمدید .

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