HTML for Kids · درس

أكثر خصائص CSS استخدامًا

الدرس 1 من 112 خطوة

أكثر خصائص CSS استخدامًا درس مجاني في HTML for Kids على CoddyKit. هذا هو الدرس 1 من أصل 1. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في HTML for Kids، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة HTML for Kids 1 دروس في المجموع.

مقدمة

مرحبًا،

سنتعلم في هذا القسم أكثر خصائص CSS شيوعًا.

حتى الآن، أنشأنا عادةً أمثلة باستخدام خصائص بسيطة مثل color وfont-size.

العرض والارتفاع

الارتفاع - العرض

سنستخدم الخاصيتين width وheight لتعيين قيم عرض عناصرنا وارتفاعها.

هناك أمران يجب الانتباه إليهما هنا.

لا يمكننا تعيين width وheight للعناصر من النوع inline.
تكون خصائص width وheight التي نعيّنها مستقلة افتراضيًا عن الخصائص الأخرى مثل margin وpadding وborder، وتُستخدم فقط للمنطقة الموجودة داخل العنصر.

سنقدم معلومات إضافية عن الاستثناءات المذكورة أعلاه لاحقًا.

<!DOCTYPE html>
<html>
<head>
<style>

.my-box {
  width: 100px;
  height: 100px;
  background-color: blue;
  color: white;
}

</style>
</head>
<body>

<div class="my-box">My Box</div>

</body>
</html>

العرض والارتفاع 2

في مثالنا السابق، أسندنا قيمًا ثابتة إلى العرض والارتفاع. ولكن القيم التي يمكن إسنادها لا تقتصر على الأرقام الثابتة.

لنرَ الآن كيفية إسناد العرض باستخدام النسبة المئوية في مثالنا.

<style>

.box1 {
  height: 200px;
  width: 200px;
  background-color: #1cac84;
}

.box2 {
  height: 200px;
  width: 70%;
  background-color: powderblue;
}

.box3 {
  background-color: #c974af;
}

</style>

<div class="box1">First Box</div>

<div class="box2">Second Box</div>

<div class="box3">This box takes 
the auto value for the width and height 
properties by default.</div>

content-box مقابل border-box

تأخذ الخاصية box-sizing القيمة content-box افتراضيًا.

وبشكل افتراضي، تُستخدم قيمتا العرض والارتفاع للإشارة إلى المحتوى.

تُضاف قيمتا الحد والحشو إلى قيمتي العرض والارتفاع.

لنفترض أن عرض صندوق ما يساوي 100px.

عند إضافة 10px كحشو و20px كحد إلى هذا الصندوق، سيصبح العرض الإجمالي للعنصر 100px + 10px + 20px = 130px.

max-width

باستخدام الخاصية max-width، يمكننا تعيين الحد الأقصى للعرض الذي يمكن أن يأخذه العنصر.

في المثال أدناه، نظرًا إلى تمرير قيمة max-width على أنها 100px، فعلى الرغم من أن القيمة الافتراضية للعرض هي auto (أي ينبغي أن يغطي العنصر 100% من العنصر الأب)، فقد شغل 100px، وأصبح المحتوى خارج الصندوق.

<style>

.box {
  height: 200px;
  max-width: 100px;
  background-color: #1cac84;
}

</style>

<div class="box">
Lorem ipsum dolor sit amet, consectetur 
adipiscing elit. Morbi lacinia ut felis
et sagittis
</div>

زخرفة النص

يمكننا تعريف زخرفة للنصوص باستخدام الخاصية text-decoration.

أعتقد أن فحص هذه الخاصية ضمن المثال سيكون أكثر منطقية. انظروا إلى ناتج التعليمات البرمجية النموذجية في المعاينة.

<style>

.head1 {
  text-decoration: overline;
}

.head2 {
  text-decoration: line-through;
}

.head3 {
  text-decoration: underline;
}

.head4 {
  text-decoration: underline overline;
}

</style>

<h1 class="head1">
   Text-decoration is overline
</h1>
<h1 class="head2">
   Text-decoration is line-through
</h1>
<h1 class="head3">
   Text-decoration is underline
</h1>
<h1 class="head4"> 
   Text-decoration is both underline 
    and overline
</h1>

text-indent

قد نرغب في إضافة مسافة في بداية النص. ونستخدم الخاصية text-indent لهذا الغرض.

<style>
.indent-txt{
  text-indent: 20px;
}
</style>

