ΕΠΛ 012. ιαδοχικά Φύλλα Στυλ

Μέγεθος: px

Εμφάνιση ξεκινά από τη σελίδα:

Download "ΕΠΛ 012. ιαδοχικά Φύλλα Στυλ"

Καπανεύς Βουρδουμπάς
6 χρόνια πριν
Προβολές:

1 ΕΠΛ 012 ιαδοχικά Φύλλα Στυλ Cascading Style Sheets (CSS)

2 Φύλλα Στυλ Μηχανισµός καθορισµού και τροποποίησης µορφοποίησης εγγράφων από τους συγγράφεις Πιο γενικός τρόπος από το καθορισµό όλων των χαρακτηριστικών στο επίπεδο εισαγωγής κάθε ετικέτας ιπλή ετικέτα <style>, </style> <HEAD> <STYLE> όνοµα_ετικέτας { ιδιότητα:τιµή; ιδιότητα:τιµή; ιδιότητα:τιµή } [ όνοµα_ετικέτας { ιδιότητα:τιµή; ιδιότητα:τιµή } ] </HEAD> <head> <style> H1 { color:blue; font-size:14pt; font-style:italics } </style> </head> Το όνοµα_ετικέτας πρέπει να είναι µε κεφαλαία χωρίς < >

3 Χρήσης Φύλλων Στυλ <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> &amp <B> </body> </html> <! style-eg1>

4 Τρόποι δηµιουργίας Φύλλων Στυλ Εσωτερικά εντός του εγγράφου µε 1. Τις ετικέτες <style> style>, </style> 2. Το χαρακτηριστικό style µιας ετικέτας Π.χ., <h1 STYLE="color: red"> Φύλλα Στυλ </h1> Εξωτερικά και εισαγωγή στο έγγραφο µε 1. Ετικέτα <link> 2. Τα αρχεία µε φύλλα στυλ έχουν κατάληξη *.css Σηµείωση: τα τοπικά - εσωτερικά φύλλα στυλ υποσκελίζουν τα φύλλα στυλ που συνδέονται µε ένα εξωτερικό αρχείο

5 Εισαγωγή στυλ µε <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> &amp <B> </body> </html> <! style-eg2> eg2>

6 Εισαγωγή στυλ Ένα φύλλο στυλ στο αρχείο formal_style.css σε άλλο διαδικτυακό τόπο (χρήση URL) <html> <head> <title>στο αρχείο αυτό χρησιµοποιείται ένα φύλλο στυλ </title> <STYLE url(" > </head> <body> <H1> Φύλλα Στυλ παράδειγµα 3</H1> <B> B>Παράδειγµα:</B> µορφοποίησης ετικετών <H1> &amp <B> </body> </html>

7 Οµαδοποίηση Ιδιοτήτων Στυλ Μηχανισµός ορισµού και χρήσης πολλαπλών στυλ 1. Ετικέτα µε Κλάση CLASS όνοµα_ετικέτας.όνοµα_κλάσης { ιδιότητα:τιµή [; ιδιότητα:τιµή ]... } H1.blue_it_h1 { color:blue; font-style:italics } 1. Ετικέτα µε εξειδίκευση χαρακτηριστικού ID.όνοµα_ιδιότητας { ιδιότητα:τιµή [; ιδιότητα:τιµή ]... }.blue_underlined {color:blue; or:blue; text-decoration:underline}

8 Παράδειγµα Κλάσης <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>

9 Παράδειγµα γενικής Κλάσης <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>

10 Πρώτο Παράδειγµα Εξειδίκευσης <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>

11 Γενικό Παράδειγµα Εξειδίκευσης <HTML> <HEAD> <TITLE> ΦΥΛΛΑ ΣΤΥΛ </TITLE> <STYLE>.main { display:block; background-color:#d0d0d0; color:#d0d0d0; font-style:italic; color:black; padding: ; } #blue_color {color:blue;} #red_color {color:red;} #white_color {color:white;} </HEAD>

12 Γενικό Παράδειγµα Εξειδίκευσης <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>

13 ιαχωρισµός σε ενότητες <div> ιπλή ετικέτα <div>, </div> Αυτό είναι εκτός <DIV> </DIV> <b> b>αυτό είναι εντός</b> <P> Και γώ είµαι εντός <em>με βγάλαν εκτός</ </em> Αυτό είναι εκτός Αυτό είναι εντός Και γώ είµαι εντός Με βγάλαν εκτός Χαρακτηριστικό: ALIGN=left center right

14 Στυλ σε ενότητα <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>

15 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>

Σχετικά έγγραφα

Εργαλεία Ανάπτυξης Εφαρμογών Internet. Δ.Ι.Ε.Κ. Γλυφάδας Τεχνικός Εφαρμογών Πληροφορικής

Εργαλεία Ανάπτυξης Εφαρμογών Internet Δ.Ι.Ε.Κ. Γλυφάδας Τεχνικός Εφαρμογών Πληροφορικής Το πρότυπο CSS Α Μέρος 2 CSS (Cascading Style Sheets)(1) Ορίζουν την εμφάνιση των στοιχείων σε ένα έγγραφο HTML.