تعرف على كيفية إنشاء موقع الويب الخاص بك باستخدام HTML5 و CSS3


الدرس: وضع كود CSS في مكانه


الصفحة السابقة

بعد أن أمضيت الجزء الأول من الدورة التدريبية وهو يعمل فقط على HTML ، سنكتشف الآن CSS التي تركتها جانبا عمدا . CSS ليس أكثر تعقيدًا من HTML لكنها تأتي كتكملة لمساعدتك في تشكيل صفحة الويب الخاصة بك. في هذا الفصل الأول حول CSS ، سنرى نظريا CSS: ما هي؟ كيف تبدو؟ أين نكتب كود CSS؟ هذه الجوانب النظرية ليست معقدة للغاية ولكن يجب أن تعرفها لأنها أساس CSS. هذا هو الشيء الوحيد الذي سأطلب منك حفظه في CSS ، ويمكنك العثور على الباقي في المذكرة المرفقة. هيا بنا، أرى أنك تحترق صبرا !

القصة الصغيرة ل CSS


لقد حذرتك من بداية هذه الدورة: سنتعلم لغتين. لقد بدأنا بالفعل اكتشاف HTML ، على الرغم من أنه لا يزال هناك الكثير من الأشياء التي يجب تعلمها (سنعود في بضعة فصول). من ناحية أخرى ، حان الوقت للتركيز على CSS. (Cascading Style Sheets) CSSهي لغة أخرى تكمل HTML. هل تتذكر دورها؟ إدارة تخطيط و تزيين موقعك.

تذكير: فيما يصلح CSS؟

CSS؟ هو الذي يسمح لك باختيار لون النص الخاص بك. يسمح لك بتحديد الخط المستخدم على موقعك. هو الذي يحدد حجم النص ، الحدود ، الخلفية ... وأيضًا ، هو الذي يقوم بتصميم موقعك. ستكون قادرًا على القول: أريد أن تكون قائمتي على اليسار وأن تشغل هذا العرض ، بحيث يكون رأس موقعي مثبتًا في الجزء العلوي وأن يكون مرئيًا دائمًا ، إلخ. تذكر هذه المقارنة الصغيرة التي رأيناها في الفصل الأول (الشكل التالي).

css

بفضل HTML ، تمكنا من كتابة محتوى موقعنا ولكن هذا عمل خشن. يكمل CSS هذا الكود لتنسيق كل هذا ومنح المحتوى المظهر الذي تريده.

CSS: البدايات صعبة

يجب أن يكون معروفًا أنه في بداية الويب ، لم يكن CSS موجودًا. في الواقع ، كان هناك في البداية HTML فقط. ولد HTML في عام 1991 و CSS في عام 1996. لذا ، ربما تقول لنفسك: كيف تم التنسيق من عام 1991 إلى عام 1996؟ حسنا ، فقط في HTML! كانت هناك بالفعل علامات HTML مخصصة للتنسيق .

<font color="#aab1c3"> على سبيل المثال ، تستخدم لتحديد لون النص.

ومع ذلك ، بدأت صفحات HTML تصبح معقدة للغاية. كان هناك المزيد والمزيد من العلامات ، وكان مزيجًا سعيدًا من الخلفية والشكل ، مما جعل تحديث صفحات الويب أكثر تعقيدًا. لهذا السبب أنشأنا لغة CSS.

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

CSS :و دعم المتصفحات


مثل HTML ، تطورت CSS كما قلت لك هناك أربعة إصدارات مهمة من CSS:

  • CSS 1 ؛
  • CSS 2.0 ؛
  • CSS 2.1 ؛
  • CSS 3 .

هذه هي متصفحات الويب التي تؤدي المهمة الأكثر تعقيدًا: عليها قراءة كود CSS وفهم كيفية عرض الصفحة.

في أوائل العقد الأول من القرن العشرين ، كان Internet Explorer هو المتصفح الأكثر شيوعًا ولكن إدارته لـ CSS ظلت سيئة لفترة طويلة ( اذا لم نقل سيئة جدا). لقد كانت حقبة الكبيرة من الإصدار 6 (IE6).

