Inline CSS Guide - Πώς να διαμορφώσετε μια ετικέτα HTML απευθείας

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

This is my first paragraph.

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

Ακολουθεί μια σύνοψη των επιλογών σας.

Εξωτερικό φύλλο στυλ

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

Μέσα στο αρχείο, index.css, έχουμε τους κανόνες CSS μας.

p { color: red; font-size: 20px; } 

Εσωτερικό φύλλο στυλ

Μια άλλη επιλογή για το στυλ CSS είναι η χρήση ενός εσωτερικού φύλλου στυλ. Αυτό σημαίνει τον καθορισμό των κανόνων CSS σας μέσα στο στοιχείο στο αρχείο HTML.

  p { color: red; font-size: 20px; }   

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

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

Με ενσωματωμένα στυλ, θα προσθέσετε το στυλχαρακτηριστικό σε μια ετικέτα HTML που ακολουθείται από το CSS σας για το στυλ ενός στοιχείου.

This is my first paragraph.

This is my second paragraph.

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

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

Τι είναι μια ετικέτα HTML;

Με ενσωματωμένα στυλ, εφαρμόζετε CSS στο styleχαρακτηριστικό στην ετικέτα HTML έναρξης.

Παραδείγματα ετικετών HTML περιλαμβάνουν:

  • ...
  • ...

  • ...

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

Εδώ, έχουμε ένα στοιχείο κειμένου.

This is my first paragraph.

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

This is my first paragraph.

This is my second paragraph.

Ας δούμε πώς χρησιμοποιήσαμε τα ενσωματωμένα στυλ.

Πώς να χρησιμοποιήσετε τα ενσωματωμένα στυλ

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

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

color: red; font-size: 20px; 

Έτσι, όταν τα συνδυάζουμε όλα, μοιάζει με αυτό:

This is my first paragraph.

Βασικά σημεία που πρέπει να γνωρίζετε

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

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

Για παράδειγμα, στον παρακάτω κώδικα μόνο το πρώτο εδάφιο είναι κόκκινο με μέγεθος γραμματοσειράς 20px.

This is my first paragraph.

This is my second paragraph.

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

This is my first paragraph.

This is my second paragraph.

However, if we used an external stylesheet, for example, we could easily style both paragraphs without duplicating our code by using a single CSS selector.

p { color: red; font-size: 20px; } 

This brings us to an important topic: when to use and when not to use inline styles.

When to Use (and when NOT to use) Inline Styles

Say you have an HTML file with ten or more paragraph tags. Can you imagine styling each one individually with inline styles?

Doing so will quickly clutter your code, making it hard to read and maintain.

Besides, inline styles can introduce specificity issues if you’re also using internal or external stylesheets.

That’s because inline styles have a high specificity. This means they'll override most other rules in internal and external stylesheets, except for the !important declaration.

For example, we added inline styles to two paragraph elements. We’ve also added an internal stylesheet.

 My New Webpage p { color: pink; } 

A blue paragraph.

Another blue paragraph.

The CSS from our inline styles override the CSS in the internal stylesheet. So we end up with two blue paragraphs.

External stylesheets are also much easier to maintain when you or someone else needs to make a change. This is because a style from an external or internal stylesheet can apply to multiple elements, while an inline one must be applied to each element individually.

For example, say you need to update a style to ten elements. It’s easier to make the change once in an external stylesheet, instead of ten different times in your HTML file.

In general, it’s often best practice to put your CSS into a separate file. That way, your HTML file contains the structure and content of your website, and your CSS file contains your styles. Doing so makes your code easier to read and manage.

However, there are times when it may make sense to use inline styles:

  • Add a style and see the change quickly, which can be useful for testing.
  • Use the style attribute in JavaScript to apply styling.

Most of the time you’ll want to use external stylesheets. But you’ll occasionally find yourself using inline styles, most commonly in the above situations.

I write about learning to program, and the best ways to go about it on my blog at amymhaddad.com.