Η CSS (αλληλουχίες φύλλων στυλ) είναι γλώσσα σήμανσης που καθορίζει τη μορφή των σελίδων HTML, χρησιμοποιώντας κανόνες.
Αυτοί οι κανόνες μπορεί να είναι μέσα στο ίδιο το αρχείο HTML, στην περιοχή του <HEAD>... </HEAD>χρησιμοποιώντας την ετικέτα <STYLE>
Για παράδειγμα, αν θέλουμε η κάθε παράγραφος να έχει χρώμα κειμένου μπλέ, κεντρική στοίχιση, γραμματοσειρά Comic Sans MS και μέγεθος 20, γράφουμε το παρακάτω.
Προσέξτε ότι υπάρχει ένας "επιλογέας" (element), το p εν προκειμένω για την παράγραφο, που δείχνει για ποια ετικέτα πρόκειται να δώσουμε το στύλ. Κατόπιν, ακολουθούν οι κανόνες στυλ μέσα σε αγγύλες, χωριζόμενοι με ελληνικό ερωτηματικό.
<HTML>
<HEAD>
<STYLE>
p {
color: blue;
text-align: center;
font-family: Comic Sans MS;
font-size: 20px;
}
</STYLE>
</HEAD>
<BODY>
<p> Nίκος Γκάτσος - Ἀμοργός
Νίκος Γκάτσος (1911-1992): ποιητής, μεταφραστὴς καὶ στιχουργὸς ἀπὸ τὴν Ἀσέα Γορτυνίας.<BR>
Κακοὶ μάρτυρες ἀνθρώποισιν ὀφθαλμοὶ<BR>
καὶ ὦτα βαρβάρους ψυχὰς ἐχόντων.<BR>
HPAKΛEITOΣ<BR>
Μὲ τὴν πατρίδα τους δεμένη στὰ πανιὰ καὶ τὰ κουπιὰ στὸν ἄνεμο κρεμασμένα <BR>
Οἱ ναυαγοὶ κοιμήθηκαν ἥμεροι σὰν ἀγρίμια νεκρὰ μέσα στῶν σφουγγαριῶν τὰ σεντόνια<BR>
Ἀλλὰ τὰ μάτια τῶν φυκιῶν εἶναι στραμένα στὴ θάλασσα<BR>
Μήπως τοὺς ξαναφέρει ὁ νοτιᾶς μὲ τὰ φρεσκοβαμένα λατίνια<BR>
Κι ἕνας χαμένος ἐλέφαντας ἀξίζει πάντοτε πιὸ πολὺ ἀπὸ δυὸ στήθια κοριτσιοῦ ποὺ σαλεύουν<BR>
Μόνο ν᾿ ἀνάψουνε στὰ βουνὰ οἱ στέγες τῶν ἐρημοκκλησιῶν μὲ τὸ μεράκι τοῦ ἀποσπερίτη
Νὰ κυματίσουνε τὰ πουλιὰ στῆς λεμονιᾶς τὰ κατάρτια<BR>
Μὲ τῆς καινούργιας περπατησιᾶς τὸ σταθερὸ ἄσπρο φύσημα<BR>
Καὶ τότε θά ῾ρθουν ἀέρηδες σώματα κύκνων ποὺ μείνανε ἄσπιλοι τρυφεροὶ καὶ ἀκίνητοι<BR>
Μὲς στοὺς ὁδοστρωτῆρες τῶν μαγαζιῶν μέσα στῶν λαχανόκηπων τοὺς κυκλῶνες<BR>
Ὅταν τὰ μάτια τῶν γυναικῶν γίναν κάρβουνα κι ἔσπασαν οἱ καρδιὲς τῶν καστανάδων<BR>
Ὅταν ὁ θερισμὸς ἐσταμάτησε κι ἄρχισαν οἱ ἐλπίδες τῶν γρύλων </P>
</BODY>
</HTML>
Ανατρέχοντας στο https://www.w3schools.com/css/ :
1. Να γράψετε αρχείο html με τέτοιους κανόνες ώστε να έχει στο BODY χρώμα background πράσινο, χρώμμα γραμμάτων παραγράφου άσπρο, με αριστερή στοίχιση, γραμματοσειρά verdana και font-size 14px. Mορφή h1 με χρώμα άσπρο και στοίχιση κέντρο.
2. Βάλτε μία εικόνα για background στη σελίδα σας ( ψάξτε το css Background)
3. Βάλτε να έχει το h1, h2, κάτω γραμμή (border-bottom) με διαφορετικό πάχος και χρώμα.
4. Κάντε μία παράγραφο με στυλ outline
5. Κάντε να έχει περιθώριο (padding) η κάθε παράγραφος 10 px από όλες τις πλευρές.
Αυτοί οι κανόνες μπορεί να είναι μέσα στο ίδιο το αρχείο HTML, στην περιοχή του <HEAD>... </HEAD>χρησιμοποιώντας την ετικέτα <STYLE>
Για παράδειγμα, αν θέλουμε η κάθε παράγραφος να έχει χρώμα κειμένου μπλέ, κεντρική στοίχιση, γραμματοσειρά Comic Sans MS και μέγεθος 20, γράφουμε το παρακάτω.
Προσέξτε ότι υπάρχει ένας "επιλογέας" (element), το p εν προκειμένω για την παράγραφο, που δείχνει για ποια ετικέτα πρόκειται να δώσουμε το στύλ. Κατόπιν, ακολουθούν οι κανόνες στυλ μέσα σε αγγύλες, χωριζόμενοι με ελληνικό ερωτηματικό.
<HTML>
<HEAD>
<STYLE>
p {
color: blue;
text-align: center;
font-family: Comic Sans MS;
font-size: 20px;
}
</STYLE>
</HEAD>
<BODY>
<p> Nίκος Γκάτσος - Ἀμοργός
Νίκος Γκάτσος (1911-1992): ποιητής, μεταφραστὴς καὶ στιχουργὸς ἀπὸ τὴν Ἀσέα Γορτυνίας.<BR>
Κακοὶ μάρτυρες ἀνθρώποισιν ὀφθαλμοὶ<BR>
καὶ ὦτα βαρβάρους ψυχὰς ἐχόντων.<BR>
HPAKΛEITOΣ<BR>
Μὲ τὴν πατρίδα τους δεμένη στὰ πανιὰ καὶ τὰ κουπιὰ στὸν ἄνεμο κρεμασμένα <BR>
Οἱ ναυαγοὶ κοιμήθηκαν ἥμεροι σὰν ἀγρίμια νεκρὰ μέσα στῶν σφουγγαριῶν τὰ σεντόνια<BR>
Ἀλλὰ τὰ μάτια τῶν φυκιῶν εἶναι στραμένα στὴ θάλασσα<BR>
Μήπως τοὺς ξαναφέρει ὁ νοτιᾶς μὲ τὰ φρεσκοβαμένα λατίνια<BR>
Κι ἕνας χαμένος ἐλέφαντας ἀξίζει πάντοτε πιὸ πολὺ ἀπὸ δυὸ στήθια κοριτσιοῦ ποὺ σαλεύουν<BR>
Μόνο ν᾿ ἀνάψουνε στὰ βουνὰ οἱ στέγες τῶν ἐρημοκκλησιῶν μὲ τὸ μεράκι τοῦ ἀποσπερίτη
Νὰ κυματίσουνε τὰ πουλιὰ στῆς λεμονιᾶς τὰ κατάρτια<BR>
Μὲ τῆς καινούργιας περπατησιᾶς τὸ σταθερὸ ἄσπρο φύσημα<BR>
Καὶ τότε θά ῾ρθουν ἀέρηδες σώματα κύκνων ποὺ μείνανε ἄσπιλοι τρυφεροὶ καὶ ἀκίνητοι<BR>
Μὲς στοὺς ὁδοστρωτῆρες τῶν μαγαζιῶν μέσα στῶν λαχανόκηπων τοὺς κυκλῶνες<BR>
Ὅταν τὰ μάτια τῶν γυναικῶν γίναν κάρβουνα κι ἔσπασαν οἱ καρδιὲς τῶν καστανάδων<BR>
Ὅταν ὁ θερισμὸς ἐσταμάτησε κι ἄρχισαν οἱ ἐλπίδες τῶν γρύλων </P>
</BODY>
</HTML>
Ανατρέχοντας στο https://www.w3schools.com/css/ :
1. Να γράψετε αρχείο html με τέτοιους κανόνες ώστε να έχει στο BODY χρώμα background πράσινο, χρώμμα γραμμάτων παραγράφου άσπρο, με αριστερή στοίχιση, γραμματοσειρά verdana και font-size 14px. Mορφή h1 με χρώμα άσπρο και στοίχιση κέντρο.
2. Βάλτε μία εικόνα για background στη σελίδα σας ( ψάξτε το css Background)
3. Βάλτε να έχει το h1, h2, κάτω γραμμή (border-bottom) με διαφορετικό πάχος και χρώμα.
4. Κάντε μία παράγραφο με στυλ outline
5. Κάντε να έχει περιθώριο (padding) η κάθε παράγραφος 10 px από όλες τις πλευρές.
Δεν υπάρχουν σχόλια:
Δημοσίευση σχολίου
Σημείωση: Μόνο ένα μέλος αυτού του ιστολογίου μπορεί να αναρτήσει σχόλιο.