حدد باستخدام CSS مظهر شبكة رسومات المستشعر في إنترنت الأشياء

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

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

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

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

تنسيق خصائص CSS

El التنسيق الأساسي وهو يتكون من اسم الخاصية، وعلامة النقطتين، وقيمة الخاصية، وعلامة الفاصلة المنقوطة. nombre:valor;

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

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

هناك البعض خصائص معقدة، أو مركب، والذي يعتمد على عدة قيم (مثل اللون، الحجم، النمط...)، للدلالة على القيمة هناك احتمالان في CSS: كتابة جميع العناصر بالترتيب المناسب القيم مفصولة بمسافات أو استخدام مجموع الخصائص البسيطة المكافئة للمعقدة. على سبيل المثال، يمكن تحديد كافة الهوامش الأربعة لكائن ما في خاصية واحدة margin أو يمكن تعيينها مع الخصائص margin-top, margin-right, margin-bottom y margin-left. بالمناسبة، هذا الترتيب (في اتجاه عقارب الساعة) هو الذي يتبعه أوصاف القيم التي "تحيط" بعنصر مثل الهامش الداخلي (الحشو) أو الهامش الخارجي، الحد...

ومع ما تم شرحه حتى الآن يمكننا أن نرى الآن بعض الأمثلة على الخصائص

في المثال أعلاه يتم تعريف اللون باستخدام رمز مكون من 6 أرقام سداسية عشرية تمثل، في أزواج، قيمة المكون الأحمر والأخضر والأزرق. عندما يحدث، كما في المثال، أن الرقمين متساويان، يمكن اختصاره بـ #F09 (والتي، بالمناسبة، تتوافق مع ما يسمى "الألوان الآمنة للويب"). وفي الاقتراح النهائي سأتجنب استخدام هذه الاختصارات لتوحيد المعايير وجعلها أكثر قابلية للقراءة. يمكنك أيضًا اختصار قيم الخصائص المعقدة، مثل margin في المثال، عندما تتكرر جميع القيم أو الأزواج المتضادة. على نفس المنوال لحفظ النص، من الممكن أيضًا حذف الوحدة عند تحديد خاصية عندما تكون القيمة صفرًا، لأنها غير ذات صلة في هذه الحالة.

بعض القيم، بالإضافة إلى إمكانية التعبير عنها رقميًا، لها اسم مما يجعل الكود أكثر قابلية للقراءة ويسمح لك بتذكرها بشكل أفضل. على سبيل المثال، بدلاً من الرمز الرقمي السداسي العشري للهدف، #FFFFFF (o #FFF)، يمكن أن تكون مكتوبة white بنفس النتيجة. وبهذه الطريقة اللون الأسود #000000 (o #000)، يمكن استبداله black.

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

إلى التعبير عن طريقة خاصة لاستخدام سلسلة من القيم المركبة (المعقدة) للخاصية CSS يمكنك اختيار تنسيقات ذات بناء جملة مشابه لتلك الخاصة بالوظائف. على سبيل المثال، للتعبير عن لون بالقيم الثلاث لمكوناته الأحمر والأخضر والأزرق ( نموذج آر جي بي) سيتم كتابتها color: rgb(128, 255, 64);. ضمن هذا النمط من التعبير من الممكن أيضًا استخدام الوحدات؛ في المثال أعلاه، تكون مكونات اللون قيمة عشرية من 0 إلى 255، ولكن قد يكون من الأسهل التعبير عن ذلك كنسبة مئوية من إجمالي كل مكون لون، وفي هذه الحالة يمكن أيضًا كتابتها كـ color: rgb(50%, 100%, 25%);.

حساب القيم في CSS

في أحدث إصدارات CSS من الممكن القيام به عمليات حسابية بسيطة لحساب القيم. للقيام بذلك، استخدم calc ويتم التعبير عن العملية التي سيتم تنفيذها بين قوسين. يمكنك الإشارة إلى الوحدات والأقواس وعوامل التشغيل البسيطة مثل المجموع (+)، الطرح (-)، عمليه الضرب (*) والتقسيم (/). سيكون التعبير من النوع width:calc((90%-20px)/2));.

