Πού είναι ο πηγαίος κώδικας της σελίδας. Πώς να προβάλετε τον πηγαίο κώδικα της σελίδας και τον κωδικό στοιχείου

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

Συνδυασμός πλήκτρων πρόσβασης +ανοίξτε το παράθυρο αναζήτησης, στο πρόγραμμα περιήγησης Chrome εμφανίζεται πάνω δεξιά:

Εικόνα 3. Αναζήτηση κατά κωδικό τοποθεσίας

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

Εικόνα 4. Αναζήτηση βάσει κώδικα ιστότοπου HTML

Οδηγία 2: πώς να προβάλετε και να επεξεργαστείτε τον κώδικα HTML και CSS ενός ιστότοπου στο πρόγραμμα περιήγησης Google Chrome

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

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

Κυκλοφόρησε ένα νέο βιβλίο, το Social Media Content Marketing: How to Get Inside Your Followers' Heads and Make Them Fall Fall with Your Brand.

Ο πηγαίος κώδικας ενός ιστότοπου είναι μια συλλογή από σήμανση HTML, στυλ CSS και σενάρια JavaScript που λαμβάνει το πρόγραμμα περιήγησης από τον διακομιστή ιστού.

Περισσότερα βίντεο στο κανάλι μας - μάθετε το διαδικτυακό μάρκετινγκ με τη SEMANTICA

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

Ο ιστότοπος αποθηκεύεται σε διακομιστή web, ο οποίος στέλνει τη σελίδα κατόπιν αιτήματος του χρήστη. Ένα αίτημα είναι να πληκτρολογήσετε μια διεύθυνση URL στη γραμμή διευθύνσεων, να κάνετε κλικ σε έναν σύνδεσμο ή να κάνετε κλικ σε ένα κουμπί υποβολής σε μια φόρμα. Δεν έχει σημασία σε ποια γλώσσα είναι γραμμένες οι ιστοσελίδες ή αν περιλαμβάνουν ένα στοιχείο λογισμικού. Το τελικό αποτέλεσμα οποιουδήποτε αλγόριθμου από την πλευρά του διακομιστή είναι ένα σύνολο ετικετών html και κειμένου.
Ο πηγαίος κώδικας της σελίδας είναι ένα σύνολο δεδομένων που περιλαμβάνει:

• html σήμανσης?
• φύλλο στυλ ή σύνδεσμος αρχείου.
• προγράμματα γραμμένα σε JavaScript ή συνδέσμους σε αρχεία με κώδικα.

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

Γιατί ίσως χρειαστεί να μελετήσουμε τον πηγαίο κώδικα

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

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

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

Πώς να δείτε τον πηγαίο κώδικα ενός ιστότοπου

Δεν θα είναι δυνατό να γίνει αυτό πλήρως με τη μορφή με την οποία έχει αναρτηθεί στον διακομιστή από το πρόγραμμα περιήγησης. Αλλά μπορείτε να δείτε όλη τη σήμανση κάνοντας δεξί κλικ στη σελίδα. Εδώ και παρακάτω χρησιμοποιώντας το Google Chrome ως παράδειγμα.

Επιλέξτε την επιλογή "Προβολή κώδικα σελίδας" και λάβετε την πλήρη καταχώριση σε ξεχωριστή καρτέλα.

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

Πώς να βρείτε τον πηγαίο κώδικα μιας σελίδας ιστότοπου

Κάντε κλικ στο εικονίδιο μενού στο πρόγραμμα περιήγησης. Τις περισσότερες φορές είναι στα δεξιά και μοιάζει με τρεις τελείες ή ρίγες.

Στην ενότητα πρόσθετα εργαλεία, επιλέξτε "Εργαλεία προγραμματιστή".

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

Στην καρτέλα "Πηγή" μπορείτε να δείτε τα περιεχόμενα ορισμένων αρχείων: σενάρια, γραμματοσειρές, εικόνες.

Στην καρτέλα "Ασφάλεια", μπορείτε να ελέγξετε το πιστοποιητικό του ιστότοπου.

Η καρτέλα "Έλεγχοι" θα σας βοηθήσει να ελέγξετε τον πόρο που δημοσιεύτηκε στη φιλοξενία.

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

Πώς να δείτε μετα-ετικέτες

Κάθε έγγραφο HTML περιλαμβάνει ετικέτες δομής. Εδώ είναι μερικά από αυτά:

1. Html – ολόκληρο το έγγραφο.
2. Επικεφαλής – κεφαλίδες τμήματος υπηρεσιών.
3. Τίτλος – τίτλος σελίδας (εμφανίζεται στην καρτέλα).
4. Body – το σώμα του εγγράφου.
5. H1-H6 – επικεφαλίδες κειμένου σελίδας.
6. Άρθρο – άρθρο.
7. Ενότητα - τμήμα.
8. Μενού – μενού.
9. Div – μπλοκ.
10. Span – κορδόνι.
11. P – παράγραφος.
12. Τραπέζι – τραπέζι.

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

Το περιεχόμενό τους δεν μπορεί να εντοπιστεί με άλλο τρόπο.

Ας δώσουμε προσοχή στην ετικέτα Link. Με τη βοήθειά του, καθορίζονται σύνδεσμοι προς εξωτερικά αρχεία που περιλαμβάνονται. Εάν θέλετε, μπορείτε να δείτε τα περιεχόμενα και να τα αποθηκεύσετε στο δίσκο. Για να το κάνετε αυτό, μετακινήστε το δείκτη στη διεύθυνση και πατήστε RMB. Επιλέξτε "Άνοιγμα σε νέα καρτέλα".

Το καθορισμένο αρχείο θα ανοίξει σε μια νέα καρτέλα, την οποία μπορείτε να προβάλετε ή να αποθηκεύσετε.

Πώς να προβάλετε τον πηγαίο κώδικα μιας σελίδας για τον εντοπισμό σφαλμάτων ενός σεναρίου

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

Η σύνταξη φαίνεται απευθείας στον κώδικα. Για αυτό προορίζεται η καρτέλα "Πηγή".

Πώς να δείτε τον κωδικό ενός συγκεκριμένου στοιχείου

Για μεγάλες σελίδες με πολλά στοιχεία, είναι δύσκολο να βρεθεί ο απαραίτητος κώδικας σε όλη τη σήμανση. Σε αυτήν την περίπτωση, θα πρέπει να χρησιμοποιήσετε μια ειδική εντολή μενού περιβάλλοντος. Μετακινήστε το ποντίκι πάνω από το κομμάτι και πατήστε RMB. Επιλέξτε την εντολή «Προβολή κώδικα».

Θα ανοίξει το ίδιο παράθυρο, αλλά με εστίαση στο επιλεγμένο αντικείμενο.

Περίληψη

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

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

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

Και πρόσφατα χρειάστηκε να αλλάξω το χρώμα των συνδέσμων. Έχοντας κοιτάξει μια δέσμη βιβλιογραφίας για αυτό το θέμα, συνειδητοποίησα ένα απλό πράγμα: ο καθένας δίνει παραδείγματα από τα δικά του πρότυπα, αλλά όλοι έχουμε διαφορετικά πρότυπα και είναι καλό ο κώδικας από το παράδειγμα να είναι τουλάχιστον λίγο παρόμοιος: χωρίς γκρίνια, Θα το βρω ακόμα ψάχνοντας - χρησιμοποιώντας τη μέθοδο poke.

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

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

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

Πώς να βρείτε και να αλλάξετε τον κώδικα html και css ενός ιστότοπου

Αν δεν σας αρέσουν τα μεγάλα άρθρα, αυτό είναι για εσάς στο τέλος του άρθρουένα εκπαιδευτικό βίντεο που σας λέει πώς μπορείτε να δείτε τον κώδικα html του ιστότοπου χρησιμοποιώντας το Notepad++ και να κάνετε αλλαγές στη σχεδίαση οποιουδήποτε προτύπου χρησιμοποιώντας ένα παράδειγμα για το πώς να αλλάξετε το χρώμα της γραμματοσειράς. Στο βίντεο υπάρχουν και άλλες λεπτές αποχρώσεις του χειρισμού ενός ιστολογίου. Και για όσους είναι πιο κοντά και πιο κατανοητοί στο κείμενο, παρακάτω ακολουθεί μια λεπτομερής ανάλυση του θέματος με στιγμιότυπα οθόνης.
httpv://youtu.be/uIlVvwCt2ho

Όροι και έννοιες