منذ ذلك الحين ، وصل العديد من المتصفحات الى تجاوز: Internet Explorer

مثل Mozilla Firefox بالطبع ، وكذلك Google Chrome. هذا و دون الحديث عن نجاح أجهزة Mac و iPhone في متصفح Safari. و هذا ما دفع Microsoft إلى الرد ونشر (بعد فترة طويلة من عدم النشاط) IE 7 ، ثم IE 8 و IE 9 و 10 و 11 ... والآن Edge.

حسنًا ، جيد درس التاريخ الذي قدمته لي لكن فيما سينفعني هذا اليوم؟

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

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

أوصي بشدة أن تضع في مفضلتك موقع www.caniuse.com الذي يقترح جداول توافق وظائف HTML و CSS على مختلف المتصفحات (وعلى إصداراتها المختلفة):

css

أين نكتب الكود CSS؟


لديك الخيار لأنه يمكنك كتابة التعليمات البرمجية بلغة CSS في ثلاثة أماكن مختلفة:

  • في ملف .css( الطريقة الموصى بها أكثر ) ؛
  • في رأس الصفحة في ملف HTML ؛
  • مباشرة في علامات ملف HTML عبر سمة style( الطريقة موصى بها الأقل).

سأقدم هذه الطرق الثلاث ولكن أعلم بالفعل أن الأول ... هو الأفضل.

في ملف .CSS (مستحسن)

كما أخبرتك للتو ، يتم غالبًا كتابة CSS في ملف خاص بلاحقة .cssعلى عكس ملفات HTML التي لها اللاحقة .html هذه هي الطريقة الأكثر عملية ومرنة. هذا يبعدنا عن خلط كل شيء في نفس الملف. سأستخدم هذه التقنية خلال بقية هذه الدورة.

دعنا نبدأ ممارسة ذلك الآن ! سنبدأ من ملف HTML التالي:


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="style.css" />
        <title>اول اختبار ل css </title>
    </head>
    <body dir= "rtl">
        <h1>هذا موقعي الاول</h1> 
        <p>!مرحبا بك في موقعي الخاص </p>
        <p> في هذه الآونة هذا الموقع <em>فارغ تقريبا</em>. انتظر قليلا من فضلك!</p>
    </body>
</html>

ستلاحظ محتويات السطر 5 : هي التي تشير إلى أن ملف HTML هذا مرتبط بملف يسمى style.css و هو المسؤول عن التنسيق.

احفظ هذا الملف باسم (على سبيل المثال page.html). في الوقت الحالي ، لا شيء خاص باستثناء العلامة الجديدة التي أضفناها.

الآن ، أنشئ ملفًا فارغًا جديدًا في محرر النصوص (مثل VS Code) وانسخ هذا الجزء من كود CSS (لا تقلق ، سأشرح ما يعنيه):


    p
    {
        color: blue;
    }

للحصول على تلوين الرمز في VS Code ، احفظ ملفك بالامتداد .css أولاً.

احفظ الملف بإعطائه اسمًا ينتهي بـ .css، مثل style.css. ضع هذا الملف .cssفي نفس المجلد مثل الملف الخاص بك .html. في VS Code ، يجب أن تلاحظ شيئًا مشابهًا للشكل التالي.

css file

في مستكشف الملفات ، يجب أن تراها تظهر جنبًا إلى جنب. على جانب واحد .html، على الجانب الآخر .css، كما في الشكل التالي.

css file

افتح الآن ملفك page.html في متصفحك لاختباره ، كما تفعل عادةً. انظر ، إنه سحر: فقراتك مكتوبة باللون الأزرق ، كما في الشكل التالي!

css html file

لا تستطيع فتح الملف style.cssمباشرة في المتصفح. يجب عليك فتح الملف page.html سيتصل تلقائيًا بالملف style.css

في رأس <HEAD>ملف HTML

هناك طريقة أخرى لاستخدام CSS في ملفات HTML وهي إدراج CSS مباشرة في علامة

&lt;style&gt; داخل الرأس &lt;head&gt;. إليك كيفية الحصول على نفس النتيجة تمامًا باستخدام ملف واحد .html يحتوي على كود CSS الأسطر من 5 إلى 10

