Κάρτες CSS

Χορηγός κατηγορίας

Η CSS (Cascading Style Sheets) είναι μια γλώσσα φύλλων στυλ που χρησιμοποιείται για την περιγραφή της εμφάνισης και της μορφοποίησης ενός εγγράφου γραμμένου σε γλώσσα σήμανσης, δημιουργημένη από τον Håkon Wium Lie. Είναι μια βασική τεχνολογία του Παγκόσμιου Ιστού, σχεδιασμένη για να διαχωρίζει την παρουσίαση από τη δομή του εγγράφου. Η CSS χαρακτηρίζεται από ευελιξία και ισχυρές δυνατότητες στυλιστικής μορφοποίησης, επιτρέποντας ακριβή έλεγχο στη διάταξη, τα χρώματα, τις γραμματοσειρές και τα εφέ κίνησης των στοιχείων της σελίδας. Αυτή η γλώσσα προσφέρει προηγμένους επιλογείς και ιδιότητες, παρέχοντας στους προγραμματιστές εργαλεία για τη δημιουργία ανταποκρινόμενων, οπτικά ελκυστικών διεπαφών. Η CSS υποστηρίζει επίσης τη δομικότητα και την επαναχρησιμοποίηση των στυλ, διατηρώντας την απόδοση και επιτρέποντας τη δημιουργία συνεπών σχεδίων σε διαφορετικούς περιηγητές και συσκευές.

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

Δείγμα καρτών CSS από την εφαρμογή μας

Κατεβάστε την εφαρμογή μας από το App Store ή το Google Play για να αποκτήσετε περισσότερες δωρεάν καρτέλες μάθησης ή εγγραφείτε για πρόσβαση σε όλες τις καρτέλες μάθησης.

Ποιες είναι οι διαφορές μεταξύ των κλάσεων και των IDs στο CSS;

Οι τάξεις και οι αναγνωριστικοί είναι εργαλεία CSS που σας επιτρέπουν να διαμορφώσετε συγκεκριμένα στοιχεία HTML. Παρόλο που οι δύο μέθοδοι επιλογής είναι σχεδόν ίδιες, υπάρχουν κάποιες διαφορές.

1. Μοναδικότητα: Οι τάξεις είναι μη μοναδικές, που σημαίνει ότι μπορείτε να χρησιμοποιήσετε τις ίδιες τάξεις σε πολλά διαφορετικά στοιχεία. Από την άλλη πλευρά, τα αναγνωριστικά είναι μοναδικά σε μια σελίδα, που σημαίνει ότι κάθε αναγνωριστικό μπορεί να χρησιμοποιηθεί μόνο μια φορά ανά σελίδα.

2. Συγκεκριμένοτητα: Τα αναγνωριστικά είναι πιο συγκεκριμένα σε σχέση με τις τάξεις. Αυτό σημαίνει ότι εάν τα στυλ συγκρούονται, τα στυλ αναγνωριστικού θα παρακάμψουν τα στυλ τάξης.

3. Εφαρμογή JavaScript: Τα αναγνωριστικά χρησιμοποιούνται συχνά για να χειριστούν στοιχεία HTML με τη χρήση JavaScript, ενώ οι τάξεις χρησιμοποιούνται λιγότερο συχνά για αυτόν τον σκοπό.

4. Επεκτασιμότητα: Τα στυλ τάξης μπορούν να επαναχρησιμοποιηθούν από πολλά ελεγχόμενα στη σελίδα. Τα αναγνωριστικά είναι λιγότερο ευέλικτα και είναι πιο πιθανό να χρησιμοποιηθούν για τη διαμόρφωση πολύ συγκεκριμένων τμημάτων.

Παρακαλούμε σημειώστε ότι μια από τις καλύτερες πρακτικές είναι να χρησιμοποιούμε τάξεις για τα στυλ CSS και αναγνωριστικά για τη JavaScript.

Πώς μπορεί ένα CSS stylesheet να συνδεθεί με ένα έγγραφο HTML;

Ένα στυλ CSS μπορεί να συνδεθεί με ένα έγγραφο HTML με έναν από τους ακόλουθους τρόπους:

1. **Στυλ εντός γραμμής:** Τα στυλ επισυνάπτονται απευθείας στα στοιχεία HTML χρησιμοποιώντας το χαρακτηριστικό `style`. Για παράδειγμα:

<p style="color:red;">Το κείμενο είναι κόκκινο</p>

Αυτή η μέθοδος χρησιμοποιείται σπάνια, συνήθως για αλλαγές στυλ "μίας χρήσης".

2. **Εσωτερικό CSS:** Τα στυλ περιλαμβάνονται εντός των ετικετών `<style>` στην ενότητα `<head>` του εγγράφου HTML. Παράδειγμα:

<head>
     <style>
       p { color: red; }
     </style>
   </head>

Αυτή η μέθοδος είναι χρήσιμη για έγγραφα HTML μιας σελίδας.

