Μορφοποίηση html μέσω css
φοιτητικά νέα

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

Κέρδος για τον κατασκευαστή ιστοσελίδων

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

Προσθήκη css στην html

Το CSS μπορεί να προστεθεί σε μια σελίδα HTML με τρεις τρόπους:

  • Inline – χρησιμοποιούμε το χαρακτηριστικό style για να καθορίσουμε τη μορφοποίηση των στοιχείων HTML.
  • Internal – χρησιμοποιούμε την ετικέτα <style> στην ενότητα <head> της σελίδας html.
  • Εξωτερικά αρχεία CSS (External CSS) – χρησιμοποιούμε εξωτερικό αρχείο CSS.
    Ο πιο συνηθισμένος τρόπος για να κάνουμε προσθήκη CSS, είναι να προσθέσουμε ένα ξεχωριστό αρχείο CSS. Ωστόσο, στο συγκεκριμένο άρθρο θα χρησιμοποιοήσουμε τις μεθόδους inline και internal, διότι είναι ευκολότερο για εμάς να κάνουμε την παρουσίαση της χρήσης css, αλλά και ευκολότερο για τον αναγνώστη να την κατανοήσει.

Inline CSS

Το inline CSS χρησιμοποιείται για να εφαρμόσουμε μια συγκεκριμένη μορφοποίηση σε ένα μεμονωμένο στοιχείο HTML.
Στο inline CSS χρησιμοποιούμε το χαρακτηριστικό style για να καθορίσουμε τη μορφοποίηση του HTML στοιχείου.
Στο ακόλουθο παράδειγμα χρησιμοποιούμε inline CSS για να καθορίσουμε οτι το χρώμα κειμένου μιας κεφαλίδας <h1> θα είναι μπλε:
—————————–
<h1 style=»color:blue;»>This is a Blue Heading</h1>
—————————–
Το αποτέλεσμα φαίνεται στην παρακάτω εικόνα:
inline css
Internal CSS
Το internal CSS χρησιμοποιείται για να καθορίσουμε τη μορφοποίηση μιας συγκεκριμένης σελίδας HTML.

Internal CSS

Στο internal CSS χρησιμοποιούμε την ετικέτα <style> στην ενότητα <head> της σελίδας html, όπως στο παράδειγμα:
—————————–
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>
—————————–
Το αποτέλεσμα φαίνεται στην εικόνα:
internal css

Εξωτερικά αρχεία CSS (External CSS)

Ένα εξωτερικό αρχείο CSS χρησιμοποιείται για να καθορίσουμε τη μορφοποίηση πολλών σελίδων HTML.
Με ένα εξωτερικό αρχείο CSS, μπορούμε να αλλάξουμε την εμφάνιση ενός ολόκληρου ιστότοπου, χρησιμοποιώντας μόνο ένα αρχείο!
Για να χρησιμοποιήσουμε ένα εξωτερικό αρχείο CSS πρέπει να προσθέσουμε ένα σύνδεσμο (link) στην περιοχή <head> της σελίδας HTML, όπως στο παράδειγμα που ακολουθεί:
—————————–
<!DOCTYPE html>
<html>
<head>
<link rel=»stylesheet» href=»styles.css»>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>
—————————–

Το εξωτερικό αρχείο CSS μπορεί να δημιουργηθεί χρησιμοποιώντας ένα απλό επεξεργαστή κειμένου. Το αρχείo css δεν πρέπει να περιέχει εντολές html, και πρέπει να αποθηκευτεί με κατάληξη .css.
Ακολουθεί παράδειγμα που δείχνει πως θα μπορούσε να είναι το περιεχόμενο του αρχείου «styles.css»:
—————————–
body {
background-color: powderblue;
}
h1 {
color: blue;
}
p {
color: red;
}
—————————–

Γραμματοσειρές στο CSS

Η ιδιότητα CSS color καθορίζει το χρώμα της γραμματοσειράς που θα χρησιμοποιηθεί.
Η ιδιότητα CSS font-family καθορίζει τη γραμματοσειρά που θα χρησιμοποιηθεί.
Η ιδιότητα CSS font-size καθορίζει το μέγεθος της γραμματοσειράς που θα χρησιμοποιηθεί.
Ακολουθεί παράδειγμα που δείχνει τις ιδιότητες γραμματοσειράς στο css
—————————–
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue;
font-family: verdana;
font-size: 300%;
}
p {
color: red;
font-family: courier;
font-size: 160%;
}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>
—————————–
Στην παρακάτω εικόνα βλέπουμε το αποτέλεσμα:
γραμματοσειρές στο css

Περιγράμματα στο CSS

Η ιδιότητα CSS border καθορίζει τη μορφοποίηση του περιγράμματος γύρω από ένα στοιχείο HTML. Αυτό φαίνεται στο παράδειγμα:
—————————–
<!DOCTYPE html>
<html>
<head>
<style>
p {
border: 1px solid powderblue;
}
</style>
</head>
<body>

<h1>This is a heading</h1>

<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>

</body>
</html>
—————————–
Και το αποτέλεσμα φαίνεται στην εικόνα:
Περιγράμματα στο CSS

Αποστάσεις στο CSS

Η ιδιότητα CSS padding καθορίζει τις αποστάσεις (κενά) ανάμεσα στο κείμενο και στο περίγραμμα. Ακολουθεί παράδειγμα που δείχνει τη χρήση της ιδιότητας CSS padding:
—————————–
<!DOCTYPE html>
<html>
<head>
<style>
p {
border: 1px solid powderblue;
padding: 30px;
}
</style>
</head>
<body>

<h1>This is a heading</h1>

<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>

</body>
</html>
—————————–
Και το αποτέλεσμα φαίνεται στην εικόνα:
αποστάσεις στο CSS

Περιθώρια CSS

Η ιδιότητα CSS margin καθορίζει το περιθώριο (κενό) έξω από το περίγραμμα. Αυτό φαίνεται στο ακόλουθο παράδειγμα:
—————————–
<!DOCTYPE html>
<html>
<head>
<style>
p {
border: 1px solid powderblue;
margin: 50px;
}
</style>
</head>
<body>

<h1>This is a heading</h1>

<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>

</body>
</html>
—————————–
Και το αποτέλεσμα φαίνεται στην εικόνα:

περιθώρια CSS
περιθώρια CSS

Η ιδιότητα id

Για να καθορίσουμε τη μορφοποίηση ενός συγκεκριμένου στοιχείου, προσθέτουμε σε αυτό την ιδιότητα id:
—————————–
<p id=»p01″>I am different</p>
—————————–
Στη συνέχεια μπορούμε να καθορίσουμε τη μορφοποίηση του συγκεκριμένου στοιχείου μέσω css:
—————————–
#p01 {
color: blue;
}
—————————–

Η ιδιότητα class

Για να καθορίσουμε τη μορφοποίηση ενός συγκεκριμένου τύπου στοιχείων, προσθέτουμε σε αυτά την ιδιότητα class:
—————————–
<p class=»error»>I am different</p>
—————————–

Στη συνέχεια μπορούμε να καθορίσουμε τη μορφοποίηση του συγκεκριμένου τύπου στοιχείων μέσω css:
—————————–
p.error {
color: red;
}
—————————–

Μπορείτε να μάθετε περισσότερα για τη σύνταξη του id και του class διαβάζοντας το σχετικό άρθρο μας που αναφέρεται στη σύνταξη css.