css html file

اختبر ، و سترى أن النتيجة هي نفسها.

مباشرة في العلامات (غير محبذ)

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

css html file

هذه المرة ، لن يتم تلوين اللون الأزرق إلا في الفقرة الأولى (السطر 9) ، التي تحتوي علامتها على كود CSS ، باللون الأزرق (الشكل التالي).

css html file
أي طريقة سأختار؟

أعتقد أن الطريقة الأولى التي توصي بها أكثر تعقيدًا من الاثنين الأخرين! لماذا تنصحنا بإنشاء ملفين ، كنت جيدًا ، أنا ، بملف واحد فقط .html!

أوصي بشدة بأن تستعمل الطريقة الأولى في العمل لأنها الطريقة التي تستخدمها غالبية مصممي المواقع ... لماذا؟

في الوقت الحالي ، تجري اختباراتك على ملف HTML واحد. ومع ذلك ، سيتألف موقعك في وقت لاحق من عدة صفحات HTML ، وهل نحن متفقون؟

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

css html file

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

css html file

تطبيق نمط: حدد علامة


الآن بعد أن عرفنا مكان وضع كود CSS ، دعونا نلقي نظرة فاحصة على هذا الرمز. أعطيتك ، دون شرح ذلك ، الجزء الأول من كود CSS:


p
{
    color: blue;
}

في كود CSS مثل هذا ، هناك ثلاثة عناصر مختلفة:

  • أسماء العلامات : نكتب أسماء العلامات التي نريد تغيير مظهرها. على سبيل المثال ، إذا كنت أرغب في تغيير مظهر جميع الفقرات <p>، يجب أن أكتب p.
  • خصائص CSS : يتم تخزين "تأثيرات نمط" الصفحة في الخصائص. على سبيل المثال ، هناك خاصية color تسمح بالإشارة إلى لون النص ، font-size مما يجعل من الممكن الإشارة إلى حجم النص ، إلخ. هناك العديد من خصائص CSS ، وكما أخبرتك ، لن أجبرك على معرفتها جميعًا عن ظهر قلب.
  • القيم : لكل خاصية CSS ، يجب تحديد قيمة. على سبيل المثال ، بالنسبة للخاصية color، من الضروري الإشارة إلى اسم اللون. لأجل font-size، عليك أن تشير إلى الحجم الذي تريده ، إلخ.

بشكل تخطيطي ، تبدو ورقة أنماط CSS كما يلي:


Tag1
{
    property1: value1;
    property2: value2;
    property3: value3;
}
Tag2
{
    property1: value1;
    property2: value2;
    property3: value3;
    property4: value4;

}
Tag3
{
    property1: value1;
}


في مقتطف الكود هذا ، ستجد العلامات والخصائص والقيم التي أخبرتك بها للتو.

كما ترى ، نكتب اسم العلامة على سبيل المثال h1 ونفتح الأقواس ، في الداخل ، لوضع الخصائص والقيم التي ن>ريدها. يمكنك وضع العديد من الخصائص كما تريد داخل الأقواس. يتبع كل خاصية النقطتين (:) والقيمة المقابلة. أخيرًا ، ينتهي كل سطر بفاصلة منقوطة (؛).

سوف نعلمك العديد من الخصائص في الفصول التالية. في الوقت الحالي ، في الأمثلة ، سنقوم فقط بتغيير اللون للتدريب.

كود CSS الذي استخدمناه حتى الآن:


p
{
    color: blue;
}

... تعني باللغة العربية : " أريد أن تكون كل فقراتي مكتوبة باللون الأزرق. ". النتيجة واضحة في الشكل التالي.

css html file

حاول تغيير اسم العلامة المعينة بواسطة كود CSS. على سبيل المثال ، إذا كتبت h1، سيتم كتابة العنوان باللون الأزرق. قم بتعديل ملفك style.css مثل هذا:


h1
{
    color: blue;
}

