Εισαγωγή στις τάξεις σε html και css

Είναι αυτονόητο ότι η ανάπτυξη ιστού είναι τεράστια. Ένα μεγάλο μέρος αυτού είναι επειδή σχεδόν όλοι είναι στον Ιστό. Ωστόσο, υπάρχει έλλειψη προγραμματιστών στον τομέα και γι 'αυτό το πρόγραμμα ανάπτυξης ιστοσελίδων είναι τόσο άμεσα διαθέσιμο και δωρεάν. Με αυτό κατά νου, θα σας δείξουμε λίγα πράγματα για το τι είναι το HTML και το CSS. Πιο συγκεκριμένα, θα σας δείξουμε πώς δουλεύουν οι "τάξεις".

Δεν σας ξεκινάμε από την αρχή, καθώς υπάρχουν τόνοι ελεύθερου προγράμματος σπουδών εκεί έξω ήδη. Αντ 'αυτού, πρόκειται ειδικά να σας δείξουμε πώς λειτουργούν τα μαθήματα, καθώς είναι ένα απαραίτητο συστατικό στοιχείο για να σχεδιάσετε τον ιστότοπό σας. Θεωρήσαμε επίσης ότι αξίζει να καλύψουμε πριν δημοσιεύσουμε την εμφάνισή μας στο API Bootstrap του Twitter, καθώς τα μαθήματα αποτελούν απαραίτητο στοιχείο και σε αυτό.

Ως αποκήρυξη, εάν είστε εντελώς νέοι σε HTML και CSS, αυτό πιθανώς δεν είναι καλό ξεκίνημα για εσάς. Εάν είστε εξοικειωμένοι με αυτό, δεν θα πρέπει να είναι πολύ δύσκολο να το πάρει, όμως. Αλλά, αν ψάχνετε για ένα πλήρες φροντιστήριο για αρχάριους, υπάρχουν πολλές επιλογές στο διαδίκτυο. Για να αναφέρουμε μερικούς, υπάρχει το FreeCodeCamp, το πρόγραμμα Odin, το CodeAcademy, η σχολή κώδικα, η Team Treehouse, η Udacity και πολλά άλλα. Αν επιλέξετε να αρχίσετε να σκάβετε σε ένα από αυτά, θα συνιστούσα να κολλήσετε με ένα (όπως το Free Code Camp) και να το τελειώσετε πριν ξεκινήσετε ένα άλλο, καθώς πολλά "βασικά" περιεχόμενα μπορεί να είναι αρκετά επαναλαμβανόμενα.

Με αυτό έξω από το δρόμο, ας σκάψουν σε ποιες κατηγορίες είναι όλα.

Πώς λειτουργούν οι κλάσεις

Οι τάξεις είναι εξαιρετικά χρήσιμες. Παίρνουν την επαναληπτικότητα από το στυλ HTML. Χωρίς μαθήματα, θα σχεδιάζετε κάθε στοιχείο στο markup σας ξεχωριστά. Και τι θα ήταν αν είχατε δύο από τα ίδια στοιχεία, αλλά ήθελε να στυλ κάθε ένα από αυτά διαφορετικά; Θα ήταν ένα πλήρες χάος. Γι 'αυτό έχουμε τάξεις. Οι κλάσεις προσθέτουν κάποια οργανωτική δομή της HTML σας, επιτρέποντάς σας να διατηρήσετε τον κώδικα σας σχετικά καθαρό. Όχι μόνο αυτό, αλλά οι τάξεις μπορούν να χρησιμοποιηθούν περισσότερες από μία φορές. Με άλλα λόγια, δεν θα χρειαστεί να δημιουργήσετε δύο φορές τους ίδιους κανόνες στυλ.

Ακολουθούν τα μαθήματα που μοιάζουν μέσα μας ετικέτα:

Όπως μπορείτε να δείτε, κάτω από την ετικέτα του σώματός μας, έχουμε δύο

στοιχεία με διαφορετικές κλάσεις. Ο πρώτος

η ετικέτα έχει την κλάση "head1" ενώ η δεύτερη ετικέτα έχει την κλάση "head2." Έτσι, στο CSS, αντί να εφαρμόζουμε το styling μόνο στο

στοιχείο, μπορούμε να εφαρμόσουμε στυλ σε αυτές τις μεμονωμένες κατηγορίες. Γιατί θα θέλαμε να το κάνουμε αυτό;

Ο πρωταρχικός λόγος είναι ότι δεν θέλετε όλοι σας

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

ετικετών σε όλο το έγγραφο. Λοιπόν, πώς γράφετε μια κλάση σε HTML; Σαν αυτό:

Κάποιο Περιεχόμενο

Μπορείτε να προσθέσετε την ιδιότητα "class" σε σχεδόν οποιοδήποτε στοιχείο HTML.

Μεγάλος! Έτσι, έχουμε τάξεις, αλλά στην παρούσα κατάσταση τους, δεν κάνουν τίποτα. Αυτό οφείλεται στο ότι δεν έχουμε προσθέσει ακόμα κανόνες στυλ στην τάξη. Για να γίνει αυτό, θα χρειαστεί να δημιουργήσουμε ένα ξεχωριστό έγγραφο .css. Απλά θα το ονομάσω main.css. Σε αυτό το έγγραφο, θα στυλ μια κατηγορία όπως αυτή:

Για να επιλέξετε μια τάξη που θέλουμε να στυλ, το κάνουμε αυτό:

.head1 {χρώμα: κόκκινο; κείμενο-ευθυγράμμιση: κέντρο; }}

Μέσα από τα σγουράκια είναι όλοι οι "κανόνες" (ή styling) που εφαρμόζουμε σε αυτή την κατηγορία. Υπάρχουν πολλοί διαφορετικοί κανόνες που μπορείτε να βάλετε μέσα σε αυτή την τάξη. Στην περίπτωσή μου, άλλαξα το χρώμα του κειμένου σε κόκκινο χρησιμοποιώντας τον κανόνα "χρώμα" και επικεντρώθηκα στο κείμενο χρησιμοποιώντας τον κανόνα "ευθυγράμμιση κειμένου". Μπορείτε να βρείτε μια πλήρη λίστα κανόνων CSS καθώς και την τεκμηρίωσή τους από το δίκτυο προγραμματιστών του Mozilla.

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

Το έγγραφό σας HTML πρέπει να έχει την εξής μορφή:

Και το δοκιμαστικό μας έργο θα πρέπει να μοιάζει με αυτό στον Ιστό:

Για ένα λεπτομερέστερο βίντεο που περνάει από αυτά τα βήματα, δείτε παρακάτω.

βίντεο

συμπέρασμα

Και αυτό είναι το μόνο που υπάρχει στις τάξεις! Είναι πραγματικά απλά κατανοητά. Προφανώς σε μεγάλες και δημοφιλείς ιστοσελίδες που επισκέπτεστε, οι κανόνες εντός των τάξεων είναι πολύ πιο περίπλοκοι από ό, τι καλύψαμε, αλλά με την πιο βασική μορφή τους, έτσι λειτουργούν.

Εάν έχετε οποιεσδήποτε ερωτήσεις ή είχατε πρόβλημα μετά από πολύ καιρό, να είστε βέβαιος να μας ενημερώσετε στα σχόλια παρακάτω ή πάνω στο PCMech Forums! Ή, αν σας ενδιαφέρει ένας πλήρης οδηγός HTML / CSS για αρχάριους στο PCMech, μην ξεχάσετε να μας ενημερώσετε και αυτό!