css selectors

محمد يونس

التعليقات

1
شرف الدين حفني

عندما تقوم بتطبيق التنسيق إلى html يتم تطبيق هذا التنسيق إلى أي عنصر يندرج تحت الhtml ومن ضمنهم الbody

فمثلاً إن قمت بتنفيذ الشفرة البرمجية التالية 

html {
    color: black;
    background-color: black ;
}

سيتم إعطاء جميع العناصر اللون الأسود والخلفية السوداء إلا العناصر الذي لديهم بالفعل تلك الخاصية

بينما إن قمت بتنفيذ الشفرة التالية

body {
    color: black;
    background-color: red;
}

سيتم إعطاء هذا التنسيق إلي العناصر داخل وسم الbody فقط وسنﻻحظ وجود فراغ بين اللون الأحمر واللون الأبيض بسبب وجود margin إفتراضي للعنصر body

0
محمد يونس

هل هناك عناصر تكتب خارج الbody؟

0
شرف الدين حفني

ﻻ ولكن العنصر body نفسه له خصائص وله merge و padding حيث أنه ﻻ يأخذ ال viewport كاملاً , لذلك يحدث إختﻻف بين تنسيقه وتنسيق وسم الhtml حيث الhtml يأخذ من الviewport نصيب أكبر

1
محمد يونس

ِشكرا

1
Wael Aljamal

إن صفحة الويب بشكل عام لها عنصر جذر واحد root وهو الوسم HTML والذي يحوي بدوره على ابنين هما HEAD الذي يحوي بيانات توصيف للصفحة ويتم تحميل CSS-JS فيه، ولا يتم عرضه أو عرض أي محتوى منه.

ومن ثم العنصر BODY الذي يحوي جميع وسوم الصفحة التي نريد عرضها والتي تحوي بيانات العرض.

منطقة العرض في المتصفح تكون العنصر HTML وفيه العنصر BODY أي كلاهما موجودين للعرض، ويمكن تطبيق تنسيقات مستقله لكل منها (هوامش داخلية وخارجية، حجم الخط وغيره)

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Metadata التوصيف -->
  </head>
  <body>
    <!-- المحتوى -->
  <body>
</html>

ولاحظ أنه يوجد محددي وصول في CSS لاستهداف الصفحة ككل:

:root {
}
html {
}

مع العلم أن root: هو محدد أقوى من HTML

يفضل إعطاء التنسيقات العامة global styles للعنصر HTML لأنه يحل محل body في الوراثة، وخاصة للقيم 

background
bgcolor
marginbottom
marginleft
marginright
margintop
text

أما body يمكننا إعطاء inline-style مباشرة.

نعطي ل HTML لغة الصفحة و font-size  و نتعامل معها مباشرة بواحدة القياس  rem

حيث أن rem = root em وهذه تحل مشكلة استخدام em كوحدة قياس، 

html { font-size: 62.5%; } 
body { font-size: 1.4rem; } /* =14px */
h1   { font-size: 2.4rem; } /* =24px */

اعتبر أن HTML حاوية ل body عند إعطاء التنسيقات.

  • إن أعطيت body لون خلفية بدون إعطاءه ل HTML سيتم تلوين خلفية الصفحة بالكامل ، أما في حال إعطاء لون خلفية ل HTML سيأخذ لون خلفية body المحتوى نفسه فقط
0
محمد يونس

شكرا


اقرأ أيضًا

تطوير الويب

مجتمع خاص بمناقشة وطرح المواضيع والقضايا العامة المتعلقة بتطوير الويب ولغاتها المختلفة

88.7 ألف متابع