freeCodeCamp

3.0 KiB

Raw Blame History

id	title	challengeType	videoUrl	localeTitle
587d7791367417b2b2512ab3	Create Visual Balance Using the text-align Property	0		إنشاء توازن مرئي باستخدام خاصية محاذاة النص

Description

يركز هذا القسم من المنهج على التصميم المرئي التطبيقي. تعتمد المجموعة الأولى من التحديات على تصميم البطاقة المعينة لإظهار عدد من المبادئ الأساسية. غالبًا ما يكون النص جزءًا كبيرًا من محتوى الويب. يحتوي CSS على عدة خيارات لكيفية محاذاةه مع خاصية text-align . text-align: justify; يتسبب في كافة أسطر النص باستثناء السطر الأخير لمقابلة الحواف اليمنى واليسرى لمربع السطر. text-align: center; مراكز النص text-align: right; محاذاة إلى اليمين text-align: left; (الافتراضي) يسار النص.

Instructions

قم بمحاذاة نص علامة h4 ، والذي يشير إلى "Google" ، إلى المركز. ثم قم بتبرير علامة الفقرة التي تحتوي على معلومات حول كيفية تأسيس Google.

Tests

tests:
  - text: يجب أن تستخدم التعليمات البرمجية الخاصة بك الخاصية محاذاة النص على علامة <code>h4</code> إلى الوسط.
    testString: 'assert($("h4").css("text-align") == "center", "Your code should use the text-align property on the <code>h4</code> tag to set it to center.");'
  - text: يجب أن تستخدم شفرتك خاصية محاذاة النص على علامة <code>p</code> لتعيينها لتبريرها.
    testString: 'assert($("p").css("text-align") == "justify", "Your code should use the text-align property on the <code>p</code> tag to set it to justify.");'

Challenge Seed

<style>
  h4 {

  }
  p {

  }
  .links {
    margin-right: 20px;

  }
  .fullCard {
    border: 1px solid #ccc;
    border-radius: 5px;
    margin: 10px 5px;
    padding: 4px;
  }
  .cardContent {
    padding: 10px;
  }
</style>
<div class="fullCard">
  <div class="cardContent">
    <div class="cardText">
      <h4>Google</h4>
      <p>Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.</p>
    </div>
    <div class="cardLinks">
      <a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a>
      <a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
    </div>
  </div>
</div>

Solution

// solution required

3.0 KiB Raw Blame History