جستجو برای:
سبد خرید 0
  • مطالب
  • تالار گفتگو
  • نمونه کارها
  • درباره ما
  • دوره آموزشیجدید
    • Css
    • تست در برنامه های دات نت
    • آشنایی با Canvas
  • تماس با ما
SarezCodes - سعید رضایی

ورود

گذرواژه خود را فراموش کرده اید؟

ثبت نام

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

SarezCodes - سعید رضایی
  • مطالب
  • تالار گفتگو
  • نمونه کارها
  • درباره ما
  • دوره آموزشیجدید
    • Css
    • تست در برنامه های دات نت
    • آشنایی با Canvas
  • تماس با ما
ورود
0

وبلاگ

SarezCodes - سعید رضاییمحتوادوره آموزشیCssجلسه سوم:بررسی تاثیر منبع کد(Understanding Source Order)

جلسه سوم:بررسی تاثیر منبع کد(Understanding Source Order)

6 بهمن 1399
ارسال شده توسط شراره قمیصی
Css، بدون دسته بندی، برنامه نویسی، دوره آموزشی، فناوری اطلاعات
116 بازدید
زمان مطالعه: 3 دقیقه

در مقاله قبلی زمانیکه شما تلاش می کردید رنگ پس زمینه را به کمک انتخابگر featured.  به نارنجی تبدیل کنید اما کد مدنظر شما اجرا نمیشد ، انتخابگر اصلی main-nav# به علت دارا بودن ID کد شما را override می نمود. اولویت بندی بین (1و0و1) و (0و1و0) اعمال شده است.

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

سریع ترین راه حل برای رفع این مشکل استفاده از کلمه important! می باشد.برای این کار کافیست به کد مورد نظر خود این کلمه را اضافه کنید تا بتوانید از اولویت بالاتری نسبت به ID داشته باشید.

#main-nav a {
  color: white;
  background-color: #13a4a4;
  padding: 5px;
  border-radius: 2px;
  text-decoration: none;
}
.featured {
  background-color: orange !important;
}

در این حالت کد شما کار می کند. چراکه کلمه important! اولویت کد شما را نسبت به بقیه قوانین بالاتر می برد.این روش بسیار آسان می باشد اما به همین میزان که آسان است ساده لوحانه نیز به نظر می رسد.این روش ممکن است در حال حاضر مشکل شما را حل کند اما در ادامه مشکلاتی را برای شما می تواند ایجاد کند. اگر شما در ابتدای کدنویسی برای پروژه جدید خود هستید با اضافه کردن این کلمه ایجاد تغییرات را در آینده برای خود بسیار سخت می کنید.زیرا زمانیکه بخواهید به حالت اولیه خود برگردانید یا حالت قبل خود را بازیابی کنید به مشکلات جدی برخواهید خورد.

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

#main-nav a{
  color: white;
  background-color: #13a4a4; 
  padding: 5px;
  border-radius: 2px;
  text-decoration: none;
}
#main-nav .featured {
  background-color: orange;
}

این کد مشکل پیش آمده را رفع کرده و کار می کند. در این حالت انتخابگر شما یک شناسه و یک کلاس دارد که الویت آن را نسبت بهmain-nav# با شناسه (1و0و1) بالاتر می برد.با اینکه در حال حاضر مشکل شما با یک راه حل منطقی حل شده است اما هنوز هم می توان راه بهتری پیدا کرد.

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

.nav {
  margin-top: 10px;
  list-style: none;
  padding-left: 0;
}
.nav li {
  display: inline-block;
}
.nav a {
  color: white;
  background-color: #13a4a4;
  padding: 5px;
  border-radius: 2px;
  text-decoration: none;
}
.nav .featured {
  background-color: orange;
}

با این تغییری که ایجاد کردید کد اول با شناسه (1و1و0) از کد دوم با شناسه (0و2و0) شکست می خورد. پس رنگ زمینه نارنجی خواهد شد.همانطور که در این کدها مشاهده می کنید که اولویت یا همان specificity می تواند به عنوان یک سلاح در اختیار شما قرار بگیرد تا بتوانید از بهترین روش ها برای اجرای آنچه که دوست دارید استفاده کنید.

Understanding Source Order

در این قسمت سومین مورد که بررسی خواهیم کرد در مورد منشا و منبع کدهاست.اگر در مورد یک کد origin (نویسنده کد) وspecificity (اولویت) یکسان باشد سومین مورد یعنی منبع کد می تواند راه حل خوبی باشد.به این معنی که می توانید برای رسیدن به استایل مورد نظر خود ترتیب کدها را تغییر دهید.برای بررسی بیشتر مثال های زیر را بررسی کنید.

