הגדר עם CSS את המראה של האינטרנט הגרפי של החיישן ב-IoT

במאמר הקודם בסדרה על כיצד ליצור גרפי מצב של חיישנים המחוברים לאינטרנט של הדברים IoT מסביר את הדרך להשתמש בדף אינטרנט שפותח ב-HTML כמבנה לגרפיקה. רכיבי דף האינטרנט, שצומצמו למינימום באמצעות אובייקטים <div>, לא הגדירו ישירות את המראה שלה, במקום זאת, הם התייחסו ל מידע על המראה לגיליון סגנונות CSS, וזה מה שהולך להיות מוסבר בחלק זה של הסדרה.

בפתרון שאני מציע לעשות גרפים של חיישנים המחוברים ל-IoT, נעשה שימוש במסמך CSS שנטען מהמסמך HTML. אם הקוד HTML יווצר מאפליקציה בשרת, למשל ב PHP, יהיה פשוט מאוד לכלול אותו כחלק מהקוד שמגדיר את דף האינטרנט במקום לטעון אותו ממנו, שניתן לבצע אופטימיזציה מעט על ידי שמירת שיחה. כל אפשרות שנבחרה, השיטה הנוחה ביותר כוללת לערוך את הקוד CSS במסמך נפרד כדי לנהל אותו בצורה נוחה יותר וכדי להיות מסוגל לעשות בו שימוש חוזר. בדוגמה שפותחה במדריך של סדרת מאמרים זו, הוא קיבל את השם estilo.css.

באותה הדרך, כאשר עוסקים בפרויקטים מורכבים יהיה מומלץ להשתמש במספר גיליונות סגנונות נפרדים במסמכים שונים, גם כדי להיות מסוגל לעשות שימוש חוזר בפונקציונליות ספציפיות מבלי לטעון את כולן בכל פעם, וגם כדי לערוך את הקוד ביתר קלות על ידי הפצתו למסמכים שונים לפי המבנה הלוגי המתאים.

