Καθορίστε με CSS την εμφάνιση του ιστού γραφικών αισθητήρων στο IoT

Στο προηγούμενο άρθρο της σειράς για πώς να φτιάξετε γραφήματα κατάστασης αισθητήρων που είναι συνδεδεμένοι στο Internet of Things IoT εξηγεί τον τρόπο χρησιμοποιήστε μια ιστοσελίδα που έχει αναπτυχθεί σε HTML ως δομή για γραφικά. Τα στοιχεία της ιστοσελίδας, τα οποία είχαν μειωθεί στο ελάχιστο χρησιμοποιώντας αντικείμενα <div>, δεν όρισαν άμεσα την εμφάνισή του, αντίθετα, αναφέρθηκαν στο πληροφορίες εμφάνισης σε ένα φύλλο στυλ CSS, που είναι αυτό που πρόκειται να εξηγηθεί σε αυτό το μέρος της σειράς.

Στη λύση που προτείνω για τη δημιουργία γραφημάτων αισθητήρων που συνδέονται με το IoT, χρησιμοποιείται ένα έγγραφο CSS που φορτώνεται από το έγγραφο HTML. Εάν ο κωδικός HTML θα δημιουργηθεί από μια εφαρμογή στον διακομιστή, για παράδειγμα στο PHP, θα ήταν πολύ απλό να το συμπεριλάβετε ως μέρος του κώδικα που ορίζει την ιστοσελίδα αντί να τη φορτώσετε από αυτήν, κάτι που θα μπορούσε να βελτιστοποιηθεί λίγο με την αποθήκευση μιας κλήσης. Όποια επιλογή κι αν επιλεγεί, περιλαμβάνει η πιο βολική μέθοδος επεξεργαστείτε τον κωδικό CSS σε ξεχωριστό έγγραφο για να το διαχειρίζεστε πιο άνετα και να μπορείτε να το επαναχρησιμοποιήσετε. Στο παράδειγμα που αναπτύχθηκε στο σεμινάριο αυτής της σειράς άρθρων, έχει δοθεί το όνομα estilo.css.

Με τον ίδιο τρόπο, Όταν ασχολείστε με πολύπλοκα έργα, θα ήταν σκόπιμο να χρησιμοποιείτε πολλά ξεχωριστά φύλλα στυλ σε διαφορετικά έγγραφα, τόσο για να μπορείτε να επαναχρησιμοποιείτε συγκεκριμένες λειτουργίες χωρίς να χρειάζεται να τις φορτώνετε όλες κάθε φορά, όσο και για να επεξεργάζεστε τον κώδικα πιο εύκολα διανέμοντάς τον σε διαφορετικά έγγραφα σύμφωνα με την αντίστοιχη λογική δομή.

Τα στυλ CSS Προσπαθούν να περιγράψουν όλα τα άκρα της συμπεριφοράς και της εμφάνισης μιας ιστοσελίδας από διάφορους τύπους προσεγγίσεων, όλες ταυτόχρονα έγκυρες, ενώ προσπαθούν να σέβονται όσο το δυνατόν περισσότερο τη συμβατότητα με τις προδιαγραφές της προηγούμενης έκδοσης. Αυτό σημαίνει ότι υπάρχουν πολλές πιθανές λύσεις που λύνουν τις ίδιες ανάγκες. καθώς και μεγάλος αριθμός διαθέσιμων πόρων (ιδιότητες CSS). Λόγω της διδακτικής προσέγγισης του άρθρου και για να μην μπερδεύονται οι νέοι χρήστες στο CSS, μόνο τα ακίνητα και τις απαραίτητες δομές για τον τελικό στόχο, που πρόκειται να αναπαραστήσει γραφικά δεδομένα από αισθητήρες συνδεδεμένους στο Διαδίκτυο των πραγμάτων. Παράλληλα, υπάρχει και α μικρή εισαγωγή στο CSS, κλιμακωτά φύλλα στυλ.

Μορφοποίηση ιδιοτήτων CSS

El βασική μορφή Αποτελείται από ένα όνομα ιδιότητας, το σύμβολο άνω και κάτω τελείας, την αξία ιδιότητας και το σύμβολο ερωτηματικό. nombre:valor;