Θα ήταν πιο σωστό να βάλουμε τον τίτλο του άρθρου " Πώς να βρείτε τον κώδικα css", αλλά αποφάσισα να πάω με το "λάθος" όνομα, γιατί βασικά η απάντηση σε αυτήν την ερώτηση βρίσκεται σε html. Το CSS και το HTML είναι πολύ διαφορετικά πράγματα, παρόλο που είναι δύο μέρη του ίδιου συστήματος. Υπάρχουν πολλά τεχνικά άρθρα στο Διαδίκτυο, εδώ θα είναι αρκετό για να καταλάβουμε ότι:

• HTML— είναι υπεύθυνος για τη δομή του ιστότοπου (τι ακολουθεί τι, με ποια σειρά κ.λπ.). Αυτή είναι η βάση πάνω στην οποία δημιουργείται ο ιστότοπος. Αν το συγκρίνουμε με ένα σπίτι, τότε αυτή είναι η διαρρύθμισή του, η διάταξη των δωματίων.
• CSS— είναι υπεύθυνος για το σχέδιο (τι γραμματοσειρές, μεγέθη, χρώματα κ.λπ.). Αυτό είναι το γενικό στυλ του σπιτιού και το στυλ των επιμέρους δωματίων του: τι είδους ταπετσαρία θα υπάρχει, φωτιστικά, κουρτίνες, έπιπλα. Επομένως το έγγραφο που αναφέρει κωδικούς css, που ονομάζεται "φύλλο στυλ"

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

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

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

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

Χρειάζεται να είσαι ειδικός σε όλα;

Γίνονται συχνά συζητήσεις σε ιστολόγια SEO σχετικά με το εάν ένας αρχάριος πρέπει να έχει βαθιά κατανόηση της HTML ή ακόμα καλύτερα, να μάθει πώς να γράφει μόνος του ιστότοπους, ώστε όλα να είναι μοναδικά.. Λοιπόν, δεν ξέρω - στον καθένα τον δικό του, και εδώ τι είναι πιο κοντά σε ποιον είναι πιο κοντά. Με ενδιαφέρει λίγο περισσότερο, οπότε τώρα μαθαίνω περισσότερα από τον Βλαντιμίρ. Τον Νοέμβριο του τρέχοντος έτους, ο Βλαντιμίρ άνοιξε το δικό του blog. Το ιστολόγιό του δημιουργήθηκε με το πιο απλό, δωρεάν πρότυπο, το τροποποίησε ελάχιστα για να ταιριάζει στον εαυτό του.

Μετά από 10 ημέρες ύπαρξης, το blog κατέλαβε την 104η θέση στην κατάταξη όλων των ιστότοπων Runet με επισκεψιμότητα περίπου 1,5 χιλιάδων ατόμων την ημέρα. Σε 10 μέρες. Ποια είναι λοιπόν η συμφωνία; Ο Vladimir είναι καλά γνώστης HTML και μπορεί να παραγγείλει και να αγοράσει ο ίδιος ένα μοναδικό πρότυπο. Πρέπει λοιπόν να το καταλάβετε Το μυστικό δεν βρίσκεται στα πρότυπα, αλλά στη χρησιμότητα των πληροφοριών.

Πού είναι κρυμμένος ο κώδικας html;

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

1. Ανοίξτε τον ιστότοπο στο πρόγραμμα περιήγησης Google Chrome (αν δεν το χρησιμοποιείτε ακόμα, εγκαταστήστε το - είναι καλά σχεδιασμένο για εργασία με ιστότοπους, έχει πολλά ενσωματωμένα εργαλεία).
2. Μετακινούμε τον κέρσορα του ποντικιού πάνω από το στοιχείο που πρόκειται να αλλάξουμε . Σε αυτή την περίπτωση - το όνομα του ιστολογίου. Κάνουμε δεξί κλικ πάνω του και στο παράθυρο που εμφανίζεται επιλέγουμε ΠΡΟΒΟΛΗ ΚΩΔΙΚΟΥ ΣΤΟΙΧΕΙΟΥ.

ΣΗΜΑΝΤΙΚΟ: μην το συγχέετε με την ΠΡΟΒΟΛΗ ΤΟΥ ΚΩΔΙΚΟΥ ΣΕΛΙΔΑΣ! Δεν χρειαζόμαστε ολόκληρη τη σελίδα τώρα, απλώς ένα ξεχωριστό στοιχείο.

Κάντε κλικ σε αυτό - ένα παράθυρο προβολής κώδικα εμφανίζεται στο κάτω μέρος του προγράμματος περιήγησης:

Η γραμμή κώδικα που αλλάζουμε επισημαίνεται με κόκκινο χρώμα.