الآن ، افتح صفحة HTML مرة أخرى تذكر ، هذه هي صفحة HTML التي يتم فتحها في المتصفح ، وليس ملف CSS يجب أن ترى عنوانه باللون الأزرق (الشكل التالي)!

css html file

تطبيق نمط على علامات متعددة


لنأخذ كود CSS التالي:


h1
{
    color: blue;
}

em
{
    color: blue;
}

هذا يعني أن عناويننا

<h1> ونصوصنا المهمة <em> يجب أن تُعرض باللون الأزرق. من سلبيات هذه الطريقة، انها تكرر نفس الكود قليلا ، الم تلاحظ ذلك ؟

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


h1,em
{
    color: blue;
}

والنتيجة هي في الشكل التالي.

css html file

وهذا يعني: " أريد نص العناوين

<h1>و النصوص المهمة <em>تكون مكتوبة باللون الأزرق ".

يمكنك تحديد العديد من العلامات التي تريدها.

تعليقات في CSS

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

علاوة على ذلك ، ستدرك أن ملف HTML بشكل عام قصير جدًا وأن ملف CSS طويل بما فيه الكفاية (إذا كان يحتوي على جميع عناصر أنماط موقعك ، فهذا طبيعي بعض الشيء). لاحظ أنه من الممكن إنشاء العديد من ملفات CSS لموقعك إذا كنت تشعر بالحاجة إلى فصل رمز CSS الخاص بك قليلاً (حسب الأقسام المختلفة لموقعك ، على سبيل المثال).

... عما كنا نتحدث بالفعل؟ أوه نعم ، التعليقات في CSS.

لوضع تعليق ، للتعليق ، هذا سهل اكتب /*، متبوعًا بتعليقك ، ثم */ بعد نهاية تعليقك. يمكن كتابة تعليقاتك على سطر واحد أو أكثر. مثلا :


/*
style.css
---------
My first page 
*/
p
{
    color: blue; /* النصوص تكون باللون الأزرق  */
}

من الممكن أن أستخدم التعليقات في كامل هذه الدورة التدريبية ، لأقدم لك تفسيرات داخل الملفات نفسها .css.

تطبيق نمط: CLASS و ID


كيفية التأكد من أن فقرات معينة فقط مكتوبة بطريقة مختلفة؟ يمكننا أن نضع كود CSS في سمة styleعلى العلامة التي نهدف إليها (هذه هي التقنية التي قدمتها لكم سابقًا) ، ولكن كما قلت لك ، لا ينصح بهذا ( من الأفضل استخدام ملف CSS خارجي).

لحل المشكلة ، يمكننا استخدام هذه السمات الخاصة التي تعمل على جميع العلامات :

  • السمة class.
  • السمة id.

دعوني أكون واضحا منذ البداية: سمات classو idتكاد تكون متطابقة. لا يوجد سوى فرق صغير سأكشف عنه أدناه. في الوقت الحالي ، ولكي نكون بسيطين ، سنهتم فقط بالسمة class.

كما أخبرتك للتو ، هذه سمة يمكن وضعها على أي علامة ، وكذلك الفقرة أو الصورة ، إلخ.


<h1 class=""> </h1>
<p class=""> </p>
<img class="" />

نعم ، ولكن ما هي قيمة السمة class؟

في الواقع ، يجب عليك كتابة اسم يعمل على تحديد العلامة. ما تريد ، طالما أن الاسم يبدأ بحرف.

على سبيل المثال ، سوف أقوم بربط الفصل introductionبالفقرة الأولى (السطر 12):


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="style.css" />
        <title>اول اختبار ل css </title>
    </head>
    <body dir="rtl">
        <h1>هذا موقعي الاول</h1> 
        
        <p class="introduction">!مرحبا بك في موقعي الخاص </p>
        <p> في هذه الآونة هذا الموقع <em>فارغ تقريبا</em>. انتظر قليلا من فضلك!</p>
    </body>
</html>

الآن بعد أن تم ذلك ، تم تحديد فقرتك. لها اسم introduction. ستتمكن من إعادة استخدام هذا الاسم في ملف CSS ليقول: " أريد فقط أن يتم عرض العلامات التي لها اسم" introduction "باللون الأزرق ".