CSS σας επιτρέπει να χρησιμοποιείτε διαφορετικές μονάδες μέτρησης στο ίδιο έγγραφο συμπεριλαμβανομένων εκείνων που σχετίζονται με τη δομή (τη μέτρηση του τι περιέχει ένα στοιχείο) ως ποσοστά, σε σχέση με τη συσκευή στην οποία αναπαριστώνται, όπως το εικονοστοιχείο, ή απόλυτα όπως εκατοστά. Οι μονάδες εκφράζονται μετά την τιμή σύμφωνα με την ακόλουθη συντομογραφία κωδικοποίησης.

Για την εφαρμογή που πρόκειται να κάνουμε, είναι σημαντικό να λάβετε υπόψη τουλάχιστον τρεις ενότητες στυλ. Το % για τη λήψη μετρήσεων σε σχέση με το μέγεθος του δοχείου ενός αντικειμένου, το pixel για μετρήσεις σύμφωνα με την ανάλυση της οθόνης και τα χιλιοστά (στην πραγματικότητα, οποιαδήποτε απόλυτη μέτρηση) για τη δημιουργία έντυπων αναφορών.

Υπάρχουν μερικοί σύνθετες ιδιότητες, ή σύνθετο, που εξαρτώνται από πολλές τιμές (όπως χρώμα, μέγεθος, στυλ...), για να υποδείξουν την τιμή, υπάρχουν δύο δυνατότητες στο CSS: γράψτε, με την κατάλληλη σειρά, όλα τα τιμές που χωρίζονται με κενά ή χρησιμοποιούν το άθροισμα απλών ιδιοτήτων που ισοδυναμούν με το σύνθετο. Για παράδειγμα, και τα τέσσερα περιθώρια ενός αντικειμένου μπορούν να καθοριστούν σε μία ιδιότητα margin ή μπορεί να οριστεί με ιδιότητες margin-top, margin-right, margin-bottom y margin-left. Παρεμπιπτόντως, αυτή η σειρά (δεξιόστροφα) είναι αυτή που ακολουθείται από τις περιγραφές των τιμών που «περιβάλλουν» ένα στοιχείο όπως το εσωτερικό (γέμιση) ή το εξωτερικό περιθώριο, το περίγραμμα...

Με όσα έχουν εξηγηθεί μέχρι τώρα μπορούμε τώρα να δούμε μερικά παραδείγματα ιδιοτήτων

Στο παραπάνω παράδειγμα Το χρώμα ορίζεται χρησιμοποιώντας έναν κωδικό 6 δεκαεξαδικών ψηφίων που αντιπροσωπεύουν, σε ζεύγη, την τιμή του κόκκινου, του πράσινου και του μπλε στοιχείου. Όταν συμβαίνει, όπως στο παράδειγμα, ότι τα δύο ψηφία είναι ίσα, μπορεί να συντμηθεί ως #F09 (το οποίο, παρεμπιπτόντως, αντιστοιχεί στα λεγόμενα "web safe χρώματα"). Στην τελική πρόταση θα αποφύγω τη χρήση αυτών των συντομογραφιών για να ενοποιήσω τα κριτήρια και να την κάνω πιο ευανάγνωστη. Μπορείτε επίσης να συντομεύσετε τις τιμές των σύνθετων ιδιοτήτων, όπως π.χ 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 ως Safari o Chrome. Το πρόθεμα -moz Χρησιμοποιείται για προγράμματα περιήγησης που βασίζονται στο μηχανή απόδοσης de Mozilla, επί του παρόντος Είδος μικρής σαύραςΩς Firefox και τα παράγωγά του. Για να αναφερθώ EdgeHTML, Η μηχανή απόδοσης πρόγραμμα περιήγησης άκρη από τη Microsoft (πρώην Τρίαινα), χρησιμοποιείται το πρόθεμα -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 που βρίσκεται στο φάκελο ΕΟΤ μέσα στον κύριο (root) φάκελο και έχει εκχωρηθεί ως οικογενειακό όνομα CircuitExpandedLight. Παρεμπιπτόντως, σας αρέσει αυτή η γραμματοσειρά; Είναι δωρεάν, μπορείτε κατεβάστε δωρεάν τη γραμματοσειρά 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 (με την τιμή 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%.

  Οι παλαιότερες εκδόσεις του προγράμματος περιήγησης της Microsoft δεν χρησιμοποιούσαν αυτήν την ιδιότητα, αλλά είχαν την ιδιότητα 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; (μέσα)

