ΕΠΛ 012 ιαδοχικά Φύλλα Στυλ Cascading Style Sheets (CSS)
Φύλλα Στυλ Μηχανισµός καθορισµού και τροποποίησης µορφοποίησης εγγράφων από τους συγγράφεις Πιο γενικός τρόπος από το καθορισµό όλων των χαρακτηριστικών στο επίπεδο εισαγωγής κάθε ετικέτας ιπλή ετικέτα <style>, </style> <HEAD> <STYLE> όνοµα_ετικέτας { ιδιότητα:τιµή; ιδιότητα:τιµή; ιδιότητα:τιµή } [ όνοµα_ετικέτας { ιδιότητα:τιµή; ιδιότητα:τιµή } ] </HEAD> <head> <style> H1 { color:blue; font-size:14pt; font-style:italics } </style> </head> Το όνοµα_ετικέτας πρέπει να είναι µε κεφαλαία χωρίς < >
Χρήσης Φύλλων Στυλ <html> <head> <style> H1 { color:blue; font-size:14pt; font-style:italics } B {background-color:#dddddd; color:green } </style> </head> <body> <H1> Φύλλα Στυλ </H1> <B>Παράδειγµα:</B> µορφοποίησης ετικετών <H1> & <B> </body> </html> <! style-eg1>
Τρόποι δηµιουργίας Φύλλων Στυλ Εσωτερικά εντός του εγγράφου µε 1. Τις ετικέτες <style> style>, </style> 2. Το χαρακτηριστικό style µιας ετικέτας Π.χ., <h1 STYLE="color: red"> Φύλλα Στυλ </h1> Εξωτερικά και εισαγωγή στο έγγραφο µε 1. Ετικέτα <link> 2. Οδηγία @import Τα αρχεία µε φύλλα στυλ έχουν κατάληξη *.css Σηµείωση: τα τοπικά - εσωτερικά φύλλα στυλ υποσκελίζουν τα φύλλα στυλ που συνδέονται µε ένα εξωτερικό αρχείο
Εισαγωγή στυλ µε <Link> Ένα φύλλο στυλ στο αρχείο formal_style.css <html> <head> <title>στο αρχείο αυτό χρησιµοποιείται ένα φύλλο στυλ </title> <LINK REL="stylesheet" <! RELationship --> TYPE="text/css" HREF="formal_style.css"> </head> <body> <H1> Φύλλα Στυλ παράδειγµα 2</H1> <B> B>Παράδειγµα:</B> µορφοποίησης ετικετών <H1> & <B> </body> </html> <! style-eg2> eg2>
Εισαγωγή στυλ µε @import Ένα φύλλο στυλ στο αρχείο formal_style.css σε άλλο διαδικτυακό τόπο (χρήση URL) <html> <head> <title>στο αρχείο αυτό χρησιµοποιείται ένα φύλλο στυλ </title> <STYLE TYPE="text/css"> @import url("http://www.style.org/formal_syle.css") > </head> <body> <H1> Φύλλα Στυλ παράδειγµα 3</H1> <B> B>Παράδειγµα:</B> µορφοποίησης ετικετών <H1> & <B> </body> </html>
Οµαδοποίηση Ιδιοτήτων Στυλ Μηχανισµός ορισµού και χρήσης πολλαπλών στυλ 1. Ετικέτα µε Κλάση CLASS όνοµα_ετικέτας.όνοµα_κλάσης { ιδιότητα:τιµή [; ιδιότητα:τιµή ]... } H1.blue_it_h1 { color:blue; font-style:italics } 1. Ετικέτα µε εξειδίκευση χαρακτηριστικού ID.όνοµα_ιδιότητας { ιδιότητα:τιµή [; ιδιότητα:τιµή ]... }.blue_underlined {color:blue; or:blue; text-decoration:underline}
Παράδειγµα Κλάσης <HTML> <HEAD> <TITLE> ΦΥΛΛΑ ΣΤΥΛ </TITLE> <STYLE> P.redtext_italics {color:red; font-style:italic} </HEAD> <BODY> <P> κείµενο χωρίς µορφοποίηση σύµφωνα µε την κλάση redtext_italics </P> <P CLASS="redtext_italics"> κείµενο παραγράφου µε το στυλ της κλάσης redtext_italics </P> <P> κείµενο χωρίς µορφοποίηση σύµφωνα µε την κλάση redtext_italics </P> </BODY> </HTML> <! style-class>
Παράδειγµα γενικής Κλάσης <HTML> <HEAD> <TITLE> ΦΥΛΛΑ ΣΤΥΛ </TITLE> <STYLE>.redtext_italics {color:red; font-style:italic} </HEAD> <BODY> <H1 CLASS ="redtext_italics "> > Επικεφαλίδα µε µορφοποίηση </H1> <P CLASS="redtext_italics"> κείµενο παραγράφου µε το στυλ της κλάσης redtext_italics </P> <P> κείµενο χωρίς µορφοποίηση σύµφωνα µε την κλάση redtext_italics </P> </BODY> </HTML> <! style-class-dot>
Πρώτο Παράδειγµα Εξειδίκευσης <HTML> <HEAD> <TITLE> ΦΥΛΛΑ ΣΤΥΛ </TITLE> <STYLE> #redtext_italics {color:red; font-style:italic} </HEAD> <BODY> <P ID="redtext_italics" ="redtext_italics"> κείµενο παραγράφου µε το στυλ της κλάσης redtext_italics </P> <P> κείµενο χωρίς µορφοποίηση </P> </BODY> </HTML> <! style-class-id>
Γενικό Παράδειγµα Εξειδίκευσης <HTML> <HEAD> <TITLE> ΦΥΛΛΑ ΣΤΥΛ </TITLE> <STYLE>.main { display:block; background-color:#d0d0d0; color:#d0d0d0; font-style:italic; color:black; padding: 5 5 5 5; } #blue_color {color:blue;} #red_color {color:red;} #white_color {color:white;} </HEAD>
Γενικό Παράδειγµα Εξειδίκευσης <BODY> <P> Παράγραφος χωρίς µορφοποίηση </P> <P CLASS="main"> Παράγραφος µε την κύρια µορφοποίηση της κλάσης main </P> <P CLASS="main" ID="blue_color"> Παράγραφος µε µορφοποίηση της κλάσης main και του αναγνωριστικού blue_color. </P> <P CLASS="main" ID="red_color"> Παράγραφος µε µορφοποίηση της κλάσης main και του αναγνωριστικού red_color. </P> <P CLASS="main" ID="white_color"> Παράγραφος µε µορφοποίηση της κλάσης main και του αναγνωριστικού white_color. </P> <P ID="blue_color"> Παράγραφος µε µορφοποίηση του αναγνωριστικού blue_color. </P> </BODY> </HTML> <! style-class-id-g>
ιαχωρισµός σε ενότητες <div> ιπλή ετικέτα <div>, </div> Αυτό είναι εκτός <DIV> </DIV> <b> b>αυτό είναι εντός</b> <P> Και γώ είµαι εντός <em>με βγάλαν εκτός</ </em> Αυτό είναι εκτός Αυτό είναι εντός Και γώ είµαι εντός Με βγάλαν εκτός Χαρακτηριστικό: ALIGN=left center right
Στυλ σε ενότητα <div> <HTML> <HEAD> <TITLE> ΧΡΗΣΗ ΤΗΣ ΕΤΙΚΕΤΑΣ DIV </TITLE> <STYLE> DIV.redtext {color:red} </HEAD> <BODY> <DIV CLASS="redtext" > <H2> Η πρώτη επικεφαλίδα µε κόκκινα χρώµατα </H2> <P> Παράγραφος µε κόκκινους χαρακτήρες </P> </DIV> <P> Υπόλοιπο κείµενο </P> <H2> Επικεφαλίδα χωρίς χρώµα </H2> </BODY> </HTML>
Mορφοποίησης σε τµήµα ετικέτας Εφαρµογή στυλ σε τµήµα περιεχοµένου µιας ετικέτας Η διπλή ετικέτα <SPAN>, </SPAN> <HTML> <HEAD> <TITLE> ΧΡΗΣΗ ΤΗΣ ΕΤΙΚΕΤΑΣ SPAN </TITLE> <STYLE>.redtext {color:red}.red-it-text text {color:red; font-style:italic} </HEAD> <BODY> <H2> Η επικεφαλίδα µε µία λέξη σε <SPAN CLASS="red-it-text"> text"> πλάγια κόκκινη</span> γραφή </H2> <P> Παράγραφος µε <SPAN CLASS="redtext"> κόκκινους χαρακτήρες </SPAN> </P> </BODY> </HTML> <! span>