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

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

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

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

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

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

Η HTML είναι η γλώσσα σήμανσης υπερκειμένου που έκανε το Διαδίκτυο αυτό που γνωρίζουμε και αγαπάμε. Χάρη σε αυτό το θαυμάσιο εργαλείο, οι ιστότοποι φαίνονται όμορφοι και μοντέρνοι και εξασφαλίζουν επίσης ευκολία στη χρήση. Η HTML απλώς τακτοποιεί τα στοιχεία μιας ιστοσελίδας σε μια φιλική προς το χρήστη μορφή. Το έργο του είναι συγκρίσιμο με αυτό που κάνουν άνθρωποι όπως το MS Word ή το OpenOffice. Μετατρέπουν μια απρόσωπη μάζα γραμμάτων σε ένα έγγραφο που περιέχει παραγράφους, τολμηρό κείμενο, πλάγια γράμματα, πίνακες και ακόμη και εικόνες. Η γλώσσα HTML κάνει περίπου το ίδιο πράγμα, με τη μόνη διαφορά ότι τα έγγραφά της εμφανίζονται στο πρόγραμμα περιήγησης και οι δυνατότητες αυτού του εργαλείου είναι πολύ ευρύτερες από αυτές του πρόγραμμα επεξεργασίας κειμένου. Οι ετικέτες χρησιμοποιούνται για τη σήμανση - ειδικές ομάδες, που περιγράφει τη δομή μιας ιστοσελίδας. Περικλείονται σε γωνιακές αγκύλες -<тег>, ώστε το πρόγραμμα περιήγησης να τα ξεχωρίζει από το μεγαλύτερο μέρος του κειμένου. Στη συνέχεια, θα καλύψουμε τα βασικά της HTML για αρχάριους.

Visual editors

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

Όλα αυτά τα προγράμματα δημιουργούν πολλές περιττές ετικέτες που κάνουν την τελική σελίδα δυσκίνητη και μη βέλτιστη. Φυσικά, στην εποχή μας Internet υψηλής ταχύτηταςΑυτό έχει μικρότερη σημασία από ό,τι παλιά, αλλά υπάρχουν αρκετοί λόγοι για τους οποίους ένας συνοπτικός και καλογραμμένος ιστότοπος είναι πιο πρακτικός από τον αντίστοιχο που δημιουργήθηκε σε ένα οπτικό πρόγραμμα επεξεργασίας. Μια ιστοσελίδα που δημιουργήθηκε σε ένα τέτοιο πρόγραμμα δεν θα υποστεί καλή επεξεργασία ρομπότ αναζήτησης, δεδομένου ότι κάθε κιλομπάιτ κώδικα είναι σημαντικό για αυτούς, και ο περίπλοκος και παράλογος κώδικας με ένα σωρό είναι απίθανο να ταιριάζει με το γούστο τους. Επιπλέον, οι συντάκτες συχνά υστερούν από την εποχή, γίνονται άσχετοι και η δαπάνη πόρων για την ανάπτυξή τους δεν είναι πρακτική, καθώς κανένας επαγγελματίας δεν χρησιμοποιεί αυτά τα προϊόντα. Επομένως, όποιος θέλει να εργαστεί στον κλάδο ανάπτυξης ιστοσελίδων πρέπει να γνωρίζει τα βασικά της HTML.

Ετικέτες

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

Υπάρχουν επίσης μεμονωμένες ετικέτες, τα οποία δεν χρειάζεται να κλείσουν. Σε αυτά, το περιεχόμενο βρίσκεται μέσα, όπως ακριβώς μπορεί να γραφτεί για τις περισσότερες ετικέτες HTML, και ορίζει τις ιδιότητες του στοιχείου. Υποδεικνύεται στην αρχική ετικέτα και μοιάζει κάπως έτσι: χαρακτηριστικό="...", όπου αντί για τελείες υπάρχει η τιμή του χαρακτηριστικού. Η γνώση των ετικετών είναι το πρώτο και το πιο σημαντικό σημαντικό βήμαγια να κυριαρχήσετε την HTML. Τα βασικά αυτής της τέχνης περιλαμβάνουν επίσης την κατανόηση της δομής μιας ιστοσελίδας.

Δομή εγγράφου

