Πώς να ορίσετε μια εικόνα φόντου στο CSS

Πώς να ορίσετε μια εικόνα φόντου στο CSS

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





Τι είναι το CSS;

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



Δημιουργία βασικού ιστότοπου με HTML

Δεδομένου ότι το CSS είναι απλώς μια γλώσσα στυλ, για να το χρησιμοποιήσουμε, χρειαζόμαστε πρώτα κάτι για να στυλ. Ένας πολύ βασικός ιστότοπος θα είναι αρκετός για να ξεκινήσουμε να παίζουμε με το CSS. Η σελίδα μας θα εμφανίζει το «Hello World».









Hello World



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



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

Σχετίζεται με: 10 απλά παραδείγματα κώδικα CSS που μπορείτε να μάθετε σε 10 λεπτά



Προσθήκη CSS σε HTML

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





Hello World






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





Hello World




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




p {
text-align: center
}
#ourParagraph {
border-style: solid;
padding: 30px;
}



Hello World



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

συνδεθείτε στο διαδίκτυο αλλά δεν έχετε πρόσβαση στο διαδίκτυο

Εισαγωγή αρχείου CSS στον ιστότοπό σας

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

Αντ 'αυτού, θα κρατήσουμε τις πληροφορίες CSS σε ξεχωριστό αρχείο και θα εισαγάγουμε το αρχείο για να στυλ της σελίδας. Αντιγράψτε και επικολλήστε τις πληροφορίες μεταξύ των ετικετών στυλ σε ένα νέο αρχείο CSS ourCSSfile.css Το

p {
text-align: center
}
#ourParagraph {
border-style: solid;
padding: 30px;
}

Στη συνέχεια, εισαγάγετε το αρχείο στο αρχείο HTML.






Hello World



Προσθήκη εικόνας φόντου με CSS

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

body{
background-image: url('sky.jpg');
}
p {
text-align: center
}
#ourParagraph {
border-style: solid;
padding: 30px;
}

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

Σχετίζεται με: 8 δροσερά εφέ HTML που μπορεί να προσθέσει ο καθένας στον ιστότοπό του

πώς να χρησιμοποιήσετε την εφαρμογή μετά το σχολείο χωρίς facebook

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

Το παράδειγμά μας μοιάζει με αυτό:

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

Υπάρχουν επίσης δύο τρόποι για να κάνετε μια εικόνα να καλύπτει ολόκληρο το φόντο. Αρχικά, μπορείτε να ορίσετε το μέγεθος φόντου στο μέγεθος της οθόνης με μέγεθος φόντου: 100% 100% , αλλά αυτό θα τεντώσει την εικόνα και μπορεί να παραμορφώσει πάρα πολύ την εικόνα. Εάν δεν θέλετε να αλλάξουν οι αναλογίες της εικόνας, μπορείτε επίσης να ορίσετε το μέγεθος φόντου σε κάλυμμα Το Το εξώφυλλο θα κάνει την εικόνα φόντου να καλύψει το φόντο, αλλά δεν θα παραμορφώσει την εικόνα.

Αλλαγή χρώματος φόντου

Ας αλλάξουμε κάτι τελευταίο. Τώρα που έχουμε ένα παρασκήνιο, η παράγραφος μας είναι δύσκολο να διαβαστεί. Ας κάνουμε το φόντο του λευκό. Η διαδικασία είναι παρόμοια. Το στοιχείο που θέλουμε να τροποποιήσουμε είναι το #ourParagraph. Το # υποδηλώνει ότι το 'ourParagraph' είναι ένα όνομα ταυτότητας. Στη συνέχεια, θέλουμε να ορίσουμε το χρώμα του φόντου αποδίδουν στο λευκό.

body{
background-image: url('sky.jpg');
}
p {
text-align: center
}
#ourParagraph {
background-color: white;
border-style: solid;
padding: 30px;
}

Πολύ καλύτερα.

Συνεχίζοντας να σχεδιάζετε τον ιστότοπό σας με CSS

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

Μερίδιο Μερίδιο Τιτίβισμα ΗΛΕΚΤΡΟΝΙΚΗ ΔΙΕΥΘΥΝΣΗ Οι 8 καλύτεροι ιστότοποι για ποιοτικά παραδείγματα κωδικοποίησης HTML

Θέλετε να μάθετε HTML για την κωδικοποίηση των δικών σας ιστότοπων και εφαρμογών; Χρησιμοποιήστε αυτά τα παραδείγματα ιστοσελίδων και τον πηγαίο κώδικα για να διδάξετε στον εαυτό σας HTML και CSS.

Διαβάστε Επόμενο Σχετικά θέματα
  • Προγραμματισμός
  • HTML
  • Σχεδιασμός Ιστού
  • CSS
Σχετικά με τον Συγγραφέα Τζένιφερ Σίτον(Δημοσιεύθηκαν 21 άρθρα)

Ο J. Seaton είναι Επιστημονικός Συγγραφέας που ειδικεύεται στην ανάλυση σύνθετων θεμάτων. Έχει διδακτορικό από το Πανεπιστήμιο του Saskatchewan. η έρευνά της επικεντρώθηκε στη χρήση της μάθησης με βάση τα παιχνίδια για την αύξηση της συμμετοχής των μαθητών στο διαδίκτυο. Όταν δεν εργάζεται, θα τη βρείτε να διαβάζει, να παίζει βιντεοπαιχνίδια ή να ασχολείται με την κηπουρική.

Περισσότερα από την Jennifer Seaton

Εγγραφείτε στο newsletter μας

Εγγραφείτε στο ενημερωτικό μας δελτίο για τεχνικές συμβουλές, κριτικές, δωρεάν ebooks και αποκλειστικές προσφορές!

Κάντε κλικ εδώ για εγγραφή