Mr. A7meD KaMeL

7- بعض تنسيقات عناصر صفحة الويب HTML Styls

محتوى الموضوع

بسم الله الرحمن الرحيم

المحاضرة السابعة: بعض تنسيقات عناصر صفحة الويب HTML Styles

هناك خاصية تدعى style وتستخدم مع اي عنصر من عناصر الصفحة، حيث يمكن من خلالها تنسيق هذا العنصر – وتستخدم كتابة كما يلي:

<tagname style="property:value;">

حيث ان (tagname) هو وسم العنصر، و (style) هو اسم خاصية تنسيق العنصر، و (property) هي خاصية التنسيق CSS و (value) هي قيمة خاصية التنسيق CSS.

فمثلا: اذا اردنا تنسيق عنصر جسم الصفحة باضافة لون خلفية له – سيكون الكود كما يلي:

<body style="background-color:powderblue;">
     <h1> نص عنوان هنا </h1>
     <p> نص فقرة ما هنا. ونص جمله اخرى. </p>
</body>

حيث انه في المثال السابق تم تنسيق لون خلفية جسم الصفحة (صفحة الويب نفسها) باللون الازرق الخفيف.

background-color => خاصية تنسيق لون الخلفية.
red => قيمة الخاصية وهي اللون الازرق الخفيف.

واذا تم كتابة الكود في المثال السابق كما هو – ستظهر صفحة الويب في المتصفح كما في الشكل التالي:

مثال خاصية تنسيق لون الخلفية لصفحة ويب


وكما انه يمكن تعيين هذا التنسيق على اي عنصر من عناصر الصفحة غير جسم الصفحة.

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

في الكود في المثال السابق: لنضع تنسيقا على العنوان h1 لنجعل لون النص به هو اللون الأزرق مثلا، فسيكون الكود كما يلي:

<body style="background-color:powderblue;">
     <h1 style="color:blue;"> نص عنوان هنا </h1>
     <p> نص فقرة ما هنا. ونص جمله اخرى. </p>
</body>

في هذا الكود تم تنسيق العنوان h1 بخاصية اللون color وهي الخاصية الخاصة بلون النص في العنصر، وتم تعيين قيمة اللون الازرق blue لتلك الخاصية، وستظهر صفحة الويب في المتصفح كما يلي:

مثال خاصية اللون الازرق لرأس العنوان


ومن بعض تلك التنسيقات – تنسيق نوع الخط للنص في العنصر، واسم تلك الخاصية هي font-family ويمكن كتابة القيمة لها Arial او verdana او courier ….. وتلك هي اسماء بعض خطوط الويب التي يتم قراءتها في المتصفح مباشرة.

ولنأخذ مثال عليها:

<body style="background-color:powderblue;">
     <h1 style="color:blue;"> نص عنوان هنا </h1>
     <p style="font-family:courier"> نص فقرة ما هنا. ونص جمله اخرى. </p>
</body>

حيث تم في هذا الكود تعيين نوع الخط الى courier  في الفقرة <p>، وستظهر صفحة الويب كما في الشكل التالي:

مثال خاصية نوع الخط لفقرة في صفحة الويب


وهناك خاصية تنسيق حجم الخط font-size ويمكن استخدامها لتكبير او تصغير حجم النص في عنصر من العناصر.

وقيمة تلك الخاصية تُكتب بالارقام متبوعة بـ وحدة القياس مثل px البكسل.

ويتم كتابتها كما يلي

<p style="font-size:30px;"> هنا نص الفقرة </p>

وقد تكون وحدة القياس المستخدمة هي النسبة المئوية – فتكون كما يلي:

<p style="font-size:150%;"> هنا نص الفقرة </p>

وهناك خاصية محاذاة النص داخل العنصر text-align ويمكن استخدامها لتوسيط النص او لمحاذاته يمينا او يسارا.

وقيمة تلك الخاصية تكون right للمحاذاة يمينا – left للمحاذاة يسارا – center للمحاذاة في المنتصف.

وهناك قيم اخرى سيتم دراستها لاحقا في قسم تعليم تنسيقات صفحة الويب CSS.

وتستخدم تلك الخاصية كما يلي:

<p style="text-align:center;"> هنا نص الفقرة </p>

نهاية المحاضرة

تاريخ الموضوع: أبريل 4, 2017 2:43 م
اسم الكاتب A7meD KaMeL - NiGh10GaLe
نبذة عن الكاتب

مهندس كمبيوتر - مصمم مواقع - مدرب كمبيوتر - مدرب ICDL بمركز التدريب الاداري والاستشارات بكلية التجارة بجامعة المنصورة - مدرب تصميم مواقع - مدرب لكورس الربح من الانترنت.

اترك تعليقاً