Κάθε έγγραφο HTML έχει μια αντίστοιχη επέκταση, για παράδειγμα Index.html. Με αυτόν τον τρόπο το πρόγραμμα περιήγησης μπορεί να καταλάβει τι έχει να κάνει και να εμφανίσει σωστά τη σελίδα. Συνιστάται να αποθηκεύετε όλα τα αρχεία που χρησιμοποιούνται για τη δημιουργία ενός ιστότοπου σε έναν κατάλογο, κάτι που θα κάνει τη ζωή σας πολύ πιο εύκολη στο μέλλον. Βασικά στοιχεία γλώσσας σήμανσης Υπερκείμενο HTMLαπαιτούν σαφή κατανόηση της δομής του εγγράφου. Ξεκινά με την ετικέτα, λέγοντας στο πρόγραμμα περιήγησης Έκδοση HTML, που χρησιμοποιείται σε αυτό το έγγραφο. Επί αυτή τη στιγμήΗ πέμπτη έκδοση της γλώσσας είναι τρέχουσα, επομένως δεν χρειάζεται να επινοήσετε τίποτα εδώ, μπορείτε να εισαγάγετε με ασφάλεια την παραπάνω ετικέτα στην αρχή οποιασδήποτε σελίδας.

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

Κεφάλι

Μέσα σε μια ετικέτα ...περιέχει πληροφορίες τεχνικής φύσης που δεν θα εμφανίζονται στη σελίδα, αλλά παρόλα αυτά είναι σημαντικό μέροςέγγραφο HTML. Τα θεμέλια του ιστότοπου τίθενται σε αυτό το μέρος εδώ επιλέγεται η κωδικοποίηση και εισάγεται το όνομα της σελίδας. Περιέχεται σε μια απαιτούμενη ετικέτα . Ο τίτλος εμφανίζεται στο επάνω μέρος του προγράμματος περιήγησης, όπου μπορείτε επίσης να τοποθετήσετε ένα μικρό εικονίδιο που χαρακτηρίζει τα περιεχόμενα της σελίδας. Συνιστάται να υποδεικνύεται αμέσως η κωδικοποίηση του εγγράφου για τη σωστή εμφάνιση του. Αυτό μπορεί να γίνει χρησιμοποιώντας την ετικέτα . Οι μετα-ετικέτες παρέχουν πληροφορίες για τη δομή της σελίδας και συνήθως βρίσκονται μέσα στο κεφάλι.

Σύνδεσμος

Η γνώση των βασικών στοιχείων της HTML περιλαμβάνει επίσης τη χρήση κλιμακωτά στυλσχέδιο ή css. Ορίζουν τις ιδιότητες των στοιχείων που θα εμφανίζονται στη σελίδα. Σύγχρονη προσέγγισηΑυτή η εργασία περιλαμβάνει τη συμπερίληψη χαρακτηριστικών όπως το χρώμα, το ύψος και η θέση του στοιχείου, μέσα εξωτερικό αρχείογια μεγαλύτερη ευκολία. Για να συμπεριλάβετε ένα αρχείο css, χρησιμοποιήστε την ετικέτα . Όταν τελειώσει μοιάζει κάπως έτσι: , όπου href υποδεικνύει τη θέση του αρχείου και ο τύπος υποδεικνύει τον τύπο του.

Σώμα

Σε αυτό το τμήμα του εγγράφου HTML δημιουργείται το ορατό τμήμα της σελίδας. Όλα όσα γίνονται μέσα στο "σώμα" θα εμφανίζονται από το πρόγραμμα περιήγησης. ΣΕ μεταχειρισμένος τεράστιο ποσόΕτικέτες HTML. Τα βασικά είναι η μορφοποίηση κειμένου, η εργασία με συνδέσμους και τα βασικά εργαλεία για τη δόμηση μιας ιστοσελίδας. Για να ξεκινήσετε να εργάζεστε σε HTML, πρέπει απλώς να γνωρίζετε τις βασικές ετικέτες και να μπορείτε να τις χρησιμοποιήσετε. Παρακάτω είναι οι πιο δημοφιλείς:

• - χρησιμοποιείται για την επισήμανση μιας υποσυμβολοσειράς που θα υπόκειται σε ένα ειδικό στυλ που περιγράφεται στο css.
• - δημιουργεί έναν σύνδεσμο σε μια ιστοσελίδα. η διεύθυνση μετάβασης καθορίζεται από το χαρακτηριστικό href.
• - μια από τις πιο δημοφιλείς ετικέτες της εποχής μας. Όποιος αποφασίσει να μάθει τα βασικά της γλώσσας HTMLl θα πρέπει να δώσει ιδιαίτερη προσοχή σε αυτήν, καθώς είναι ένα στοιχείο μπλοκ βάσει του οποίου φτιάχνεται η μερίδα του λέοντος των σύγχρονων τοποθεσιών (παράμετροι για μπλοκ

  καθορίζονται στο css και άλλα μπλοκ μπορούν να βρίσκονται μέσα σε αυτήν την ετικέτα).

• Επιλέγει μια παράγραφο από το κείμενο. το περιεχόμενο της παραγράφου βρίσκεται μεταξύ των ετικετών ανοίγματος και κλεισίματος·

