Δημιουργία και εφαρμογή στυλ

ΣΗΜΑΝΤΙΚΟ: Αυτό το άρθρο προέρχεται από μηχανική μετάφραση, δείτε την αποποίηση ευθυνών. Θα βρείτε την αγγλική έκδοση του παρόντος άρθρου εδώ για αναφορά.

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

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

Σε αυτό το άρθρο

Τύποι στυλ

Δημιουργία στυλ

Εφαρμογή στυλ

Τύποι στυλ

Ένα στυλ που βρίσκονται σε ένα εξωτερικό ή τον εσωτερικό CSS μπορεί να βασίζονται σε κλάση, βασίζονται σε στοιχείο ή βασίζονται σε αναγνωριστικό. Ένα στυλ ορίζεται από το σύνολο κανόνων, το οποίο αποτελείται από ένα κουμπί επιλογής, ακολουθούμενο από ένα μπλοκ δηλώσεις ιδιοτήτων που εμφανίζονται ανάμεσα σε μια αριστερό άγκιστρο ({}) και ένα δεξιό άγκιστρο (}). Κάθε τύπο στυλ είναι ξεχωρίζουν από τους άλλους τύπους στυλ με το κουμπί επιλογής; κουμπί επιλογής για ένα στυλ που βασίζονται σε κλάση; προηγείται μια τελεία (.) σύμβολο δίεσης (#) προηγείται στον επιλογέα για ένα στυλ βασίζονται σε αναγνωριστικό. και το κουμπί επιλογής για ένα στυλ που βασίζονται σε στοιχείο αποτελείται μόνο από ένα στοιχείο HTML, όπως το στοιχείο Η1.

Στυλ που βασίζονται σε κλάση

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

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

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

.introduction {font-size: small; color: white}

Παράδειγμα ενός βασίζονται σε κλάση στυλ που εφαρμόζεται σε μια ετικέτα < p >

<p class="introduction">

Στυλ που βασίζονται σε στοιχείο

Χρησιμοποιήστε στυλ που βασίζονται σε στοιχείο για να ορίσετε ένα σύνολο ιδιοτήτων που θέλετε για κάθε παρουσία ενός συγκεκριμένου στοιχείου HTML για να χρησιμοποιήσετε σε μια ιστοσελίδα. Για παράδειγμα, για να δημιουργήσετε ένα περιθώριο 25 pixel γύρω από όλες τις παραγράφους (περιεχόμενο που περιβάλλονται από ετικέτες < p >) στην ιστοσελίδα σας, δημιουργείτε ένα στυλ που βασίζονται σε στοιχείο που χρησιμοποιεί το στοιχείο p ως το κουμπί επιλογής και περιέχει δηλώσεις για το περιθώριο ιδιότητες, όπως φαίνεται στο ακόλουθο κώδικα.

Παράδειγμα ενός κανόνα για ένα στυλ που βασίζονται σε στοιχείο

p { margin-left: 25px; margin-right: 25px }

Στυλ που βασίζονται σε αναγνωριστικό

Χρησιμοποιήστε ένα στυλ που βασίζονται σε αναγνωριστικό όταν θέλετε να ορίσετε ένα σύνολο ιδιοτήτων για ένα μεμονωμένο στοιχείο ή αποκλεισμός των στοιχείων που θέλετε να διακρίνετε από όλο το περιεχόμενο σε μία ή περισσότερες σελίδες Web. Χρησιμοποιήστε ένα στυλ που βασίζονται σε αναγνωριστικό όταν θέλετε να στυλ ένα μεμονωμένο στοιχείο HTML σε μια ιστοσελίδα.

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

#footer {background-color: #CCCCCC; margin: 15px}

Παράδειγμα ενός στυλ με βάση το αναγνωριστικό που εφαρμόζεται σε μια ετικέτα < p >

<p id="footer">

Ενσωματωμένα στυλ

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

Παράδειγμα ενός κανόνα για ενσωματωμένο στυλ

<p style="font-weight: bold; font-style: italic; color: #FF0000">

Αρχή της σελίδας

Δημιουργία στυλ

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

Δημιουργήστε ένα στυλ χρησιμοποιώντας το παράθυρο διαλόγου "νέο στυλ"

  1. Κάντε ένα από τα εξής: 

    • Για να προσθέσετε ένα στυλ σε ένα εξωτερικό CSS, ανοίξτε το αρχείο .css.

    • Για να προσθέσετε ένα στυλ σε μια εσωτερική CSS, ανοίξτε την ιστοσελίδα.

    • Για να προσθέσετε ένα ενσωματωμένο στυλ, ανοίξτε την ιστοσελίδα και, στη συνέχεια, επιλέξτε το περιεχόμενο που θέλετε να μορφοποιήσετε.

  2. Κάντε ένα από τα εξής: 

    • Για να δημιουργήσετε ένα νέο στυλ    Κάντε κλικ στην επιλογή νέο στυλ σε μία από αυτές τις τοποθεσίες: το παράθυρο εργασιών ' εφαρμογή στυλ ' ή παράθυρο εργασιών Διαχείριση στυλ, τη γραμμή εργαλείων μορφοποίησης ή το μενού " μορφή ".

    • Για να αντιγράψετε ένα υπάρχον στυλ    Κάντε ένα από τα εξής:

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

      • Στο παράθυρο εργασιών Διαχείριση στυλ ή Ιδιότητες CSS παραθύρου εργασιών, κάντε δεξί κλικ στο στυλ που θέλετε να αντιγράψετε και, στη συνέχεια, επιλέξτε Νέο στυλ αντίγραφο.

  3. Στο παράθυρο διαλόγου " νέο στυλ ", κάντε τα εξής:

Χρησιμοποιήστε αυτήν την επιλογή

Για

Κουμπί επιλογής

  • Για να χρησιμοποιήσετε το εργαλείο επιλογής κατηγορίας, πληκτρολογήστε μια τελεία (.) ακολουθούμενο από ένα μοναδικό όνομα.

  • Για να χρησιμοποιήσετε ένα εργαλείο επιλογής αναγνωριστικού, πληκτρολογήστε το σύμβολο δίεσης (#) ακολουθούμενο από ένα μοναδικό όνομα.

    ΣΗΜΕΙΩΣΗ : Τάξης και το αναγνωριστικό δείκτη επιλογής δεν είναι δυνατό να περιέχουν διαστήματα, εκτός αν θέλετε να δημιουργήσετε μια σύνθετη επιλογέα.

  • Για να χρησιμοποιήσετε ένα εργαλείο επιλογής στοιχείο, πληκτρολογήστε το όνομα ενός στοιχείου HTML ή κάντε κλικ στο πλαίσιο αναπτυσσόμενο κουμπί επιλογής και επιλέξτε ένα όνομα για το στοιχείο.

  • Για να χρησιμοποιήσετε ένα ενσωματωμένο εργαλείο επιλογής, επιλέξτε ενσωματωμένο στυλ.

  • Για να δημιουργήσετε μια σύνθετη επιλογέα, πληκτρολογήστε το κουμπί επιλογής.

Ορισμός σε

Επιλέξτε ένα από τα παρακάτω:

  • Τρέχουσα σελίδα προσθέτει το νέο στυλ στο εσωτερικό επικαλυπτόμενο φύλλο στυλ στην τρέχουσα σελίδα Web.

  • Νέο φύλλο στυλ προσθέτει το νέο στυλ σε μια νέα κενή εξωτερικό επικαλυπτόμενο φύλλο ΣΤΥΛ.

  • Υπάρχον φύλλο στυλ προσθέτει το νέο στυλ σε ένα υπάρχον εξωτερικό CSS που καθορίζετε.

Εφαρμογή νέου στυλ στην επιλογή εγγράφου

Εφαρμογή του στυλ στην τρέχουσα επιλογή στην τρέχουσα σελίδα Web.

ΔΙΕΎΘΥΝΣΗ URL

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

Κατηγορία

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

Συμβουλή: Κατηγορίες που εμφανίζονται σε έντονη γραφή στη λίστα κατηγορία περιέχουν Ορισμός ιδιοτήτων.

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

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

  • Φόντο ορίζει φόντου χρώμα και το φόντο Ιδιότητες εικόνας.

  • Περίγραμμα ορίζει ένα περίγραμμα και τις ιδιότητές του.

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

  • Θέση ορίζει τις διαστάσεις και τη θέση του πλαισίου και στοιχεία επιπέδου μπλοκ.

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

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

  • Πίνακας ορίζει τις ιδιότητες που σχετίζονται με πίνακα στοιχεία, όπως τα διαστήματα, τη διάταξη, ιδιότητες περιγράμματος.

ΣΗΜΕΙΩΣΗ : Μπορείτε επίσης να αντιγράψετε ένα στυλ από ένα CSS σε κάποιον άλλο. Στο παράθυρο εργασιών " Διαχείριση στυλ ", σύρετε το στυλ από το CSS που περιέχει αυτό το στυλ είτε στο όνομα του κώδικα CSS που θέλετε να αντιγράψετε ή σε ένα συγκεκριμένο σημείο στη λίστα στυλ σε προορισμού CSS.

Δημιουργία ενσωματωμένο στυλ με χρήση του παραθύρου εργασιών "Ιδιότητες CSS"

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

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

  3. Στην περιοχή Ιδιότητες CSS, ορίστε τις ιδιότητες που θέλετε.

Δημιουργία και εφαρμογή ενός νέου στυλ δεν έχει οριστεί

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

  1. Σε προβολή σχεδίασης ή προβολή κώδικα στην ιστοσελίδα σας, επιλέξτε το στοιχείο που θέλετε να εφαρμόσετε ένα στυλ.

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

Αρχή της σελίδας

Εφαρμογή στυλ

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

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

  1. Σε προβολή σχεδίασης ή προβολή κώδικα, στην ιστοσελίδα σας, επιλέξτε το στοιχείο που θέλετε να εφαρμόσετε ένα στυλ.

  2. Κάντε ένα από τα εξής: 

    • Για να εφαρμόσετε πολλά υπαρχόντων στυλ    Στο παράθυρο εργασιών ' εφαρμογή στυλ ', πατήστε το πλήκτρο CTRL ενώ κάνετε κλικ σε κάθε στυλ που θέλετε.

    • Για να εφαρμόσετε ένα υπάρχον στυλ    Κάντε ένα από τα εξής:

      • Στο παράθυρο εργασιών " Εφαρμογή στυλ ", κάντε κλικ στο στυλ κλάσης ή το αναγνωριστικό που θέλετε.

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

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

    • Για να δημιουργήσετε και να εφαρμόσετε ένα νέο στυλ χωρίς να καθορίσετε τις ιδιότητες    Στη γραμμή εργαλείων στυλ, στο πλαίσιο την κλάση ή ID, πληκτρολογήστε ένα μοναδικό όνομα για το νέο στυλ.

Αρχή της σελίδας

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

Αναπτύξτε τις δεξιότητές σας
Εξερευνήστε το περιεχόμενο της εκπαίδευσης
Αποκτήστε πρώτοι τις νέες δυνατότητες
Γίνετε μέλος του Office Insider

Σας βοήθησαν αυτές οι πληροφορίες;

Σας ευχαριστούμε για τα σχόλιά σας!

Σας ευχαριστούμε για τα σχόλιά σας! Φαίνεται ότι μπορεί να είναι χρήσιμο να συνδεθείτε με έναν από τους συνεργάτες υποστήριξης του Office.

×