הסגנונות CSS הם מנסים לתאר את כל הקיצוניות של ההתנהגות והמראה של דף אינטרנט מכמה סוגים של גישות, כולן תקפות בו-זמנית, תוך ניסיון לכבד את התאימות עם מפרטי הגרסה הקודמת ככל האפשר. המשמעות היא שיש הרבה פתרונות אפשריים הפותרים את אותם צרכים. כמו גם מספר גבוה של משאבים זמינים (מאפיינים 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 אתה יכול לבחור פורמטים עם תחביר דומה לזה של הפונקציות. לדוגמה, כדי לבטא צבע כשלושת הערכים של הרכיב האדום, הירוק והכחול שלו (ה דגם RGB) ייכתב 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 זה עובד עבור דפדפנים המבוססים על WebKit כמו ספארי o Chrome. הקידומת -moz הוא משמש עבור דפדפנים המבוססים על מנוע עיבוד de מוזילה, בהווה שממיתכמו Firefox ונגזרותיו. להתייחס EdgeHTML, מנוע עיבוד דפדפן אדג ' ממיקרוסופט (לשעבר קִלשׁוֹן), נעשה שימוש בקידומת -ms. המקרה של הדפדפן Opera הוא קצת מיוחד מאז שהוא התחיל להשתמש בעצמו מנוע עיבוד, המכונה עם -o, אבל כרגע עובד עם WebKit, שמתבטא כ -webkit.

כדי להשתמש במאפיין המתייחס לדפדפן, כתוב את שמו, הקדמתו והפרד אותו במקף כמו ב -o-border-radius:10px;, שישמש להגדרת גבול מעוגל (פינה מעוגלת) בגרסאות ישנות יותר של הדפדפן Opera.

תגובות

כדי להבהיר את הקוד 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 בתוך התיקיה הראשית (השורש) ומוקצה כשם משפחה CircuitExpandedLight. דרך אגב, אתה אוהב את הגופן הזה? זה בחינם, אתה יכול הורד בחינם את הגופן Sircuito שעיצבתי עבור תמונת GranaBot.

  כפי שניתן לראות בדוגמה, המאפיין 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 וצורותיהם בהתאמה עם ציון שקיפות (ערוץ אלפא)

אלא אם כן נתבקש אחרת על ידי הוספת סיומת היחידה, ה דגם RGB משתמש בערכים עשרוניים מ-0 עד 255, עבור שלושת הרכיבים, הערך של ה- רכיב אלפא הוא מקדם (עשרוני מאפס לאחד) והערך הראשון של ה דגם צבע HSL, הגוון, הוא ערך עשרוני שנע בין 0 ל-360 (ללא יחידות) המייצג זווית. ערכי הרוויה והבהירות של דגם HSL הם בדרך כלל מבוטאים באחוזים.

כפי שכבר נאמר, למרות שהשימוש בו אינו תכוף במיוחד, ניתן לציין צבעים בשמם בפורמט color:black; במקום color:#000000;. הפורמט הראשון קריא יותר אך מוגבל לטבלת ערכים קצרה שגם קשה יותר לשנות אותה באופן מספרי מיישום שנכתב ב JavaScript.

עבור ההצעה שלנו לייצוג גרפי של נתונים מחיישנים המחוברים ל-IoT, נצטרך רק שלושה מאפיינים הקשורים לצבע. הם ישמשו הן לציון שם הטקסט, אשר מוסבר כעת, והן לציון שמו של כל רכיב התומך בו.

• 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 (גובה) על ידי הפחתת מדידת הריפוד, הגבול והשוליים ממנו, במקום חיבורו. כדי להשתמש במצב זה, הקצה את propiedad box-sizing את הערך border-box (ברירת המחדל היא content-box)

התרשים הבא מציג באופן גרפי את הערכים הנובעים מהם width (רוחב) ו height (גבוה) אם משתמשים box-sizing:border-box; (הסך הכל) אוbox-sizing:content-box; (בְּתוֹך)

ערכי המדידות באים לידי ביטוי ביחידות שכבר הוסברו. כאשר מדובר במאפיינים המוגדרים על ידי מספר ערכים, ניתן לערבב נתונים המבוטאים עם סוגים שונים של ממוצעים. בנוסף, ישנם כמה ערכים מיוחדים הרלוונטיים לשימוש שאנו הולכים לעשות ביישום זה של גרפי חיישנים ב-IoT. באופן ספציפי, אנו יכולים להשתמש בערך 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;, מאפשר לך גם להסתיר חפצים, אשר ישמשו "להדליק" ול"כבות" אותם מהם JavaScript.

אם הממדים של אלמנט אינם מצוינים, יש צורך בממדים הדרושים כדי להתאים את התוכן שלו (למעשה, הוא מתאים לתוכן ללא צורך ביצירת מימד). אבל אם המידות מצוינות, זה עלול לקרות שהאובייקטים הכלולים אינם מתאימים; במקרה כזה, הממדים אינם מכובדים, הם מוגדלים כדי לאפשר לכל התוכן להיות גלוי.

כדי שהאלמנטים הכלולים במדידות אחרות ייחתכו כאשר הם חורגים מהגודל, נעשה שימוש במאפיין 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. לאחר מכן מצוינים הגדלים השונים למסכים גדולים יותר, ובדרך כלל זה מסתיים במדיה הדפסה וקולית, שבדוגמה של גרפיקת IoT הושמטו.

להשתמש @media תנאים כפופים כמו מידות, רזולוציה והתמצאות מאפשרים למעצב ליצור דף אינטרנט אחד, שעם סגנונות שונים, ייראה הכי מתאים לכל מכשיר. התנהגות זו נקראת בדרך כלל עיצוב רספונסיבי; עיצוב ניתן להתאמה, בתרגום חופשי מאוד.

CSS עבור מיכל גרפי SVG

עם מה שהוסבר עד כה, ניתן כעת להגדיר את הסגנונות שה- מיכל HTML גרפי SVG שבאמצעותו לייצג את מצב החיישנים המחוברים ל-IoT. בקוד הבא ההצעה כוללת, בהערה, את התפלגות העמודות התואמת למספר רב יותר של גרפים מאלה שהצעת סדרת המאמרים משתמשת בהם, כך שניתן לעשות בה שימוש חוזר במקרים אחרים.

למטה תוכלו לראות איך הסגנונות האלה ייראו. קוד HTML ממיכל המוצע עבור גרפיקת SVG מהמאמר הקודם.

המאמר הבא בסדרה זו מסביר איך לצייר עם SVG גרפי נתונים של מצב חיישנים המחוברים לאינטרנט של הדברים (IoT).