يمكن استخدام المتغيرات في العمليات الحسابية CSS الإشارة في حساب خاصية واحدة إلى قيمة أخرى var. لكي تتمكن من استخدام متغير دون الحاجة إلى الرجوع إلى خاصية فعلية للنمط، يُسمح أيضًا بالاستشهاد بخاصية غير موجودة. CSS يوصي التنسيق --nombre-variable (واصلتان أمام اسم الخاصية المخترعة). بهذه الطريقة، لتحديد ارتفاع العنصر بنصف عرضه في التعبير CSS كما height:calc(var(width)/2); ولتعريف متغير جديد "السمك" (الذي يمكن أن تستخدمه الخصائص الأخرى)، يمكنك الكتابة، على سبيل المثال، --grosor:4px; لتكون قادرة على الرجوع إليها لاحقا باسم margin-top:calc(var(--grosor)*4);

خصائص CSS المعتمدة على المتصفح

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

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

البادئة -webkit إنه يعمل للمتصفحات بناءً على بكت كما سفاري o الكروم. البادئة -moz يتم استخدامه للمتصفحات القائمة على محرك تقديم de موزيلاحاليا وزغةكما برنامج فايرفوكس ومشتقاته. للإشارة إلى EdgeHTML، و محرك تقديم المتصفح حافة من مايكروسوفت (سابقا رمح ثلاثي الشعب)، يتم استخدام البادئة -ms. حالة المتصفح العمل خاص بعض الشيء منذ أن بدأ في استخدام نفسه محرك تقديم، المشار إليه ب -o، ولكنه يعمل حاليًا مع بكت، والذي يتم التعبير عنه بـ -webkit.

لاستخدام خاصية تشير إلى متصفح، قم بكتابة اسمها، مع البادئة بها والفصل بينها بواصلة كما في -o-border-radius:10px;، والذي من شأنه أن يعمل على تعيين حدود مستديرة (زاوية مستديرة) في الإصدارات القديمة من المتصفح العمل.

تعليقات

لتوضيح الكود CSS يمكنك استخدام التعليقات، مما سيجعلها أكثر قابلية للقراءة على الرغم من أن مساوئها هي زيادة حجمها. بناء جملة التعليقات في CSS إنها مثل التعليقات متعددة الأسطر C + + وأنا متأكد من أنك تعرفه بالفعل: البدء /* وتنتهي بـ */، كما هو الحال في C + +، يمكن أن يشغل عدة أسطر.

المحددات

تعريف يتم تعيين الخصائص للكائنات في المستند HTML تجميعهم في محددات وضمهم إلى الأقواس. يمكن للمحدد الرجوع إلى عنصر اللغة HTML (تسمية)، مثل div، فئة (المخصصة مع class en HTML) معرف (تم تعيينه بـ id en HTML) أو الكل ("المحدد العام") الممثلة بالعلامة النجمية (*). يوضح المثال التالي محددًا لكل نوع:

