ما هو كود CSS وأين يوجد؟ أساسيات CSS للمبتدئين. فوائد استخدام CSS

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

معلومات: ما هو CSS

Cascading Style Sheets = CSS هي لغة مسؤولة عن العرض المرئي للمستندات للمستخدم.

تحت وثيقةسوف نفهم مجموعة المعلومات حول بنية الصفحة الموضحة لغة توصيف النص.

أ أداءإن تقديم المستند إلى المستخدم يعني بدوره تحويله إلى نموذج يسهل فهمه. تم إنشاء متصفحات مثل Firefox أو Chrome أو Internet Explorer لعرض المستندات بشكل مرئي، على سبيل المثال على شاشة الكمبيوتر أو جهاز العرض أو مخرجات الطابعة.

أمثلة

صفحة الموقع التي تقرأها الآن هي مستند. عادةً ما يتم وصف بنية المعلومات التي تراها على الصفحة باستخدام لغة ترميز HTML (لغة ترميز النص التشعبي).
عادةً ما تكون مربعات الحوار في برامج الكمبيوتر، والتي تسمى أيضًا النوافذ المشروطة، مستندات أيضًا. يمكن أيضًا وصف هذه النوافذ باستخدام لغة ترميزية مثل XUL (لغة واجهة مستخدم XML)، والتي يمكن العثور عليها، على سبيل المثال، في بعض تطبيقات Mozilla.

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

المزيد من التفاصيل

المستند ليس مثل الملف. ولكن، مع ذلك، يمكن تخزين المستند في ملف واحد.

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

ستجد المزيد من المعلومات حول المستندات ولغات الترميز في أقسام أخرى من هذا الموقع:

في الجزء الثاني من هذا البرنامج التعليمي، سترى أمثلة على لغات الترميز هذه.

المزيد من التفاصيل

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

يمكن العثور على تعريفات ومصطلحات أخرى متعلقة بـ CSS في تعريفات مواصفات CSS التي أنشأها اتحاد شبكة الويب العالمية (W3C)، وهو المجتمع الدولي الذي يضع معايير الويب المفتوحة.

الإجراء: قم بإنشاء مستند

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

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

ماذا بعد؟

المستند الذي قمت بإنشائه لم يستخدم CSS بعد. في القسم التالي، ستتعلم كيفية استخدام CSS لتصميم مستندك.

مقالة تمهيدية عن CSS، والتي ستتعرف من خلالها على المفاهيم العامة حول ماهية CSS وما هو المطلوب من أجله. دعونا نتعرف بإيجاز على بناء الجملة وقدراته. لنبدأ بالتعريف

1. تعريف CSS

CSS(من "أوراق الأنماط المتتالية" الإنجليزية، أوراق الأنماط المتتالية) - قائمة الأنماط لموقع ويب بتنسيق html

ما هو الاسلوب؟ بشكل تقريبي، الأسلوب هو الشكل الذي يبدو عليه العنصر على الموقع. على سبيل المثال، يمكن كتابة أي نص بحجم 10 بكسل، أو 14 بكسل. يمكنك الكتابة باللون الأسود، أو باللون الأزرق. يمكنك وضع خط تحت/إمالة/الضرب، وما إلى ذلك. كل ما يتعلق بتنسيق النص يتم من خلال CSS.

ولكن هذا ليس سوى جزء صغير من الاحتمالات. CSS مسؤول عن التصور الكامل لجميع علامات HTML. حتى بالنسبة للتغييرات الديناميكية: القوائم المنسدلة، وتسليط الضوء على الروابط عند التمرير.

غالبًا ما تسمى القائمة بجميع الأنماط "ورقة أنماط CSS" في لغة مشرفي المواقع.

2. أهداف وغايات CSS

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

3. بناء جملة CSS (المحددات)

يتم وصف كل خاصية وأسلوب من خلال "المحددات". بناء الجملة الخاص به هو كما يلي

