يمكن أن تحتوي القيمة المختصرة على أقل من أربعة معانٍ، وفقًا للقائمة أدناه. يتم ترتيب النتائج حسب عدد القيم المقدمة:
دليل الاختصارات
اختصارات الحدود لمختلف الخصائص
ومن الجدير بالذكر أيضًا أنه يمكنك أيضًا تعيين قيم خاصية الحدود لحد واحد فقط من عنصر مثل هذا:
عرض الحدود اليسرى: 2 بكسل؛ نمط الحدود اليسرى: صلب؛ لون الحدود اليسرى: أسود؛
اختصارات لبعض خصائص الهوامش والحشو والحدود
كل هذا يعمل بنفس الطريقة الموضحة أعلاه في قسم "الاختيار بين خاصية واحدة وقيمة مختصرة".
اختصارات الخطوط
باستخدام سطر اختصار واحد، يمكنك تحديد حجم الخط ووزنه ونمطه وعائلته وارتفاع الخط. على سبيل المثال، خذ بعين الاعتبار الكود التالي:
حجم الخط: 1.5em؛ ارتفاع الخط: 200%؛ وزن الخط: غامق؛ نمط الخط: مائل؛ عائلة الخط: جورجيا، "Times New Roman"، serif
يمكنك تحديد كل هذا بالسطر التالي:
الخط: 1.5em/200% غامق ومائل Georgia،"Times New Roman"،serif؛
اختصار للخلفية
باستخدام سطر واحد من CSS، يمكنك تحديد لون الخلفية وصورة الخلفية وتكرار الصورة وموضع الصورة. لنأخذ الكود التالي:
لون الخلفية: #000؛ صورة الخلفية: url(image.gif); تكرار الخلفية: عدم التكرار؛ موضع الخلفية: أعلى اليسار؛
ويمكن تمثيل ذلك باستخدام الاختصار التالي:
الخلفية:#000 url(image.gif) بدون تكرار أعلى اليسار؛
اختصارات للقوائم
في هذه الحالة، قصة مماثلة مع خصائص القوائميسمح لك بتعيين قيم الخصائص لنوع علامة القائمة وموضعها وصورةها على سطر واحد. لنأخذ الكود التالي:
نوع نمط القائمة: دائرة؛ قائمة نمط الموقف: داخل؛ صورة نمط القائمة: url(bullet.gif) ؛
وهذا يعادل ما يلي:
نمط القائمة: دائرة داخل url(bullet.gif);
تطبيق CSS على HTML
هناك ثلاث طرق لتطبيق CSS على مستند HTML:
خيط؛
متداخلة؛
أوراق الأنماط الخارجية.
أنماط السلسلة
يمكنك تطبيق ورقة أنماط على عنصر باستخدام سمة النمط كما يلي:
داخل هذه السمة، يتم سرد جميع خصائص CSS وقيمها.
تتمثل ميزة الأنماط المضمنة في أن المتصفح سيضطر إلى استخدام هذه الإعدادات. كافة الأنماط الأخرى المحددة في أوراق أنماط أخرى، أو حتى متداخلة بداخلها عنوان الوثيقة، سيتم تجاوزها بواسطة هذه الأنماط.
المشكلة الكبيرة في الأنماط المضمنة هي أنها تجعل الحفاظ على الأنماط أكثر صعوبة. يهدف استخدام CSS إلى فصل عرض المستند عن بنيته، ولكن الأنماط المضمنة تفعل العكس تمامًا - قواعد العرض المنتشرة في جميع أنحاء المستند.
بصرف النظر عن مشكلات الصيانة، فلن تحصل على أي فائدة من الجزء الأساسي في CSS: التتالي.
أنماط متداخلة
يتم وضع أوراق الأنماط المتداخلة في رأس المستند داخل عنصر النمط، كما في صفحة المثال التالية:
تتمثل ميزة أوراق الأنماط المتداخلة في أنك لا تحتاج إلى إضافة سمة نمط إلى كل فقرة - حيث يمكنك تصميمها جميعًا باستخدام تعريف واحد. وهذا يعني أيضًا أنه إذا كنت بحاجة إلى تغيير مظهر جميع الفقرات، فيمكن القيام بذلك في مكان واحد، ولكن كل هذا يقتصر على مستند واحد.
أوراق الأنماط الخارجية
أوراق الأنماط الخارجية تعني وضع جميع تعريفات CSS في ملف منفصل، وحفظه بامتداد ملف CSS، ثم تطبيقه على مستندات HTML باستخدام العنصر وصلةفي عنوان الوثيقة. على سبيل المثال:
تسمح لك أوراق الأنماط الخارجية بتخزين كافة تعريفات التصميم في ملف واحد. وهذا يعني أنه يمكنك إجراء تغييرات على موقعك بالكامل عن طريق تغيير ملف واحد فقط. يمكن لمتصفح الويب بعد ذلك تنزيله مرة واحدة ثم تخزينه مؤقتًا لجميع المستندات الأخرى التي تشير إليه، مما يقلل من كمية المعلومات التي يقوم بتنزيلها.
استيراد أوراق الأنماط
هناك طريقة أخرى لاستيراد أوراق الأنماط الخارجية إلى ملفات HTML - عبارة @import. ويتم إدراجه في ورقة الأنماط المتداخلة، بنفس طريقة كود CSS المتداخل الموضح أعلاه. بناء الجملة هو كما يلي:
المفهومان الأساسيان لـ CSS هما ميراثو المتتالية. ميراثيشير إلى الطريقة التي يرث بها عنصر في ترميز HTML خصائص عناصره الأصلية (التي تحتوي عليه) ويمررها إلى أحفاده، بينما المتتاليةيتعامل مع إعلانات CSS التي يتم تطبيقها على المستند، وكيف تتجاوز القواعد المتعارضة بعضها البعض.
ميراث
ميراثفي CSS، هي آلية يتم من خلالها تمرير خصائص معينة من عنصر سلف إلى العناصر التابعة له.
باستخدام الوراثة، يمكنك، على سبيل المثال، تحديد خصائص الخط لعناصر html أو النص، وسيتم توريثها لجميع العناصر الأخرى. يمكنك تحديد ألوان الخلفية والأمامية لعنصر حاوية معين، وسيتم توريث اللون الأمامي تلقائيًا للعناصر التابعة في تلك الحاوية.
كل عنصر في مستند HTML سوف يرث كافة الخصائص القابلة للتوريث من سلفه، باستثناء العنصر الجذر (html)، الذي ليس له سلف.
المتتالية
المتتاليةهي آلية تتحكم في النتيجة النهائية عند تطبيق عدة إعلانات CSS متعارضة على نفس العنصر. هناك ثلاثة مفاهيم رئيسية تتحكم في الترتيب الذي يتم به تطبيق إعلانات CSS:
أهمية
النوعية
ترتيب كود المصدر
أهميةهو الأكثر أهمية. إذا كان هناك إعلانان لهما نفس الأهمية، فإن خصوصية القواعد تحدد أيهما سيتم تطبيقه. إذا كانت القواعد لها نفس الخصوصية، فإن ترتيب الكود المصدري يتحكم في النتيجة.
أهمية
أهميةيعتمد إعلان CSS على المكان الذي تم تعريفه فيه. سيتم تطبيق الإعلانات المتعارضة بالترتيب التالي، مع تجاوز الإعلانات اللاحقة للإعلانات السابقة:
أوراق أنماط وكيل المستخدم
الإعلانات المنتظمة في أوراق أنماط المستخدم
تصريحات منتظمة في أوراق أنماط المؤلف
تصريحات مهمة في أوراق أنماط المؤلف
تصريحات هامة في أوراق أنماط المستخدم
أنماط وكيل المستخدمهي ورقة الأنماط المضمنة في المتصفح. يحتوي كل متصفح على قواعده الافتراضية الخاصة التي تحدد كيفية عرض عناصر HTML المتنوعة إذا لم يتم تحديد أي نمط من قبل المستخدم أو مصمم الصفحة. على سبيل المثال، عادةً ما تظهر الروابط التي لم تتم زيارتها باللون الأزرق وتحتها خط.
ورقة أنماط المستخدمهي ورقة أنماط محددة من قبل المستخدم. لا تدعم كافة المتصفحات أوراق أنماط المستخدم، ولكنها يمكن أن تكون مفيدة جدًا، خاصة للمستخدمين الذين يعانون من أنواع معينة من الإعاقات الوظيفية. على سبيل المثال، قد يكون لدى الشخص الذي يعاني من عسر القراءة ورقة أنماط تحدد خطوطًا وألوانًا معينة تجعل القراءة أسهل.
ورقة أنماط المؤلفهو ما يسمى عادة "ورقة الأنماط". هذه ورقة أنماط كتبها مؤلف المستند (أو على الأرجح مصمم الموقع) وأرفقها (أو أدرجها).
لكي تتمكن من تحويل إعلان عادي إلى إعلان مهم، عليك أن تضع التوجيه المهم بعده. كما ترون، فإن الإعلانات المهمة في ورقة أنماط المستخدم سوف تتداخل مع كل شيء آخر، وهذا أمر منطقي.
سيتم تطبيق العرض التقديمي الافتراضي للمتصفح فقط إذا لم يتم تجاوز هذه الإعلانات بواسطة أي ورقة أنماط مستخدم أو قواعد ورقة أنماط المؤلف، نظرًا لأن ورقة أنماط وكيل المستخدم لها الأولوية الدنيا.
النوعية
النوعيةيتم تعريفه على أنه مقياس لمدى تحديد محدد لبعض القواعد. يمكن للمحدد منخفض الخصوصية أن يطابق العديد من العناصر (مثل *، الذي يطابق كل عنصر في المستند)، بينما يمكن أن يطابق المحدد عالي الخصوصية عنصرًا واحدًا فقط لكل صفحة (مثل #nav، الذي يطابق فقط عنصرًا بمعرف) مطابقة الملاحة).
يمكن حساب خصوصية المحدد بسهولة. إذا تعارض إعلانان أو أكثر لعنصر معين، وكانت جميع الإعلانات لها نفس الأهمية، فإن الإعلان الذي يحتوي على المحدد الأكثر تحديدًا سيكون له الأسبقية في القاعدة.
تشتمل الخصوصية على أربعة مكونات يمكن الإشارة إليها على أنها a وb وc وd. المكون أ هو الأكثر تمييزا، د هو الأقل.
يتم تعريف المكون a بكل بساطة: فهو 1 لإعلان سمة النمط، وإلا فهو 0 .
المكون ب هو عدد محددات الهوية في المحدد (تلك التي تبدأ مع#).
المكون ج هو رقم محددات السمات، بما في ذلك محددات الفئة والفئة الزائفة.
المكون d هو عدد أنواع العناصر والعناصر الزائفة في المحدد.
مع القليل من الرياضيات، يمكنك الحصول على سلسلة من هذه المكونات الأربعة التي تحدد خصوصية أي قاعدة. لا تحتوي إعلانات CSS في سمة النمط على محدد، لذا ستكون خصوصيتها دائمًا 1,0,0,0 .
ويبين الجدول بعض الأمثلة.
محدد
أ
ب
ج
د
النوعية
h1
0
0
0
1
0,0,0,1
.foo
0
0
1
0
0,0,1,0
#حاجِز
0
1
0
0
0,1,0,0
html>head+body ul#nav *.home a:link
0
1
2
5
0,1,2,5
تجدر الإشارة إلى أن الأحرف المتصلة (مثل > و+ و
ربما يعلم الجميع ذلك لغة البرمجةيحدد هيكل الوثيقة، و CSS(أوراق الأنماط المتتالية، أوراق الأنماط المتتالية) هي المسؤولة عن تصميم صفحة الويب، وموضع العناصر ومظهرها. يحدث أن HTML وCSS لا يتم استخدامهما بشكل منفصل. أي صفحة ويب هي في الأساس مزيج من كود HTML ورمز CSS. دون المعرفة الأساسية لهذه التكنولوجيا، لن يكون من الممكن تخطيط أي مستند بكفاءة. لقد نظر الكثير منا في هذه التقنيات بمزيد من التفصيل. لكن على المستوى الشخصي، لم أتمكن مطلقًا من "فهم" كل حقائق وإمكانيات CSS. وبعد ذلك، سأحاول تسليط الضوء على أهم النقاط التي يجب أن تعرفها عن CSS.
ما هي أوراق الأنماط المتتالية؟
الأنماط هي مجموعة من المعلمات التي تتحكم في مظهر العناصر وموضعها على صفحة الويب. أنظر إلى الصور أدناه لتفهم الفرق:
يبدو الكود المصدري لمثل هذا المستند كما يلي:
1 2 3 4 5 6 7 8 9 10 11 12 13
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <أتش تي أم أل xmlns=> <الرأس > <meta http-equiv = "نوع المحتوى" content = "text/html; charset=utf-8" / > <العنوان >فليكساجون</العنوان> <الرابط rel = "stylesheet" href = "style.ess" type = "text/css" / > </الرأس> <الجسم > <ح1>فليكساجوك</h1> <р>Flexagok هو شكل ورقي له ثلاثة جوانب أو أكثر. في البداية يبدو أن هذا مستحيل، ولكن تذكر شريط موبيوس، فهو يحتوي على جانب واحد فقط، على عكس قطعة من الورق، ومع ذلك، فهو حقيقي. Flexagon حقيقي أيضًا، وهو سهل الصنع واللصق في المنزل. يبدو وكأنه مسدس ذو وجهين، ولكن ثنيه بطريقة خاصة ونرى الجانب الثالث. من السهل التأكد من أننا نتعامل مع ثلاثة جوانب بالضبط إذا قمنا بطلائها بألوان مختلفة. من خلال ثني المرن، سنلاحظ جميع أسطحه بالتناوب.</ ع> </ الجسم> </أتش تي أم أل>
كود HTML نفسه لم يخضع لأية تغييرات والإضافة الوحيدة هي السطر . ويرتبط بملف تصميم خارجي يسمى style.css. محتويات هذا الملف مبينة أدناه:
حجم الخط: llpt؛ لون الخلفية : #f0f0f0 ; /* لون خلفية صفحة الويب */ اللون: #333؛ /* لون النص الأساسي */ }
ح1 ( اللون: #a52 a2 أ؛ /* لون العنوان */ حجم الخط: 24 نقطة؛ /* حجم الخط بالنقاط */ عائلة الخطوط: Georgia، Times، serif؛ /* خط العائلة */ وزن الخط: عادي؛ /* نمط النص العادي */ }
ع( محاذاة النص: ضبط؛ /* محاذاة العرض */ الهامش الأيسر : bOrx؛ /* المساحة اليسرى بالبكسل */ الهامش الأيمن : Yurh؛ /* المساحة المتروكة اليمنى بالبكسل */ الحدود اليسرى : lpx Solid #999 ; الحد السفلي: lpx صلب #999 ؛ الحشو - اليسار : Yurh؛ الحشو -القاع: 1Opx؛ }
في الملف style.cssجميع معلمات التصميم لعلامات مثل، <الجسم >, و<ص> لاحظ أن العلامات نفسها مكتوبة كالمعتاد في كود HTML. وبما أنه يمكن الرجوع إلى ملف ورقة الأنماط من أي مستند ويب، فإن هذا يؤدي في النهاية إلى تقليل كمية البيانات المكررة. وبفضل فصل الكود والتصميم، تزداد مرونة إدارة نوع المستند وسرعة العمل على الموقع.
أنواع الأنماط
هناك عدة أنواع من الأنماط التي يمكن تطبيقها معًا على مستند واحد. هذه هي نمط المتصفح، وأسلوب المؤلف، وأسلوب المستخدم.
نمط المتصفح. يتم استخدام أنماط مماثلة عند استخدام لغة HTML "الخالصة".
أسلوب المستخدم.هذا هو النمط الذي يمكن لمستخدم الموقع تمكينه من خلال إعدادات المتصفح الخاص به. يتمتع هذا النمط بأولوية أعلى ويتجاوز التصميم الأصلي للمستند.
إذا كان هناك تعارض عند تغيير نمط نفس عنصر المستند، فإن نمط المستخدم له الأولوية القصوى، يليه أسلوب المؤلف ونمط المتصفح.
كيفية إضافة أنماط إلى الصفحة؟
هناك عدة طرق لإضافة أنماط CSS إلى الصفحة:
الأنماط ذات الصلة
عند استخدام الأنماط المرتبطة، يوجد وصف المحددات وقيمها في ملف منفصل، عادة بامتداد CSS، ويتم استخدام علامة لربط المستند بهذا الملف . يتم وضع هذه العلامة في حاوية