• - μια αριθμημένη λίστα, τα στοιχεία της οποίας περικλείονται σε μια ζευγοποιημένη ετικέτα
  1. - μια λίστα με κουκκίδες, στην οποία, όπως και σε μια αριθμημένη λίστα, τα στοιχεία χαρακτηρίζονται από μια ετικέτα

     • -

       - επικεφαλίδες εγγράφων (ο αριθμός υποδεικνύει το επίπεδο επικεφαλίδας, δηλαδή

       - η κύρια επικεφαλίδα και οι επόμενες επιλογές είναι οι υπότιτλοι της, παρεμπιπτόντως, επικεφαλίδες επιπέδου

       ,

       σχεδόν αδύνατο να βρεθεί στο Διαδίκτυο), είναι επίσης σημαντικό να θυμάστε ότι μπορεί να υπάρχει μόνο μία επικεφαλίδα ανά σελίδα

       ;

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

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

     CSS

     Η ανάπτυξη της γλώσσας HTML οδήγησε στο γεγονός ότι κάθε ετικέτα έχει αποκτήσει πολλά χαρακτηριστικά και οι απαιτήσεις για την εμφάνιση ιστοσελίδων έχουν αυξηθεί σημαντικά. Ο κώδικας έγινε δυσκίνητος και άβολος, ήταν δύσκολο να τον διαβάσει κανείς, πόσο μάλλον να τον προσαρμόσει ή να τον αλλάξει. Επιπλέον, αν ο ιστότοπός σας έχει δέκα σελίδες με πολλές επικεφαλίδες σημειωμένες με πράσινο και ξαφνικά θέλετε να τις κάνετε κόκκινες, θα πρέπει να εργαστείτε σκληρά, αλλάζοντας την καθεμία χειροκίνητα. Με την εμφάνιση των Cascading Style Sheets, αυτή η διαδικασία έγινε απλή και λογική και ο κώδικας HTML έγινε πολύ πιο ευανάγνωστος.

     

     Εφαρμογή CSS

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

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

     Για να συνδέσετε ένα αρχείο css σε ένα έγγραφο, υπάρχει μια ετικέτα σύνδεσης. Η αρχή της χρήσης του περιγράφηκε λίγο πιο ψηλά, αλλά δεν είναι η μόνη επιλογή για το συνδυασμό όλων των στυλ σε ένα μέρος. Υπάρχει μια άλλη ετικέτα

     Παράδειγμα

     
     
     

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

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

     Παράδειγμα

     
     
     

     Το css-file.css είναι ένα αρχείο CSS όπου περιγράφεται το φύλλο στυλ, εάν βρίσκεται σε άλλο φάκελο, τότε πρέπει να γράψετε τη διαδρομή προς αυτό το αρχείο.

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

     Παράδειγμα

     
     
     

     Το css-file.css είναι ένα αρχείο στο οποίο περιγράφεται ξανά το φύλλο στυλ, εάν το αρχείο βρίσκεται σε φάκελο διαφορετικό από τη θέση του ίδιου του εγγράφου, τότε πρέπει να γράψετε τη διαδρομή προς αυτό.

     Τύποι επιλογέων στο CSS

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

     Με επιλογείς στοιχείων ( ετικέτες) έχουμε ήδη συναντήσει τα παραπάνω παραδείγματα, που εφαρμόζονται σε όλες τις ετικέτες:

     P (χρώμα: κόκκινο;)

     p – αυτός είναι ο επιλογέας στοιχείων μπορεί να υπάρχουν σχεδόν οποιεσδήποτε ετικέτες εγγράφου HTML, όπως body, div, table, tr, td, h1 και πολλές άλλες.

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

     Το κείμενο CSS θα είναι ως εξής:

     #idred ( χρώμα: κόκκινο; ) .μαύρο ( χρώμα: μαύρο; )

     Το κείμενο του εγγράφου θα έχει ως εξής:

     Παράδειγμα κόκκινης παραγράφου

     Παράδειγμα μαύρης παραγράφου

     Για εξάσκηση, συνδέστε ένα επικαλυπτόμενο φύλλο στυλ στο έγγραφό σας με οποιονδήποτε από τους τρόπους.

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

     Σε ένα έγγραφο HTML, ορίζονται χρησιμοποιώντας τις κατάλληλες ετικέτες: id για το αναγνωριστικό και κλάση για κλάσεις.

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

     Κείμενο CSS:

     Κείμενο εγγράφου HTML:

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

     Κείμενο CSS:

     P (χρώμα: κόκκινο; ) div p (χρώμα: πράσινο;)

     Κείμενο εγγράφου HTML:

     Παράδειγμα κόκκινης παραγράφου

     Παράδειγμα παραγράφου που έχει θυγατρικό στοιχείο div

     Μπορείτε να δείτε εδώ ότι η παράγραφος που βρίσκεται στο στοιχείο div έχει γίνει πράσινη και όλες οι παράγραφοι που δεν βρίσκονται στο στοιχείο div θα γίνουν κόκκινες.

     Πρέπει να σημειωθεί ότι οι απόγονοι πρέπει να επιλέγονται από τα δεξιά προς τα αριστερά, για παράδειγμα, έχουμε πρώτα έναν απόγονο (div), μετά έρχεται το επιθυμητό στοιχείο (p).

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

     Ελπίζω να έχετε αρχίσει να καταλαβαίνετε τουλάχιστον λίγο την ουσία αυτών καταρράκτες πίνακες Στυλ CSS . Θα υπάρξουν πιο δύσκολα μαθήματα στο μέλλον! Για να βεβαιωθείτε ότι το CSS είναι ένα πολύ ωραίο πράγμα, εδώ είναι ένα παράδειγμα γαστρονομικού ιστότοπου, όπου το κύριο μενού υλοποιείται μόνο με χρησιμοποιώντας HTMLκαι CSS, χωρίς κανένα σενάρια java. Ελπίζω να μάθουμε επίσης να το κάνουμε αυτό στο μέλλον.

     Ή αν είστε εξοικειωμένοι με την HTML και έχετε αποκτήσει τις απαραίτητες γνώσεις από άλλες πηγές, τότε ήρθε η ώρα να αρχίσετε να μαθαίνετε CSS.

     CSS (Cascading Style Sheets)- Τα επικαλυπτόμενα φύλλα στυλ είναι ένα σύνολο περιγραφών στυλ, το ένα ή το άλλο Ετικέτες HTML(περαιτέρω στοιχεία HTML), το οποίο μπορεί να εφαρμοστεί τόσο σε ένα στοιχείο ετικέτας όσο και ταυτόχρονα σε όλα τα πανομοιότυπα στοιχεία σε όλες τις σελίδες του ιστότοπου. Το CSS είναι ουσιαστικά ένα είδος προσθήκης στην HTML που διευρύνει σημαντικά τις δυνατότητές του.

     Και λοιπόν; Ρωτάτε... Γιατί χρειάζομαι αυτό το περιβόητο CSS; Εγώ και η HTML μέσα καθαρή μορφήτα πήγαν καλά!

     Θα δώσω μια σειρά από λόγους υπέρ της χρήσης CSS:

     Το HTML στην καθαρή του μορφή έχει ένα πολύ περιορισμένο σύνολο εργαλείων που δεν επιτρέπει την επίλυση ορισμένων σχεδιαστικών και λειτουργικών ιδεών του webmaster. Λοιπόν, τουλάχιστον, για παράδειγμα, πάρτε την οδυνηρή ερώτηση όλων των αρχαρίων τεχνιτών του Διαδικτύου, "Πώς να αφαιρέσετε την υπογράμμιση από έναν σύνδεσμο;" ή "Πώς μπορώ να το κάνω να αλλάξει χρώμα και να τονίσει όταν τοποθετώ το δείκτη του ποντικιού πάνω από αυτόν ακριβώς τον σύνδεσμο;" Δεν υπάρχει τρόπος να γίνει αυτό μόνο με HTML!! Πόσες άλλες τέτοιες «ακανθώδεις ερωτήσεις» υπάρχουν; - σκοτάδι.. Εδώ έρχεται Βοήθεια CSS, που λύνει τα περισσότερα προβλήματα που σχετίζονται με το σχεδιασμό ιστοσελίδων.

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

     κάντε κόκκινο, παραγράφους

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

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

     γύρισε σε πράσινο και τέλος!! Όλες οι επικεφαλίδες σε όλες τις σελίδες του ιστότοπου θα γίνουν πράσινες ως δια μαγείας.

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

     Πώς λοιπόν; Ενδιαφέρεστε; Αν ναι, προτείνω να προχωρήσετε στην εκμάθηση απευθείας CSS. Στα κεφάλαια αυτού του εγχειριδίου, θα μάθετε πώς να εφαρμόζετε επικαλυπτόμενα φύλλα στυλ στις σελίδες του ιστότοπού σας και να εξοικειωθείτε με τις βασικές ιδιότητες στυλ των στοιχείων χρησιμοποιώντας το παράδειγμα δημιουργίας ιστότοπου με χρησιμοποιώντας CSS, εμβαθύνετε στις λεπτότητες και τα κόλπα του θέματος. Εάν είστε ήδη εξοικειωμένοι με τα Cascading Style Sheets και σας ενδιαφέρουν μόνο πληροφορίες ιστορικού, τότε προτείνω να ρίξετε μια ματιά στο βιβλίο αναφοράς CSS όπου συλλέγονται και περιγράφονται εν συντομία Ιδιότητες CSSκαι τις πιθανές έννοιές τους.

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

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

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

     Λήψη δωρεάν Πρότυπα HTMLιστοσελίδα και δημιουργήστε τα έργα σας στο συντομότερο δυνατό χρόνο.