التسميات HTML يتم التعبير عنها في تعريف النمط باسمها، ويتم تمييز الفئات بوضع نقطة قبل الاسم (.) وعلامة الجنيه (#) للمعرفات.

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

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

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

في المثال السابق تم تعريف العناصر div التي هي أيضا من فئة درجة الحرارة والعناصر التي لها كل من فئة درجة الحرارة وفئة الاستهلاك (كلاهما في نفس الوقت) كما في class="temperatura consumo". العناصر <div> من الكود HTML مع class="temperatura" سيكون لديهم ارتفاع 100٪

خصائص CSS لتحديد النص

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

الطباعة (الخط)

• font-family يشير إلى اسم الخط المستخدم لعنصر ما. يمكنك كتابة اسم واحد أو قائمة، حسب الأفضلية والفصل بين الأسماء بفواصل، من الخطوط التي سيتم استخدامها بدلا من ذلك في حالة عدم وجود الخط المطلوب. وعلى نفس المنوال، من الممكن استخدام الخطوط العامة مع الأسماء monospace, serif, sans-serif, cursive, fantasy. من بين هذه الخطوط العامة، الأهم (لعرض البيانات المتوفرة) هو الأول الذي، كما يوحي اسمه، سيستخدم خط التباعد الثابت المتوفر في النظام والذي تم إعداده مسبقًا بواسطة المتصفح. الثاني، serif، وسوف يستخدم الخيار الافتراضي المتاح الرقيق (التشطيب أو النعمة). دون مزاد إذا دل على الثالث، sans-serif. تقليد الكتابة المرسومة باليد cursive (طريقة تسميتها يمكن تحسينها بشكل واضح) والطباعة الزخرفية للنظام fantasy، آخر الخمسة.

  أما بالنسبة للكود CSS للمسافات معنى خاص كفاصل، فعندما يتكون اسم عائلة الخطوط من عدة كلمات مفصولة بمسافات، يتم كتابته بين علامتي الاقتباس لتجنب الالتباس.

  CSS font-tamily ejemplo de uso

  CSS

  <br /> font-family: DejaVu, Helvetica, Arial, “a palo seco”, sans-serif;

  1	font-family: DejaVu, Helvetica, Arial, “a palo seco”, sans-serif;

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

  CSS Ejemplo de descarga de la definición de una tipografía con @font-face

  CSS

  <br /> @font-face<br /> {<br /> font-family:”SircuitoExpandedLight”;<br /> src: url(‘/EOT/Sircuito-Expanded-Light.eot’);<br /> }</p> <p>@font-face<br /> {<br /> font-family:”SircuitoRegularMedium”;<br /> src: url(‘tipos/Sircuito-Regular-Medium.eot’);<br /> src: url(‘tipos/Sircuito-Regular-Medium.eot?iefix’) format(‘eot’),<br /> url(‘tipografia/Sircuito-Regular-Medium.woff’) format(‘woff’),<br /> url(‘tipografia/Sircuito-Regular-Medium.ttf’) format(‘truetype’),<br /> url(‘tipografia/Sircuito-Regular-Medium.svg#webfont’) format(‘svg’);<br /> -webkit-font-smoothing:antialiased;<br /> }

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

  @font-face { font-family:“SircuitoExpandedLight”; src: url(‘/EOT/Sircuito-Expanded-Light.eot’); }   @font-face { font-family:“SircuitoRegularMedium”; src: url(‘tipos/Sircuito-Regular-Medium.eot’); src: url(‘tipos/Sircuito-Regular-Medium.eot?iefix’) format(‘eot’), url(‘tipografia/Sircuito-Regular-Medium.woff’) format(‘woff’), url(‘tipografia/Sircuito-Regular-Medium.ttf’) format(‘truetype’), url(‘tipografia/Sircuito-Regular-Medium.svg#webfont’) format(‘svg’); -webkit-font-smoothing:antialiased; }

  في أول التعريفين في المثال السابق، يتم تحميل حرف المستند Sircuito-Expanded-Light.eot الموجود في مجلد EOT داخل المجلد الرئيسي (الجذر) ويتم تعيينه كاسم عائلة حلبة توسيع الضوء. بالمناسبة هل يعجبك هذا الخط؟ إنه مجاني، يمكنك ذلك قم بتنزيل خط Sircuito الذي صممته لصورة GranaBot مجانًا.

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

  يستخدم المثال الثاني عدة مستندات بديلة بحيث يعمل نفس التعريف مع عدة متصفحات (كل منها سيقوم بتحميل النوع الذي يمكنه تفسيره)

  يتضمن السطر الأخير من التعريف الخاصية font-smoothing لتليين الحرف (تطبيق أ الحواف). وبما أنها ليست خاصية قياسية، يتم استخدام البادئة -webkit.

• font-size يعمل على الإشارة إلى حجم الرسالة كما في font-size:12px;

• font-weight يضبط سمك الخط. يمكن التعبير عنها كقيمة عددية، عادةً ما تكون من مضاعفات 100 بين 100 و900، وفقًا للأوزان المطبعية المعتادة، أو في كثير من الأحيان باسم: normal لسمك القاعدة، bold للشجاعة، bolder للنسخة التي تسمى عادةً باللون الأسود، light للغرامة (وتسمى عادة الضوء) و lighter للنحافة (وتسمى أحيانا رقيقة).

  القيمة الرقمية للإصدار العادي من الخط هي 400 (بدون وحدة) و700 للإصدار الغامق.

  افتراضيًا، إذا لم تتم الإشارة إلى قيمة أخرى، فإن مظهر الخط هو الذي يتوافق معها normal أو 400 لذلك، إذا لم يتم تغييره في العنصر العام أو في الحاوية التي يرث منها، فلا يلزم الإشارة font-weight بشجاعة normal.

• font-stretch يتم استخدامه للإشارة إلى عرض الحرف، طالما أنه متوفر في العائلة المقابلة. القيم المحتملة التي يمكن أن تتخذها الخاصية، مرتبة من الأضيق إلى الأوسع، هي: ultra-condensed, extra-condensed, condensed, semi-condensed, normal, semi-expanded, expanded, extra-expanded y ultra-expanded. وبنفس المعايير التي تم استخدامها في الخاصية السابقة، يكون العرض الافتراضي هو normal وليس من الضروري الإشارة إليه صراحة إلا إذا تم تغييره بترتيب هرمي أعلى من الترتيب المحدد.

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

• text-decoration يعمل على التأكيد (مع القيمة underline) ، خط علوي (مع القيمة overline)، شطب (بالقيمة line-through) أو فلاش (بالقيمة blink) النص الذي تؤثر عليه هذه الخاصية.

• لإكمال سلسلة جوانب الطباعة، على الرغم من أنها ليست ذات صلة كبيرة بتطبيقنا، font-variant، يسمح لك بالتقديم أحرف صغيرة (أحرف كبيرة صغيرة) إلى النصوص.

نص

• text-align يخبر المتصفح بكيفية محاذاة كتلة النص. تكون المحاذاة المحتملة على اليسار (والذي يتم اعتباره افتراضيًا) مع الكود left، مركز مع القيمة center، الاستخدام الصحيح right ومبرر في كلا الطرفين مع justify.

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

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

• letter-spacing هي قيمة المسافة بين حروف الكلمات، والتي تعرف في الطباعة باسم تقنين الأحرف o تتبع.

• word-spacing يمثل قياس المسافات بين الكلمات.

• white-space يضبط سلوك المسافات البيضاء في النص. عندما يتم استخدام القيمة normal، والذي يتم أخذه افتراضيًا، يربط عدة مسافات فارغة في الكود HTML في أحد العروض التقديمية على صفحة الويب (التي يعرضها المتصفح) ويأخذ المسافات البيضاء كمرجع لكسر السطر إذا لم يكن هناك مساحة في الكتلة.

  القيمة nowrap كما أنه يجمع الفراغات المتكررة في مكان واحد ولكنه لا يقسم أسطر النص في الفراغات حتى لو لم يكن السطر مناسبًا للحاوية، ويملأ المساحة إذا لزم الأمر ويكتب بالخارج إذا لزم الأمر. لتقسيم الخطوط بشكل صريح، يمكنك استخدام الملصق <br> de HTML.

  استخدام pre ولا يتم توحيد المساحات الفارغة من خلال ضمها في مكان واحد، ولا يتم تقسيم الخطوط باستخدام المسافات كمرجع.

  pre-line قم بضم الفراغات المتكررة وكسر السطور إذا لزم الأمر باستخدام الفراغات كمرجع.

  pre-wrap يحافظ على المسافات البيضاء المتكررة ويكسر الأسطر إذا لزم الأمر باستخدام المسافات البيضاء كمرجع.

لون

En CSS يمكن التعبير عن اللون وفقا ل نموذج الألوان RGB أو حسب نموذج الألوان HSL وفي كلتا الحالتين يمكن تضمين معلومات الشفافية، وهي قيمة القناة الرابعة التي يتم استدعاؤها عادة قناة ألفا o تكوين ألفا، مما أدى إلى ظهور نماذج RGBA وHSLA.

للتعبير عن اللون في الشكل RGB باستخدام التدوين الست عشري يتم استخدام بناء الجملة #RRGGBB، حيث تكون RR هي قيمة المكون الأحمر (من حيث المبدأ، باستخدام رقمين سداسي عشري)، وGG هي قيمة المكون الأخضر وBB هي قيمة المكون الأزرق. كما ذكرنا من قبل، إذا كان الرقمان من كل مكون لهما نفس القيمة، فيمكن التعبير عنها #RGB الحد من عدد الألوان المتاحة لما يسمى بالألوان الآمنة للويب

بالإضافة إلى هذه الطريقة في تمثيل اللون، وهي الأكثر كلاسيكية واستخدامًا، يمكن التعبير عنها على أنها rgb(R,G,B), hsl(HSL), rgba(R,G,B,A) y hsla(HSLA) للإشارة إليه في الشكل RGB, HSL والنماذج الخاصة بها مع بيان الشفافية (قناة ألفا)

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

كما سبق أن قلنا، على الرغم من أن استخدامه ليس متكررًا جدًا، إلا أنه يمكن الإشارة إلى الألوان باسمها في التنسيق color:black; بدلا من color:#000000;. التنسيق الأول أكثر قابلية للقراءة ولكنه يقتصر على جدول مختصر للقيم والذي يصعب أيضًا تعديله رقميًا من تطبيق مكتوب به جافا سكريبت.

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

• color يشير إلى لون العنصر HTML وما يحتويه (الذي يرثه) ما لم يتم تغييره صراحةً عن طريق تعيين ألوان أخرى بشكل فردي.

• background-color يستخدم لتحديد لون خلفية العنصر HTML. بالإضافة إلى الإشارة إلى اللون كقيمة RGB o HSL يمكنك استخدام قيمة خاصة transparent لجعل الكائن ليس له لون خلفية ويمكن رؤية ما يقع خلفه، أي أنه لا يغطي العناصر التي تم رسمه عليها.

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

  الإصدارات الأقدم من متصفح مايكروسوفت لم تستخدم هذه الخاصية، ولكنها كانت تمتلك هذه الخاصية filter (مرشح) يمكن أن يدعم، من بين قيم أخرى، ألفا (لـ قناة ألفا) والتي يمكن تعيين نسبة عتامة لها opacity حسب التنسيق:

  CSS para dar opacidad en los antiguos navegadores web de Microsoft

  CSS

  <br /> filter:alpha(opacity=50); /* Opacidad del 50% en una versión 8.0 o anterior de Microsoft Internet Explorer */

  1	filter:alpha(opacity=50); /* Opacidad del 50% en una versión 8.0 o anterior de Microsoft Internet Explorer */

تدابير

En CSS، قياس العناصر <div>، الذي اخترناه لتكوين حاوية الرسومات، تم ضبطه باستخدام width (العرض) و height (ألتو).

بين محتوى <div> ومحيطها توجد منطقة تعبئة يتم تحديد قيمتها padding. يحيط بمحيط الجسم الحافة التي تم تحديد قياسها بالخاصية border. فصل الجزء الخارجي من الكائن <div> من بين الأشياء الأخرى المحيطة هناك مساحة يتم تحديد قياسها margin.

في الظروف العادية، يتم قياس المساحة التي يستخدمها الكائن <div> يمكن حسابه كمجموع عرضه أو ارتفاعه بالإضافة إلى المساحة المتروكة (padding) بالإضافة إلى الحدود (border) بالإضافة إلى الهامش (margin). عندما يكون القياس ذو الصلة الذي تم تحديده هو المساحة الداخلية المفيدة للكائن <div>، هذا التركيب عملي جداً، لكن إذا كان ما هو معلوم هو القياس الإجمالي المتوفر هل يمكن تغيير هذا السلوك، يتم تعيينه افتراضيًا، بحيث يكون إجمالي قياس العرض والارتفاع هو المشار إليه بواسطة width (العرض) و height (الارتفاع) وذلك بطرح قياس الحشو والحد والهامش منه بدلاً من إضافته. لاستخدام هذا الوضع، قم بتعيين ممتلكات box-sizing قيمة border-box (الافتراضي هو content-box)

ويوضح الرسم البياني التالي بيانيا القيم الناتجة عن width (العرض) و height (عالية) في حالة الاستخدام box-sizing:border-box; (المجموع) أوbox-sizing:content-box; (داخل)

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

في المثال السابق، بالنسبة للفئة "small_box" تم تعريف حد بسمك 2 بكسل، مرسوم بحدود سوداء (#000000) مستمر (solid). في فئة "big_box" يكون الخط المستخدم للحدود متقطعًا (dashed) واللون الأحمر (#FF0000). للتعبير عن هذه القيم بشكل منفصل يمكننا استخدامها border-width للسمك، border-style للسكتة الدماغية و border-color للون. خصائص الحافة هذه هي بدورها مركبة وتتكون من الميزات العلوية واليمنى والسفلية واليسرى، باتباع اتجاه عقارب الساعة كما هو موضح أعلاه.

الفئتان اللتان تم تعريفهما لهما نفس القياسات، لكن الأولى أصغر منذ ذلك الحين، عند استخدام القيمة border-box للممتلكات box-sizingويتم رسم الحشو والحدود والهامش داخل الكائن بدلاً من رسمه حول المحتوى، كما هو الحال افتراضيًا. في فئة "big_box" لم تتم الإشارة إليه، لذلك يتم أخذ القيمة بشكل افتراضي content-box مما يؤدي إلى زيادة الحشو والحدود والهامش إلى الحجم المشار إليه بواسطة width y height.

قيمة هامش الفئات في المثال أعلاه هي 10 بكسل في الأعلى واليمين والأسفل واليسار، لذا يمكن التعبير عنها كقيمة واحدة margin:10px;. من المثير للاهتمام معرفة هذا البديل لفهم الكود الذي طورته أطراف ثالثة، على الرغم من أنه في اقتراح التنفيذ هذا، ولجعله أكثر قابلية للقراءة، يُقترح الإشارة إلى القيم المتكررة.

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

تؤثر أبعاد نموذج الصندوق بشكل أساسي على العناصر <div> ولكن من الممكن فرض هذا السلوك على العناصر الأخرى باستخدام الخاصية display وقيمة block. لجعل عنصر يتدفق مثل النص على السطر، استخدم display:inline; ويمكن الجمع بين كل من السلوكيات والقياسات والتدفق display:inline-block;

القيمة none على الممتلكات display، تستعمل ك display:none;، يسمح لك أيضًا بإخفاء الكائنات، مما سيعمل على "تشغيلها" و"إيقافها" منها جافا سكريبت.

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

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

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

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

المستطيلات (الكتل) التي حددناها بالعناصر <div>، يتم وضعهما تحت الآخر بشكل افتراضي. لتغيير هذا السلوك يمكنك استخدام الخاصية float، مشيرا left o right كقيمة، بحيث تتدفق من اليسار إلى اليمين أو من اليمين إلى اليسار على التوالي. على العكس من ذلك، لمنع كائن واحد من "الطفو" إلى يمين أو يسار كائن آخر، يمكنك استخدام الخاصية clear مع القيم left, right o both، والتي تتجاوز التدفق من اليسار إلى اليمين، أو من اليمين إلى اليسار، أو كليهما.

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

هناك طريقة أخرى لتكوين تدفق محتوى العنصر وهي تقسيمه إلى أعمدة باستخدام الخاصية column-count (والتي ينبغي أن تكون مصحوبة في الوقت الحالي -webkit-column-count ذ دي -moz-column-count) يمكن الإشارة إلى حجم الأعمدة (مقترح بالفعل) باستخدام column-width (-webkit-column-width -moz-column-width) والفصل بين الأعمدة مع column-gap (-webkit-column-gap -moz-column-gap)

بحيث لا يتم تقسيم الكتل ويتم توزيع محتواها على عدة أعمدة، يمكنك استخدامها display:inline-block; على الرغم من أن هذا يعني بالتأكيد. اترك جزءًا من العمود غير مستخدم.

وضع

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

• position:static; إنه الموضع الافتراضي (ليس من الضروري الإشارة إليه إذا لم يتم تعديله مسبقًا).يتبع هذا النوع من الموضع التدفق "الطبيعي" للصفحة: عنصر تلو الآخر يبدأ من اليسار، وينمو، طالما هناك مساحة على اليمين ومن الأعلى إلى الأسفل. ولا يستخدم الإحداثيات الأفقية أو الرأسية لتحديد موقعه، بل يتبع الموضع الذي يتوافق مع ترتيب الكائن.

• position:fixed; يتم استخدامه لوضع كائن في موضع ثابت في نافذة المتصفح (مثل القائمة على سبيل المثال)، ويتم تحديد موقع العنصر أفقيًا باستخدام left o right لتحديد الانفصال على اليسار أو اليمين على التوالي ومع top o bottom للفصل أعلى أو أسفل حافة نافذة المتصفح (منفذ العرض).

  باستخدام هذا وأنواع أخرى من تحديد المواقع، يمكن أن تتداخل الكائنات. الكائنات المرسومة أولاً (تم تعريفها مسبقًا في الكود HTML) يمكن تغطيتها بتلك المرسومة لاحقًا (تلك المضمنة لاحقًا في الكود HTML). لتغيير الترتيب الطبيعي يمكنك استخدام الخاصية z-index، الكائنات ذات القيمة الأعلى في z-index أنها تغطي تلك ذات القيمة الأقل.

• position:relative; ينقل العنصر من موضعه "العادي" كما هو موضح بالخصائص left o right أفقيا و top o bottom عموديا.

• position:absolute; يضع العنصر في موضع ثابت بالنسبة للكائن الذي يحتوي عليه. يتم التعبير عن موقعه كما في الحالات السابقة بـ left,right, top y bottom

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

  من المهم أيضًا أن تتذكر العنصر الذي يحتوي على الكائنات <div> التي نستخدمها على المستوى الهرمي الأول هو <body>، لذلك، إذا <div> ماذا تستخدم position:absolute; إذا لم يكن موجودًا في موقع آخر، فسيكون موضعه "مطلقًا" فيما يتعلق بصفحة الويب.

خصائص وسائط وخصائص محددة (استعلامات الوسائط)

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

للإشارة إلى وسائل الإعلام، استخدم @media بطريقة مشابهة لما تم شرحه بالفعل للخطوط ذات @font-face، مرفقة بين قوسين ({ y }) تعريفات العناصر المختلفة: التسميات HTML، فئات، معرفات ...

أنواع الوسائط المتوفرة في CSS3 هي: all، للإشارة إلى أي وسائط (الكل)، screen لأي نوع من الشاشات (الإصدارات الأقدم من CSS لقد ميزوا بين شاشات التلفاز وشاشات الكمبيوتر) print لإخراج الطابعة و speech لقارئات الويب الصوتية التي تفسر المعلومات باستخدام مُركِّبات الصوت.

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

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

ومن بين الشروط المتاحة نجدها مثيرة للاهتمام بشكل خاص max-width (أقصى عرض للنافذة)، max-height (الحد الأقصى لارتفاع النافذة)، min-width (الحد الأدنى لعرض النافذة)، min-height (الحد الأدنى لارتفاع النافذة)، orientation (الاتجاه الذي يمكن أن يكون landscapeأو المناظر الطبيعية أو portrait، رَأسِيّ)، max-resolution (أقصى دقة في dpi، نقطة في البوصة، أو في dpcm، نقطة لكل سنتيمتر) و min-resolution (الحد الأدنى من الدقة، أيضًا في dpi o dpcm).

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

وأخيرًا، في المثال، تم تغيير لون الخلفية بحيث تكون بيضاء في النسخة المطبوعة.

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

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

CSS لحاوية رسومات SVG

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

أدناه يمكنك أن ترى كيف ستبدو هذه الأنماط. كود HTML من الحاوية المقترحة لرسومات SVG من المادة السابقة.

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