Πέμπτη, 19 Μαΐου, 2022
Online σεμινάρια
ΑρχικήcssCSS – Visibility (Ορατότητα)

CSS – Visibility (Ορατότητα)

CSS – Visibility (Ορατότητα)

Ακόμα ένα άρθρο για την css που αποτελεί καρπό εργασίας σπουδαστών του προγράμματος web designer – developer του ΚΕΔΙΒΙΜ του Παν. Αιγαίου το οποίο στηρίζει το Εργαστήριο ΤΠΕ Ήρων μέσω του επιχειρησιακού του βραχίονα της DreamWeaver.Gr

Μια ιδιότητα της CSS που ονομάζεται ορατότητα (Visibility), σάς επιτρέπει να αποκρύψετε ένα στοιχείο από την προβολή. Μπορείτε να χρησιμοποιήσετε αυτήν την ιδιότητα μαζί με τη JavaScript για να δημιουργήσετε πολύ περίπλοκο μενού και πολύ περίπλοκες διατάξεις ιστοσελίδων.

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

ΣΗΜΕΙΩΣΗ: Να θυμάστε ότι ο πηγαίος κώδικας θα εξακολουθεί να περιέχει ότι υπάρχει στην αόρατη παράγραφο, επομένως δεν πρέπει να το χρησιμοποιείτε για να αποκρύψετε ευαίσθητες πληροφορίες, όπως στοιχεία πιστωτικής κάρτας ή κωδικούς πρόσβασης.

CSS – Visibility (Ορατότητα)

Η ιδιότητα ορατότητας μπορεί να λάβει τις τιμές που αναφέρονται στον πίνακα που ακολουθεί :

A\A Εκτίμηση & Περιγραφή ( Value & Description )
1  

Ορατός ( visible )

Το κουτί και τα περιεχόμενά του εμφανίζονται στον χρήστη.

2  

Κρυμμένος ( hidden )

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

3  

Κατάρρευση ( collapse )

Αυτό είναι για χρήση μόνο με δυναμικές στήλες πίνακα και εφέ σειρών.

 

Εδώ είναι ένα παράδειγμα :

html-gr-css-visibility

 

Θα παράγει το ακόλουθο αποτέλεσμα :

Αυτή η παράγραφος πρέπει να είναι ορατή με κανονικό τρόπο.

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

Μια κοντινή ιδιότητα στο  visibility hidden είναι το display none. Η διαφορά τους έγκειται στην ορατότητα. Το visibility: hidden κρύβει το στοιχείο, αλλά εξακολουθεί να καταλαμβάνει χώρο στη διάταξη. Το display none δεν αφαιρεί εντελώς το στοιχείο από το έγγραφο. Δεν καταλαμβάνει χώρο, παρόλο που το HTML για αυτό βρίσκεται ακόμα στον πηγαίο κώδικα

Εξαρτάται από τις ανάγκες που υπάρχουν κατά την κατασκευή μιας ιστοσελίδας ή την κατασκευή ενός eshop

Μετάφραση: Νίκος Τσοχαταρίδης
Πηγή: tutorialspoint.com

RELATED ARTICLES

CSS – Pseudo Classes

CSS – Layers

CSS – Positioning (Tοποθέτηση)

ΑΦΗΣΤΕ ΜΙΑ ΑΠΑΝΤΗΣΗ

εισάγετε το σχόλιό σας!
παρακαλώ εισάγετε το όνομά σας εδώ

- Advertisment -
Online σεμινάρια

ΣΧΕΤΙΚΑ ΑΡΘΡΑ