albashmoparmeg.com

اتعلم البرمجة صح وبسهولة وباللغة العربية مع موقع الباشمبرمج

الكورس
Advertisements

HTML Styles | In Arabic

فى هذا الفصل HTML Styles سوف تتعلم كيفية تصميم وتنسيق عناصر لغة HTML بالطريقة الصحيحة لتحسين المظهر الخارجى لصفحة الويب.

 

HTML Styles

 

الـ Styles في HTML هي في الأساس قواعد تصف كيفية تقديم المستند في المستعرض (من حيث المظهر الخارجى). فى الواقع لغة HTML محدوده للغاية عندما يتعلق الأمر بعرض صفحة الويب.

لذلك تم تقديم CSS في ديسمبر 1996 من قبل اتحاد شبكة الويب العالمية (W3C) لتوفير طريقة أفضل لتصميم وتنسيق عناصر HTML.

عن طريق استخدام CSS يمكنك التحكم في:

  • لون وحجم وشكل ومكان النص.
  • التباعد بين الفقرات.
  • كيفية تحديد حجم الأعمدة وتصميمها؟
  • تحديد صور وألوان الخلفية.
  • التغيرات في العرض للأجهزة المختلفة وأحجام الشاشة بالإضافة إلى مجموعة متنوعة من التأثيرات الأخرى لصفحات الويب الخاصة بك. والكثير من خصائص التصميم.

 

ولمعرفة الفرق بين إستخدامك/عدم إستخدامك لـ CSS، إنظر للصور التوضيحية التاليه:

 

صفحة ويب بدون إستخدام CSS

 

صفحة ويب بإستخدام CSS

 

الأن! أظن إنك عرفت وفهمت أهمية إستخدام الأنماط (Styles) أو CSS على عناصر لغة HTML.

 

كيفية إضافة style لعناصر HTML؟

 

هناك 3 طرق لإضافة الـ styles أو كود CSS إلى أى عنصر من عناصر HTML، وهم:

  1. Inline (مُضمن): وهو كتابة أكواد الـ CSS داخل فتحة عنصر HTML، عن طريق سمة style.
  2. Internal (داخلي): وهو كتابة أكواد الـ CSS داخل عنصر الـ <style>.
  3. External (خارجي): وهو كتابة أكواد الـ CSS فى ملف style الخارجى، ويتم تضمين هذا الملف فى مستند HTML عن طريق عنصر <link> داخل عنصر <head>.

 

Types of adding css style - الباشمبرمج
Advertisements

 

طرق إضافة CSS إلى صفحة الويب بتنسيق HTML

 

Inline Style .1

 

فى النمط/التصميم المضمن Inline Style، نقوم بكتابة خصائص CSS فى وسم الفتح مباشرًا بإستخدام سمة style (تحتوي السمة style على إعلانات أنماط CSS التى سيتم تطبيقها على العنصر). يتم تمرير CSS كسلسلة من الأزواج (;property: value).

لتغيير لون عنوان h1 و فقرة p على سبيل المثال، فيمكننا كتابة:

<h1 style="color: blue;">HTML Styles Lesson</h1>
<p style="color: red;">You must use styles to improve your website!</p>

HTML Styles Lesson

You must use styles to improve your website!

توضيح زوج الـ (;property: value):

propertyهي خاصية الـ CSS التى تشير إلى تنسيق مُعين للعنصر الذي تريده، على سبيل المثال (اللون – الخط – العرض – الارتفاع – …إلخ).
valueهي قيمة الخاصية. كما قٌمنا بإضافة القيمة “blue” و “red” للخاصية color فى المثال السابق.

يتم فصل كل زوج من (;property: value) بفاصلة منقوطة (؛).

لا يٌنصح بإستخدام طريقة الـ Inline لتنسيق العناصر لذلك حاول أن تتجنبه، ومن الأفضل إستخدام الملفات الخارجية المنفصلة (أى طريقة الـ External).

 

Internal Style .2

 

فى النمط/التصميم الداخلى Internal Style، نقوم بإستخدام وسم <style> لكتابة جميع خصائص CSS المتعلقة بتصميم عناصر المستند/صفحة الويب.

يتم إضافة وسم <style> داخل وسم الـ <head> الخاص بمستند الـ HTML. وأعلم أن النمط/التصميم الداخلى Internal Style يؤثر على المستند المٌضمّن فيه فقط. 

لإضافة لون (خلفية-نص) جسم الصفحة body على سبيل المثال، فيمكننا كتابة:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>HTML Styles</title>

        <style>
            body {
                background-color: blue;
                color: white;
            }
        </style>

    </head>
    <body>
        <h1>Internal Style</h1>
        <p>You must add <style> tag into <head> tag.</p>
    </body>
</html>

Internal Style

You must add <style> tag into <head> tag.