المحدد (السمة: القيمة؛)

محدد- يمكن أن يكون هذا اسم النمط أو العلامة. الأقواس المتعرجة تصف قواعد محددة. يتبع الوصف دائمًا نفس المعيار: "اسم السمة: القيمة". يجب أن تنتهي كل قاعدة بفاصلة منقوطة.

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

.style_name ( attribute1 :value1; attribute2 :value2; ...);

هناك العديد من الخيارات لتحديد أنماط CSS. دعونا نلقي نظرة على الأكثر شعبية مع الأمثلة.

/*تحديد النمط العام*/ .global_style ( حجم الخط : 12 بكسل ; اللون : أحمر ; ) /**/ Font.style1 ( حجم الخط : 10 بكسل ; اللون : أزرق ; ) /* تحديد نمط عام لعلامة الخط فقط*/ #global_style2 ( حجم الخط : 14 بكسل ; اللون : أحمر ; ) h1 ( حجم الخط : 19 بكسل ; )

يمكن استخدام النمط global_style لجميع العلامات كفئة. على سبيل المثال،

لا يمكن استخدام style1 إلا على علامة لأنه تم تحديد Font.style1 في التعريف.

الخيار الثالث للمهمة هو من خلال الشبكة (#). كما في الحالة الأولى، يتم تعريفه لجميع العناصر، ولكن يجب تحديده ليس من خلال الفئة، ولكن من خلال سمة المعرف:

في الخيار الأخير قمنا ببساطة بتحديد اسم العلامة

ووصف له أسلوبا. وهذا يعني أن جميع العلامات الآن

سوف يرث قيمة هذا النمط.

4. كيف وأين يتم ضبط أنماط CSS

5. ما هي مميزات استخدام CSS؟

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

6. مشاكل CSS مع المتصفحات

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

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

-moz- لمتصفح فايرفوكس
-webkit- لمتصفحي Chrome وSafari (يستخدم كلا المتصفحين نفس محرك العرض)
-ms- لمتصفح إنترنت إكسبلورر
-o- لمتصفح Opera

7. إجابات على الأسئلة المتداولة

7.1. ما هو CSS3

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

7.2. ما الفرق بين CSS و HTML؟

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

يشير اختصار CSS إلى Cascading Style Sheets. إذا كنت تؤمن (ويجب أن تصدق في مثل هذه الأمور)، فإن CSS هي آلية لإضافة نمط إلى مستند الويب. تُفهم الأنماط على أنها قواعد تحدد مظهر المستند وتصميمه - إدارة الخطوط والألوان على الصفحة وترتيب العناصر.

دعونا نتعرف على نوع هذه الجداول، وما الغرض منها، ولماذا أصبحت فجأة "متتالية"؟

لماذا تحتاج إلى فصل المحتوى عن التصميم؟

إن المبدأ الكلاسيكي "فرق تسد" معروف منذ زمن روما القديمة. لقد سمح مرارًا وتكرارًا لشخصيات من عصور مختلفة بتحقيق النجاح في الألعاب السياسية العسكرية. وسوف يساعدنا أيضا.

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

لوريم إيبسوم

لوريم إيبسوم دولور سيت أميت، consectetur adipisicing elit

عيوب واضحة:

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

يتيح لك فصل جميع قواعد التسجيل في كتلة (ملف) منفصلة حل هذه المشكلات. يصبح الكود أبسط وأسهل بكثير في العمل معه. HTML نفسها تصبح ما كان من المفترض أن تكون - لغة لترميز المستندات الدلالية:

لوريم إيبسوم

لوريم إيبسوم دولور سيت أميت، consectetur adipisicing elit

إيجابيات استخدام CSS:

ينقسم الكود إلى المحتوى والتصميم. نحصل على كود أسهل وأكثر قابلية للفهم؛
يتم تنزيل ملف التصميم مرة واحدة فقط ويتم تخزينه مؤقتًا - مما يقلل من حركة المرور ووقت التنزيل وتحميل الخادم؛
بساطة لغة CSS نفسها + مبدأ فصل التصميم عن المحتوى - تقليل الوقت اللازم لتطوير وصيانة الموقع؛
يتحكم One CSS في عرض صفحات HTML المتعددة. يتم إجراء تغييرات التصميم بشكل أسرع؛
يوفر CSS إمكانات تنسيق إضافية لا يمكن تصورها عند استخدام السمات وحدها؛
تم تنفيذ آلية لربط CSS مختلفة لأنواع مختلفة من أجهزة العرض؛
زيادة التوافق مع الأنظمة الأساسية المختلفة من خلال استخدام معايير الويب.

اوراق النمط المتعاقب

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

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

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

مثال لمقتطف CSS:

يمكن أن يكون هناك العديد من القواعد، كل منها يتكون من جزأين (يمكن للمرء أن يتخيل أنها أعمدة): ما الذي نطبق عليه الأنماط (المحدد) وما هي الأنماط التي نطبقها بالفعل (كتلة التعريف). ولذلك، فإن الهيكل بأكمله كان يسمى "الجدول". إذن "ورقة الأنماط". ولكن لماذا فجأة "تتالي"؟

الميراث المتتالية

الحقيقة هي أن CSS يستخدم الوراثة من الوالدين إلى الطفل، مما يسمح لك بتحديد الأنماط بناءً على تلك الموصوفة سابقًا للآباء. في هذه الحالة، ينشأ موقف عندما تكون الخصائص من عدة قواعد مناسبة لعنصر ما في نفس الوقت. يحدد معيار CSS ترتيب الأولوية الذي يتم من خلاله تطبيق قواعد النمط، مما يجعل النتائج قابلة للتنبؤ بها. ويسمى هذا النموذج "شلال".

الحد الأدنى

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

كما تتذكر، HTML هي لغة ترميزية، لكن منشئيها أرادوا تحسين حياة منشئي المواقع لدرجة أنهم أضافوا إليها عناصر ومعلمات مسؤولة عن ظهور الصفحة: العلامات , , , وما إلى ذلك وهلم جرا.

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

ما هو CSS

CSS (أوراق الأنماط المتتالية) - أوراق الأنماط المتتالية.
أسلوب- مجموعة من المعلمات التي تحدد التمثيل الخارجي للكائن. على سبيل المثال، لنفترض أننا نريد جميع عناوين المستوى الأول (tags
) في إحدى الصفحات سيكون باللون الأحمر، الحجم - 24 ومكتوب بخط مائل، وعلى الصفحة الأخرى سيكون باللون الأزرق، الحجم - 12. عنواننا هو كائن، واللون والحجم والنمط هي المعلمات. الأمر فقط أن معلمات كائننا تختلف باختلاف الصفحات، أي. أنها تختلف في الأسلوب.
يمكن أن يكون لكل عنصر في الصفحة أسلوبه الخاص (الفقرات، العناوين، السطور، النص...). تسمى مجموعة الأنماط لجميع العناصر ورقة الأنماط.
إذا تم تحديد عدة أنماط لعنصر واحد (كما في المثال مع العناوين)، إذن المتتالية، الذي يحدد أولوية نمط معين.
فوائد CSS

يمكن لـ CSS تقليل حجم الكود بشكل كبير وجعله قابلاً للقراءة.
يسمح لك CSS بتعيين المعلمات التي لا يمكن تعيينها في HTML وحده. على سبيل المثال، قم بإزالة التسطير من الروابط.
يسهل CSS تغيير مظهر الصفحات. تخيل أنك أنشأت موقعًا إلكترونيًا يتكون من 50 صفحة وجميع العناوين باللون الأزرق. وبعد مرور بعض الوقت، أردت تغيير اللون الأزرق إلى اللون الأخضر. سيتعين عليك مراجعة جميع الصفحات الخمسين وتغيير اللون في السمة المقابلة. مع CSS، ما عليك سوى القيام بذلك مرة واحدة، في ورقة الأنماط.
يرتبط CSS بما يسمى بتخطيط الكتلة لموقع الويب.
حان الوقت للانتقال من الأقوال إلى الأفعال، وسنبدأ في الدرس التالي.
مرحبا عزيزي القراء لموقع بلوق. اليوم أريد أن أبدأ بالحديث بالتفصيل عن CSS (سيتم تجميع المواد في القسم المقابل).
حان الوقت للانتقال إليه بعد دراسة HTML. لغة ترميز النمط هي المسؤولة عن التصميم الخارجي لصفحات موقع الويب، وبدون فهمها سيكون من الصعب جدًا تصحيح شيء ما أو نقله أو محاذاته.
بالطبع، يبدو Css أكثر تعقيدًا مقارنة بـ Html، ولكن هذا عندما يتعلق الأمر بمسألة التخطيط عبر المتصفحات، ولكن عندما يتعلق الأمر بتصحيح بعض التفاصيل الصغيرة في تصميم موقع الويب الخاص بك، فلن تحتاج إلى الكثير من الذكاء. بشكل عام، سنحاول تحليل أساسياتها بالتفصيل، وسيتم ترك الفروق الدقيقة في استخدام الصغر للدراسة الاختيارية (اختياري). ولكن يحتاج جميع مشرفي المواقع إلى معرفة المفاهيم الأساسية.
ما هي لغة CSS وما الغرض منها؟
يشير اختصار CSS إلى Cascading Style Sheets أو، في الترجمة الروسية، كأوراق أنماط متتالية. ما هي ولماذا اخترعت هذه اللغة في وقت ما؟
لذلك، بناء على ما درسناه في وقت سابق قليلا، يمكننا أن نقول أن ترميز مستند الويب يتم باستخدام علامات هذه اللغة. أولئك. باستخدام HTML نقوم بإنشاء بنية مستنداتنا (صفحات الويب). على سبيل المثال، في لغة HTML الخالصة، يمكننا تحديد عناصر أخرى من بنية المستند، وحتى منحها المظهر الذي نحتاجه في المتصفح.
لكن الوقت فرض الحاجة إلى استخدام المزيد والمزيد من سمات التصميم المرئي في HTML، مما أدى إلى تشوش كود المصدر بشكل كبير. وفي هذا الصدد، تم اقتراح خيار تطوير آخر أكثر واعدة - إنشاء لغة ترميزية منفصلة CSS. وكان لهذا الخيار عدد من المزايا مقارنة بزيادة عدد سمات التصميم.
لماذا؟ هل تتذكر كيف يمكنك ضبط لون جزء من النص بتنسيق HTML خالص؟ هذا صحيح، بمساعدة. ماذا لو كنت تريد رسم عدة فقرات في النص الخاص بك باللون المطلوب مرة واحدة؟
ثم داخل كل منها (علامة الفقرة P على مستوى الكتلة، مما يعني أنه لا يمكن وضعها داخل عنصر الخط المضمن) قم بإدراج علامات الخط بقيمة اللون المطلوبة في سمة اللون.
كل هذا سيؤدي إلى فوضى رهيبة في الكود المصدري، وهو أمر غير مرغوب فيه للغاية، لأن سرعة تحميل الموقع ستتأثر، وسيتم إنشاء حمل زائد على معدات الاتصال عبر الإنترنت. لم يتمكن المطورون من القيام بذلك.
لذلك، توصلوا إلى الطريقة التالية للخروج من الوضع الحالي. قرر المطورون من W3C تصميم جميع العروض المرئية لمستند الويب في شكل لغة ترميزية ذات نمط خاص، والتي أطلقوا عليها اسم أوراق الأنماط المتتالية أو ببساطة CSS (اقرأ كـ CSS). ما هو جوهر التكنولوجيا؟
والنقطة هنا هي: من خلال ربط لغة ترميز النمط بأي مستندات (صفحات)، سنكون قادرين على تعيين تمثيل مرئي لجميع تلك العناصر (التي تم إنشاؤها بواسطة علامات Html) التي ستظهر في هذا المستند.
يوجد مورد على الإنترنت يساعدك على رؤية كيف يمكن لصفحة الويب تغيير مظهرها بوضوح شديد لمجرد اتصال ملف ورقة أنماط متتالية آخر بها. في رأيي أن هذا سيكون أفضل إجابة على السؤال: ما هو CSS ولماذا هو مطلوب؟.
يمكنك مشاهدة العرض الأساسي للمستند (صفحة الويب) باتباع هذا الرابط:
لا يوجد شيء خاص، ولكن إذا قمت بالنقر فوق الرابط "عرض جميع التصميمات" من القائمة اليسرى، فيمكنك رؤية العشرات أو حتى المئات من خيارات التصميم لنفس صفحة الويب عن طريق ربط ورقة أنماط أخرى (ملف ورقة أنماط آخر).
يرجى ملاحظة أن كود HTML المصدر يظل كما هو تمامًا، و يتغير تصميم CSS فقط. مذهل، أليس كذلك؟!
CSS ليست لغة ترميزية بنفس معنى لغة HTML على سبيل المثال. هذه لغة ترميزية أسلوبية - لها بناء الجملة الخاص بها، ومحتواها الداخلي، وستكون مختلفة تمامًا من نواحٍ عديدة عما تمت دراسته مسبقًا.
بالإضافة إلى ذلك، مقارنة بـ HTML، تعد لغة ترميز النمط أكثر تعقيدًا. هناك الكثير من الفروق الدقيقة التي ستحتاج إلى معرفتها بالإضافة إلى المفاهيم الأساسية. لم تكن هناك فروق دقيقة خاصة في HTML - لقد درست جميع العناصر ويمكنك العمل بسهولة مع الكود. يبدو لي أنه يمكن مقارنة CSS بالشطرنج - لا يكفي أن تعرف كيف تتحرك كل القطع، بل تحتاج أيضًا إلى أن تكون قادرًا على اللعب.
إذن ما هو ومما يتكون؟ هذه اللغة المفترضة يمكن أن تكون تنقسم إلى قسمين:
القواعد التي تخبر المتصفح بالشكل الذي يجب أن يبدو عليه العنصر على الشاشة.
المحددات عبارة عن تسميات تسمح للمتصفح بفهم عناصر كود HTML التي ستحتاج إلى تطبيق هذه القواعد.

الآن دعونا نرى كيف يرتبط التصميم المحدد في الأنماط بالكود المصدر لصفحة الويب. هناك ثلاث طرق رئيسية باستخدام CSS مع HTML:
المرفق - تتم كتابة كود CSS مباشرة في علامة العنصر المطلوبة باستخدام سمة النمط
التضمين - تتم كتابة كافة أكواد النمط الخاصة بمستند الويب في رأسه (داخل علامات الرأس) باستخدام عنصر النمط
الربط - يتم وضع (استخراج) جميع أكواد CSS في ملف خارجي منفصل، متصل بالمستند باستخدام عنصر الارتباط في رأسه

حسنًا، ترى كيف تعلمنا الكثير عن لغة ترميز الأنماط. الآن هو الوقت المناسب للحديث عن ذلك بناء الجملة. بشكل عام، الأمر بسيط للغاية:
تتكون إحدى القواعد في كود CSS من عنصرين - الخاصية (في مثالنا هي ) وقيمتها (في مثالنا هي باللون الأحمر و#CCCCCC). الشرط الأساسي هو فصل الخاصية عن قيمتها بنقطتين.
إضافي. يتم فصل قاعدة واحدة بالضرورة عن أخرى فاصلة منقوطة. بعد القاعدة الأخيرة، لم يعد بإمكانك استخدام الفاصلة المنقوطة، ولكن لتجنب التجاوزات، فمن الأفضل جعلها قاعدة لاستخدامها دائمًا. ليس لها أي معنى في كود CSS ويمكنك تعيينها وفقًا لتقديرك الخاص.
استخدام النمط لتوصيل Css برمز HTML
حسنًا، دعونا الآن نلقي نظرة على أمثلة لكل تلك الطرق الموجودة لتطبيق قواعد النمط على وثيقتنا والتي تم وصفها بعبارات عامة أعلاه.
الطريقة الأولى تسمى الطريقة تضمينات CSS في Htmlباستخدام سمة النمط:
دعونا نرى كيف يمكننا استخدام هذه الطريقة لتعيين لون وخلفية الفقرة:
ما هي طريقة التعشيش
كما ترون، في حركة واحدة سهلة قمنا بتلوين نص الفقرة باللون الأحمر (اللون: أحمر) وفي نفس الوقت وضعنا خلفية رمادية تحته (الخلفية:#cccccc). يشير النمط إلى تلك العلامات الستة التي يمكن استخدامها مع أي علامات (يتم إدراجها في أسفل لقطة الشاشة):
في CSS، سنستخدم أيضًا القواعد العامة بشكل نشط، ولكن سيتم مناقشتها في المقالات اللاحقة، لكننا نظرنا الآن في إمكانية استخدام النمط لربط قواعد تصميم النمط بعناصر معينة من كود Html. يسمح لك باستخدام مجموعة من هذه القواعد نفسها (بكميات غير محدودة) كقيمة لك.
من السهل جدًا تنفيذ طريقة التداخل باستخدام سمة النمط عمليًا، ولكنها مع ذلك في تخطيط حقيقي تستخدم نادرا جدا. ولكن بمساعدته، يمكنك بسهولة تجربة شيء ما وتجربته، وعندها فقط قم بنقل كل هذه القواعد إلى ملف منفصل باستخدام أوراق أنماط CSS.
الطريقة التالية لتوصيل لغة ترميز النمط تسمى الطريقة تضمين CSS في HTML. تختلف هذه الطريقة اختلافًا جوهريًا عن طريقة الاستثمار التي تمت مناقشتها مسبقًا.
بدلاً من تضمين كل علامة في الصفحة سمة النمط التي تحتوي على قواعد لغة النمط، سنكتب الآن جميع قواعد CSS التي نحتاجها لمستند الويب هذا داخل واحدة واحدة نمط العلامةوالتي بدورها سيتم وضعها في رأس هذه الوثيقة (بين عناصر الرأس).
هل تتذكر ما هو الرأس وأين يتم كتابته في بنية مستند الويب؟ إذا كنت لا تتذكر، تحقق من ذلك في هذا المخطط التفصيلي:
أولئك. في الكود قد يبدو مثل هذا:
... ...
ليس واضحا تماما؟ حسنًا، الآن سأحاول توضيح ذلك:
لمنع المتصفح من الخلط بين قواعد النمط وبين لغة ترميز النص التشعبي، يجب تحديد السمة المطلوبة في عنصر النمط اكتب بالقيمة "text/css"(رأس محتوى الوسائط لأوراق الأنماط المتتالية). الذي - التي. سيتم تفسير الكود الموجود داخل هذا العنصر بواسطة المتصفح على أنه CSS.
دعونا نلقي نظرة أبعد على المثال المذكور أعلاه. كما ترون، قواعد الأسلوب محاطة بأقواس مجعدةوأمامهم مكتوب ما يسمى بالمحدد على شكل الحرف اللاتيني "P". لماذا هذا المحدد مطلوب؟
وإلا كيف يمكننا أن نوضح للمتصفح أن قواعد CSS هذه يجب تطبيقها فقط على علامات الفقرة (محدد P) لمستند ويب معين وليس على أي شيء آخر.
هنا تطرقنا مرة أخرى إلى مسألة بناء الجملة. عند استخدام الأساليب المضمنة والتداخلية، يجب أن تكون جميع قواعد لغة ترميز النمط محاطة بأقواس متعرجة وتسبقها تأكد من الوقوفأو عدة محددات:
محدد CSS (الخاصية: القيمة؛ الخاصية: القيمة)
عند استخدام طريقة التداخل، لم نستخدم المحدد والأقواس المتعرجة، لأن كان من الواضح بالفعل للمتصفح أن قواعد CSS هذه يجب تطبيقها بدقة على العلامة التي تمت كتابة سمة النمط فيها.
عند استخدام طريقة التضمين أو التداخل، أصبح الموقف المتعلق بتحديد الجهة التي يتم توجيه قواعد النمط هذه إليها أكثر تعقيدًا وكان استخدام الأقواس المتعرجة والمحددات مطلوبًا. الذي - التي. نشير إلى المتصفح أنه يجب عليك التفضل بتطبيق هذه المجموعة من قواعد CSS (المحاطة بين قوسين متعرجين) على جميع الفقرات، وهذه المجموعة - لشيء آخر.
في أبسط الحالات، يمكنك استخدام اسم العلامة كمحدد، والذي يجب تطبيق قواعد لغة CSS عليه، محاطًا بأقواس متعرجة تفتح مباشرة بعد اسم المحدد. في مثالنا، يتم استخدام اسم علامة الفقرة "P" كمحدد. سنتحدث بمزيد من التفاصيل حول المحددات في لغة ترميز النمط في المقالة التالية (انظر الرابط أعلاه).
دعونا نلخص طريقة تضمين كود CSS في مستند Html - سيتم وصف جميع قواعد النمط المطلوبة لهذا المستند في علامة نمط واحدة، وليس في العديد من العناصر المختلفة، كما سيكون الحال إذا تم استخدام طريقة التضمين الموضحة فقط فوق.
تصدير أوراق أنماط CSS إلى ملف منفصل باستخدام Link
تسمى الطريقة الأخيرة لدمج رمز النمط في مستند الويب طريقة الترابط. أسهل طريقة لتوضيح هذه الطريقة هي:
الفرق الرئيسي بينها وبين الطرق التي تمت مناقشتها أعلاه (التداخل والتضمين) هو أنه عند استخدام طريقة الربط، فإن جميع قواعد لغة CSS يتم نقلها إلى ملف خارجي منفصل. سيكون مرة أخرى نصًا (مثل أي مستند Html) وعادةً ما يتم تعيينه بامتدادات .css بحيث يمكن تعيين برنامج خاص () لفتحه على جهاز كمبيوتر محلي يعمل بنظام Windows.
عند استخدام ملف CSS خارجي، خاص علامة الارتباط، والذي يتم كتابته مرة أخرى بين عنصري الفتح والإغلاق في رأس صفحة الويب. يتم تصنيف الرابط على أنه غير مرئي في المتصفح.
في هذه الحالة، سيجد المتصفح ملف ورقة الأنماط المحدد (مسبوقًا به في سمة Href لعلامة الرابط)، ويقوم بتحميله وتطبيق قواعد لغة CSS المحددة فيه للتصميم الخارجي لمستند Html الحالي.
بشكل عام، يشبه الارتباط إلى حد كبير استخدام علامة النمط الموضحة في وقت سابق قليلا، ولكنها يمكن أن تسرع بشكل كبير تحميل صفحات الموقع وتقليل الحمل على معدات الاتصال عبر الإنترنت.
عند استخدام عنصر النمط (الطريقة المضمنة)، في كل مرة سيتعين على المتصفح تحميل قواعد CSS والمحددات المضمنة فيه مع كود HTML الخاص بالمستند، وفي حالة استخدام ملف ورقة أنماط خارجي، فإن المتصفح فقط يحتاج إلى تحميل Style.css مرة واحدة وبعد ذلك فقط يأخذه من ذاكرة التخزين المؤقت الخاصة بك (منطقة على القرص الصلب بجهاز الكمبيوتر الخاص بالمستخدم) عند تصميم صفحات أخرى من موقعك.
تعني سمة type=”text/css” لعلامة الرابط أن محتوى الوسائط هذا لن يكون أكثر من مجرد لغة ترميزية للنمط. ولكن أيضًا عند ربط ملف CSS ومستند Html، يتم استخدامه سمة Rel بقيمة ورقة الأنماط. الحقيقة هي أن الرابط (الارتباط التشعبي للخدمة) يمكن استخدامه لأغراض مختلفة تمامًا.
إذا نظرت إلى الكود المصدري لهذه الصفحة في المتصفح، فسترى أنه يوجد في منطقة الرأس مجموعة كاملة من علامات الارتباط المختلفة:
ويتم تحديد الغرض من كل من الارتباطات التشعبية للخدمة هذه من خلال قيمة السمة Rel. على سبيل المثال، يتم استخدام rel = "رمز الاختصار" للإشارة إلى المسار إلى الملف، ويمكن استخدام rel = "alternate" للإشارة إلى إصدار بديل للصفحة (قد يكون مثال التمثيل البديل لمستند Html) .
حسنًا، في حالة استخدام السمة rel = "stylesheet" في الرابط، فإننا نقوم بضبط المتصفح المسار إلى ملف ورقة الأنماط(في السمة Href يمكن تحديد هذا المسار بشكل مطلق أو نسبي). أولئك. باستخدام سمة Rel، نخبر المتصفح كيف سيبدو الملف، والمسار المحدد في Href (ورقة الأنماط - مع CSS).
على المواقع يتم استخدام طريقة الربط دائمًا تقريبًا CSS وHTML (ملف ورقة الأنماط الخارجية). عادةً ما يتم استخدام السمات وعلامات الأنماط فقط للاختبار، على الرغم من أنه قد تكون هناك مهام محددة عندما يكون استخدامها مبررًا (على سبيل المثال، عند تصميم ملفات ). لكن في العمل الحقيقي على مواقع الويب، يتم استخدام الملفات الخارجية، أي. طريقة الربط.
بهذا، اسمحوا لي أن آخذ إجازتي وأقسم أن أعدكم بأن الاستمرار سيتبع ذلك في المستقبل القريب جدًا. أكرر مرة أخرى أن تعلم CSS عادة ما يكون أكثر صعوبة من تعلم HTML، لذلك سأحاول أن أكون مفصلاً وواضحًا قدر الإمكان.

كل التوفيق لك! نراكم قريبا على صفحات موقع المدونة
أنت قد تكون مهتم
نمط القائمة (النوع، الصورة، الموضع) - قواعد Css لتخصيص مظهر القوائم في كود Html
العرض (كتلة، لا شيء، مضمّن) في CSS - اضبط نوع عرض عناصر Html على صفحة الويب
ما هو CSS وكيفية ربط أوراق الأنماط المتتالية بمستند Html وبناء الجملة الأساسي لهذه اللغة
الخلفية في CSS (اللون، الموضع، الصورة، التكرار، المرفق) - كل شيء لتعيين لون الخلفية أو صورة الخلفية لعناصر Html
الأولويات في Css وزيادتها بسبب المهم ودمج وتجميع المحددات وأنماط المستخدم والمؤلف
الارتفاع والعرض والتجاوز - قواعد CSS لوصف منطقة المحتوى في تخطيط الكتلة
وحدات البعد (البكسل، Em، Ex) وقواعد الوراثة في CSS تصميم مختلف للروابط الداخلية والخارجية عبر CSS
محددات الفئات الزائفة والعناصر الزائفة في CSS (التمرير، والطفل الأول، والسطر الأول وغيرها)، والعلاقات بين علامات كود Html
تعويم ومسح في CSS - أدوات تخطيط الكتلة