<p class="indent-txt">Lorem ipsum dolor 
sit amet, consectetur adipiscing elit, sed 
do eiusmod tempor incididunt ut labore 
et dolore magna aliqua. Ut enim ad minim 
veniam, quis nostrud exercitation ullamco 
laboris nisi ut aliquip ex ea commodo consequat
</p>

text-align

نحدد المحاذاة الأفقية للنص باستخدام الخاصية text-align.

لننشئ مثال HTML.

<style>

.h1-center {
  text-align: center;
}

.h1-left {
  text-align: left;
}

.h1-right {
  text-align: right;
}
</style>

<h1 class="h1-center">
   Lorem ipsum (center)
</h1>
<h1 class="h1-left">
   Lorem ipsum  (left)
</h1>
<h1 class="h1-right">
   Lorem ipsum (right)
</h1>

font-family

نعرّف نمط font-family لاستخدام نوع الخطوط الذي نريده للنصوص.

هناك بعض النقاط المهمة التي ينبغي أن نعرفها هنا.

يجب أن يكون الخط الذي عرّفته مسجلًا في نظام المستخدم لدينا. ولهذا، نحتاج إلى استخدام أحد الخطوط المعروفة باسم خطوط آمنة للويب.
إذا كنا سنستخدم خطًا مخصصًا، فسنحتاج إلى إضافة الخط الذي سنستخدمه باعتباره تبعية من جهة خارجية بين وسمَي head. وعند إضافة font-family، ينبغي أن نحدد تفضيلاتنا الأساسية والثانوية لعائلة الخطوط.
إذا لم يتمكن المتصفح من العثور على تفضيلنا الأساسي في نظامه، فسيعرض تفضيلنا الثانوي للمستخدم.

font-family 2

في المثال أدناه، تم تعيين نوع الخط Times New Roman للفئة الأساسية.

تم تعيين خطي Times وserif كخيارين ثانوي وثالث على التوالي.

يحاول المتصفح أولًا استخدام نوع الخط Times New Roman؛ وإذا لم يكن هذا النوع موجودًا في النظام، فسيستخدم خياراتنا الأخرى.

إذا لم تكن الخطوط التي عيّناها متاحة، فسيستخدم المتصفح الخط الافتراضي.

<style>
.header {
  font-family: "Times New Roman", Times, serif;
}
</style>

<h1 class="header">
    Hello Font Family
</h1>

font-style

كما يتضح من اسمه، يحدد نمط الخط للنص الذي نستخدمه.

لنرَ الآن الخاصية font-style من خلال مثال.

<style>
p.normal {
  font-style: normal;
}

p.italic {
  font-style: italic;
}

p.oblique {
  font-style: oblique;
}
</style>

<p class="normal">
    Lorem ipsum dolor sit amet, 
    consectetur adipiscing elit
</p>
<p class="italic">Lorem ipsum dolor sit amet,
     consectetur adipiscing elit
</p>
<p class="oblique">Lorem ipsum 
     dolor sit amet. consectetur 
     adipiscing elit
</p>

تهانينا

تهانينا 🎉

في هذا القسم، تعلمنا أكثر خصائص CSS استخدامًا.

في القسم التالي، سنتعلم CSS Margin.

أكثر خصائص CSS استخدامًا — رسم توضيحي 12

البدء مجانًا

تعلم HTML مع معلم ذكاء اصطناعي — مجانًا

اكتب وقم بتشغيل أكوادك الفعلية في المتصفح، واحصل على مساعدة فورية من معلم ذكاء اصطناعي متاح 24/7، واستمر من حيث توقفت على الويب أو في التطبيق.

الدورات: 16
الدروس: 35

ابدأ التعلم مجانًا عرض الدورة الكاملة

الأسئلة الشائعة

هل درس «أكثر خصائص CSS استخدامًا» مجاني؟

نعم — نص درس «أكثر خصائص CSS استخدامًا» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة HTML for Kids، انتقل إلى CoddyKit PRO. تتضمن دورة HTML for Kids 1 دروس في المجموع.

ماذا ستتعلم في «أكثر خصائص CSS استخدامًا»؟

أكثر خصائص CSS استخدامًا تتمرن على HTML for Kids مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ HTML for Kids؟

لا تُشترط خبرة سابقة. HTML for Kids على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 1.

كم من الوقت يستغرق درس «أكثر خصائص CSS استخدامًا»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس HTML for Kids هذا؟

نعم. كل درس في HTML for Kids يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

← العودة إلى HTML for Kids