English

κανόνες CSS

font-size:120%;

Το μέγεθος των χαρακτήρων στο 120% του τυπικού μεγέθους
χαρακτήρων. Το τυπικό μέγεθος ενός χαρακτήρα σε μια παράγραφο είναι 16px, δηλαδή 16 pixel (εικονοστοιχεία). Το 120% αφορά το αντίστοιχο ποσοστό των 16 pixel και αντιστοιχεί σε 19px. Υπάρχει και η μονάδα μέτρησης em με 1em να αντιστοιχεί στο τυπικό μέγεθος ενός χαρακτήρα. Έτσι 1em = 16px = 100%. Στο παράδειγμά μας 1.2em = 19px = 120%.

border:1px solid black;

Η ενότητα κειμένου θα έχει περίγραμμα συμπαγούς μαύρης
γραμμής, πάχους 1px.
Άλλες μορφές περιγράμματος είναι οι dashed, ridge, dotted,
κ.λπ.

display:inline-block;

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

κανόνες CSS

text-align:center;

Στοίχιση του κειμένου στο κέντρο.
Είναι επίσης εφικτή η στοίχιση αριστερά (left), δεξιά (right)
και πλήρως (justified).

color:white;

Λευκό χρώμα των χαρακτήρων.
Οι τιμές των χρωμάτων μπορούν να αποδοθούν με τρεις τρόπους:
α) Ονομαστικά (π.χ. green, red, lightgreen, coral, κ.λπ.).
β) Με τη δεκαδική τιμή τους ως rgb(x,y,z), όπου x μια δεκαδική τιμή από 0 έως 255 που αντιστοιχεί στο κόκκινο χρώμα,
όπου y μια δεκαδική τιμή από 0 έως 255 που αντιστοιχεί στο
πράσινο χρώμα και z μια δεκαδική τιμή από 0 έως 255 που
αντιστοιχεί στο μπλε χρώμα (π.χ. rgb(255,0,0) για το έντονο
κόκκινο, rgb(0,255,0) για το έντονο πράσινο, rgb(255,255,0)
για έντονο κίτρινο, rgb(255,127,80) για το κοραλλί, κ.λπ.).
γ) Με τη δεκαεξαδική τιμή τους ως #ΧΧΥΥΖΖ, όπου ΧΧ μια
δεκαεξαδική τιμή από 00 έως FF που αντιστοιχεί στο κόκκινο
χρώμα, όπου ΥΥ μια δεκαεξαδική τιμή από 00 έως FF που
αντιστοιχεί στο πράσινο χρώμα και ΖΖ μια δεκαεξαδική τιμή
από 00 έως FF που αντιστοιχεί στο μπλε χρώμα (π.χ. #FF0000
για το έντονο κόκκινο, #0000FF για το έντονο μπλε, #FF7F50
για το κοραλλί, κ.λπ.).
Οι πιθανοί συνδυασμοί χρωμάτων είναι 2563
≈16,7 εκατομμύρια χρώματα.

background-color:blue;

Μπλε χρώμα του υποβάθρου (φόντου) των χαρακτήρων.

background-color:yellow;

Κίτρινο χρώμα υποβάθρου χαρακτήρων.

background-color:lightgreen;

Ανοιχτό πράσινο χρώμα υποβάθρου χαρακτήρων.

font-family:courier;

Επιλογή γραμματοσειράς της οικογένειας Courier.
Οι γραμματοσειρές μπορούν εκτός από ονομαστικά, να επιλεγούν και κατά οικογένεια ή κατηγορία (π.χ. serif, sans-serif,
monospace)

Δραστηριότητα

Προσπαθήστε να ερμηνεύσετε τον παρακάτω κώδικα html. Τι ακριβώς εξάγει εάν τον εκτελέσουμε;

<html>
<head>
<title> Παράδειγμα 1ο</title>
</head>
<body>
<h1>Αυτό είναι το πρώτο παράδειγμα.</h1>
<h2>Εφαρμογή των μέχρι τώρα προαναφερθέντων ετικετών.</h2>
<h4><b>Αυτό το κείμενο είναι έντονο.</b> </h4>
<p> <center> Αυτή η παράγραφος είναι
είναι <i> κεντραρισμένη </i></center> </p>
Τέλος του <u> πρώτου </u> παραδείγματος.
</body>
</html>

Ερμηνεία: 

<head>
Η ετικέτα αυτή περιέχει τον τίτλο και άλλες σημαντικές πληροφορίες για το έγγραφο.
<title>
Μέσα σε αυτήν την ετικέτα περικλείεται ο τίτλος του εγγράφου. Ο τίτλος εμφανίζεται στην μπάρα του browser (Chrome, Mozilla FireFox, Internet Explorer κ.α)
<p>
Η ετικέτα αυτή ορίζει μία νέα παράγραφο.
<h…>
Η ετικέτα αυτή καθορίζει το μέγεθος των γραμμάτων. Ο αριθμός μπορεί να είναι από το 1 έως
το 6 (δηλαδή <h1> , <h2> κ.τ.λ.). Το <h1> είναι το μεγαλύτερο μέγεθος και το <h6> είναι το μικρότερο.
<br>
Η ετικέτα <br> ορίζει μία αλλαγή γραμμής.

center>
Από τη στιγμή που εμφανίζεται το <center> σ' ένα έγγραφο μέχρι να κλείσει με </center> όλα όσα περιέχονται εμφανίζονται κεντραρισμένα.
<b>
Η ετικέτα αυτή από την εμφάνισή της και μέχρι τη λήξη της (δηλ. </b>) κάνει το κείμενο να
φαίνεται με έντονη γραφή (bold).
<i>
Η ετικέτα αυτή από την εμφάνισή της και μέχρι τη λήξη της (δηλ. </i>) κάνει το κείμενο να
φαίνεται με πλάγια γραφή (italic).
<u>
Η ετικέτα αυτή από την εμφάνισή της και μέχρι τη λήξη της (δηλ. </u>) κάνει το κείμενο να φαίνεται υπογραμμισμένο (underline).
<!-- σχόλιο -- >
Η ετικέτα αυτή χρησιμοποιείται για να προσθέσουμε ένα σχόλιο

Δραστηριότητα

Προσπαθήστε να ερμηνεύσετε τον παρακάτω κώδικα html. Τι ακριβώς εξάγει εάν τον εκτελέσουμε;

<html>
<head>
<title>Ένα απλό παράδειγμα</title>
</head>
<body>
<h1>Η HTML είναι εύκολη</h1>
<p> Καλώς ήλθατε στον κόσμο της HTML.
Αυτή είναι η πρώτη παράγραφος. </p>
<p> Και αυτή είναι η δεύτερη παράγραφος.</p>
</body>
</html>