Είτε το ξέρετε είτε όχι, εκμεταλλεύεστε το CSS σχεδόν κάθε φορά που ανοίγετε ένα πρόγραμμα περιήγησης ιστού. Είναι το πρότυπο σύστημα που χρησιμοποιείται από σχεδόν κάθε σύγχρονη ιστοσελίδα για να δώσει σελίδες τη διάταξη και την εμφάνισή τους. Κάποιοι από εσάς μπορεί να σκέφτεστε " Έχω κάνει ιστοτόπους πριν και ήταν εύκολο, ποτέ δεν χρειαζόμουν CSS. "Και αυτό είναι αλήθεια. Δεν χρειάζεστε το CSS για να δημιουργήσετε έναν όμορφο και λειτουργικό ιστότοπο, αλλά οι πιθανότητες είναι ότι ο ιστότοπός σας θα μπορούσε να είναι μικρότερος, καθαρότερος, πιο συνεπής και καλύτερα να είχε επιλέξει το CSS από την αρχή. Σήμερα θα σας παρουσιάσουμε τα βασικά στοιχεία του τι μπορεί να κάνει το CSS. Αυτός ο οδηγός δεν θα σας φέρει από έναν αρχάριο στο βραβευμένο σχεδιαστή ιστοσελίδων, αλλά θα σας βοηθήσει να καταλάβετε πώς λειτουργεί το CSS και πώς μπορεί να σας κάνει πολύ χρόνο και προσπάθεια.

γρήγορη επισκόπηση

Το CSS (Cascading Style Sheet) έχει ως στόχο να κάνει ένα πράγμα: να διαχειριστεί την παρουσίαση του site σας. Αυτό μπορεί να ακούγεται απλό αλλά να το θυμάστε καθώς συνεχίζουμε. Ένα σημαντικό πράγμα που πρέπει να απομακρυνθεί από αυτό το γεγονός είναι ότι η παρουσίαση ΔΕΝ είναι η δουλειά του HTML. Η HTML ορίζει τη δομή της σελίδας σας (τι είναι μια κεφαλίδα, ποιο είναι το υποσέλιδο κλπ). Το CSS παίρνει αυτή τη δομή και κάνει όλη την εργασία σχετικά με τον τρόπο με τον οποίο παρουσιάζεται αυτή η δομή.

Ο ΛΑΘΟΣ ΔΡΟΜΟΣ

Για να σας δώσουμε μια ιδέα σχετικά με το τι πρόκειται να διορθώσει το CSS, ρίξτε μια ματιά σε αυτόν τον κώδικα HTML:

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


Οι αλλοδαποί έχουν εισβάλει επίσης.


Τι εμφανίζεται στο πρόγραμμα περιήγησής σας ως κάτι τέτοιο:

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

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

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

Σχεδιασμός με CSS

Πώς μπορούμε να αφαιρέσουμε όλες αυτές τις επιπλέον ετικέτες; Πώς μπορούμε να μειώσουμε το μέγεθος της σελίδας ενώ διατηρούμε τα χρώματα και τη διάταξή μας; Λοιπόν, εικόνα που θα μπορούσατε να ορίσετε σε ένα μέρος τι θα έπρεπε να μοιάζουν με όλους τους τίτλους σας (ας πούμε, μεγάλο πράσινο κείμενο). Στη συνέχεια, δεν χρειάζεται να ορίσετε το χρώμα για κάθε μοναδικό τίτλο. Το ίδιο ισχύει για τις παραγράφους. Αν θέλετε όλο το κείμενο της παραγράφου να είναι μπλε, απλώς το ορίσατε ως κανόνα CSS για την ετικέτα "p". Όλες οι άλλες παράγραφοι θα έχουν μπλε κείμενο, χωρίς να χρειάζεται να το καθορίζετε κάθε φορά.

Το CSS διδάσκεται καλύτερα από το παράδειγμα. Ας ξεκινήσουμε καθορίζοντας ακριβώς τους κανόνες που περιγράφονται παραπάνω - όλοι οι τίτλοι πρέπει να είναι πράσινοι και όλες οι παράγραφοι θα πρέπει να είναι μπλε. Χρησιμοποιώντας τον επεξεργαστή κειμένου της επιλογής σας, ξεκινήστε ένα νέο αρχείο με το όνομα style.css και προσθέστε το ακόλουθο κείμενο:

 h1 {χρώμα: πράσινο;} p {χρώμα: μπλε;}

Αυτό ορίζει όλες τις ετικέττες h1 ως πράσινο κείμενο και όλες τις ετικέτες p ως μπλε κείμενο.

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

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

Πολύ καθαρότερο, ε; Έχουμε ήδη μειώσει το συνολικό μέγεθος του ιστότοπού μας και αυτό ήταν μόνο με 2 καταχωρήσεις στο "blog" μας.

CSS για διάταξη

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

Δημιουργώντας κάτι τέτοιο είναι εκπληκτικά απλό στο CSS. Επιστρέψτε στο αρχείο style.css και προσθέστε την παρακάτω ενότητα:

 #sidebar {width: 100px; ύψος: 200px; μεθοριακό στυλ: συμπαγές; float: αριστερά. περιθώριο-δεξιά: 15px; }}

Σημειώστε την # στην αρχή της πλευρικής γραμμής του ονόματος. Με λίγα λόγια, αυτό λέει στο CSS ότι εργαζόμαστε με ένα νέο μοναδικό όνομα στοιχείου που δημιουργήσαμε, σε αντίθεση με μια ενσωματωμένη ετικέτα όπως h1 ή p . Η μακρά εξήγηση περιλαμβάνει τη διαφορά μεταξύ ενός id και μιας κλάσης, και εξηγείται λεπτομερώς εδώ.

Θα πρέπει να μπορείτε να δείτε πολλά σημαντικά κομμάτια εδώ. Αρχικά δημιούργησα ένα νέο αναγνωριστικό που ονομάστηκε sidebar, έδωσε ένα συγκεκριμένο ύψος και πλάτος, ένα συμπαγές περίγραμμα και διευκρίνισε ότι θα έπρεπε να έχει περιθώριο 15px στη δεξιά πλευρά. Τον είπαμε να επιπλέει στην αριστερή πλευρά της οθόνης, με άλλα στοιχεία σελίδας (όπως το κείμενό σας) να κυκλοφορούν γύρω της. Μπορείτε να ενεργοποιήσετε αυτό το στοιχείο προσθέτοντας μια ετικέτα sidebar στο σώμα της HTML σας, κάτι τέτοιο.

  • Στοιχείο 1
  • Σημείο 2
  • Σημείο 3

Και τώρα που ανοίγετε τη σελίδα σας, υπάρχει η καινούργια πλαϊνή σας μπάρα!

συμπέρασμα

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

Image credit: geirarne