فى المثال السابق:

  • body: هو المحدد Selector أو العنصر الذى سيتم تنسيقة وإعطاءة خصائص الـ CSS.
  • background-color: blue / color:white: يُسمى بـ CSS declaration (أى إعلان CSS ) ويتكون هذا الإعلان من زوج (;property: value).
  •  background-color / color: هى الخاصية التى سيتم تطبيقها على العنصر.
  • blue / white: هى قيمة خاصية الـ color و background-color.

 

 

External Style .3

 

فى النمط/التصميم الخارجى External Style، نقوم بإنشاء ملف style خارجى منفصلُا تمامًا بإمتداد css. (على سبيل المثال style.css) فى هذا الملف يمكنك كتابة جميع خصائص CSS به.

ثم بعد ذلك يجب عليك إستدعائه فى مستند/مستندات HTML عن طريق إضافة وسم <link> داخل وسم الـ <head>.

على سبيل المثال (لإضافة لون (خلفية-نص) جسم الصفحة body باستخدام ملف CSS خارجى ، ماذا نفعل؟):

 

أولاً: سنضيف جميع خصائص CSS التى نريدها داخل ملف CSS منفصل (وليكن ملف بإسم style.css)، كالتالى:

File: style.css

body {
    background-color: blue;
    color: white;
}

ثانيًا: نربط ملف style.css السابق بمستند HTML (وليكن مستند بإسم index.html)، كالتالى:

File: index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>HTML Styles</title>

        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <h1>Internal Style</h1>
        <p>You must add <style> tag into <head> tag.</p>
    </body>
</html>

Internal Style

You must add <style> tag into <head> tag.

فى المثال السابق:

  1. تم إنشاء ملف CSS بإسم style.css، وقمنا بوضع خصائص CSS به.
  2. ثم أنشأنا مستند HTML بإسم index.html. ووضعنا عناصر HTML به.
  3. استدعينا ملف style.css بداخل مستند index.html عن طريق وسم <link>؛ للربط بين الملفين.

 

العنصرالوصف
<link>يحدد الوسم <link> العلاقة بين المستند الحالي ومصدر خارجي. ولكن يتم استخدامه بشكل شائع في ملف HTML لإخبار متصفح أين يوجد ملف الـ CSS لتنسيق وتصميم الصفحة.
عنصر فارغ (أى أنه لا يحتاج إلى قفلة وسم)، ويُكتب داخل وسم الـ <head>.

يجب أن تستخدم سمتين معه وهم:
1. rel: هذه السمة تُحدد العلاقة بين صفحة HTML والملف الذي يرتبط به (القيمة يجب أن تكون stylesheet عند ربط ملف CSS).
2. href: هذه السمة تٌحدد المسار إلى ملف CSS (أى مكان وجود ملف CSS الخارجى).
Advertisements

 

أمثلة – HTML Styles

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>HTML Styles</title>

        <style>
            body {
                width: 100%;
            }

            div {
                background-color: #444;
                color: white;
            }
        </style>

    </head>
    <body>
        <div>
            <h2>Today Message</h2>
            <p>You Are Amazing Programmer!</p>
        </div>
    </body>
</html>

Today Message

You Are Amazing Programmer!

 

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>HTML Styles</title>

        <style>
            body {
                width: 100%;
                font-family: Arial, Tahoma;
            }

            div {
                background-color: #444;
                color: #fff;
                padding: 5px;
            }

            p {
                font-size: 17px;
                font-weight: bold;
            }
        </style>

    </head>
    <body>
        <div>
            <h2>Today Message</h2>
            <p>You Are Amazing Programmer!</p>
        </div>
    </body>
</html>

Today Message

You Are Amazing Programmer!

 

CSS Properties

 

توضيح إستخدامات بعض خصائص CSS المذكورة فى الأمثلة السابقة:

الخاصيةالإستخدام
colorتُستخدم لتحديد لون النص.
background-colorتُستخدم لتحديد لون الخلفية.
font-size تُستخدم لتحديد حجم الخط.
font-weight تُستخدم لتحديد سُمك الخط.
font-family تُستخدم لتحديد نوع الخطوط.

لا تَشغل بالك أبدًا بالتنسيقات وخصائص CSS خُذ فكرة فقط، وهتتعلم كل شىء بالتفصيل فى سلسلة CSS الخاصة بنا: CSS Tutorial.

 

 

قَيم نفسك – Mini quiz


قُم بإجراء هذا الإختبار القصير على درس “HTML Styles” لمعرفة مدى فهمك وإستيعابك للمعلومات السابقة، ولتثبيت المعلومات.


إجراء الإختبار
HTML Tags Reference
HTML Code Examples
الإبلاغ عن خطأ

الإبلاغ عن خطأ

×

إذا وجد خطأ وتريد الإبلاغ عن هذا الخطأ، أو إذا كنت تريد تقديم اقتراح على شىء معين، فلا تتردد في إرسال بريد إلكتروني إلينا:

info@albashmoparmeg.com

شكرًا لك على مساعدتك لنا!

Advertisements