للقيام بذلك في CSS ، أدخل اسم class بدءًا من نقطة ، على النحو التالي:


.introduction
{
    color: blue;
}

اختبار النتيجة: introductionسيتم عرض فقرتك فقط باللون الأزرق (الشكل التالي)!

css html file

والسمة idبعد ذلك؟

انها تعمل بنفس الطريقة تمامًا كما class في تفصيل واحد: يمكن استخدامه مرة واحدة فقط في الكود.

ما الفائدة؟ لا يوجد ما يكفي لإخبارك ، سيكون مفيدًا إذا قمت بإجراء JavaScript لاحقًا للتعرف على علامات معينة. علاوة على ذلك ، لقد رأينا بالفعل السمة id في الفصل الخاص بالارتباطات (لعمل نقاط ربط). في الممارسة العملية ، سنضع فقط id العناصر الفريدة في الصفحة ، مثل الشعار:


    <img src="images/logo.png" alt="Logo du site" id="logo">

إذا كنت تستخدم id، عند تحديد خصائصها في ملف CSS ، سيكون من الضروري أن تسبق اسم idعلامة حادة (#):


#logo
{
    /*  ضع خصائص  CSS   هنا  */
}

أنا لا أقترح اختباره ، و هو يعمل تماما مثل class.

إذا كان قد حصل لك بعض الخلط بين class و id فما عليك ان تفهم الا ان علامتين يمكن ان يكون لهما نفس السمة class اما id فلا يجب ان تعطى الا لعلامة واحدة ,يجب أن يكون الاسم فريدًا في صفحة HTML

العلامات الشاملة

ستحتاج في بعض الأحيان إلى تطبيق بعض class أو بعض id لكلمات لم يتم وضعها منذ البداية في علامة .

في الواقع ، المشكلة ان class هي سمة.لذلك لا يمكن استعمالها الا داخل علامة . على سبيل المثال ، اذا أردت تغيير كلمة "مرحبا" فقط في الفقرة التالية:


    <p>صباح الخير , و مرحبا بك في هذا الموقع </p>

سيكون من السهل القيام بذلك إذا كان هناك علامة حول "مرحبا" ولكن للأسف لا يوجد شيء. لحسن الحظ ، اخترعنا ... العلامة التي لا تصلح لاي شيء.

في الواقع ، لقد اخترعنا علامتين شاملتين يطلق عليهما اسمان ، وليس لهما معنى خاص (لا يشيران إلى أن الكلمة مهمة ، على سبيل المثال).هناك فرق صغير (لكن مهم!) بين هاتين العلامتين:

  • <span> </span>: إنها علامة مضمّنة ، أي عبارة عن علامة يتم وضعها داخل فقرة من النص ، لتحديد كلمات معينة فقط.العلامات <strong>و <em>هي من عائلة واحدة. يتم استخدام هذه العلامة في منتصف فقرة وهذا هو الذي سنستخدمه لتلوين "مرحبا".
  • <div> </div>: إنها علامة كتلة ، والتي تحيط كتلة من النص. العلامات <p>، <h1>الخ هم من نفس العائلة. تشتمل هذه العلامات على شيء مشترك: فهي تنشئ "كتلة" جديدة في الصفحة وبالتالي تتسبب بالضرورة في العودة إلى السطر. <div>هي علامة شائعة الاستخدام في بناء التصميم ، كما سنرى لاحقًا.

في الوقت الحالي ، سوف نستخدم العلامة

<span> بدلاً من ذلك . نضعها في مكان "مرحبا " ، نضيف class (و نضع له الاسم الذي نريده) ، وننشئ CSS وانتهى المشكل!


        <p>صباح الخير <span class="hello"> مرحبا </span>, بك في هذا الموقع  </p>


.hello
{
    color: blue;
}

تطبيق نمط: محددات متقدمة


في CSS ، أصعب شيء هو معرفة كيفية استهداف النص الذي تريد تغيير شكله. لاستهداف (نقول "تحديد") عناصر الصفحة المراد تعديلها ، نستخدم ما يسمى المحددات . لقد سبق أن استخدمت القليل منها في هذا الفصل ، دعنا نلخصها للمبتدئين.

المحددات التي تعرفها بالفعل

هذه المحددات ، التي رأيناها سابقًا ، هي الأكثر استخدامًا إلى حد بعيد. عليك أن تعرفهم عن ظهر قلب. لنبدأ بقاعدة القاعدة:


p
{
}

... يعني "أريد أن أتطرق إلى كل الفقرات". بعد ذلك ، يعود الأمر لك لتقول ما تفعله بهذه الفقرات (تكتبها باللون الأزرق ، على سبيل المثال).

رأينا أيضا:


h1, em
{
}

... مما يعني "جميع العناوين وجميع النصوص المهمة". اخترنا اثنين من العلامات في وقت واحد.

وأخيرًا ، رأينا كيفية اختيار علامات محددة أعطينا لها اسمًا بفضل السمات classو id


.class
{
}
#id
{
}

ماذا تعرف انت ؟ هناك العشرات من الطرق الأخرى لاستهداف علامات CSS لن نراهم جميعًا لأن هناك الكثير والبعض الآخر معقد ، ولكن هنا شيء يتيح لك أن تكون أكثر فاعلية في CSS

محددات متقدمة
*: محدد شامل

*
{
}

يختار جميع العلامات دون استثناء. يطلق عليه محدد شامل

AB: علامة موجودة في أخرى

h3 em
{
}

يختار جميع العلامات

<em> داخل علامة <h3>. لاحظ أنه لا توجد فاصلة بين أسماء العلامات اثنين.

نموذج شفرة HTML:


<h3>Title  <em> important text </em></h3>
A + B: علامة تتبع علامة أخرى

h3 + p
{
}

يختار العلامة الأولى

<p>بعد العنوان <h3>.

على سبيل المثال:


<h3>Title</h3>
<p>Paragraph</p>
A [سمة]: علامة لها سمة

a[title]
{
}

لتحديد جميع الروابط

<a>التي لها سمة title.

على سبيل المثال:


 <a href="http://site.com" title="Infobulle">
A [ATTRIBUTE = "VALUE"]: علامة وسمات وقيمة محددة

a[title="Clic here"]
{
}

نفسه ، ولكن يجب أن تحتوي السمة أيضًا على القيمة " " Clic here

على سبيل المثال:


    <a href="http://site.com" title="Clic here">
: A[ATTRIBUT*="VALUE"] علامة وسمات وقيمة

a[title*="here"]
{
}

نفسه ، يجب أن تحتوي السمة هذه المرة على قيمتها "هنا" (بغض النظر عن موضعها).

على سبيل المثال:


    <a href="http://site.com" title="here">
محددات أخرى موجودة!

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

اعلم أننا سنكتشف بعضًا من هؤلاء المحددين الآخرين لاحقًا في هذه الدورة!

الخلاصة


  • CSS هي لغة أخرى تكمل HTML. دورها هو تنسيق صفحة الويب الخاصة بك.
  • يجب أن نكون متيقظين بشأن توافق المتصفحات مع بعض الميزات الحديثة لـ CSS3. عندما لا يعرف المتصفح بيان تنسيق ، فإنه يتجاهل ذلك ببساطة.
  • يمكننا كتابة كود CSS في عدة أماكن مختلفة ، وأكثرها موصى به هو إنشاء ملف منفصل بالملحق .css(مثال :) style.css.
  • في CSS ، نختار الأجزاء من صفحة HTML التي نريد تعديلها ونغير عرضهم التقديمي بخصائص CSS:
  • هناك العديد من الطرق لتحديد جزء الصفحة الذي تريد تنسيقه. على سبيل المثال ، يمكننا أن نهدف إلى:
    • جميع العلامات من نفس النوع ، ببساطة عن طريق كتابة اسمهم ( h1على سبيل المثال) ؛
    • بعض العلامات المحددة ، التي أعطيت أسماء باستخدام السمات classأو id( .nomclasseأو #nomid) ؛
    • فقط العلامات الموجودة داخل العلامات الأخرى ( h3 em).
    • إلخ