CSS – Cascading Style Sheets (μορφοποίηση συνδέσμων) Οι σύνδεσμοι μπορεί να βρίσκονται σε μία από τέσσερις καταστάσεις: link(ένας κανονικός σύνδεσμος που.

Παρουσίαση με θέμα: "CSS – Cascading Style Sheets (μορφοποίηση συνδέσμων) Οι σύνδεσμοι μπορεί να βρίσκονται σε μία από τέσσερις καταστάσεις: link(ένας κανονικός σύνδεσμος που."— Μεταγράφημα παρουσίασης:

1 CSS – Cascading Style Sheets (μορφοποίηση συνδέσμων) Οι σύνδεσμοι μπορεί να βρίσκονται σε μία από τέσσερις καταστάσεις: link(ένας κανονικός σύνδεσμος που ο χρήστης δεν έχει ακόμα επισκεφτεί) visited(ένας σύνδεσμος που ο χρήστης έχει επισκεφτεί) hover(ένας σύνδεσμος πάνω από τον οποίο περνά ο δείκτης του ποντικιού) active(ένας σύνδεσμος ακριβώς τη στιγμή που πατιέται)

2 CSS – Cascading Style Sheets (μορφοποίηση συνδέσμων) Ένας σύνδεσμος μπορεί να έχει διαφορετική μορφή ανάλογα με την κατάσταση στην οποία βρίσκεται: a:link {color: red} a:visited {color: blue} a:hover {color: green} a:active {color: yellow} Η δήλωση a:hover (εφόσον υπάρχει) πρέπει να ακολουθεί τις a:link και a:visited Η δήλωση a:active (εφόσον υπάρχει) πρέπει να ακολουθεί την a:hover

3 CSS – Cascading Style Sheets (μορφοποίηση συνδέσμων – 1 ο παράδειγμα) a:link {color: red} a:visited {color: blue} a:hover {color: green} a:active {color: yellow} Σύνδεσμος Η δήλωση a:hover (εφόσον υπάρχει) πρέπει να ακολουθεί τις a:link και a:visited Η δήλωση a:active (εφόσον υπάρχει) πρέπει να ακολουθεί την a:hover

4 CSS – Cascading Style Sheets (μορφοποίηση συνδέσμων) Ιδιότητες μορφοποίησης συνδέσμων: ΙδιότηταΤιμές colorχρώμα (π.χ. red), δεκαεξαδική τιμή (π.χ. #0034ef), τιμή rgb (π.χ. rgb(125,0,255)) background- color χρώμα, δεκαεξαδική τιμή (π.χ. #0034ef), τιμή rgb (π.χ. rgb(125,0,255)) font-familyΕίδος γραμματοσειράς (π.χ. Arial, Courier, serif) font-sizeτιμή σε εικονοστοιχεία (π.χ. 20px), ποσοστό (π.χ. 150%) σε σχέση με το κανονικό μέγεθος text-decorationnone underline

5 CSS – Cascading Style Sheets (μορφοποίηση συνδέσμων – 2 ο παράδειγμα) a.one:link {color: #ff0000} a.one:visited {color: #0000ff} a.one:hover {color: #ffcc00} a.two:link {color: #ff0000} a.two:visited {color: #0000ff} a.two:hover {font-size: 150%} a.three:link {color: #ff0000} a.three:visited {color: #0000ff} a.three:hover {background: #66ff66} a.four:link {color: #ff0000} a.four:visited {color: #0000ff} a.four:hover {font-family: monospace} a.five:link {color: #ff0000; text-decoration: none} a.five:visited {color: #0000ff; text-decoration: none} a.five:hover {text-decoration: underline} ΠΑΤΗΣΤΕ ΕΔΩ ΓΙΑ ΝΑ ΔΕΙΤΕ ΤΟ ΑΡΧΕΙΟ HTML ΠΑΤΗΣΤΕ ΕΔΩ ΓΙΑ ΝΑ ΔΕΙΤΕ ΤΟ ΑΡΧΕΙΟ HTML Αυτός ο σύνδεσμος αλλάζει χρώμα Αυτός ο σύνδεσμος αλλάζει μέγεθος Αυτός ο σύνδεσμος αλλάζει χρώμα φόντου Αυτός ο σύνδεσμος αλλάζει είδος γραμματοσειράς Αυτός ο σύνδεσμος αλλάζει «διακόσμηση»