.nav a {
  color: white;
  background-color: #13a4a4;
  padding: 5px;
  border-radius: 2px;
  text-decoration: none;
}
a.featured {
  background-color: orange;
}

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

این راه حل مشکل شما را حل می کند اما در عوض مشکل دیگری را اضافه می کند. مشکل جدید این است که در صورتی که بخواهید کد کلاس خود را درخارج از nav استفاده قوانین css ای که از قبل نوشته اید با هم ترکیب میشوند و کد شما به درستی کار نخواهد کرد.شما باید بررسی کنید که آیا تغییری که ایجاد شده است با وجود ناخواسته بودن برای شما قابل قبول می باشد یا نه. به بیان ساده تر ممکن است بعضی از این تغییرات ناخواسته برای شما مفید باشد.

بدون درنظر گرفتن شرایط کدهایی که شما نوشته اید من توصیه می کنم که از روش کاهش اولویت قطعه کدی که غالب شده است استفاده کنید.ممکن است در بعضی موارد نیاز باشد از روش دیگر هم استفاده کنید و این مسئله مشکل چندانی ندارد اما باید به ریسک های احتمالی هم توجه داشته باشید.برای مثال کد زیر را بررسی کنید.

<header class="page-header">
  <h1 id="page-title" class="title">Wombat Coffee Roasters</h1>
  <nav>
    <ul id="main-nav" class="nav">
      <li><a href="/">Home</a></li>
      <li><a href="/coffees">Coffees</a></li>
      <li><a href="/brewers">Brewers</a></li>
      <li><a href="/specials" class="featured">Specials</a></li>
    </ul>
  </nav>
</header>
<main>
  <p>
    Be sure to check out
    <a href="/specials" class="featured">our specials</a>.
  </p>
</main>

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

در مقاله بعدی در مورد link Style And Source Order صحبت خواهیم کرد.با ما همراه باشید.

Print Friendly, PDF & Email
برچسب ها: csscss in depthآموزش پایه ایآموزشCSSبرنامه نویسیزبان برنامه نویسی
قبلی بهترین الگوهای آزمایش واحد در NET Core. و NET Standard. قسمت دوم
بعدی جلسه چهارم : تاثیر منابع (link style and source order)

دیدگاهتان را بنویسید لغو پاسخ

جستجو برای:
برچسب‌ها
#C (3) css (12) css in depth (12) OOP (4) SOLID (5) unit test (4) آزمایش واحد (4) آزمون واحد (6) آموزشCSS (11) آموزش پایه ای (12) بازی ریاضی (4) بازی نویسی (2) برنامه نویسی (13) تست (5) توسعه آزمون محور (3) دات نت (1) ریاضی بازی (4) ریاضی در بازی (4) زبان برنامه نویسی (9) سی شارپ (3) شی گرایی (4) فناوری اطلاعات (3)
دسته‌ها
  • #C (6)
  • Css (13)
  • اصول طراحی (5)
  • بازی سازی (4)
  • بدون دسته بندی (3)
  • برنامه نویسی (20)
  • تست (7)
  • تست در برنامه های دات نت (6)
  • جاوا اسکریپت (1)
  • دوره آموزشی (19)
  • فناوری اطلاعات (5)
  • نگاه عمیق به سی شارپ (1)
نوشته‌های تازه
  • اصول طراحی SOLID در #C (قسمت آخر) 6 بهمن 1399
  • اصول طراحی SOLID در #C (قسمت چهارم) 6 بهمن 1399
  • اصول طراحی SOLID در #C (قسمت سوم) 6 بهمن 1399
  • اصول طراحی SOLID در #C (قسمت دوم) 6 بهمن 1399
  • اصول طراحی SOLID در #C (قسمت اول) 6 بهمن 1399
  • محبوب
  • جدید
  • دیدگاه ها
پشتیبانی

ما موضوع Sarez را نامگذاری کردیم، زیرا برای ما بهترین علامت های تجاری ساده هستند. رشد  برند ها در توانایی آنها درک می شود.

    2022© سارز کد SarezCodes
    اشتراک گذاری در شبکه های اجتماعی
    ارسال به ایمیل
    https://sarezcodes.ir/?p=2339
    • دسته بندی دوره ها
    • دوره های من
    • جستجو

    دسته بندی دوره ها

    دوره های من

    برای مشاهده خریدهای خود باید وارد حساب کاربری خود شوید

    جستجو

    مرورگر شما از HTML5 پشتیبانی نمی کند.