جلسه پنجم: Special Values – مقادیر خاص برای Property
Special Values مقادیری هستند که از آن ها برای دستکاری Cascade استفاده می شوند.
در اینجا در مورد دو نوع از این مقادیر یعنی Inherit و Initial صحبت خواهیم کرد .
همانطور که در مقاله قبل گفته شد گاهی اوقات برای اینکه اثر Cascade را از بین ببرید می توانید از وراثت استفاده کنید.شما می توانید تمامی مقادیر را به کمک این کلمه override کنید و عناصر را مجبور کنید تا ویژگی مورد نظرتان را از والد خود ارث ببرد.
فرض کنید شما می خواهید رنگ طوسی کمرنگ را به فوتر خود نسبت دهید.در فوتر نیز تعدادی لینک وجود دارد اما شما نمیخواهید بیش از حد نمایان شوند(چون فوتر بخش مهمی در صفحه محسوب نمی شود) .پس این لینک ها را طوسی تیره می کنید.
کد زیر را بررسی کنید.البته فوتر بخش های بیشتری دارد و این کد فقط به عنوان مثال نوشته شده است.
<footer class="footer">
<a href="/terms-of-use">Terms of use</a>
</footer>معمولا مرورگرها برای لینک ها استایل خود را به صورت پیش فرض دارند و اگر طراح برای لینک ها استایلی تنظیم نکند کدهای useragent اعمال خواهد شد.
کد زیر را در نظر بگیرید:
a:link {
color: blue;
text-decoration: none;
}
.footer {
color: #666;
background-color: #ccc;
padding: 15px 0;
text-align: center;
font-size: 14px;
}
.footer a {
color: inherit;
text-decoration: underline;
}
در قطعه کد بالا سومین قانونی که نوشته شده است رنگ آبی برای لینک ها را override می کند .پس لینک رنگ را از والد خود ارث خواهد برد. در این جا نکته مفیدی وجود دارد که این است که هرگاه رنگ فوتر تغییر پیدا کند رنگ لینک ها هم تغییر پیدا خواهد کرد.به عنوان مثال اگر رنگ پاورقی در صفحات خاص به رنگ دیگری باشد ، رنگ لینک ها هم متناسب با آن تغییر خواهد کرد.
شما می توانید بعضی از ویژگی ها را که به صورت معمول توسط کلمه کلیدی inherit ارث برده نمی شوند را مجبور به ارث بری کنید . در ادامه این مقاله به این موضوع خواهیم پرداخت.
در صورتی که از کلمه ی INHERIT استفاده کرده اید و اکنون میخواهید کد را به حالت اول خود برگردانید کافیست از کلمه initial استفاده کنید.
توجه ! کلمه کلیدی initial در هیچ نسخه از مرورگر internet explorer و یا opera mini پشتیبانی نمی شود.
توجه ! اگر میخواهید عنصری را به حالت اولیه خود برگردانید مثلا به عرض اولیه یا مثل قطعه کد پایین به رنگ حالت initial داده شده است .در بیشتر مرورگرها مقدار اولیه برای ویژگی رنگ سیاه است.
.footer a {
color: initial;
text-decoration: underline;
}
استفاده از این نوع پروپرتی ها به شما کمک می کند که به جای چند قانون مختلف از یک خط کد استفاده کنید و چند ویژگی را همزمان تعیین کنید.مثلا Font یک ویژگی مختصر است که به شما امکان می دهد چندین ویژگی قلم را همزمان تنظیم کنید.
Font: italic bold 18px “Helvetica” , sans-serif;یا به عنوان مثال Background یک پروپرتی کوتاه شده برای تنظیم ویژگی های پس زمینه background –color, background –size , background-repeat , ..کاربرد دارد .
Border : خلاصه ای برای border-width , border-style, border-color و … می باشد.
خود border-width نیز عبارت مختصر شده برای تعیین عرض بالا ، پایین ، چپ و راست می باشد.
استفاده از این کدهای مختصر شده برای شفاف شدن و تمیز ماندن کدهای شما مفید است اما مراقب باشید که گاهی این عبارت های مختصر شده می تواند سایر کدهای شما را بدون اینکه متوجه شوید override کند.
برای مثال برای بررسی این اتفاق کد زیر را بررسی کنید:
h1 {
color: #2f4f4f;
margin-bottom: 10px;
font-weight: bold;
}
.title {
font: 32px Helvetica, Arial, sans-serif;
}در نگاه اول شاید به نظر برسد که یک عنوان پررنگ را مشاهده خواهید کرد اما اگر به کدهای معادل سازی شده زیر توجه کنید متوجه خواهید شد که نتیجه چیز دیگری است
h1 {
color: #2f4f4f;
margin-bottom: 10px;
font-weight: bold;
}
.title {
font-style: normal;
font-variant: normal;
font-weight: normal;
font-stretch: normal;
line-height: normal;
font-size: 32px;
font-family: Helvetica, Arial, sans-serif;
}این اتفاق یعنی اینکه استفاده از این استایل ها منجر به وزن طبیعی قلم می شود. هم چنین این استایل ها می تواند کدهایی که ارث برده می شوند را نیز override کند.
بررسی ترتیب کدها در Shorthand Values
عبارات مختصر شده معمولا سعی می کنند در برخورد با مقادیری که نوشته اید با ملایمت بیشتری برخورد می کند. برای مثال دو قطعه کد زیر را در نظر بگیرید:
Border:1px solid black; یا border: black 1px solid;نکته اینجاست که هر دو کد بالا کار میکند.همه مرورگرها متوجه می شوند که هر مقدار مربوط به کدام ویژگی است اما در بعضی موارد ایم مقادیر می تواند کمی گیج کننده باشد. مثلا در مورد مقادیری که واحد اندازه گیری آن ها یکسان است مثل اندازه بوردر راست و چپ و … در این موارد ترتیب استفاده از مقادیر اهمیت دارد . برای مثال در مورد اندازه بوردر یک عنصر اعداد اول تا چهارم به ترتیب به بالا ، راست، پایین و چپ اشاره دارد.
Padding: 10px 20px 10px 5px;در بعضی موارد به ویژگی مورد نظر فقط سه مقدار اختصاص داده شده است. مثلا padding: 10px 5px 10px; ذر این حالت از آنجایی که هیچ مقداری به سمت چپ اختصاص داده نشده است همان مقدار راست اعمال خواهد شد.
در بیشتر موارد شما به دو مقدار نیاز خواهید داشت .قطعه کد زیر را بررسی کنید.
.nav a {
color: white;
background-color: #13a4a4;
padding: 5px 15px;
border-radius: 2px;
text-decoration: none;
}در این کد مقدار اول به بالا و پایین و مقدار دوم به راست و چپ اختصاص داده می شود.بسیاری از این ویژگی ها از این قاعده پیروی میکنند.
Vertical و Horizontal
ترتیب بالا ، راست ، پایین و چپ برای عناصری است که به چهار طرف آن مقادیری را اختصاص میدهیم در مورد بعضی از این عناصر که از دو مقدار پشتیبانی می کنند مانند position یا shadow مقدار اول برای محور عمودی و مقدار دوم به محور افقی عمل می کند.
در مقاله بعدی به مبحث کار با relative units خواهیم پرداخت.
1 Comment
به گفتگوی ما بپیوندید و دیدگاه خود را با ما در میان بگذارید.
بسیار عالی