3. **Εξωτερικό CSS:** Η πιο συνηθισμένη μέθοδος για την επισύναψη CSS. Το στυλ CSS γράφεται σε ένα ξεχωριστό αρχείο (συνήθως με κατάληξη .css) και επισυνάπτεται στο έγγραφο HTML χρησιμοποιώντας έναν σύνδεσμο στην ενότητα `<head>`. Παράδειγμα:

<head>
     <link rel="stylesheet" type="text/css" href="styles.css">
   </head>

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

Τι είναι οι ψευδο-κλάσεις στο CSS και δώστε ένα παράδειγμα της χρήσης τους.

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

Για παράδειγμα, η ψευδό-κλάση :hover επιτρέπει τις οπτικές αλλαγές σε ένα στοιχείο όταν αυτό περνάει πάνω από αυτό με το ποντίκι. Άλλες χρήσιμες ψευδό-κλάσεις περιλαμβάνουν την :active (όταν το στοιχείο είναι ενεργό ή πατήθηκε), :visited (όταν ένας σύνδεσμος έχει επισκεφθεί), ή :first-child (ορίζει το στυλ του πρώτου παιδιού ενός δεδομένου στοιχείου).

Το δείγμα κώδικα δείχνει πώς η ψευδό-κλάση :hover μπορεί να χρησιμοποιηθεί για να αλλάξει το χρώμα φόντου ενός δεδομένου στοιχείου όταν αυτό περνάει πάνω από αυτό με το ποντίκι:
button:hover {
  background-color: red;
}

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

Ποιες είναι οι μέθοδοι τοποθέτησης των στοιχείων στο CSS και τι περιορισμούς έχουν;

Στο CSS, έχουμε διάφορες μεθόδους για τον προσδιορισμό της θέσης των στοιχείων:

1. Static: Αυτή είναι η προεπιλεγμένη ρύθμιση στην οποία τα στοιχεία στοιβάζονται το ένα μετά το άλλο όπως καθορίζεται από τη δομή HTML. Η θέση του στοιχείου δεν έχει σημασία και δεν μπορεί να αλλάξει με τη χρήση των ιδιοτήτων top, right, bottom ή left. Η περιοριστικότητα είναι η έλλειψη ελέγχου επί της τοποθέτησης του στοιχείου.

2. Relative: Σας επιτρέπει να αλλάξετε τη θέση ενός στοιχείου σε σχέση με την αρχική του θέση. Η θέση καθορίζεται από τις ιδιότητες top, right, bottom, left, αλλά δεν επηρεάζει τη διάταξη των άλλων στοιχείων. Η περιοριστικότητα είναι ότι τα στοιχεία απλώς μετατίθενται, δεν αφαιρούνται από την κανονική ροή του εγγράφου.

3. Absolute: Η θέση ενός στοιχείου καθορίζεται σε σχέση με το πλησιέστερο υψηλότερο στοιχείο δομής που έχει διαφορετική τοποθέτηση από στατική (relative, absolute, fixed, sticky). Αν δεν υπάρχει τέτοιο στοιχείο, η θέση καθορίζεται σε σχέση με το ίδιο το έγγραφο. Το στοιχείο αφαιρείται από την κανονική ροή του εγγράφου και δεν επηρεάζει τη διάταξη των άλλων στοιχείων. Η περιοριστικότητα είναι η ανάγκη ελέγχου του πλαισίου τοποθέτησης.

4. Fixed: Η θέση ενός στοιχείου καθορίζεται σε σχέση με τις άκρες του προγράμματος περιήγησης. Ένα τέτοιο στοιχείο δεν κινείται ακόμη και όταν κυλίεται η σελίδα. Αφαιρείται από την κανονική ροή του εγγράφου και δεν επηρεάζει τη διάταξη των άλλων στοιχείων. Η περιοριστικότητα είναι η πιθανότητα να μπλοκάρει άλλα στοιχεία από το διαρκώς τοποθετημένο.

5. Sticky: Αυτό είναι ένας συνδυασμός των relative και fixed τοποθετήσης. Το στοιχείο συμπεριφέρεται σαν ένα στατικό έως ότου η κορυφή του φτάσει σε ένα συγκεκριμένο σημείο (π.χ. την κορυφή της οθόνης), τότε το στοιχείο συμπεριφέρεται σαν να ήταν fixed. Η περιοριστικότητα είναι η ανάγκη υποστήριξης από το πρόγραμμα περιήγησης.

Λήψη IT Flashcards Τώρα

Διευρύνετε τις γνώσεις σας στην CSS με τις κάρτες μας.
Από τα βασικά του προγραμματισμού έως την κατάκτηση προηγμένων τεχνολογιών, το IT Flashcards είναι το διαβατήριό σας για την αριστεία στο IT.
Κατεβάστε τώρα και ανακαλύψτε το δυναμικό σας στον σημερινό ανταγωνιστικό κόσμο της τεχνολογίας.