Οι τιμές των μετρήσεων εκφράζονται με τις μονάδες που έχουν ήδη εξηγηθεί. Όταν πρόκειται για ιδιότητες που ορίζονται από πολλές τιμές, τα στοιχεία που εκφράζονται με διαφορετικούς τύπους μέσων όρων μπορούν να αναμειχθούν. Επιπλέον, υπάρχουν ορισμένες ειδικές τιμές που σχετίζονται με τη χρήση που πρόκειται να κάνουμε σε αυτήν την υλοποίηση γραφημάτων αισθητήρων στο IoT. Συγκεκριμένα, μπορούμε να χρησιμοποιήσουμε την τιμή auto στο ακίνητο margin ως πηγή για να κεντράρετε αντικείμενα σε ορισμένες περιπτώσεις.

Στο παραπάνω παράδειγμα, για την κλάση "small_box" ορίζεται ένα περίγραμμα πάχους 2 pixel, σχεδιασμένο με μαύρη διαδρομή (#000000) συνεχής (solid). Στην κατηγορία "big_box" η γραμμή που χρησιμοποιείται για το περίγραμμα είναι διακεκομμένη (dashed) και το κόκκινο χρώμα (#FF0000). Για να εκφράσουμε αυτές τις τιμές χωριστά μπορούμε να χρησιμοποιήσουμε border-width για πάχος, border-style για το εγκεφαλικό και border-color για χρώμα. Αυτές οι ιδιότητες ακμών είναι με τη σειρά τους σύνθετες και σχηματίζονται από τα πάνω, δεξιά, κάτω και αριστερά χαρακτηριστικά, ακολουθώντας τη φορά των δεικτών του ρολογιού όπως εξηγήθηκε παραπάνω.

Οι δύο κατηγορίες που έχουν οριστεί έχουν τις ίδιες μετρήσεις, αλλά η πρώτη είναι μικρότερη από τότε, όταν χρησιμοποιείται η τιμή border-box για περιουσία box-sizing, το padding, το περίγραμμα και το περιθώριο σχεδιάζονται μέσα στο αντικείμενο αντί γύρω από το περιεχόμενο, όπως είναι η προεπιλογή. Στην κατηγορία "big_box" δεν υποδεικνύεται, επομένως η τιμή λαμβάνεται από προεπιλογή content-box γεγονός που προκαλεί την αύξηση της επένδυσης, του περιγράμματος και του περιθωρίου στο μέγεθος που υποδεικνύεται από width y height.

Η τιμή του περιθωρίου για τις κλάσεις στο παραπάνω παράδειγμα είναι 10 εικονοστοιχεία πάνω, δεξιά, κάτω και αριστερά, επομένως θα μπορούσε να εκφραστεί ως μία τιμή margin:10px;. Είναι πολύ ενδιαφέρον να γνωρίζουμε αυτήν την εναλλακτική για να κατανοήσουμε τον κώδικα που αναπτύχθηκε από τρίτα μέρη, αν και, σε αυτήν την πρόταση εφαρμογής, για να γίνει πιο ευανάγνωστη, προτείνεται να υποδεικνύονται, επαναλαμβανόμενες, οι τιμές.

Οι τρεις κατηγορίες στο προηγούμενο παράδειγμα παράγουν το ίδιο αποτέλεσμα, ο ορισμός του λεγόμενου "λακωνικού" είναι πιο συμπαγής και λιγότερος αυτός του λεγόμενου "loquacious" που, περισσότερο από για να προσθέσει σαφήνεια στην ανάγνωση, είναι η κανονική μορφή χρησιμοποιείται για την τροποποίηση κάποιας μερικής, συγκεκριμένης πτυχής μιας ιδιότητας, επαναχρησιμοποιώντας τις άλλες τιμές με κληρονομικότητα (παρέχονται από το κοντέινερ ή παρέχονται από μία από τις κλάσεις που έχουν εκχωρηθεί στο στοιχείο). Εάν το φορτίο που επιβάλλεται στον διακομιστή από το επιπλέον κείμενο αυτού του τρόπου καθορισμού των ιδιοτήτων και άλλων περιστάσεων που, για να γίνει ο κώδικας πιο ευανάγνωστος, όπως σχόλια, αυξάνουν το μέγεθος και συνεπώς την επισκεψιμότητα, ήταν σχετικοί, θα ήταν δυνατό να επεξεργαστείτε το (για παράδειγμα) από 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 ya 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, τα αντικείμενα με την υψηλότερη τιμή in 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 pixel, το αριστερό και το δεξί περιθώριο θα είναι αυτόματα (κεντράρετε το μπλοκ) και το πλάτος του στοιχείου θα είναι 300 pixel. Εάν η ανάλυση οθόνης είναι 640 pixel, το πλάτος του μπλοκ θα είναι 620 pixel. Δεδομένου ότι ο δεύτερος ορισμός μέσων δεν περιλαμβάνει πληροφορίες περιθωρίου και οι συσκευές που πληρούν τη δεύτερη προϋπόθεση θα πληρούν επίσης την πρώτη, το οριζόντιο περιθώριο θα εξακολουθεί να είναι αυτόματο.

Τέλος, στο παράδειγμα αλλάζει το χρώμα του φόντου ώστε να είναι λευκό στην εκτύπωση.

Ο συνήθης τρόπος ορισμού στυλ για διαφορετικά μέσα είναι συνήθως να ξεκινάμε με τα κοινά, συνήθως χρώματα και γραμματοσειρές, ακολουθούμενα από τις πιο περιοριστικές γεωμετρίες (οι μετρήσεις των συσκευών με τον μικρότερο αριθμό pixel) συνήθως για smartphone και tablet όπου, επιπλέον Θα είναι σημαντικό να γνωρίζετε εάν χρησιμοποιούνται κάθετα ή οριζόντια με orientation και σίγουρα επίσης η επίλυσή του με min-resolution. Στη συνέχεια, υποδεικνύονται τα διαφορετικά μεγέθη για μεγαλύτερες οθόνες και συνήθως τελειώνει με μέσα εκτύπωσης και φωνής, τα οποία στο παράδειγμα των γραφικών IoT έχουν παραληφθεί.

Χρήση @media Οι επιβλητικές συνθήκες όπως οι διαστάσεις, η ανάλυση και ο προσανατολισμός επιτρέπουν στον σχεδιαστή να δημιουργήσει μια ενιαία ιστοσελίδα που, με διαφορετικά στυλ, θα φαίνεται η πιο κατάλληλη για κάθε συσκευή. Αυτή η συμπεριφορά ονομάζεται συνήθως ανταποκρινόμενη σχεδίαση. προσαρμόσιμο σχέδιο, σε πολύ ελεύθερη μετάφραση.

CSS για κοντέινερ γραφικών SVG

Με όσα έχουν εξηγηθεί μέχρι τώρα, είναι πλέον δυνατό να οριστούν τα στυλ που το Δοχείο HTML γραφικών SVG με το οποίο να αναπαριστά την κατάσταση των αισθητήρων που είναι συνδεδεμένοι στο IoT. Στον παρακάτω κώδικα βρίσκεται η πρόταση που περιλαμβάνει, σχολιάστηκε, την κατανομή σε στήλες που αντιστοιχεί σε μεγαλύτερο αριθμό γραφημάτων από αυτά που χρησιμοποιεί η πρόταση της σειράς άρθρων, ώστε να μπορεί να επαναχρησιμοποιηθεί σε άλλες περιπτώσεις.

Παρακάτω μπορείτε να δείτε πώς θα μοιάζουν αυτά τα στυλ. Κώδικας HTML από προτεινόμενο κοντέινερ για γραφικά SVG από το προηγούμενο άρθρο.

Το επόμενο άρθρο αυτής της σειράς εξηγεί πώς να σχεδιάσετε με SVG Γραφήματα δεδομένων της κατάστασης των αισθητήρων που είναι συνδεδεμένοι στο Internet of Things (IoT).