CSS Μάθημα 7ο Έξυπνες ημερομηνίες

Ας μάθουμε πως να κάνουμε τις σελίδες μας με στιλ. Τα Cascading Style Sheets είναι ο τρόπος για να το επιτύχουμε.

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
Άβαταρ μέλους
manolism
Super Moderator
Δημοσιεύσεις: 6652
Εγγραφή: 25 Ιαν 2004 16:01
Τοποθεσία: Wild West
Επικοινωνία:

CSS Μάθημα 7ο Έξυπνες ημερομηνίες

Δημοσίευση από manolism » 09 Ιαν 2007 10:24

Μάθημα 7ο Έξυπνες ημερομηνίες

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

Εικόνα 1 Εικόνα 2

Στο css αρχείο μας θα προσθέσουμε το παρακάτω:

Κώδικας: Επιλογή όλων

.date {
	display:block; 
	text-align: center;
	float:left; 
	font-family: Arial, Helvetica, sans-serif;
	background:url(clip-bottom.png) right bottom no-repeat;
	margin-right:2px;
	width:40px;
}
display:block Το στοιχείο θα εμφανίζεται ομαδοποιημένο με ένα line break από πάνω και ένα line break από κάτω.
text-align: κεντρική στοίχιση
float:left τοποθέτηση στα αριστερά
font-family: επιλογή γραμματοσειράς
background: εικόνα φόντου τοποθετημένη κάτω αριστερά και μη επαναλαμβανόμενη
margin-right απόσταση από δεξιά
width: πλάτος

Κώδικας: Επιλογή όλων

.month {
	display:block;
	font-size: 10px;
	padding-top:12px;
	background:url(clip-top.gif) center top repeat-x;
}
display:block Το στοιχείο θα εμφανίζεται ομαδοποιημένο με ένα line break από πάνω και ένα line break από κάτω.
font-size: Μέγεθος γραμματοσειράς
padding-top: απόσταση του περιεχομένου από το πάνω μέρος
background: εικόνα φόντου τοποθετημένη πάνω κέντρο και επαναλαμβανόμενη μόνο οριζόντια

Κώδικας: Επιλογή όλων

.day { 
	display:block; 
	font-size:14px;
}
display:block Το στοιχείο θα εμφανίζεται ομαδοποιημένο με ένα line break από πάνω και ένα line break από κάτω.
font-size: Μέγεθος γραμματοσειράς

Μέσα στο html αρχείο μας και στο σημείο που θέλουμε να εμφανίζετε η ημερομηνία θα γράψουμε το παρακάτω:

Κώδικας: Επιλογή όλων

<acronym class="date" title="9 Ιανουαρίου 2007">
	<span class="month">Ιαν</span>
	<span class="day">9</span>
</acronym>
Live demo

Απάντηση

Επιστροφή στο “CSS - Cascading Style Sheets”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 0 επισκέπτες