جميع خصائص css

جميع وسوم css

 CSS هي طريقة لتزيين غرفة. فكر في HTML كهيكل الغرفة نفسها - الجدران، والنوافذ، والأرضية. الآن، إذا أردنا أن تبدو الغرفة جميلة ومريحة، نحتاج إلى طلائها، ووضع بعض الستائر، واختيار لون السجاد، وترتيب الأثاث بشكل جذاب. هذا بالضبط ما تفعله CSS لصفحات الويب.

قواعد بسيطة عند كتابة CSS:

- تحديد العنصر 

- نستخدم الأقواس `{ }` لوضع القواعد داخلها.

- نكتب اسم الخاصية (مثل `color` أو `font-size`)، ثم نضع نقطتين `:`، وبعدها نكتب القيمة (مثل `blue` أو `30px`).

- ننهي كل تعليمة بفاصلة منقوطة `;`.

إليك أمثلة لبعض الخصائص الأساسية لـ CSS مع أمثلة عديدة:

1. الألوان (Colors)

- خاصية `color`: تحدد لون النص.

p { color: blue; }

- خاصية `background-color`: تحدد لون خلفية العنصر.

  body { background-color: #f0f0f0; }

2. الخطوط (Fonts)

- خاصية `font-family`: تحدد نوع الخط.

  p { font-family: "Arial", sans-serif; } 

- خاصية `font-size`: تحدد حجم الخط.

  h1 { font-size: 24px; } 

- خاصية `font-weight`: تحدد سُمك الخط.

  strong { font-weight: bold; }

3. التباعد والهوامش (padding and Margin)

- خاصية `margin`: تحدد المسافة حول العناصر.

  p { margin: 20px; }

- خاصية `padding`: تحدد المسافة بين حدود العنصر ومحتواه.

  div { padding: 10px; }

4. الحدود (Border)

- خاصية `border`: تحدد الحدود حول العنصر. 

  img { border: 2px solid black; }

5. التخطيط (Layout)

- خاصية `display`: تحدد كيفية عرض العنصر (مثل `block`, `inline`, `flex`).

  div { display: flex; } 

- خاصية `position`: تحدد كيفية تموضع العنصر (مثل `relative`, `absolute`, `fixed`).

  .sticky { position: fixed; top: 0; }

- خاصية `flex-direction`: تحدد اتجاه العناصر داخل حاوية `flex`.

  .container { display: flex; flex-direction: row-reverse; }

6. التحويلات (Transformations) والانتقالات (Transitions)

- خاصية `transform`: تسمح لنا بتحويل شكل العناصر في الفضاء ثنائي أو ثلاثي الأبعاد، وبالتالي يمكن نقل العنصر أو تدويره أو إعادة تحجيمه (مثل `rotate`, `scale`).

  img:hover { transform: rotate(45deg); }

- خاصية `transition`: تضيف تأثير انتقالي.

  div { transition: all 0.5s ease; }

  div:hover { background-color: green; }

7. الاستجابة (media@)

- استخدام `@media` queries للأحداث تغيير علي تصميم العناصر بناءً على شروط معينة (مثل عرض الشاشة).

@media (max-width: 600px) {

body { background-color: lavender; }

}  

CSS تمكن المطورين من تخصيص مظهر المواقع بدقة، وتحسين تجربة المستخدم من خلال التصاميم المرنة والمستجيبة. استخدام CSS بطريقة فعالة يتطلب فهمًا جيدًا لهذه الخصائص والمزيد.

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

الحركة والرسوم المتحركة (Animations)

- خاصية `@keyframes`: تُستخدم لإنشاء رسوم متحركة.

  @keyframes example {

    from {background-color: red;}

    to {background-color: yellow;}

  }

  div {

    animation-name: example;

    animation-duration: 4s;

  }

الظلال (Shadows)

- خاصية `box-shadow`: تضيف ظلًا للعناصر.

  div { box-shadow: 10px 10px 5px grey; } 

- خاصية `text-shadow`: تضيف ظلًا للنص.

  h1 { text-shadow: 2px 2px red; }

التدرجات (Gradients)

- التدرج الخطي (Linear Gradient):

  background: linear-gradient(direction, color-stop1, color-stop2, ...);

  body { background: linear-gradient(to right, red , yellow); }

- التدرج الدائري (Radial Gradient):

  background: radial-gradient(shape size at position, start-color, ..., last-color);

  body { background: radial-gradient(circle, red, yellow, green); }

الشبكات (Grids)

- خاصية `display: grid;`: تُستخدم لإنشاء تصميمات شبكية معقدة بسهولة.

  .container {

    display: grid;

    grid-template-columns: auto auto auto;

    gap: 10px;

  }

  .item {

    background-color: rgba(255, 255, 255, 0.8);

    padding: 20px;

    text-align: center;

  }

المرونة (Flexibility)

- خاصية `flex`: تُستخدم داخل حاويات الفلكس لتحديد كيف ينمو أو ينكمش العنصر.

  .item { flex: 1; }

المتغيرات (Variables)

- إعلان واستخدام المتغيرات:

  :root {

    --main-color: blue;

  }

  body {

    color: var(--main-color);

  }

استخدام الصور والخلفيات

- خاصية `background-image`: لتعيين صورة كخلفية.

  body { background-image: url('image.jpg'); }

الوسائط المتعددة والاستجابة

- استخدام `object-fit` للتحكم في كيفية ملء الصور أو مقاطع الفيديو لعناصرها:

  img { object-fit: cover; }

بالإضافة إلى هذه المفاهيم، من المهم أيضًا فهم كيفية استخدام CSS لإنشاء تصميمات متجاوبة تتكيف مع مختلف أحجام الشاشات والأجهزة، باستخدام `@media` queries ونظام الشبكات والفلكسبوكس. الاستمرار في التعلم والتجربة مع CSS سيفتح إمكانيات لا نهائية لتصميم مواقع ويب جذابة وديناميكية.

موقع w3schools

اذا كنت تبحث عن شرح مبسط يجعلك تفهم بسهولة ، ف إليك موقع w3schools ، فبخلاف شرحه المبسط فهو يعطيك اكثر من مثال لتفهم ، و يوفر لك لغات اخري مثل javascript و php و غيرها.

و يتوفراالشرح باللغة الإنجليزية فقط إليك رابط الموقع w3school.com

elzero web school 

 من بين المواقع التي توفر شرحا باللغة العربية و تحديداً باللهجه المصرية ، كما يوفر شرحا يمكنك مشاهدته من خلال الفيديو elzero school. 

تحميل كتاب تعلم HTML و CSS

كتاب ممتاز ويشمل أيضاً الربط بين HTML و CSS، وشرح مبسط ومضح بالامثلة.

قم بتحميل كتاب css3 بالعربي مجانا من هنا أو هذا الكتاب 

 أو تابع الفيديو :