مرحبًا، سنتحدث اليوم عن المحددات المتقدمة. حتى هذه اللحظة، حينما كنا نكتب قواعدنا ، كنا نكتب قواعدنا المتعلقة بنوع معين من العلامات (الشعارات). كنا نقول h1 أو p أو h2. لذا فقد قمنا فقط بالتركيز على شيء واح
يغطي كافة العناصر المختلفة لذاك النوع. ولكن ماذا إذا كنت لا تريد تصميم كافة الروابط ،
بل بعضها فقط؟ أو إذا كنت لا تريد تصميم جميع قوائمك، وتريد فقط تصميم بعضها؟ حسنًا ، سنتحدث الآن عن هذه الأنواع
من المحددات المتقدمة التي سيتيح لنا القيا بذلك بالضبط. سيعطيك CSS العديد من الخيارات
التي سأحاول في هذه المحاضرة أن أغطي أكبر عدد منها بقدر المستطاع،
ولكن لا يزال الأمر متروكًا لك للمضي قدمًاو البحث عن المزيد بنفسك عندما تحتاجها. لذا فلنبدأ بمحددات CSS التي تتبع نهج DOM. إذا كنت تتذكر نموذج كائن المستند فهو تلك الطريقة التي يقسم بها المتصفح بالفعل صفحتك
إلى بنية تشبه الشجرة. وبهذه الطريقة ، يتعرف المتصفح بالفعل
"إذا كانت هناك فقرة تأتي مباشرة بعد علامة h1 أو إذا كانت فقرتان" تندرجان في نفس القسم. سنستخدم ذلك لتصميم فقط أجزاء معينة من صفحتك. لذا فإن المحددات الفرعية هي وسيلة للقول ، مهلاً ،
إذا كنت داخل علامة تنقل، أريدك أن تقوم بتصميم جميع الروابط الموجودة داخل علامة التنقل. بدلاً من القيام بتصميم كل منهم ،قم فقط بصميم هؤلاء. إذا كنت تريد أن تكون أكثر تحديدًا،
يمكنك استخدام المحددات الفرعية. هذه القاعدة متشابهة جدا إلا أنها تقول، ينبغي أن تكون كافة هذا الروابط مندرجة مباشرة من رابط التنقل. إذا كان لديك فقرة هناك
و لديك بعض الروابط في مكان اّخر، فتجاهل ذلك. حيث أنها يجب أن تكون مباشرة تحت بعضها البعض. الأخير هو العنصر المجاور. غير أن هذا هو ليس النوع الذي أستخدمه بالفعل كثيرًا
في الترميز الخاص بي ، لكنني أردت أن أخبرك عنه لأن هناك فرصة جيدة حقًا ستفيدك إذا كنت تبحث في ترميز أشخاص آخرين. إن الطريقة التي يعمل العنصر المجاور
هي أن العناصر يجب أن تكون ما نطلق عليه "في نفس المستوى" وتتبع بعضها لبعض. لذلك إذا كان لديك قسم يحتوي على h1 و ثم قائمة مرتبة ، سيكونوا متماثلين. إذا كان لديك h1 وبعض الأشياء الأخرى وكانت تلك القائمة المرتبة داخل فقرة ، فقد لا يتم العمل بتلك الطريقة. ثم سنتحدث بعد عن ما نطلق عليه محددات الهوية. تستخدم المعرفات لتحديد عنصر واحد في DOM. طريقة عمل هذه المعرفات هي أنك ستدخل، و أو قد تذكر شيئًا في HTML الخاص بك في السطور
مثل المعرف id يساوي العنوان header ، أو أن المعرف id يساوى التذييل،
هى واحدة من الأشياء التى اعتادوا على استخدامها كثيرًا. ثم في ورقة التصميم الخاصة بك، باستخدام رمز الجنيه، يمكنك تحديد ما تريد تصميمه. والاّن، هناك حركة صغيرة ، لكن تكبر شيئًا فشيئًا، لخروج المعرف من CSS. يقولون أنه لا جدوى من استخدام ذلك لأن الكثير من الأشخاص يستخدمون هذا المعرف حقًا
مع JavaScript وأشياء من هذا القبيل. لكن مرة أخرى، سترون هذا كثيرًا، لذا أريد أن اقدم لكم ذلك. لذا دعونا نرى بالفعل مثالاً سريعًا هنا فقط على الشاشة
يوضح كيف يتم ذلك. في ملق HTML الخاص بي،
سأمضي قدمًا وأضع مصدري وعلامة بديلة، ولكن أيضًا المعرف = "mainLogo". ثم، في ورقة التصميم الخاصة بي،
باستخدام الرمز # مع اسم المعرف، سيتعرف المتصفح،عندما أرى إحدى هذه الصور، أريد التأكد من إضافة هذه الإطارات و هذا الهامش. إن محددات الفئة تشبه المعرفات،
لكن الفرق بينهما هو أن هذه الفئات يمكن يمكن أن تنطبق على مجموعة من العناصر،
وليس فقط عنصر محدد في DOM. لذا، فكر في الصور المصغرة أو وسائط الرموز الاجتماعية. هذه هى الفكرة، كما تعلمون، والتي تكمن في
أن أكون قادرًا على تصميم مجموعة كبيرة من الأشياء كلها بنفس الطريقة ، لكني لا أريد بالضرورة أن أضعهم جميعًا بهذه الطريقة. لا تريد أن تكون كافة صورك مصغرة، لكنك تريد أن يكون الكثير منهم هكذا. قد تكتب هذا الرمز بطريقة مشابهة جدًا. هنا في HTML الخاص بي،
لدي class = "thumb" ، class = "thumb" ، class="thumb". وفي ملف CSS الخاص بي، بدلاً من استخدام #
يتعين عليك التأكد من استخدام المسافة أو نقطة، بجانب اسم الفصل، وبعد ذلك يمكنك إعطائها أي قاعدة. وبهذه الطريقة، ستتحرك الصفحة وستدرك أنه بالإضافة إلى أي تصميم قمت بوضعه للتو على الصور،
فأنت تريد أيضًا هذا النمط من الصور المصغرة. لذا فقط من أجل محاولة مساعدتك
على فهم الأمر بشكل أكثر وضوحًا، ما الفرق بين استخدام الفئات والمعرفات؟ حسنًا، في البداية، عليك أن تتأكد من أنك على دراية ببناء الجملة. فالمسافة مخصصة للفصول و علامة الجنيه مخصصة للمعرفات. لا يمكنك العبث بهذا، لأن المتصفح لن يقوم بإصلاحه لك إذا وضعت شيئًا خاطئًا أمام اسم الفئة الخاصة بك أو اسم معرفك. عليك أن تتذكر أنه يمكن استخدام الفئات عدة مرات. من المنطقي أن ترى في برمجيات HTML الخاص بك
class = "thumb"، class = "thumb"، class = "thumb" حيث أنه ليس من المفترض أن تكون
جزءًا محددًا من الصفحة. باستخدام المعرفات ،
هناك شئ فريد، ينبغي أن ترى فقط المعرف id يساوي ، على سبيل المثال ، header العنوان ،
والذي لم نستخدمه حتى ولو لمرة واحدة. يجب أن ترى فقط = id = "القسم الرئيسي" مرة واحدة. لذ فلنفكر مرة أخرى في الصور و أشرطة التنقل. ومن الشائع جدًا أنك تريد تنسيق العديد من الصور، ولكن ليس كلفة الصور بالطريقة نفسها. كما يمكنك استخدام الفئات لذلك. في المكان الذي يمكنك فيه استخدام المعرّف ،
أنا متأكد من أنك كنت في بعض الأماكن والتي التي تمكنك من رؤية شريط التنقل
على صفحة الويب، والصفحة التي تتصفحها حاليًا تم فقط تصميمها
بشكل مختلف بعض الشئ. وهذا منطقي حيث أنك لا يمكنك التواجد
إلا في صفحة واحدة في كل مرة، ولهذا السبب قد تختار استخدام المعرف. لذلك دعونا نمضي قدمًا ونستعرض مثالاً سريعًا
باستخدام شريط التنقل هذا. هذا نموذج لملف HTML، حيث كل ما فعلته هو أنني وضعت أربعة روابط
لا تحرك حتى لأي مكان. لقد قمت فقط بالتعليق على ورقة التصميم حتى تتمكن من رؤية الشكل
الذي ستبدو عليه دون أي تصميم. يمكنك أن ترى، لقد حصلت على منزلي ،
اهتماماتي، سيرتي الذاتية، هواياتي، و لدي رابط إضافي واحد في الأسفل
تعاملت معه بشكل سئ جدًا هنا. لذا دعونا نمضِ قدمًا ونحاول إضافة بعض التصميمات
باستخدام هذه المحددات المتقدمة. لنذهب الى هنا يمكنك أن ترى أنني في واقع الأمر
استخدمت العنصر الفرعي، فهو مجرد نوع من أنواع جميع الروابط
الموجودة في شريط التنقل، أريد أن بالتصميم بشكل مختلف،
أريد أن أمنحهم لون خلفية مختلف، وعرضًا مختلفًا، وأشياءً من هذا القبيل. فضلاً عن أنني أريد أن أصنع أي شيء مختلف تمامًا
عن ما هو عليه الاّن. مختلف عن أي رابط آخر أو أي شيء آخر
رأيناه بهذه الطريقة. لذا فلنمضي قدمًا
ونحذف التعليق الموجود على ورقة التصميم.. احفظه اذهب من هذا إلى هذا. وسيمكنك أن ترى أنه قد تم تصميم الروابط الموجودة
داخل شريط التنقل الخاص بي فقط. وبقيت هذه على حالها. وفيما يتعلق بالتي فيها class الفئة = الحالي"current"
فهي تبدو مختلفة عن الآخرين. لذلك فمن السهل حقًا استخدام هذه الأشياء،
و ما عليك سوى معرفة المزيد عنها. كلما أصبحت صفحاتك متقدمة بشكل أكثر، كلما رغبت في تضييق نطاق بعض القواعد. ونريد فقط تطبيقها على أشياء معينة. وإحدى الرموز التي يمكنك استخدامها هي النقطة. لذا ففي ورقة التصميم الخاصة بك ، سيكون لديك بالفعل p.main. ويعني هذا أن تذهب وتجد جميع الفقرات
التي تستخدم الفئات الأساسية. أو قد يكون لديك عنوان img.special. هذا يعني العثور على كافة الصور
التي لها سمة كلاسيكية خاصة تتعلق بالجزء العلوي للصفحة. إنها مجرد طريقة لتقليل ما يتم تصميمه. من ناحية أخرى، يمكنك أيضًا توسيع النطاق، ما نسميه. لذا، لنفترض أن هناك نوعًا من التصميم الذي تريد تطبيقه على كل من الجزء العلوي (الرأس) والتذييل أو على الأقسام والمقالات. فهذه ليست مشكله. ما تفعله هو مجرد كتابة العنصر، وقمت بتضمين فاصلة هناك للإشارة لذلك. لذا فعليكم بمراجعة سريعة. وهذا شيء يحدث من قبل. ينبغي عليك التفكير فيما يحدث
عندما تكون هناك قواعد متعددة لنفس المحدد. لذلك قد يكون هذا هنا مع الفقرة التي لها خصائص معينة تريد مشاركتها بين الفقرات h1 و المعرف الرئيسي و والفئة الخاصة. لكن لاحقًا، إذا كنت ترغب في الحصول على تصميم إضافي لفقرة ما، طالما أنك وضعت ذلك في مكان ما أدناه، فسيتم تجاوزه و دمجه مع أي شيء في الأعلى. لذلك، ما لم يكن للقاعدة علامة تعجب مهمة بعدها،
فإنها تستخدم دائمًا اّخر ما شهدته، إلى جانب العلامة السابقة دون حدوث أى تعارض. بالإضافة إلى محددات العناصر و محددات علاقة DOM المختلفة، لدينا أيضًا بعض الأشياء الأخرى
التي أريد التحدث عنه باختصار. الأول هو المحدد العام وهو النجمة أو شفت ثمانية على لوحة المفاتيح. ما يقوم به هذا، أنه سيقوم بتطبيق تصميمك على كل عنصر في الصفحة. الأمر غريب للغاية. لن أفعل ذلك. سأدعك تفعل ذلك،
لكن امضي قدمًا و ضع نجمة، ثم التصميم، ربما الإطار، حول كل عنصر. سيؤثر على كل شئ في صفحتك. أحيانًا يكون تصحيح الأخطاء أمر جيد. الخيار التالي الذي قد ترغب في التفكير في استخدامه هو ما نسميه محددات السمات. فبدلاً من الاستمرار في استخدام العلامات،
يمكنك متابعة السمات التي تدخل داخل العلامات. لذا في هذه الحالة ،
ستمضي قدمًا وتقوم بتصميم كل رابط في المكان الذي تجد فيه href = "info.html"،
وسأقدم مثالًا سريعًا على ذلك في ثانية واحدة. ,لكن قبل القيام بذلك ، أردت أن أذكر شيئين آخرين سننظر إليهما لاحقًا، وهما الفئات زائفة pseudo-classes
و العناصر الزائفة pseudo-elements. وهناك فقط مستوى اّخر
للتميز فقط بين أشياء محددة تريد تصميمها في صفحتك لكن أولاً، لنمضي قدمًا
وننظر في استخدام محددات السمات هذه. لذا لذا فالطريقة التي تعمل بها محددات السمات
هي أنها تبحث في DOM عن العناصر التي لها السمة التي تبحث عنها. فمثلاً، على سبيل المثال ،
قد ترغب في البحث عن جميع الصور التي تستخدم ملفات gif أو جميع الصور التي تحتوي على نص بديل فارغ أو ربما جميع الروابط التي تنتقل إلى مواقع حكومية
أو مواقع غير ربحية أو مواقع تعليمية. ومن السهل حقًا أن نجد تلك الأشياء
والمضي قدمًا ونقوم بتصميمها شكل مختلف بعض الشئ. والطريقة التي نفعل بها ذلك
هى أننا نستخدم عوامل التشغيل المطابقة الأجزاء المختلفة من النص البديل الذي تبحث عنه. لذا هنا ، سوف يتطابق مع البداية. لذلك في هذه الحالة،
سيتطابق مع كل الروابط التي تبدأ بـ http: // umich، بصرف النظر عن نهايتها. وبالنسبة للعلامة التالية التي تحمل علامة الدولار
سيحدث تطابق في النهاية تمامًا. سيتم العثور على كل ملف ينتهي بـ .png. وليدنا أيضًا البديل، حيث تمضي قدمًا وتقول إذا رأيت أوميش في أى جزء من أجزاء أى مرجع على الإطلاق، قl
بتطبيق هذه القاعدة. إذًا ما سننظر إليه هو أننا سنلقي نظرة على ملف يحتوي على روابط مختلفة ولكل منها نوعًا مختلفًا من الامتدادات
نريد تصميمه بشكل مختلف. حسنًا فما لدي هنا هو مجرد قائمة روابط. لا توجد أى فئات. ليس هناك شئ خاص في هذا،
حيث يذهب إلى مواقع جامعات مختلفة، ومنظمات، ومواقع حكومية،
وإذا أمعنت النظر، بشكل افتراضي، ستظهر كروابطك الزرقاء التقليدية
مع وجود خط تحت النص الموجود هناك. لكن ما أريد فعله
هو أنني أريد المضي قدمًا وأقول ، أتعرف؟ ما كل هذه الروابط التي تنتهى ب org؟ اجعل لهم لونًا واحدًا. كل ما هو .edu له لون ولون آخر وكل ما ينتهي بـ .gov ، لون ثالث. لنر كيف يبدو ذلك. هنا ، يمكنك أن ترى أنه بدون أن أضطر إلى وضع أي معلومات
داخل العلامات نفسها، قام المتصفح بتلوينها باللون المناسب. حسنًا ، لقد قمت بتغطية الكثير من الأشياء للتو
في فيديو قصير جدًا. عليك أن تدرك أن هذه الأفكار ستتضافر معًا. ستستخدم الفئات، ستستخدم المعرفات، وستستخدم السمات. والشيء الهام الذي أريدك أن تعرفه هو أنه عندما تضيف كل هذه الأشياء معًا ،وترتيبك للفصول، و ومعرفات أخرى في نصك، ليس أمرًا هامًا. لا يهم إذا كان لديك ظلاً خاصًا مبكرًا
أو تغيير موضع الجملة. فما يهم حقًا هو الترتيب الذي تكتب به القواعد الخاصة بك
في ورقة التصميم الخاصة بك. ستبدأ المتصفحات دائمًا في البدء إلى الأعلى،
وتقوم بتطبيق كل قاعدة. والآن الخبر السار في هذه المحاضرة هو أنني أريدك أن تدرك أنه مع قوة الفئات والمعرفات وورقة التصميم المتتالية هذه، فهذا يعني أنه يمكنك استخدام أوراق تصميم من أشخاص آخرين
لتصميم البرمجيات الخاصة بك. ويمكنك فقط إضافة فئة قد تغير سمة واحدة صغيرة ربما لم تعجبك. يمكنك تجاوز أوراق التصميم هذه وجعلها خاصة بك. فقط تأكد من ربط ورقة التصميم الخاصة بك أخيرًا. حسنًا ، لقد قمنا بتعطية الكثير، و أتمنى ألا أكون أرهقتن بالفيديو. أريدك فقط أن تتذكر أنه عندما نقوم بصياغة المحددات و أن ما سوف أقوم به في هذا الفصل هو أننا عادة ما نقوم بإضافتها لتضييق نطاق تطبيق القواعد. لذا فلا ينبغي عليك تصميم كل شئ. فنحن نصمم فقط أشياء معينة. يتم استخدام المعرف
لتحديد عنصر معين في الصفحة، ويتم استخدام الفئات لربط العناصر
التي تميل حقًا إلى الحصول على نفس المظهر. لذا فأنا أعلم بينما نمضي قدمًا سويًا،
سأقدم يعض نماذج البرمجيات. أتمنى أن تتوقف ،
وتحضر الحاسوب المحمول الخاص بك، وأن تقوم بالبرمجة معي حقًا
لمعرفة مدى تأثير هذه الأشياء المختلفة. شكرًا.