اهتمام. قيم القواعد في CSS - الألوان والوظائف والأحجام

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

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

قيم القواعد في CSS - الألوان والوظائف والأحجام

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

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

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

يمكن أن تكون قيم هذه القواعد عبارة عن بعض الكلمات (على سبيل المثال، يسار، يمين، وسط، ضبط، وما إلى ذلك)، والتي تكون معروفة مسبقًا ومحددة في الجدول من هذه المواصفات (انظر الشكل أعلاه - "القيم" عمود) . يمكن أن تكون القيم أيضًا مجرد أرقام ليس لها بُعد (على سبيل المثال، في ) أو تعيين (على سبيل المثال، #fff8dc).

دعونا نلقي نظرة فاحصة على ضبط الألوان في CSSوكيف يمكن تنفيذ ذلك:

يمكن استخدامها كقيم لقواعد CSS وما يسمى وظائف. مثال صارخالوظيفة هي عنوان URL والموجود بين قوسين هو عنوان url (images/navtabr.png). وبالتالي يتم تحديده في كثير من الأحيان في الأنماط الصورة الخلفية:

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

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

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

الأحجام المطلقة في CSSيمكن استخدامها جميعا لنفس الطباعة. السنتيمتر (سم) والمليمتر (مم) هما الوحدات الأساسية للنظام المتري، والبوصة (بوصة) هي الوحدة الأساسية التي غالبًا ما تستخدم منها النقاط (pt) والبيكاس (pc) في الطباعة.

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

البكسلات، Em، Ex والنسب المئوية - الأحجام النسبية في CSS

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

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

الأحجام النسبية في CSSيمكن تحديدها باستخدام الوحدات التالية:

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

يتبع المزيد من الماكرة الوحدات النسبيةأحجام الخطوط المستخدمة في CSS - م والسابقين. الأول هو ارتفاع الخط الافتراضي لجهاز الكمبيوتر الخاص بالمستخدم، وEx هو ارتفاع الحرف الكبير "x" في الخط الافتراضي. ربما يكون الأمر غير واضح بعض الشيء. دعونا ننظر إلى هذا بمزيد من التفصيل.

تقبل العديد من المتصفحات قيمة Ex بنصف قيمة Em (مثل IE). يحتوي كل خط على خط أساسي وبعض الأحرف الكبيرة وبعض الأحرف الخاصة. أحرف صغيرةالذين يقفون ل حدود(على سبيل المثال، "ص"). هناك أيضًا أحرف تحتوي على علامات التشكيل، على سبيل المثال، "ё" و"й" باللغة الروسية أو بعض علامات تغير الصوت، وما إلى ذلك. لهذا حجم الخط (إم)تحددها عناصر التمديد.

حسنًا، Ex هو، كما قلت بالفعل، ارتفاع الحرف الكبير (الصغير) "x" (x) في التخطيط اللاتيني. ومن الواضح أنه اعتمادا على نسبة الأحرف الصغيرة و الحروف الكبيرةفي الخط، قد تكون قيم Em وEx مرتبطة ببعضها البعض بطرق مختلفة، بدلاً من مجرد Ex=Em/2.

نادرًا ما يتم استخدام وحدة الحجم النسبي Ex في CSS؛ وغالبًا ما يتم استخدام Em (دون الأخذ في الاعتبار وحدات البكسل، التي تُستخدم للإشارة إلى الحجم في كثير من الأحيان). ولكن هناك طريقة أخرى لتعيين الأحجام النسبية - اهتمام، أي. يجب أن يتم حسابها بالنسبة لشيء ما.

لا يمكن تحديد جميع قواعد CSS بنسب مئوية. حتى في قائمة W3C تم تسليط الضوء على هذا في عمود منفصل:

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

الوراثة في CSS حسب المواصفات

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

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

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

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

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

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

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

وفي المقالة التالية سنبدأ في القيام بذلك مبدأ اساسيالخامس .

كل التوفيق لك! نراكم قريبا على صفحات موقع المدونة

يمكنك مشاهدة المزيد من الفيديوهات بالذهاب إلى
");">

أنت قد تكون مهتم

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

عادةً ما يتم استخدام تدوين النسبة المئوية في الحالات التي تحتاج فيها إلى تغيير القيمة المتعلقة بالعنصر الأصلي أو عندما تعتمد الأبعاد على الظروف الخارجية. لذا، فإن عرض الجدول بنسبة 100% يعني أنه سيتكيف مع حجم نافذة المتصفح ويتغير مع عرض النافذة.

التسميات

وصفمثال
<тип> يشير إلى نوع القيمة.<размер>
أ & بيجب أن يتم إخراج القيم بالترتيب المحدد.<размер> && <цвет>
أ | بيشير إلى أنك تحتاج إلى تحديد قيمة واحدة فقط من القيم المقترحة (A أو B).عادي | قبعات صغيرة
أ || بيمكن استخدام كل قيمة بشكل مستقل أو مع الآخرين بأي ترتيب.العرض || عدد
قيم المجموعات.[ اقتصاص || يعبر ]
* كرر صفر مرات أو أكثر.[,<время>]*
+ كرر مرة واحدة أو أكثر.<число>+
? النوع أو الكلمة أو المجموعة المحددة اختيارية.أقحم؟
(أ، ب)كرر على الأقل A، ولكن ليس أكثر من B مرات.<радиус>{1,4}
# كرر مرة واحدة أو أكثر مفصولة بفواصل.<время>#
×

مثال

العرض بالنسبة المئوية

محتويات الجدول

تخصيص

تمر كل مواصفات بعدة مراحل من الموافقة.

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

المتصفحات

يتم استخدام الرموز التالية في جدول المتصفح.

  • - الخاصية مدعومة بالكامل من قبل المتصفح بكل القيم الصالحة؛
  • - الخاصية لا ينظر إليها المتصفح ويتم تجاهلها؛
  • - قد تظهر أثناء التشغيل أخطاء مختلفةأو أن الخاصية مدعومة جزئيًا فقط، على سبيل المثال، ليست كل القيم الصالحة صالحة أو أن الخاصية لا تنطبق على جميع العناصر المحددة في المواصفات.

يشير الرقم إلى إصدار المتصفح الذي يتم دعم الخاصية منه.

النسبة المئوية هي وحدة قياس للعنصر بالنسبة للكتلة التي يحتوي عليها. يعمل هذا بشكل رائع مع الصور: هنا نقوم بتعيين أبعاد الصورة، التي يكون عرضها دائمًا 50% من عرض الحاوية. حاول تضييق نافذة المتصفح لديك لترى ما سيحدث!

صورة المقالة ( تعويم : يمين ; العرض : 50% ; )

يمكنك أيضًا استخدام الحد الأدنى للعرض والحد الأقصى للعرض لتحديد الحد الأقصى والحد الأدنى لحجم الصورة!

تخطيط العرض في المئة

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

قسم التنقل ( تعويم : يسار ; العرض : 25% ; ) ( الهامش الأيسر : 25% ; )

عندما يكون التخطيط ضيقًا جدًا، يتم ضغط عنصر التنقل. والأسوأ من ذلك، أنه لا يمكنك استخدام min-width في التنقل لإصلاح ذلك، لأنه لن يمنع العمود الأيمن من المضي قدمًا.

لوريم إيبسوم دولور سيت أميت، consectetur adipiscing إيليت. phasellus empdiet، nulla et dictum interdum، nisi lorem egestas odio، vitae scelerisque enim ligula venenatis dolor. مؤسسة Maecenas nisl, ultrices nec congue eget، مؤلف السيرة الذاتية. الدهليز يتدفق من خلال الدهليز. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. يوجد كونفاليس في بحيرة فاصلة تلتقي مع هندريريت. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. في libero sed nunc venenatis impdiet sed ornare turpis. اصنع سيرتك الذاتية من خلال إخبارك بالحمل الوريدي. عدد صحيح من الفرينجيلا يتطابق مع إيروس غير مخمر. Sed dapibus pulvinar nibh tempor porta. Cras AC Leo Purus. موريس كويس ديام فيليت.

13 / 19

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

تعريف

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

أنماط مماثلة

تشبه قاعدة الواحد بالمائة قانون باريتو (نسبة 80:20)، الذي ينص على أن 20% من أعضاء الفريق يقومون بـ 80% من العمل.

اكتب مراجعة عن مقال "قاعدة الواحد بالمائة"

ملحوظات

روابط

مقتطف يصف قاعدة الواحد بالمائة

- انظر يا Anisyushka، هل أوتار الجيتار سليمة؟ لم أحملها منذ فترة طويلة - إنها مسيرة خالصة! متروك.
ذهبت أنيسيا فيدوروفنا عن طيب خاطر بخطواتها الخفيفة لتنفيذ تعليمات معلمها وأحضرت غيتارًا.
نفض العم الغبار دون أن ينظر إلى أحد، ونقر على غطاء الجيتار بأصابعه النحيلة، وضبطه وضبط نفسه على الكرسي. أخذ (بإيماءة مسرحية إلى حد ما، حيث وضع مرفق يده اليسرى) الجيتار فوق الرقبة، وغمز لأنيسيا فيدوروفنا، ولم يبدأ السيدة، بل ضرب على وتر رنان ونظيف، وبدأ بشكل محسوب وهادئ ولكن بحزم لإنهاء الأغنية الشهيرة بوتيرة هادئة للغاية: Po li and Ice pavement. في الوقت نفسه، في الوقت نفسه، مع هذا الفرح الهادئ (نفس الفرح الذي تنفسه أنيسيا فيدوروفنا بالكامل)، بدأ دافع الأغنية في الغناء في أرواح نيكولاي وناتاشا. احمر خجلاً أنيسيا فيدوروفنا وغادرت الغرفة وهي تضحك وهي تغطي نفسها بمنديل. واصل العم إنهاء الأغنية بشكل نظيف ومجتهد ونشط، ونظر بنظرة ملهمة متغيرة إلى المكان الذي غادرت منه أنيسيا فيدوروفنا. لم يكن هناك سوى شيء صغير يضحك في وجهه على أحد جانبيه، تحت شاربه الرمادي، وكان يضحك بشكل خاص عندما تتقدم الأغنية أكثر، ويتسارع الإيقاع، وينطلق شيء ما في الأماكن التي يكون فيها الصوت مرتفعًا للغاية.
- جميل، جميل، عمه؛ "المزيد والمزيد" صرخت ناتاشا بمجرد أن انتهى. قفزت من مقعدها وعانقت عمها وقبلته. - نيكولينكا، نيكولينكا! - قالت وهي تنظر إلى أخيها وكأنها تسأله: ما هذا؟
كما أحب نيكولاي حقًا لعب عمه. قام العم بتشغيل الأغنية للمرة الثانية. ظهر وجه أنيسيا فيودوروفنا المبتسم مرة أخرى عند الباب ولا تزال هناك وجوه أخرى من خلفها... "خلف المفتاح البارد، تصرخ: يا فتاة، انتظري!" لعب العم، وقام بحركة ماهرة أخرى، ومزقها وحرك كتفيه.
"حسنًا، حسنًا، يا عمي العزيز"، تشتكي ناتاشا بصوت متوسل، كما لو أن حياتها تعتمد على ذلك. وقف العم وكان كما لو كان فيه شخصان - ابتسم أحدهما بجدية للزميل المرح، وقام الزميل المرح بعمل مزحة ساذجة وأنيقة قبل الرقص.
- حسنا يا ابنة! - صاح العم وهو يلوح بيده نحو ناتاشا ويمزق الوتر.
خلعت ناتاشا الوشاح الذي كان يلفها فوقها، وركضت أمام عمها، ووضعت يديها على وركيها، وقامت بحركة بكتفيها ووقفت.
أين وكيف ومتى امتصت هذه الكونتيسة، التي نشأت على يد مهاجر فرنسي، من الهواء الروسي الذي تتنفسه، هذه الروح، من أين حصلت على هذه التقنيات التي كان من المفترض أن تحل محلها منذ فترة طويلة؟ لكن هذه الأرواح والتقنيات كانت هي نفس الأرواح والتقنيات الروسية الفريدة وغير المدروسة التي توقعها عمها منها. بمجرد أن وقفت وابتسمت رسميًا وفخرًا وماكرًا من البهجة ، انتهى الخوف الأول الذي استحوذ على نيكولاي وجميع الحاضرين ، الخوف من أنها ستفعل شيئًا خاطئًا ، وكانوا معجبين بها بالفعل. يقع جسم الطاولة. يتكون الجسم من صفوف وأعمدة. يتم ملء الجدول سطراً تلو الآخر.

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

كيفية عمل جدول بلغة html

دعونا نعطي مثالا، كود أتش تي أم أل:

جدول المثال
العمود 1 العمود 2

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

الآن دعونا نلقي نظرة فاحصة على جميع سمات العلامة

.

سمات العلامة والخصائص

لفتح العلامة

يمكنك تحديد سمات مختلفة.

1. الخاصية align="parameter" - تحدد محاذاة الجدول. يمكن أن تأخذ القيم التالية:

في المثال أعلاه، قمنا بمحاذاة الجدول إلى المنتصف align="center" .

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

. وهكذا، في خلايا مختلفةسوف تكون المحاذاة مختلفة.

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

, , , أو
  • cols - يتم عرض الخط بين الأعمدة
  • لا شيء - كل الحدود مخفية
  • الصفوف - يتم رسم حد بين صفوف الجدول التي تم إنشاؤها من خلال العلامة
  • 12. الخاصية width='number' - تحدد عرض الجدول: إما بالبكسل أو بالنسب المئوية.

    13. فئة الخاصية = "class_name" - يمكنك تحديد اسم الفئة التي ينتمي إليها الجدول.

    14. الخاصية style="styles" - يمكن تعيين الأنماط بشكل فردي لكل جدول.

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

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

    2. خاصية الخلفية = "URL" - لتعيين صورة الخلفية. بدلاً من عنوان URL، يجب كتابة عنوان صورة الخلفية.

    مثال

    جدول المثال
    العمود 1 العمود 2

    يتحول إلى ما يلي على الصفحة:

    في المثال أعلاه، توجد صورة الخلفية في مجلد img (الموجود في نفس الدليل مثل صفحة html)، وتسمى الصورة fon.gif. يرجى ملاحظة أننا أضفنا في العلامة style="color:white;" . نظرًا لأن الخلفية تكون سوداء تقريبًا، لمنع اختلاط النص في الخلفية، فقد جعلنا النص باللون الأبيض.

    3. الخاصية bgcolor = "color" - تحدد لون خلفية الجدول. يمكنك اختيار أي لون من اللوحة بأكملها (راجع رموز وأسماء ألوان html)

    4. حدود الخاصية = "الرقم" - تحدد سمك حدود الجدول. في الأمثلة السابقة، حددنا border="1" مما يعني أن سمك الحدود هو 1 بكسل.

    5. خاصية bordercolor = "color" - تحدد لون الحدود. إذا الحدود = "0" فلن يكون هناك حدود ولن يكون للون الحدود أي معنى.

    6. خاصية cellpadding='number' - مسافة بادئة من الإطار إلى محتويات الخلية بالبكسل.

    7. خاصية تباعد الخلايا = "الرقم" - المسافة بين الخلايا بالبكسل.

    8. الخاصية cols='number' - عدد الأعمدة. إذا لم تقم بتعيينه، فسيقوم المتصفح نفسه بتحديد عدد الأعمدة. والفرق الوحيد هو أن تحديد هذه المعلمة سيؤدي على الأرجح إلى تسريع عملية تحميل الجدول.

    9. إطار الخاصية = "المعلمة" - كيفية عرض الحدود حول الجدول. يمكن أن تأخذ القيم التالية:

    • باطلة - لا ترسم الحدود
    • الحدود - الحدود حول الطاولة
    • أعلاه - حد على طول الحافة العلوية للجدول
    • أدناه - الحدود في أسفل الجدول
    • hsides - إضافة حدود أفقية فقط (أعلى وأسفل الجدول)
    • vsides - رسم الحدود الرأسية فقط (على يسار ويمين الجدول)
    • RHS - الحدود فقط الجانب الأيمنالجداول
    • lhs - الحد الموجود على الجانب الأيسر من الجدول فقط

    10. الخاصية height='number' - تحدد ارتفاع الجدول: إما بالبكسل أو بالنسب المئوية.

    11. قواعد الخاصية = "المعلمة" - مكان عرض الحدود بين الخلايا. يمكن أن تأخذ القيم التالية:

    • الكل - يتم رسم خط حول كل خلية في الجدول
    • المجموعات - يتم عرض خط بين المجموعات التي شكلتها العلامات
    .

    السمات والخصائص

    1. الخاصية align="parameter" - تحدد المحاذاة خلية منفصلةالجداول. يمكن أن تأخذ القيم التالية:

    • اليسار - محاذاة اليسار
    • مركز - محاذاة المركز
    • اليمين - المحاذاة اليمنى

    2. خاصية الخلفية = "URL" - لتعيين صورة الخلفية للخلية. بدلاً من عنوان URL، يجب كتابة عنوان صورة الخلفية.

    3. الخاصية bgcolor = "color" - تحدد لون خلفية الخلية.

    4. خاصية bordercolor = "color" - تحدد لون حدود الخلية.

    5. الخاصية char="letter" - تحدد الحرف الذي يجب إجراء المحاذاة منه. يجب تعيين قيمة سمة المحاذاة على char.

    6. الخاصية colspan='number' - تحدد عدد الخلايا الأفقية المراد دمجها.

    7. الخاصية height='number' - تحدد ارتفاع الجدول: إما بالبكسل أو كنسبة مئوية.

    8. الخاصية width='number' - تحدد عرض الجدول: إما بالبكسل أو كنسبة مئوية.

    9. الخاصيةrowspan='number' - تحدد عدد الخلايا العمودية المراد دمجها.

    10. الخاصية valign="parameter" - المحاذاة الرأسية لمحتويات الخلية.

    • أعلى - محاذاة محتويات الخلية إلى الحافة العلوية للصف
    • وسط - محاذاة متوسطة
    • أسفل - محاذاة إلى الحافة السفلية
    • خط الأساس - التوافق مع خط الأساس
    ملاحظة 1

    للعلامة

    . المعلمات لعلامة واحدة
    بداخله

    كيفية منع حدود الخلايا في الجدول من الالتصاق ببعضها البعض

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

    ...

    عزيزي القارئ، لقد تعلمت الآن الكثير عنها علامة HTMLطاولة. الآن أنصحك بالانتقال إلى الدرس التالي.