Αλλά η περιοχή που επισημαίνεται με μπλε περιέχει αυτό που ψάχνουμε. Εδώ μπορείτε να βρείτε την ακριβή (όχι κατά προσέγγιση) γραμμή κώδικα που είναι υπεύθυνη για γραμματοσειρές, χρώμα, μέγεθος, επισήμανση κ.λπ. Με αυτόν τον τρόπο μπορείτε να μάθετε ΟΠΟΙΟΔΗΠΟΤΕ κωδικό οποιουδήποτε στοιχείου οποιουδήποτε προτύπου.

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

Γενική αρχή για το πού να αναζητήσετε πράγματα:

Όνομα γραμματοσειράς - στη γραμμή FONT FAMILY

Μέγεθος γραμματοσειράς - στη γραμμή FONT SIZE

Χρώμα γραμματοσειράς - στη γραμμή COLOR

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

ΠΡΟΣΟΧΗ:

Η γραμμή που θα αντιγράψουμε επισημαίνεται με κόκκινο χρώμα στο σχήμα,

ώστε να μπορείτε αργότερα να το βρείτε στο φύλλο στυλ.

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

#header h1 a, #header h1 a:visited (

Βρείτε την απαιτούμενη γραμμή στο αρχείο "φύλλο στυλ (style.css)". Αυτό έχει γίνει ήδη στον πίνακα διαχείρισης. Ζητώ θερμά, ενώ δεν υπάρχει εμπιστοσύνη και πλήρης κατανόηση, όλα τα πειράματα θα πρέπει να πραγματοποιούνται σε έναν δοκιμαστικό υποτομέα προκειμένου να αποκλειστεί το .

Λοιπόν, μεταβείτε στον πίνακα διαχείρισης: ΚΟΝΣΟΛΑ - ΕΜΦΑΝΙΣΗ - EDITOR. Στη δεξιά πλαϊνή μπάρα βρίσκουμε το αρχείο STYLE TABLE (STYLE.CSS), ανοίξτε το.

Τώρα ανοίξτε τη γραμμή αναζήτησης χρησιμοποιώντας τα πλήκτρα CTRL + F: θα εμφανιστεί μια κενή γραμμή-παράθυρο στο επάνω παράθυρο. Επικολλάμε σε αυτό τη γραμμή που αντιγράψαμε στο βήμα 4.

Και θα δείτε πώς θα τονιστεί αυτή η γραμμή στο φύλλο στυλ (με πορτοκαλί στην εικόνα):

Κάνουμε μια αλλαγή στο στοιχείο. Στην περίπτωσή μας, αλλάζουμε το χρώμα της γραμματοσειράς, επομένως στη γραμμή COLOR αντικαθιστούμε μια άλλη τιμή - το χρώμα που θέλουμε. Στο παράδειγμα, το χρώμα είναι μαύρο, η σημασία του είναι:

Μπορείτε να επιλέξετε ένα χρώμα σε οποιαδήποτε υπηρεσία παλέτας χρωμάτων ιστού: πληκτρολογήστε "Παλέτα χρωμάτων Ιστού" σε μια μηχανή αναζήτησης και επιλέξτε αυτό που θέλετε. Επιλέγουμε ένα χρώμα, αντιγράφουμε την ψηφιακή του αξία και το αντικαθιστούμε προσεκτικά με το παλιό. μετά πατάμε ΕΝΗΜΕΡΩΣΗ ΑΡΧΕΙΟΥ και πηγαίνουμε να δούμε τι έγινε.

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

Χρειάζεται πολύς χρόνος για να περιγραφεί, αλλά στην πράξη όλα γίνονται γρήγορα, ειδικά όταν εμφανίζεται η αρχική δεξιότητα.

Πιο αναλυτικά, πώς να αλλάξετε ορισμένα στοιχεία:

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

Προτείνω να παρακολουθήσετε το βίντεο του Artem Abramovich σχετικά με τον τρόπο αναζήτησης και εύρεσης οποιασδήποτε λέξης ή στοιχείου σε οποιοδήποτε θέμα/πρότυπο, για οποιαδήποτε μηχανή (wordpress, joomla κ.λπ.) και να το αντικαταστήσετε με αυτό που χρειάζεστε:

Παρακαλώ κοινοποιήστε αν σας άρεσε:

Μπορεί επίσης να σας ενδιαφέρει να μάθετε: