الأساسيات

خاصية line-height : تُستخدم هذه الخاصية لإنشاء مسافة بين أسطر النص. وتشمل القيم المقبولة لهذه الخاصية line-height الكلمة المفتاحية normal ، والأرقام (numbers)، والنسب المئوية (percentages)، ووحدات القياس مثل وحدة em.

الخاصية list-style-type : تُستخدم هذه الخاصية لتحديد الرمز المميز لعنصر القائمة؛ وتشمل القيم المقبولة: دائرة circle ، أو قرص disc، أو أرقام عشرية decimal.

إليك مثال يستخدم الخاصية list-style-type لتغيير نمط الرموز النقطية:

<link rel="stylesheet" href="styles.css">

<ul>
 <li>العنصر 1</li>
 <li>العنصر 2</li>
 <li>العنصر 3</li>
</ul>
            

ul {
 list-style-type: square;
}
            

معاينة:

خاصية list-style-position : تُستخدم هذه الخاصية لتحديد موضع علامة القائمة. والقيمتان المقبولتان الوحيدتان هما inside و outside.

إليك مثال يوضح الفرق بين الداخل inside والخارج outside :

<link rel="stylesheet" href="styles.css">

<ul class="inside-list">
 <li>عنصر ذو موقع داخلي</li>
 <li>عنصر ذو موقع داخلي</li>
</ul>
<ul class="outside-list">
 <li>عنصر ذو موقع خارجي</li>
 <li>عنصر ذو موقع خارجي</li>
</ul>
            

.inside-list {
 list-style-position: inside;
}

.outside-list {
 list-style-position: outside;
}
            

معاينة:

الخاصية list-style-image : تُستخدم هذه الخاصية لتعيين صورة كعلامة لعنصر القائمة. ومن حالات الاستخدام الشائعة لها استخدام الدالة url مع قيمة تشير إلى مسار صحيح لصورة.

إلى جانب خاصية ارتفاع السطر line-height ، يمكن أيضاً استخدام الهوامش (margins) في CSS لتحسين التباعد وقابلية القراءة لعناصر القائمة (list items).

تُنشئ الهوامش (margins) مساحةً خارج كل عنصر li ، مما يتيح التحكم في الفراغ الفاصل بين عناصر القائمة.

تُستخدم الخاصية margin-bottom لإنشاء مسافة أسفل كل عنصر من عناصر القائمة. على سبيل المثال، ستؤدي القاعدة margin-bottom: 10px; إلى إنشاء فجوة بمقدار 10 بكسل (10-pixel gap) أسفل كل عنصر.

إليك مثال يستخدم الخاصية margin-bottom لترك مسافة بين عناصر القائمة:

<link rel="stylesheet" href="styles.css">

<ul class="list">
 <li>العنصر 1</li>
 <li>العنصر 2</li>
 <li>العنصر 3</li>
</ul>
            

.list li {
 margin-bottom: 20px;
}
            

معاينة:

الفئة الزائفة pseudo-class : هي كلمة مفتاحية تُضاف إلى المُحدِّد (selector) وتتيح لك اختيار العناصر بناءً على حالة معينة. ومن الأمثلة الشائعة على هذه الحالات: :hover و :visited و :focus.

الفئة الزائفة :link : تُستخدم هذه الفئة الزائفة لتنسيق الروابط التي لم يقم المستخدم بزيارتها.

إليك مثال يستخدم الفئة الزائفة :link :

<link rel="stylesheet" href="styles.css">

<a href="/">رابط مثال</a>
            

a:link {
 color: red;
}
            

معاينة:

الفئة الزائفة :visited : تُستخدم هذه الفئة الزائفة لتنسيق الروابط التي زارها المستخدم بالفعل.

الفئة الزائفة :hover : تُستخدم هذه الفئة الزائفة لتنسيق العناصر التي يمرر المستخدم مؤشر الفأرة فوقها.

إليك مثال يستخدم الفئة الزائفة :hover :

<link rel="stylesheet" href="styles.css">

<a href="/">مرّر المؤشر فوقي!</a>
            

a:hover {
 color: green;
 text-decoration: underline;
}
            

معاينة:

الفئة الزائفة :focus : تُستخدم هذه الفئة الزائفة لتنسيق عنصر ما عندما يكتسب التركيز (focus). ومن الأمثلة على ذلك عناصر الإدخال input أو القوائم المنسدلة select ، حيث يقوم المستخدم بالنقر على العنصر أو التنقل إليه باستخدام مفتاح "Tab" لتركيزه.

إليك مثال يستخدم الفئة الزائفة :focus :

<link rel="stylesheet" href="styles.css">

<a href="/">رابط مثال</a>
            

a:focus {
 outline: 2px solid orange;
}
            

معاينة:

الفئة الزائفة :active : تُستخدم هذه الفئة الزائفة لتنسيق عنصر قام المستخدم بتفعيله؛ ومن الأمثلة الشائعة على ذلك قيام المستخدم بالنقر على زر.

إليك مثال يستخدم الفئة الزائفة :active :

<link rel="stylesheet" href="styles.css">

<a href="/">اضغط عليّ!</a>
            

a:active {
 color: pink;
}
            

معاينة:

خاصية background-size : تُستخدم هذه الخاصية لتحديد حجم خلفية العنصر (background size). ومن القيم الشائعة لها: cover لجعل صورة الخلفية تغطي العنصر بالكامل، و contain لجعل صورة الخلفية تتناسب مع أبعاد العنصر.

إليك مثال يستخدم background-size: cover :

<style>
 body {
   background-image: url("https://openarabtech.github.io/CSSVerse/src/assets/relaxing-cat.jpg");
   background-size: cover;
   background-repeat: no-repeat;
   min-height: 100px;
  }
</style>
            

معاينة:

إليك مثال يستخدم background-size: contain :

<style>
 body {
   background-image: url("https://openarabtech.github.io/CSSVerse/src/assets/relaxing-cat.jpg");
   background-size: contain;
   background-repeat: no-repeat;
   min-height: 100px;
  }
</style>
            

معاينة:

خاصية background-repeat : تُستخدم هذه الخاصية لتحديد كيفية تكرار صور الخلفية على طول المحورين الأفقي والرأسي (horizontal and vertical axes). القيمة الافتراضية لهذه الخاصية background-repeat هي repeat ، مما يعني أن الصورة ستتكرر أفقيًا ورأسيًا؛ كما يمكنك تحديد عدم تكرار الصورة باستخدام القيمة no-repeat.

إليك مثال يستخدم background-repeat: no-repeat :

<style>
 body {
   background-image: url("https://openarabtech.github.io/CSSVerse/src/assets/relaxing-cat.jpg");
   background-size: contain;
   background-repeat: no-repeat;
   min-height: 100px;
  }
</style>
            

معاينة:

خاصية background-position : تُستخدم هذه الخاصية لتحديد موضع صورة الخلفية. ويمكن ضبطها باستخدام قيم تعبّر عن طول محدد أو نسبة مئوية، أو قيم نصية (كلمات مفتاحية) مثل top و bottom و left و right و center.

إليك مثال يستخدم الخاصية background-position :

<style>
 body {
   background-image: url("https://openarabtech.github.io/CSSVerse/src/assets/relaxing-cat.jpg");
   background-size: contain;
   background-repeat: no-repeat;
   background-position: center top;
   min-height: 100px;
  }
</style>
            

معاينة:

خاصية background-attachment : تُستخدم هذه الخاصية لتحديد ما إذا كانت صورة الخلفية ستتحرك (تُمرَّر) مع المحتوى أم ستظل ثابتة في مكانها. وتتمثل القيم الرئيسية في scroll (وهي القيمة الافتراضية)، حيث تتحرك صورة الخلفية مع المحتوى، و fixed ، حيث تظل صورة الخلفية في الموقع نفسه على الشاشة.

خاصية background-image : تُستخدم هذه الخاصية لتعيين صورة الخلفية لعنصر ما. يمكنك تعيين صور خلفية متعددة في آنٍ واحد، واستخدام الدوال url أو radial-gradient أو linear-gradient كقيم لها.

إليك مثال يستخدم background-image :

<style>
 body {
   background-image: url("https://openarabtech.github.io/CSSVerse/src/assets/relaxing-cat.jpg");
   min-height: 100px;
  }
</style>
            

معاينة:

خاصية background : هي خاصية مختصرة لضبط جميع خصائص الخلفية في إعلان واحد. إليك مثال على تعيين صورة للخلفية وضبطها بحيث لا تتكرر: background: no-repeat url("example-url-goes-here");

إليك مثال يستخدم خاصية الاختصار background :

<style>
 body {
   background: center top no-repeat url("https://openarabtech.github.io/CSSVerse/src/assets/relaxing-cat.jpg");
   min-height: 100px;
  }
</style>
            

معاينة:

تباين جيد بين ألوان الخلفية والعناصر الأمامية: من المهم ضمان وجود تباين جيد بين ألوان الخلفية والعناصر الأمامية (مثل لون النص) لجعل النص قابلاً للقراءة. وتوصي "إرشادات إتاحة محتوى الويب" (WCAG) بحد أدنى لنسبة التباين يبلغ 4.5:1 للنصوص العادية، و 3:1 للنصوص الكبيرة.

الخاصية border-top : تُستخدم هذه الخاصية لتحديد أنماط الحد العلوي للعنصر. فالقيمة border-top: 3px solid blue; تُنشئ حداً علوياً للعنصر بلون أزرق ونمط متصل (solid) وبعرض 3 بكسل.

الخاصية border-right : تُستخدم هذه الخاصية لتحديد أنماط الحد الأيمن للعنصر. فالأمر border-right: 2px solid red; يُنشئ حداً أحمر اللون ومُصمتاً (غير متقطع) بعرض 2 بكسل على الجانب الأيمن من العنصر.

الخاصية border-bottom : تُستخدم هذه الخاصية لتحديد أنماط الحد السفلي للعنصر. فالقيمة border-bottom: 1px dashed green; تُنشئ حداً سفلياً للعنصر بلون أخضر، ونمط متقطع (dashed)، وعرض يبلغ بكسلاً واحداً.

الخاصية border-left : تُستخدم هذه الخاصية لتحديد أنماط الحد الأيسر للعنصر. فالقيمة border-left: 4px dotted orange; تُنشئ حداً برتقالياً منقطاً بعرض 4 بكسلات على الجانب الأيسر للعنصر.

خاصية border : هي خاصية مختصرة لتحديد عرض ونمط ولون حدود العنصر. فالأمر border: 1px solid black; يُنشئ حدوداً سوداء مصمتة بعرض بكسل واحد.

إليك مثال يستخدم خاصية border المختصرة:

<link rel="stylesheet" href="styles.css">

<img src="https://openarabtech.github.io/CSSVerse/src/assets/relaxing-cat.jpg" alt="قطة لطيفة مستلقية على ظهرها">
            

img {
 border: 2px solid red;
}
            

معاينة:

خاصية border-radius : تُستخدم هذه الخاصية لإنشاء زوايا مستديرة لحدود العنصر.

إليك مثال يستخدم border-radius :

<link rel="stylesheet" href="styles.css">

<img src="https://openarabtech.github.io/CSSVerse/src/assets/relaxing-cat.jpg" alt="قطة لطيفة مستلقية على ظهرها">
            

img {
 border: 2px solid black;
 border-radius: 10px;
}
            

معاينة:

الخاصية border-style : تُستخدم هذه الخاصية لتحديد نمط حدود العنصر. ومن القيم المقبولة لها: solid (متصل)، و dashed (متقطع)، و dotted (منقّط)، و double (مزدوج).

إليك مثال يستخدم قيمًا مختلفة لنمط الحدود border-style :

<link rel="stylesheet" href="styles.css">

<div class=solid-border>حد متصل</div>
<div class=dashed-border>حد متقطع</div>
<div class=dotted-border>حد منقط</div>
<div class=double-border>حد مزدوج</div>
            

.solid-border {
 border: 3px solid blue;
 margin-bottom: 10px;
 padding: 10px;
}

.dashed-border {
 border: 3px dashed red;
 margin-bottom: 10px;
 padding: 10px;
}

.dotted-border {
 border: 3px dotted green;
 padding: 10px;
}

.double-border {
 border: 3px double blueviolet;
 padding: 10px;
}
            

معاينة:

دالة linear-gradient() : تُستخدم دالة CSS هذه لإنشاء تدرج لوني (انتقال بين ألوان متعددة) على طول خط مستقيم.

إليك مثال يستخدم linear-gradient() :

<link rel="stylesheet" href="styles.css">

<div class="linear-gradient"></div>
            

.linear-gradient {
 background: linear-gradient(to right, red, blue);
 height: 40vh;
}
            

معاينة:

دالة radial-gradient() : تُنشئ دالة CSS هذه صورةً تتدرج شعاعياً انطلاقاً من نقطة محددة -على شكل دائرة (circle) أو قطع ناقص (ellipse) - وتنتقل تدريجياً بين ألوان متعددة.

إليك مثال يستخدم radial-gradient() :

<link rel="stylesheet" href="styles.css">

<div class="linear-gradient"></div>
            

.radial-gradient {
 background: radial-gradient(circle, red, blue);
 height: 40vh;
}
            

معاينة: